diff --git a/.github/actions/build-push-ce/action.yml b/.github/actions/build-push-ce/action.yml
deleted file mode 100644
index acf06982d..000000000
--- a/.github/actions/build-push-ce/action.yml
+++ /dev/null
@@ -1,126 +0,0 @@
-name: "Build and Push Docker Image"
-description: "Reusable action for building and pushing Docker images"
-inputs:
-  docker-username:
-    description: "The Dockerhub username"
-    required: true
-  docker-token:
-    description: "The Dockerhub Token"
-    required: true
-
-  # Docker Image Options
-  docker-image-owner:
-    description: "The owner of the Docker image"
-    required: true
-  docker-image-name:
-    description: "The name of the Docker image"
-    required: true
-  build-context:
-    description: "The build context"
-    required: true
-    default: "."
-  dockerfile-path:
-    description: "The path to the Dockerfile"
-    required: true
-  build-args:
-    description: "The build arguments"
-    required: false
-    default: ""
-  
-  # Buildx Options
-  buildx-driver:
-    description: "Buildx driver"
-    required: true
-    default: "docker-container"
-  buildx-version:
-    description: "Buildx version"
-    required: true
-    default: "latest"
-  buildx-platforms:
-    description: "Buildx platforms"
-    required: true
-    default: "linux/amd64"
-  buildx-endpoint:
-    description: "Buildx endpoint"
-    required: true
-    default: "default"
-
-  # Release Build Options
-  build-release:
-    description: "Flag to publish release"
-    required: false
-    default: "false"
-  build-prerelease:
-    description: "Flag to publish prerelease"
-    required: false
-    default: "false"
-  release-version:
-    description: "The release version"
-    required: false
-    default: "latest"
-
-runs:
-  using: "composite"
-  steps:
-    - name: Set Docker Tag
-      shell: bash
-      env:
-        IMG_OWNER: ${{ inputs.docker-image-owner }}
-        IMG_NAME: ${{ inputs.docker-image-name }}
-        BUILD_RELEASE: ${{ inputs.build-release }}
-        IS_PRERELEASE: ${{ inputs.build-prerelease }}
-        REL_VERSION: ${{ inputs.release-version }}
-      run: |
-        FLAT_BRANCH_VERSION=$(echo "${{ github.ref_name }}" | sed 's/[^a-zA-Z0-9.-]//g')
-
-        if [ "${{ env.BUILD_RELEASE }}" == "true" ]; then
-          semver_regex="^v([0-9]+)\.([0-9]+)\.([0-9]+)(-[a-zA-Z0-9]+(-[a-zA-Z0-9]+)*)?$"
-          if [[ ! ${{ env.REL_VERSION }} =~ $semver_regex ]]; then
-            echo "Invalid Release Version Format : ${{ env.REL_VERSION }}"
-            echo "Please provide a valid SemVer version"
-            echo "e.g. v1.2.3 or v1.2.3-alpha-1"
-            echo "Exiting the build process"
-            exit 1  # Exit with status 1 to fail the step
-          fi
-
-          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:${{ env.REL_VERSION }}
-
-          if [ "${{ env.IS_PRERELEASE }}" != "true" ]; then
-            TAG=${TAG},${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:stable
-          fi
-        elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:latest
-        else
-          TAG=${{ env.IMG_OWNER }}/${{ env.IMG_NAME }}:${FLAT_BRANCH_VERSION}
-        fi
-        
-        echo "DOCKER_TAGS=${TAG}" >> $GITHUB_ENV
-    - name: Login to Docker Hub
-      uses: docker/login-action@v3
-      with:
-        username: ${{ inputs.docker-username }}
-        password: ${{ inputs.docker-token}}
-
-    - name: Set up Docker Buildx
-      uses: docker/setup-buildx-action@v3
-      with:
-        driver: ${{ inputs.buildx-driver }}
-        version: ${{ inputs.buildx-version }}
-        endpoint: ${{ inputs.buildx-endpoint }}
-
-    - name: Check out the repo
-      uses: actions/checkout@v4
-
-    - name: Build and Push Docker Image
-      uses: docker/build-push-action@v5.1.0
-      with:
-        context: ${{ inputs.build-context }}
-        file: ${{ inputs.dockerfile-path }}
-        platforms: ${{ inputs.buildx-platforms }}
-        tags: ${{ env.DOCKER_TAGS }}
-        push: true
-        build-args: ${{ inputs.build-args }}
-      env:
-        DOCKER_BUILDKIT: 1
-        DOCKER_USERNAME: ${{ inputs.docker-username }}
-        DOCKER_PASSWORD: ${{ inputs.docker-token }}
\ No newline at end of file
diff --git a/.github/workflows/build-branch.yml b/.github/workflows/build-branch.yml
index 627c782f9..3599fc71e 100644
--- a/.github/workflows/build-branch.yml
+++ b/.github/workflows/build-branch.yml
@@ -25,6 +25,10 @@ on:
         required: false
         default: false
         type: boolean
+  push:
+    branches:
+      - preview
+      - canary
 
 env:
   TARGET_BRANCH: ${{ github.ref_name }}
@@ -36,7 +40,7 @@ env:
 jobs:
   branch_build_setup:
     name: Build Setup
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     outputs:
       gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
       gh_buildx_driver: ${{ steps.set_env_variables.outputs.BUILDX_DRIVER }}
@@ -160,20 +164,17 @@ jobs:
   branch_build_push_admin:
     if: ${{ needs.branch_build_setup.outputs.build_admin == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Admin Docker Image
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs: [branch_build_setup]
     steps:
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
       - name: Admin Build and Push
-        uses: ./.github/actions/build-push-ce
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
           release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_admin }}
           build-context: .
@@ -186,20 +187,17 @@ jobs:
   branch_build_push_web:
     if: ${{ needs.branch_build_setup.outputs.build_web == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Web Docker Image
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs: [branch_build_setup]
     steps:
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
       - name: Web Build and Push
-        uses: ./.github/actions/build-push-ce
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
           release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_web }}
           build-context: .
@@ -212,20 +210,17 @@ jobs:
   branch_build_push_space:
     if: ${{ needs.branch_build_setup.outputs.build_space == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Space Docker Image
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs: [branch_build_setup]
     steps:
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
       - name: Space Build and Push
-        uses: ./.github/actions/build-push-ce
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
           release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_space }}
           build-context: .
@@ -238,20 +233,17 @@ jobs:
   branch_build_push_live:
     if: ${{ needs.branch_build_setup.outputs.build_live == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Live Collaboration Docker Image
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs: [branch_build_setup]
     steps:
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
       - name: Live Build and Push
-        uses: ./.github/actions/build-push-ce
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
           release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_live }}
           build-context: .
@@ -264,20 +256,17 @@ jobs:
   branch_build_push_apiserver:
     if: ${{ needs.branch_build_setup.outputs.build_apiserver == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push API Server Docker Image
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs: [branch_build_setup]
     steps:
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
       - name: Backend Build and Push
-        uses: ./.github/actions/build-push-ce
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
           release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_backend }}
           build-context: ./apiserver
@@ -290,20 +279,17 @@ jobs:
   branch_build_push_proxy:
     if: ${{ needs.branch_build_setup.outputs.build_proxy == 'true' || github.event_name == 'workflow_dispatch' || needs.branch_build_setup.outputs.gh_branch_name == 'master' }}
     name: Build-Push Proxy Docker Image
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs: [branch_build_setup]
     steps:
-      - id: checkout_files
-        name: Checkout Files
-        uses: actions/checkout@v4
       - name: Proxy Build and Push
-        uses: ./.github/actions/build-push-ce
+        uses: makeplane/actions/build-push@v1.0.0
         with:
           build-release: ${{ needs.branch_build_setup.outputs.build_release }}
           build-prerelease: ${{ needs.branch_build_setup.outputs.build_prerelease }}
           release-version: ${{ needs.branch_build_setup.outputs.release_version }}
-          docker-username: ${{ secrets.DOCKERHUB_USERNAME }}
-          docker-token: ${{ secrets.DOCKERHUB_TOKEN }}
+          dockerhub-username: ${{ secrets.DOCKERHUB_USERNAME }}
+          dockerhub-token: ${{ secrets.DOCKERHUB_TOKEN }}
           docker-image-owner: makeplane
           docker-image-name: ${{ needs.branch_build_setup.outputs.dh_img_proxy }}
           build-context: ./nginx
@@ -316,7 +302,7 @@ jobs:
   attach_assets_to_build:
     if: ${{ needs.branch_build_setup.outputs.build_type == 'Release' }}
     name: Attach Assets to Release
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs: [branch_build_setup]
     steps:
       - name: Checkout
@@ -334,6 +320,7 @@ jobs:
           retention-days: 2
           path: |
             ${{ github.workspace }}/deploy/selfhost/setup.sh
+            ${{ github.workspace }}/deploy/selfhost/swarm.sh
             ${{ github.workspace }}/deploy/selfhost/restore.sh
             ${{ github.workspace }}/deploy/selfhost/docker-compose.yml
             ${{ github.workspace }}/deploy/selfhost/variables.env
@@ -341,7 +328,7 @@ jobs:
   publish_release:
     if: ${{ needs.branch_build_setup.outputs.build_type == 'Release' }}
     name: Build Release
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-22.04
     needs:
       [
         branch_build_setup,
@@ -376,6 +363,7 @@ jobs:
           generate_release_notes: true
           files: |
             ${{ github.workspace }}/deploy/selfhost/setup.sh
+            ${{ github.workspace }}/deploy/selfhost/swarm.sh
             ${{ github.workspace }}/deploy/selfhost/restore.sh
             ${{ github.workspace }}/deploy/selfhost/docker-compose.yml
             ${{ github.workspace }}/deploy/selfhost/variables.env
diff --git a/.github/workflows/build-test-pull-request.yml b/.github/workflows/build-test-pull-request.yml
index 2e6f9c642..29ed45dfe 100644
--- a/.github/workflows/build-test-pull-request.yml
+++ b/.github/workflows/build-test-pull-request.yml
@@ -71,7 +71,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - run: yarn install
       - run: yarn lint --filter=admin
 
@@ -84,7 +84,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - run: yarn install
       - run: yarn lint --filter=space
 
@@ -97,7 +97,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - run: yarn install
       - run: yarn lint --filter=web
 
@@ -109,7 +109,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - run: yarn install
       - run: yarn build --filter=admin
 
@@ -121,7 +121,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - run: yarn install
       - run: yarn build --filter=space
 
@@ -133,6 +133,6 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
       - run: yarn install
       - run: yarn build --filter=web
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9d352cbab..0f5e99cb8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -62,17 +62,143 @@ To ensure consistency throughout the source code, please keep these rules in min
 - All features or bug fixes must be tested by one or more specs (unit-tests).
 - We use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
 
-## Need help? Questions and suggestions
-
-Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).
-
 ## Ways to contribute
 
 - Try Plane Cloud and the self hosting platform and give feedback
 - Add new integrations
+- Add or update translations
 - Help with open [issues](https://github.com/makeplane/plane/issues) or [create your own](https://github.com/makeplane/plane/issues/new/choose)
 - Share your thoughts and suggestions with us
 - Help create tutorials and blog posts
 - Request a feature by submitting a proposal
 - Report a bug
 - **Improve documentation** - fix incomplete or missing [docs](https://docs.plane.so/), bad wording, examples or explanations.
+
+## Contributing to language support
+This guide is designed to help contributors understand how to add or update translations in the application. 
+
+### Understanding translation structure
+
+#### File organization
+Translations are organized by language in the locales directory. Each language has its own folder containing JSON files for translations. Here's how it looks:
+
+```
+packages/i18n/src/locales/
+    ├── en/
+    │   ├── core.json       # Critical translations
+    │   └── translations.json
+    ├── fr/
+    │   └── translations.json
+    └── [language]/
+        └── translations.json   
+```
+#### Nested structure
+To keep translations organized, we use a nested structure for keys. This makes it easier to manage and locate specific translations. For example:
+
+```json
+{
+  "issue": {
+    "label": "Work item",
+    "title": {
+      "label": "Work item title"
+    }
+  }
+}
+```
+
+### Translation formatting guide
+We use [IntlMessageFormat](https://formatjs.github.io/docs/intl-messageformat/) to handle dynamic content, such as variables and pluralization. Here's how to format your translations:
+
+#### Examples
+- **Simple variables** 
+    ```json
+    {
+    "greeting": "Hello, {name}!"
+    }
+    ```
+
+- **Pluralization** 
+    ```json
+    {
+    "items": "{count, plural, one {Work item} other {Work items}}"
+    }
+    ```
+
+### Contributing guidelines
+
+#### Updating existing translations
+1. Locate the key in `locales/<language>/translations.json`.
+
+2. Update the value while ensuring the key structure remains intact.
+3. Preserve any existing ICU formats (e.g., variables, pluralization).
+
+#### Adding new translation keys
+1. When introducing a new key, ensure it is added to **all** language files, even if translations are not immediately available. Use English as a placeholder if needed.
+
+2. Keep the nesting structure consistent across all languages.
+
+3. If the new key requires dynamic content (e.g., variables or pluralization), ensure the ICU format is applied uniformly across all languages.
+
+### Adding new languages
+Adding a new language involves several steps to ensure it integrates seamlessly with the project. Follow these instructions carefully:
+
+1. **Update type definitions**  
+Add the new language to the TLanguage type in the language definitions file:
+
+    ```typescript
+    // types/language.ts
+    export type TLanguage = "en" | "fr" | "your-lang";
+    ``` 
+
+2. **Add language configuration**  
+Include the new language in the list of supported languages:
+
+    ```typescript
+    // constants/language.ts
+    export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
+    { label: "English", value: "en" },
+    { label: "Your Language", value: "your-lang" }
+    ];
+    ```
+
+3. **Create translation files**  
+    1.  Create a new folder for your language under locales (e.g., `locales/your-lang/`).
+
+    2. Add a `translations.json` file inside the folder.
+
+    3. Copy the structure from an existing translation file and translate all keys.
+
+4. **Update import logic**  
+Modify the language import logic to include your new language:
+
+    ```typescript
+    private importLanguageFile(language: TLanguage): Promise<any> {
+    switch (language) {
+        case "your-lang":
+        return import("../locales/your-lang/translations.json");
+        // ...
+    }
+    }
+    ```
+
+### Quality checklist
+Before submitting your contribution, please ensure the following:
+
+- All translation keys exist in every language file.
+- Nested structures match across all language files.
+- ICU message formats are correctly implemented.
+- All languages load without errors in the application.
+- Dynamic values and pluralization work as expected.
+- There are no missing or untranslated keys.
+
+#### Pro tips
+- When in doubt, refer to the English translations for context.
+- Verify pluralization works with different numbers.
+- Ensure dynamic values (e.g., `{name}`) are correctly interpolated.
+- Double-check that nested key access paths are accurate.
+
+Happy translating! 🌍✨
+
+## Need help? Questions and suggestions
+
+Questions, suggestions, and thoughts are most welcome. We can also be reached in our [Discord Server](https://discord.com/invite/A92xrEGCge).
diff --git a/README.md b/README.md
index 38ead5f99..3588f20e2 100644
--- a/README.md
+++ b/README.md
@@ -5,8 +5,7 @@
   <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_logo_.webp" alt="Plane Logo" width="70">
 </a>
 </p>
-
-<h3 align="center"><b>Plane</b></h3>
+<h1 align="center"><b>Plane</b></h1>
 <p align="center"><b>Open-source project management that unlocks customer value</b></p>
 
 <p align="center">
@@ -44,79 +43,85 @@ Meet [Plane](https://dub.sh/plane-website-readme), an open-source project manage
 
 > Plane is evolving every day. Your suggestions, ideas, and reported bugs help us immensely. Do not hesitate to join in the conversation on [Discord](https://discord.com/invite/A92xrEGCge) or raise a GitHub issue. We read everything and respond to most.
 
-## ⚡ Installation
+## 🚀 Installation
 
-The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account.
+Getting started with Plane is simple. Choose the setup that works best for you:
 
-If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/docker-compose).
+- **Plane Cloud**   
+Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
+
+- **Self-host Plane**  
+Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
 
 | Installation methods | Docs link                                                                                                                                          |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://docs.plane.so/self-hosting/methods/docker-compose)         |
-| Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://docs.plane.so/kubernetes) |
+| Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://developers.plane.so/self-hosting/methods/docker-compose)         |
+| Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://developers.plane.so/self-hosting/methods/kubernetes) |
 
-`Instance admins` can configure instance settings with [God-mode](https://docs.plane.so/instance-admin).
+`Instance admins` can configure instance settings with [God mode](https://developers.plane.so/self-hosting/govern/instance-admin).
 
-## 🚀 Features
+## 🌟 Features
 
-- **Issues**: Quickly create issues and add details using a powerful rich text editor that supports file uploads. Add sub-properties and references to problems for better organization and tracking.
+- **Issues**  
+Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
 
-- **Cycles**:
-  Keep up your team's momentum with Cycles. Gain insights into your project's progress with burn-down charts and other valuable features.
+- **Cycles**   
+Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
 
-- **Modules**: Break down your large projects into smaller, more manageable modules. Assign modules between teams to track and plan your project's progress easily.
+- **Modules**  
+Simplify complex projects by dividing them into smaller, manageable modules. 
 
-- **Views**: Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.
+- **Views**  
+Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
 
-- **Pages**: Plane pages, equipped with AI and a rich text editor, let you jot down your thoughts on the fly. Format your text, upload images, hyperlink, or sync your existing ideas into an actionable item or issue.
+- **Pages**  
+Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
 
-- **Analytics**: Get insights into all your Plane data in real-time. Visualize issue data to spot trends, remove blockers, and progress your work.
+- **Analytics**  
+Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
 
 - **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
 
-## 🛠️ Quick start for contributors
 
-> Development system must have docker engine installed and running.
+## 🛠️ Local development
 
-Setting up local environment is extremely easy and straight forward. Follow the below step and you will be ready to contribute - 
+### Pre-requisites
+- Ensure Docker Engine is installed and running.
 
-1. Clone the code locally using:
+###  Development setup
+Setting up your local environment is simple and straightforward. Follow these steps to get started:
+
+1. Clone the repository:
    ```
    git clone https://github.com/makeplane/plane.git
    ```
-2. Switch to the code folder:
+2. Navigate to the project folder:
    ```
    cd plane
    ```
-3. Create your feature or fix branch you plan to work on using:
+3. Create a new branch for your feature or fix:
    ```
    git checkout -b <feature-branch-name>
    ```
-4. Open terminal and run:
+4. Run the setup script in the terminal:
    ```
    ./setup.sh
    ```
-5. Open the code on VSCode or similar equivalent IDE.
-6. Review the `.env` files available in various folders.
-   Visit [Environment Setup](./ENV_SETUP.md) to know about various environment variables used in system.
-7. Run the docker command to initiate services:
+5. Open the project in an IDE such as VS Code.
+
+6. Review the `.env` files in the relevant folders. Refer to [Environment Setup](./ENV_SETUP.md) for details on the environment variables used.
+
+7. Start the services using Docker:
    ```
    docker compose -f docker-compose-local.yml up -d
    ```
 
-You are ready to make changes to the code. Do not forget to refresh the browser (in case it does not auto-reload).
+That’s it! You’re all set to begin coding. Remember to refresh your browser if changes don’t auto-reload. Happy contributing! 🎉
 
-Thats it!
-
-## ❤️ Community
-
-The Plane community can be found on [GitHub Discussions](https://github.com/orgs/makeplane/discussions), and our [Discord server](https://discord.com/invite/A92xrEGCge). Our [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) applies to all Plane community chanels.
-
-Ask questions, report bugs, join discussions, voice ideas, make feature requests, or share your projects.
-
-### Repo Activity
-
-![Plane Repo Activity](https://repobeats.axiom.co/api/embed/2523c6ed2f77c082b7908c33e2ab208981d76c39.svg "Repobeats analytics image")
+## ⚙️ Built with
+[![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
+[![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green)](https://www.djangoproject.com/)
+[![Node JS](https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white)](https://nodejs.org/en)
 
 ## 📸 Screenshots
 
@@ -165,7 +170,7 @@ Ask questions, report bugs, join discussions, voice ideas, make feature requests
     </a>
   </p>
 </p>
-   <p>
+<p>
     <a href="https://plane.so" target="_blank">
       <img
         src="https://ik.imagekit.io/w2okwbtu2/Drive_LlfeY4xn3.png?updatedAt=1709298837917"
@@ -176,23 +181,42 @@ Ask questions, report bugs, join discussions, voice ideas, make feature requests
   </p>
 </p>
 
-## ⛓️ Security
+## 📝 Documentation
+Explore Plane's [product documentation](https://docs.plane.so/) and [developer documentation](https://developers.plane.so/) to learn about features, setup, and usage.
 
-If you believe you have found a security vulnerability in Plane, we encourage you to responsibly disclose this and not open a public issue. We will investigate all legitimate reports.
+## ❤️ Community
 
-Email squawk@plane.so to disclose any security vulnerabilities.
+Join the Plane community on [GitHub Discussions](https://github.com/orgs/makeplane/discussions) and our [Discord server](https://discord.com/invite/A92xrEGCge). We follow a [Code of conduct](https://github.com/makeplane/plane/blob/master/CODE_OF_CONDUCT.md) in all our community channels.
 
-## ❤️ Contribute
+Feel free to ask questions, report bugs, participate in discussions, share ideas, request features, or showcase your projects. We’d love to hear from you!
 
-There are many ways to contribute to Plane, including:
+## 🛡️ Security
 
-- Submitting [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) and [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+) for various components.
-- Reviewing [the documentation](https://docs.plane.so/) and submitting [pull requests](https://github.com/makeplane/plane), from fixing typos to adding new features.
-- Speaking or writing about Plane or any other ecosystem integration and [letting us know](https://discord.com/invite/A92xrEGCge)!
-- Upvoting [popular feature requests](https://github.com/makeplane/plane/issues) to show your support.
+If you discover a security vulnerability in Plane, please report it responsibly instead of opening a public issue. We take all legitimate reports seriously and will investigate them promptly. See [Security policy](https://github.com/makeplane/plane/blob/master/SECURITY.md) for more info.
+
+To disclose any security issues, please email us at security@plane.so. 
+
+## 🤝 Contributing
+
+There are many ways you can contribute to Plane:
+
+- Report [bugs](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%F0%9F%90%9Bbug&projects=&template=--bug-report.yaml&title=%5Bbug%5D%3A+) or submit [feature requests](https://github.com/makeplane/plane/issues/new?assignees=srinivaspendem%2Cpushya22&labels=%E2%9C%A8feature&projects=&template=--feature-request.yaml&title=%5Bfeature%5D%3A+).
+- Review the [documentation](https://docs.plane.so/) and submit [pull requests](https://github.com/makeplane/docs) to improve it—whether it's fixing typos or adding new content.
+- Talk or write about Plane or any other ecosystem integration and [let us know](https://discord.com/invite/A92xrEGCge)!
+- Show your support by upvoting [popular feature requests](https://github.com/makeplane/plane/issues).
+
+Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CONTRIBUTING.md) for details on the process for submitting pull requests to us.
+
+### Repo activity
+
+![Plane Repo Activity](https://repobeats.axiom.co/api/embed/2523c6ed2f77c082b7908c33e2ab208981d76c39.svg "Repobeats analytics image")
 
 ### We couldn't have done this without you.
 
 <a href="https://github.com/makeplane/plane/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=makeplane/plane" />
 </a>
+
+
+## License
+This project is licensed under the [GNU Affero General Public License v3.0](https://github.com/makeplane/plane/blob/master/LICENSE.txt).
\ No newline at end of file
diff --git a/admin/.eslintrc.js b/admin/.eslintrc.js
index d8355bae8..666f5ab50 100644
--- a/admin/.eslintrc.js
+++ b/admin/.eslintrc.js
@@ -2,7 +2,4 @@ module.exports = {
   root: true,
   extends: ["@plane/eslint-config/next.js"],
   parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
 };
diff --git a/admin/Dockerfile.admin b/admin/Dockerfile.admin
index ad9469110..8046bf329 100644
--- a/admin/Dockerfile.admin
+++ b/admin/Dockerfile.admin
@@ -1,7 +1,9 @@
+FROM node:20-alpine as base
+
 # *****************************************************************************
 # STAGE 1: Build the project
 # *****************************************************************************
-FROM node:18-alpine AS builder
+FROM base AS builder
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
@@ -13,7 +15,7 @@ RUN turbo prune --scope=admin --docker
 # *****************************************************************************
 # STAGE 2: Install dependencies & build the project
 # *****************************************************************************
-FROM node:18-alpine AS installer
+FROM base AS installer
 
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -52,7 +54,7 @@ RUN yarn turbo run build --filter=admin
 # *****************************************************************************
 # STAGE 3: Copy the project and start it
 # *****************************************************************************
-FROM node:18-alpine AS runner
+FROM base AS runner
 WORKDIR /app
 
 COPY --from=installer /app/admin/next.config.js .
diff --git a/admin/Dockerfile.dev b/admin/Dockerfile.dev
index 1ed84e78e..3bdc71c16 100644
--- a/admin/Dockerfile.dev
+++ b/admin/Dockerfile.dev
@@ -1,4 +1,4 @@
-FROM node:18-alpine
+FROM node:20-alpine
 RUN apk add --no-cache libc6-compat
 # Set working directory
 WORKDIR /app
diff --git a/admin/app/authentication/github/form.tsx b/admin/app/authentication/github/form.tsx
index 23ba9ccd1..4842675cd 100644
--- a/admin/app/authentication/github/form.tsx
+++ b/admin/app/authentication/github/form.tsx
@@ -4,10 +4,11 @@ import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import { IFormattedInstanceConfiguration, TInstanceGithubAuthenticationConfigurationKeys } from "@plane/types";
-// ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import {
   CodeBlock,
@@ -17,8 +18,6 @@ import {
   TControllerInputFormField,
   TCopyField,
 } from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -103,8 +102,7 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
       url: originURL,
       description: (
         <>
-          We will auto-generate this. Paste this into the{" "}
-          <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Authorized origin URL</CodeBlock> field{" "}
           <a
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
@@ -123,8 +121,8 @@ export const InstanceGithubConfigForm: FC<Props> = (props) => {
       url: `${originURL}/auth/github/callback/`,
       description: (
         <>
-          We will auto-generate this. Paste this into your{" "}
-          <CodeBlock darkerShade>Authorized Callback URI</CodeBlock> field{" "}
+          We will auto-generate this. Paste this into your <CodeBlock darkerShade>Authorized Callback URI</CodeBlock>{" "}
+          field{" "}
           <a
             tabIndex={-1}
             href="https://github.com/settings/applications/new"
diff --git a/admin/app/authentication/github/page.tsx b/admin/app/authentication/github/page.tsx
index 7991fb95f..986a5ebd2 100644
--- a/admin/app/authentication/github/page.tsx
+++ b/admin/app/authentication/github/page.tsx
@@ -5,12 +5,12 @@ import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
+// plane internal packages
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
 // components
 import { AuthenticationMethodCard } from "@/components/authentication";
 import { PageHeader } from "@/components/common";
-// helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 // icons
@@ -44,7 +44,7 @@ const InstanceGithubAuthenticationPage = observer(() => {
       loading: "Saving Configuration...",
       success: {
         title: "Configuration saved",
-        message: () => `Github authentication is now ${value ? "active" : "disabled"}.`,
+        message: () => `GitHub authentication is now ${value ? "active" : "disabled"}.`,
       },
       error: {
         title: "Error",
@@ -67,8 +67,8 @@ const InstanceGithubAuthenticationPage = observer(() => {
       <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
         <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
           <AuthenticationMethodCard
-            name="Github"
-            description="Allow members to login or sign up to plane with their Github accounts."
+            name="GitHub"
+            description="Allow members to login or sign up to plane with their GitHub accounts."
             icon={
               <Image
                 src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
diff --git a/admin/app/authentication/gitlab/form.tsx b/admin/app/authentication/gitlab/form.tsx
index 1cc9794d3..f64158744 100644
--- a/admin/app/authentication/gitlab/form.tsx
+++ b/admin/app/authentication/gitlab/form.tsx
@@ -2,10 +2,11 @@ import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
-// ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import {
   CodeBlock,
@@ -15,8 +16,6 @@ import {
   TControllerInputFormField,
   TCopyField,
 } from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -117,8 +116,7 @@ export const InstanceGitlabConfigForm: FC<Props> = (props) => {
       url: `${originURL}/auth/gitlab/callback/`,
       description: (
         <>
-          We will auto-generate this. Paste this into the{" "}
-          <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
+          We will auto-generate this. Paste this into the <CodeBlock darkerShade>Redirect URI</CodeBlock> field of your{" "}
           <a
             tabIndex={-1}
             href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
diff --git a/admin/app/authentication/google/form.tsx b/admin/app/authentication/google/form.tsx
index 61fe7af62..10decdcb0 100644
--- a/admin/app/authentication/google/form.tsx
+++ b/admin/app/authentication/google/form.tsx
@@ -3,10 +3,11 @@ import { FC, useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import Link from "next/link";
 import { useForm } from "react-hook-form";
-// types
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
 import { IFormattedInstanceConfiguration, TInstanceGoogleAuthenticationConfigurationKeys } from "@plane/types";
-// ui
 import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import {
   CodeBlock,
@@ -16,8 +17,6 @@ import {
   TControllerInputFormField,
   TCopyField,
 } from "@/components/common";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
 
diff --git a/admin/app/authentication/page.tsx b/admin/app/authentication/page.tsx
index dc6aa6a6d..279ff396a 100644
--- a/admin/app/authentication/page.tsx
+++ b/admin/app/authentication/page.tsx
@@ -3,10 +3,10 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
+// plane internal packages
 import { TInstanceConfigurationKeys } from "@plane/types";
 import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 // plane admin components
diff --git a/admin/app/email/test-email-modal.tsx b/admin/app/email/test-email-modal.tsx
index 6d5cb8032..676f3b685 100644
--- a/admin/app/email/test-email-modal.tsx
+++ b/admin/app/email/test-email-modal.tsx
@@ -1,9 +1,9 @@
 import React, { FC, useEffect, useState } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+// plane imports
+import { InstanceService } from "@plane/services";
 // ui
 import { Button, Input } from "@plane/ui";
-// services
-import { InstanceService } from "@/services/instance.service";
 
 type Props = {
   isOpen: boolean;
diff --git a/admin/app/general/form.tsx b/admin/app/general/form.tsx
index 09aac8b45..4fbd70535 100644
--- a/admin/app/general/form.tsx
+++ b/admin/app/general/form.tsx
@@ -123,7 +123,7 @@ export const GeneralConfigurationForm: FC<IGeneralConfigurationForm> = observer(
                 No PII is collected.This anonymized data is used to understand how you use Plane and build new features
                 in line with{" "}
                 <a
-                  href="https://docs.plane.so/self-hosting/telemetry"
+                  href="https://developers.plane.so/self-hosting/telemetry"
                   target="_blank"
                   className="text-custom-primary-100 hover:underline"
                   rel="noreferrer"
diff --git a/admin/app/layout.tsx b/admin/app/layout.tsx
index 19aba48e9..ef9559af8 100644
--- a/admin/app/layout.tsx
+++ b/admin/app/layout.tsx
@@ -4,11 +4,11 @@ import { ReactNode } from "react";
 import { ThemeProvider, useTheme } from "next-themes";
 import { SWRConfig } from "swr";
 // ui
+import { ADMIN_BASE_PATH, DEFAULT_SWR_CONFIG } from "@plane/constants";
 import { Toast } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
 // constants
-import { SWR_CONFIG } from "@/constants/swr-config";
 // helpers
-import { ASSET_PREFIX, resolveGeneralTheme } from "@/helpers/common.helper";
 // lib
 import { InstanceProvider } from "@/lib/instance-provider";
 import { StoreProvider } from "@/lib/store-provider";
@@ -22,6 +22,7 @@ const ToastWithTheme = () => {
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {
+  const ASSET_PREFIX = ADMIN_BASE_PATH;
   return (
     <html lang="en">
       <head>
@@ -34,7 +35,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       <body className={`antialiased`}>
         <ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
           <ToastWithTheme />
-          <SWRConfig value={SWR_CONFIG}>
+          <SWRConfig value={DEFAULT_SWR_CONFIG}>
             <StoreProvider>
               <InstanceProvider>
                 <UserProvider>{children}</UserProvider>
diff --git a/admin/app/page.tsx b/admin/app/page.tsx
index b402fc44d..1a274025a 100644
--- a/admin/app/page.tsx
+++ b/admin/app/page.tsx
@@ -7,15 +7,15 @@ import { DefaultLayout } from "@/layouts/default-layout";
 export const metadata: Metadata = {
   title: "Plane | Simple, extensible, open-source project management tool.",
   description:
-    "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
+    "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
   openGraph: {
     title: "Plane | Simple, extensible, open-source project management tool.",
     description:
-      "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
+      "Open-source project management tool to manage work items, sprints, and product roadmaps with peace of mind.",
     url: "https://plane.so/",
   },
   keywords:
-    "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
+    "software development, customer feedback, software, accelerate, code management, release management, project management, work items tracking, agile, scrum, kanban, collaboration",
   twitter: {
     site: "@planepowers",
   },
diff --git a/admin/app/workspace/create/form.tsx b/admin/app/workspace/create/form.tsx
index 958f53153..d086777fc 100644
--- a/admin/app/workspace/create/form.tsx
+++ b/admin/app/workspace/create/form.tsx
@@ -2,20 +2,16 @@ import { useState, useEffect } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
-// constants
-import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
-// types
+// plane imports
+import { WEB_BASE_URL, ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { InstanceWorkspaceService } from "@plane/services";
 import { IWorkspace } from "@plane/types";
 // components
 import { Button, CustomSelect, getButtonStyling, Input, setToast, TOAST_TYPE } from "@plane/ui";
-// helpers
-import { WEB_BASE_URL } from "@/helpers/common.helper";
 // hooks
 import { useWorkspace } from "@/hooks/store";
-// services
-import { WorkspaceService } from "@/services/workspace.service";
 
-const workspaceService = new WorkspaceService();
+const instanceWorkspaceService = new InstanceWorkspaceService();
 
 export const WorkspaceCreateForm = () => {
   // router
@@ -42,8 +38,8 @@ export const WorkspaceCreateForm = () => {
   const workspaceBaseURL = encodeURI(WEB_BASE_URL || window.location.origin + "/");
 
   const handleCreateWorkspace = async (formData: IWorkspace) => {
-    await workspaceService
-      .workspaceSlugCheck(formData.slug)
+    await instanceWorkspaceService
+      .slugCheck(formData.slug)
       .then(async (res) => {
         if (res.status === true && !RESTRICTED_URLS.includes(formData.slug)) {
           setSlugError(false);
diff --git a/admin/app/workspace/page.tsx b/admin/app/workspace/page.tsx
index ef8a3c42d..3ca34b69e 100644
--- a/admin/app/workspace/page.tsx
+++ b/admin/app/workspace/page.tsx
@@ -7,12 +7,10 @@ import useSWR from "swr";
 import { Loader as LoaderIcon } from "lucide-react";
 // types
 import { TInstanceConfigurationKeys } from "@plane/types";
-// ui
 import { Button, getButtonStyling, Loader, setPromiseToast, ToggleSwitch } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { WorkspaceListItem } from "@/components/workspace";
-// helpers
-import { cn } from "@/helpers/common.helper";
 // hooks
 import { useInstance, useWorkspace } from "@/hooks/store";
 
diff --git a/admin/ce/components/authentication/authentication-modes.tsx b/admin/ce/components/authentication/authentication-modes.tsx
index 84cde94d4..3c7ec111a 100644
--- a/admin/ce/components/authentication/authentication-modes.tsx
+++ b/admin/ce/components/authentication/authentication-modes.tsx
@@ -10,7 +10,7 @@ import {
 // components
 import { AuthenticationMethodCard } from "@/components/authentication";
 // helpers
-import { getBaseAuthenticationModes } from "@/helpers/authentication.helper";
+import { getBaseAuthenticationModes } from "@/lib/auth-helpers";
 // plane admin components
 import { UpgradeButton } from "@/plane-admin/components/common";
 // images
diff --git a/admin/ce/components/common/upgrade-button.tsx b/admin/ce/components/common/upgrade-button.tsx
index c2b264bae..208225e0c 100644
--- a/admin/ce/components/common/upgrade-button.tsx
+++ b/admin/ce/components/common/upgrade-button.tsx
@@ -3,10 +3,9 @@
 import React from "react";
 // icons
 import { SquareArrowOutUpRight } from "lucide-react";
-// ui
+// plane internal packages
 import { getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 
 export const UpgradeButton: React.FC = () => (
   <a href="https://plane.so/pricing?mode=self-hosted" target="_blank" className={cn(getButtonStyling("primary", "sm"))}>
diff --git a/admin/core/components/admin-sidebar/help-section.tsx b/admin/core/components/admin-sidebar/help-section.tsx
index 10d5cbd0d..d77647749 100644
--- a/admin/core/components/admin-sidebar/help-section.tsx
+++ b/admin/core/components/admin-sidebar/help-section.tsx
@@ -5,13 +5,14 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
-// ui
+// plane internal packages
+import { WEB_BASE_URL } from "@plane/constants";
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
-// helpers
-import { WEB_BASE_URL, cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
 // assets
+// eslint-disable-next-line import/order
 import packageJson from "package.json";
 
 const helpOptions = [
diff --git a/admin/core/components/admin-sidebar/sidebar-dropdown.tsx b/admin/core/components/admin-sidebar/sidebar-dropdown.tsx
index e0741f7c4..501d501d8 100644
--- a/admin/core/components/admin-sidebar/sidebar-dropdown.tsx
+++ b/admin/core/components/admin-sidebar/sidebar-dropdown.tsx
@@ -5,15 +5,13 @@ import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
 import { LogOut, UserCog2, Palette } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
-// plane ui
+// plane internal packages
+import { API_BASE_URL } from "@plane/constants";
+import  {AuthService } from "@plane/services";
 import { Avatar } from "@plane/ui";
-// helpers
-import { API_BASE_URL, cn } from "@/helpers/common.helper";
-import { getFileURL } from "@/helpers/file.helper";
+import { getFileURL, cn } from "@plane/utils";
 // hooks
 import { useTheme, useUser } from "@/hooks/store";
-// services
-import { AuthService } from "@/services/auth.service";
 
 // service initialization
 const authService = new AuthService();
diff --git a/admin/core/components/admin-sidebar/sidebar-menu.tsx b/admin/core/components/admin-sidebar/sidebar-menu.tsx
index a985842e7..618551ae6 100644
--- a/admin/core/components/admin-sidebar/sidebar-menu.tsx
+++ b/admin/core/components/admin-sidebar/sidebar-menu.tsx
@@ -4,11 +4,11 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+// plane internal packages
 import { Tooltip, WorkspaceIcon } from "@plane/ui";
+import { cn } from "@plane/utils";
 // hooks
-import { cn } from "@/helpers/common.helper";
 import { useTheme } from "@/hooks/store";
-// helpers
 
 const INSTANCE_ADMIN_LINKS = [
   {
diff --git a/admin/core/components/auth-header.tsx b/admin/core/components/auth-header.tsx
index 81365d7f0..5edcb6118 100644
--- a/admin/core/components/auth-header.tsx
+++ b/admin/core/components/auth-header.tsx
@@ -30,7 +30,7 @@ export const InstanceHeader: FC = observer(() => {
       case "google":
         return "Google";
       case "github":
-        return "Github";
+        return "GitHub";
       case "gitlab":
         return "GitLab";
       case "workspace":
diff --git a/admin/core/components/authentication/auth-banner.tsx b/admin/core/components/authentication/auth-banner.tsx
index 191d7a0a7..7c1e5ea29 100644
--- a/admin/core/components/authentication/auth-banner.tsx
+++ b/admin/core/components/authentication/auth-banner.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { Info, X } from "lucide-react";
-// helpers
-import { TAuthErrorInfo } from "@/helpers/authentication.helper";
+// plane constants
+import { TAuthErrorInfo } from "@plane/constants";
 
 type TAuthBanner = {
   bannerData: TAuthErrorInfo | undefined;
diff --git a/admin/core/components/authentication/authentication-method-card.tsx b/admin/core/components/authentication/authentication-method-card.tsx
index 50895a459..897deb7c4 100644
--- a/admin/core/components/authentication/authentication-method-card.tsx
+++ b/admin/core/components/authentication/authentication-method-card.tsx
@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 // helpers
-import { cn } from "helpers/common.helper";
+import { cn } from "@plane/utils";
 
 type Props = {
   name: string;
diff --git a/admin/core/components/authentication/github-config.tsx b/admin/core/components/authentication/github-config.tsx
index 07c566d68..57035580f 100644
--- a/admin/core/components/authentication/github-config.tsx
+++ b/admin/core/components/authentication/github-config.tsx
@@ -5,12 +5,10 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
-// types
+// plane internal packages
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
 import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 
diff --git a/admin/core/components/authentication/gitlab-config.tsx b/admin/core/components/authentication/gitlab-config.tsx
index 735201025..4181338d2 100644
--- a/admin/core/components/authentication/gitlab-config.tsx
+++ b/admin/core/components/authentication/gitlab-config.tsx
@@ -5,12 +5,10 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
-// types
+// plane internal packages
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
 import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 
diff --git a/admin/core/components/authentication/google-config.tsx b/admin/core/components/authentication/google-config.tsx
index 12d11a2f8..0f3cc98e3 100644
--- a/admin/core/components/authentication/google-config.tsx
+++ b/admin/core/components/authentication/google-config.tsx
@@ -5,12 +5,10 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Settings2 } from "lucide-react";
-// types
+// plane internal packages
 import { TInstanceAuthenticationMethodKeys } from "@plane/types";
-// ui
 import { ToggleSwitch, getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 // hooks
 import { useInstance } from "@/hooks/store";
 
diff --git a/admin/core/components/common/code-block.tsx b/admin/core/components/common/code-block.tsx
index 55f8b4afb..88ad78a1e 100644
--- a/admin/core/components/common/code-block.tsx
+++ b/admin/core/components/common/code-block.tsx
@@ -1,4 +1,4 @@
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 
 type TProps = {
   children: React.ReactNode;
diff --git a/admin/core/components/common/controller-input.tsx b/admin/core/components/common/controller-input.tsx
index 4d0eade08..ca8f30162 100644
--- a/admin/core/components/common/controller-input.tsx
+++ b/admin/core/components/common/controller-input.tsx
@@ -4,10 +4,9 @@ import React, { useState } from "react";
 import { Controller, Control } from "react-hook-form";
 // icons
 import { Eye, EyeOff } from "lucide-react";
-// ui
+// plane internal packages
 import { Input } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 
 type Props = {
   control: Control<any>;
@@ -37,9 +36,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col gap-1">
-      <h4 className="text-sm text-custom-text-300">
-        {label}
-      </h4>
+      <h4 className="text-sm text-custom-text-300">{label}</h4>
       <div className="relative">
         <Controller
           control={control}
diff --git a/admin/core/components/common/password-strength-meter.tsx b/admin/core/components/common/password-strength-meter.tsx
index 342f77efb..f4349b24a 100644
--- a/admin/core/components/common/password-strength-meter.tsx
+++ b/admin/core/components/common/password-strength-meter.tsx
@@ -1,14 +1,9 @@
 "use client";
 
 import { FC, useMemo } from "react";
-// import { CircleCheck } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common.helper";
-import {
-  E_PASSWORD_STRENGTH,
-  // PASSWORD_CRITERIA,
-  getPasswordStrength,
-} from "@/helpers/password.helper";
+// plane internal packages
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { cn, getPasswordStrength } from "@plane/utils";
 
 type TPasswordStrengthMeter = {
   password: string;
diff --git a/admin/core/components/instance/setup-form.tsx b/admin/core/components/instance/setup-form.tsx
index 7e987dbdf..fcc5c6c83 100644
--- a/admin/core/components/instance/setup-form.tsx
+++ b/admin/core/components/instance/setup-form.tsx
@@ -4,15 +4,13 @@ import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // icons
 import { Eye, EyeOff } from "lucide-react";
-// ui
+// plane internal packages
+import { API_BASE_URL, E_PASSWORD_STRENGTH } from "@plane/constants";
+import { AuthService } from "@plane/services";
 import { Button, Checkbox, Input, Spinner } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
 // components
 import { Banner, PasswordStrengthMeter } from "@/components/common";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
-// services
-import { AuthService } from "@/services/auth.service";
 
 // service initialization
 const authService = new AuthService();
@@ -338,7 +336,7 @@ export const InstanceSetupForm: FC = (props) => {
             </label>
             <a
               tabIndex={-1}
-              href="https://docs.plane.so/telemetry"
+              href="https://developers.plane.so/self-hosting/telemetry"
               target="_blank"
               rel="noopener noreferrer"
               className="text-sm font-medium text-blue-500 hover:text-blue-600"
diff --git a/admin/core/components/login/sign-in-form.tsx b/admin/core/components/login/sign-in-form.tsx
index aa67d4936..986e5cebe 100644
--- a/admin/core/components/login/sign-in-form.tsx
+++ b/admin/core/components/login/sign-in-form.tsx
@@ -2,24 +2,17 @@
 
 import { FC, useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
-// services
 import { Eye, EyeOff } from "lucide-react";
+// plane internal packages
+import { API_BASE_URL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
+import { AuthService } from "@plane/services";
 import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common";
 // helpers
-import {
-  authErrorHandler,
-  EAuthenticationErrorCodes,
-  EErrorAlertType,
-  TAuthErrorInfo,
-} from "@/helpers/authentication.helper";
-
-import { API_BASE_URL } from "@/helpers/common.helper";
-import { AuthService } from "@/services/auth.service";
+import { authErrorHandler } from "@/lib/auth-helpers";
+// local components
 import { AuthBanner } from "../authentication";
-// ui
-// icons
 
 // service initialization
 const authService = new AuthService();
@@ -102,7 +95,7 @@ export const InstanceSignInForm: FC = (props) => {
 
   useEffect(() => {
     if (errorCode) {
-      const errorDetail = authErrorHandler(errorCode?.toString() as EAuthenticationErrorCodes);
+      const errorDetail = authErrorHandler(errorCode?.toString() as EAdminAuthErrorCodes);
       if (errorDetail) {
         setErrorInfo(errorDetail);
       }
diff --git a/admin/core/components/new-user-popup.tsx b/admin/core/components/new-user-popup.tsx
index 8e1570781..0b974b38c 100644
--- a/admin/core/components/new-user-popup.tsx
+++ b/admin/core/components/new-user-popup.tsx
@@ -1,13 +1,13 @@
 "use client";
 
 import React from "react";
-import { resolveGeneralTheme } from "helpers/common.helper";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useTheme as nextUseTheme } from "next-themes";
 // ui
 import { Button, getButtonStyling } from "@plane/ui";
+import { resolveGeneralTheme } from "@plane/utils";
 // hooks
 import { useTheme } from "@/hooks/store";
 // icons
diff --git a/admin/core/components/workspace/list-item.tsx b/admin/core/components/workspace/list-item.tsx
index e0a96a6ef..ae693eb72 100644
--- a/admin/core/components/workspace/list-item.tsx
+++ b/admin/core/components/workspace/list-item.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 import { ExternalLink } from "lucide-react";
-// helpers
+// plane internal packages
+import { WEB_BASE_URL } from "@plane/constants";
 import { Tooltip } from "@plane/ui";
-import { WEB_BASE_URL } from "@/helpers/common.helper";
-import { getFileURL } from "@/helpers/file.helper";
+import { getFileURL } from "@plane/utils";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 
diff --git a/admin/core/constants/seo.ts b/admin/core/constants/seo.ts
deleted file mode 100644
index aafd5f7a3..000000000
--- a/admin/core/constants/seo.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-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 issues, sprints, and product roadmaps with peace of mind.";
-export const SITE_KEYWORDS =
-  "software development, plan, ship, software, accelerate, code management, release management, project management, issue 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.";
diff --git a/admin/core/constants/swr-config.ts b/admin/core/constants/swr-config.ts
deleted file mode 100644
index 38478fcea..000000000
--- a/admin/core/constants/swr-config.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export const SWR_CONFIG = {
-  refreshWhenHidden: false,
-  revalidateIfStale: false,
-  revalidateOnFocus: false,
-  revalidateOnMount: true,
-  refreshInterval: 600000,
-  errorRetryCount: 3,
-};
diff --git a/admin/core/lib/auth-helpers.tsx b/admin/core/lib/auth-helpers.tsx
new file mode 100644
index 000000000..582b56e29
--- /dev/null
+++ b/admin/core/lib/auth-helpers.tsx
@@ -0,0 +1,164 @@
+import { ReactNode } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { KeyRound, Mails } from "lucide-react";
+// plane packages
+import { SUPPORT_EMAIL, EAdminAuthErrorCodes, TAuthErrorInfo } from "@plane/constants";
+import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
+import { resolveGeneralTheme } from "@plane/utils";
+// components
+import {
+  EmailCodesConfiguration,
+  GithubConfiguration,
+  GitlabConfiguration,
+  GoogleConfiguration,
+  PasswordLoginConfiguration,
+} from "@/components/authentication";
+// images
+import githubLightModeImage from "@/public/logos/github-black.png";
+import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+import GoogleLogo from "@/public/logos/google-logo.svg";
+
+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",
+}
+
+const errorCodeMessages: {
+  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
+} = {
+  // admin
+  [EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
+    title: `Admin already exists`,
+    message: () => `Admin already exists. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME]: {
+    title: `Email, password and first name required`,
+    message: () => `Email, password and first name required. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.INVALID_ADMIN_EMAIL]: {
+    title: `Invalid admin email`,
+    message: () => `Invalid admin email. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.INVALID_ADMIN_PASSWORD]: {
+    title: `Invalid admin password`,
+    message: () => `Invalid admin password. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD]: {
+    title: `Email and password required`,
+    message: () => `Email and password required. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED]: {
+    title: `Authentication failed`,
+    message: () => `Authentication failed. Please try again.`,
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_ALREADY_EXIST]: {
+    title: `Admin user already exists`,
+    message: () => (
+      <div>
+        Admin user already exists.&nbsp;
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
+    title: `Admin user does not exist`,
+    message: () => (
+      <div>
+        Admin user does not exist.&nbsp;
+        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
+          Sign In
+        </Link>
+        &nbsp;now.
+      </div>
+    ),
+  },
+  [EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED]: {
+    title: `User account deactivated`,
+    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+  },
+};
+
+export const authErrorHandler = (
+  errorCode: EAdminAuthErrorCodes,
+  email?: string | undefined
+): TAuthErrorInfo | undefined => {
+  const bannerAlertErrorCodes = [
+    EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST,
+    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
+    EAdminAuthErrorCodes.INVALID_ADMIN_EMAIL,
+    EAdminAuthErrorCodes.INVALID_ADMIN_PASSWORD,
+    EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD,
+    EAdminAuthErrorCodes.ADMIN_AUTHENTICATION_FAILED,
+    EAdminAuthErrorCodes.ADMIN_USER_ALREADY_EXIST,
+    EAdminAuthErrorCodes.ADMIN_USER_DOES_NOT_EXIST,
+    EAdminAuthErrorCodes.ADMIN_USER_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;
+};
+
+export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
+  disabled,
+  updateConfig,
+  resolvedTheme,
+}) => [
+  {
+    key: "unique-codes",
+    name: "Unique codes",
+    description:
+      "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
+    icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "passwords-login",
+    name: "Passwords",
+    description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
+    icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
+    config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "google",
+    name: "Google",
+    description: "Allow members to log in or sign up for Plane with their Google accounts.",
+    icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
+    config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "github",
+    name: "GitHub",
+    description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
+    icon: (
+      <Image
+        src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
+        height={20}
+        width={20}
+        alt="GitHub Logo"
+      />
+    ),
+    config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+  {
+    key: "gitlab",
+    name: "GitLab",
+    description: "Allow members to log in or sign up to plane with their GitLab accounts.",
+    icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+    config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
+  },
+];
diff --git a/admin/core/services/api.service.ts b/admin/core/services/api.service.ts
deleted file mode 100644
index fa45c10b7..000000000
--- a/admin/core/services/api.service.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
-// store
-// import { rootStore } from "@/lib/store-context";
-
-export abstract class APIService {
-  protected baseURL: string;
-  private axiosInstance: AxiosInstance;
-
-  constructor(baseURL: string) {
-    this.baseURL = baseURL;
-    this.axiosInstance = axios.create({
-      baseURL,
-      withCredentials: true,
-    });
-
-    this.setupInterceptors();
-  }
-
-  private setupInterceptors() {
-    // this.axiosInstance.interceptors.response.use(
-    //   (response) => response,
-    //   (error) => {
-    //     const store = rootStore;
-    //     if (error.response && error.response.status === 401 && store.user.currentUser) store.user.reset();
-    //     return Promise.reject(error);
-    //   }
-    // );
-  }
-
-  get<ResponseType>(url: string, params = {}): Promise<AxiosResponse<ResponseType>> {
-    return this.axiosInstance.get(url, { params });
-  }
-
-  post<RequestType, ResponseType>(url: string, data: RequestType, config = {}): Promise<AxiosResponse<ResponseType>> {
-    return this.axiosInstance.post(url, data, config);
-  }
-
-  put<RequestType, ResponseType>(url: string, data: RequestType, config = {}): Promise<AxiosResponse<ResponseType>> {
-    return this.axiosInstance.put(url, data, config);
-  }
-
-  patch<RequestType, ResponseType>(url: string, data: RequestType, config = {}): Promise<AxiosResponse<ResponseType>> {
-    return this.axiosInstance.patch(url, data, config);
-  }
-
-  delete<RequestType>(url: string, data?: RequestType, config = {}) {
-    return this.axiosInstance.delete(url, { data, ...config });
-  }
-
-  request<T>(config: AxiosRequestConfig = {}): Promise<AxiosResponse<T>> {
-    return this.axiosInstance(config);
-  }
-}
diff --git a/admin/core/services/auth.service.ts b/admin/core/services/auth.service.ts
deleted file mode 100644
index 2cea01bee..000000000
--- a/admin/core/services/auth.service.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-// services
-import { APIService } from "@/services/api.service";
-
-type TCsrfTokenResponse = {
-  csrf_token: string;
-};
-
-export class AuthService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async requestCSRFToken(): Promise<TCsrfTokenResponse> {
-    return this.get<TCsrfTokenResponse>("/auth/get-csrf-token/")
-      .then((response) => response.data)
-      .catch((error) => {
-        throw error;
-      });
-  }
-}
diff --git a/admin/core/services/instance.service.ts b/admin/core/services/instance.service.ts
deleted file mode 100644
index feb94ceea..000000000
--- a/admin/core/services/instance.service.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-// types
-import type {
-  IFormattedInstanceConfiguration,
-  IInstance,
-  IInstanceAdmin,
-  IInstanceConfiguration,
-  IInstanceInfo,
-} from "@plane/types";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-import { APIService } from "@/services/api.service";
-
-export class InstanceService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getInstanceInfo(): Promise<IInstanceInfo> {
-    return this.get<IInstanceInfo>("/api/instances/")
-      .then((response) => response.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getInstanceAdmins(): Promise<IInstanceAdmin[]> {
-    return this.get<IInstanceAdmin[]>("/api/instances/admins/")
-      .then((response) => response.data)
-      .catch((error) => {
-        throw error;
-      });
-  }
-
-  async updateInstanceInfo(data: Partial<IInstance>): Promise<IInstance> {
-    return this.patch<Partial<IInstance>, IInstance>("/api/instances/", data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getInstanceConfigurations() {
-    return this.get<IInstanceConfiguration[]>("/api/instances/configurations/")
-      .then((response) => response.data)
-      .catch((error) => {
-        throw error;
-      });
-  }
-
-  async updateInstanceConfigurations(
-    data: Partial<IFormattedInstanceConfiguration>
-  ): Promise<IInstanceConfiguration[]> {
-    return this.patch<Partial<IFormattedInstanceConfiguration>, IInstanceConfiguration[]>(
-      "/api/instances/configurations/",
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async sendTestEmail(receiverEmail: string): Promise<undefined> {
-    return this.post<{ receiver_email: string }, undefined>("/api/instances/email-credentials-check/", {
-      receiver_email: receiverEmail,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
diff --git a/admin/core/services/user.service.ts b/admin/core/services/user.service.ts
deleted file mode 100644
index 42eb6eb22..000000000
--- a/admin/core/services/user.service.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// types
-import type { IUser } from "@plane/types";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-// services
-import { APIService } from "@/services/api.service";
-
-interface IUserSession extends IUser {
-  isAuthenticated: boolean;
-}
-
-export class UserService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async authCheck(): Promise<IUserSession> {
-    return this.get<any>("/api/instances/admins/me/")
-      .then((response) => ({ ...response?.data, isAuthenticated: true }))
-      .catch(() => ({ isAuthenticated: false }));
-  }
-
-  async currentUser(): Promise<IUser> {
-    return this.get<IUser>("/api/instances/admins/me/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
diff --git a/admin/core/services/workspace.service.ts b/admin/core/services/workspace.service.ts
deleted file mode 100644
index 81ba36a6f..000000000
--- a/admin/core/services/workspace.service.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// types
-import type { IWorkspace, TWorkspacePaginationInfo } from "@plane/types";
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-// services
-import { APIService } from "@/services/api.service";
-
-export class WorkspaceService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  /**
-   * @description Fetches all workspaces
-   * @returns Promise<TWorkspacePaginationInfo>
-   */
-  async getWorkspaces(nextPageCursor?: string): Promise<TWorkspacePaginationInfo> {
-    return this.get<TWorkspacePaginationInfo>("/api/instances/workspaces/", {
-      cursor: nextPageCursor,
-    })
-      .then((response) => response.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  /**
-   * @description Checks if a slug is available
-   * @param slug - string
-   * @returns Promise<any>
-   */
-  async workspaceSlugCheck(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;
-      });
-  }
-
-  /**
-   * @description Creates a new workspace
-   * @param data - IWorkspace
-   * @returns Promise<IWorkspace>
-   */
-  async createWorkspace(data: IWorkspace): Promise<IWorkspace> {
-    return this.post<IWorkspace, IWorkspace>("/api/instances/workspaces/", data)
-      .then((response) => response.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
diff --git a/admin/core/store/instance.store.ts b/admin/core/store/instance.store.ts
index 01ab55284..9b25a2469 100644
--- a/admin/core/store/instance.store.ts
+++ b/admin/core/store/instance.store.ts
@@ -1,5 +1,8 @@
 import set from "lodash/set";
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// plane internal packages
+import { EInstanceStatus, TInstanceStatus } from "@plane/constants";
+import {InstanceService} from "@plane/services";
 import {
   IInstance,
   IInstanceAdmin,
@@ -8,10 +11,6 @@ import {
   IInstanceInfo,
   IInstanceConfig,
 } from "@plane/types";
-// helpers
-import { EInstanceStatus, TInstanceStatus } from "@/helpers/instance.helper";
-// services
-import { InstanceService } from "@/services/instance.service";
 // root store
 import { CoreRootStore } from "@/store/root.store";
 
@@ -96,7 +95,7 @@ export class InstanceStore implements IInstanceStore {
     try {
       if (this.instance === undefined) this.isLoading = true;
       this.error = undefined;
-      const instanceInfo = await this.instanceService.getInstanceInfo();
+      const instanceInfo = await this.instanceService.info();
       // handling the new user popup toggle
       if (this.instance === undefined && !instanceInfo?.instance?.workspaces_exist)
         this.store.theme.toggleNewUserPopup();
@@ -125,7 +124,7 @@ export class InstanceStore implements IInstanceStore {
    */
   updateInstanceInfo = async (data: Partial<IInstance>) => {
     try {
-      const instanceResponse = await this.instanceService.updateInstanceInfo(data);
+      const instanceResponse = await this.instanceService.update(data);
       if (instanceResponse) {
         runInAction(() => {
           if (this.instance) set(this.instance, "instance", instanceResponse);
@@ -144,7 +143,7 @@ export class InstanceStore implements IInstanceStore {
    */
   fetchInstanceAdmins = async () => {
     try {
-      const instanceAdmins = await this.instanceService.getInstanceAdmins();
+      const instanceAdmins = await this.instanceService.admins();
       if (instanceAdmins) runInAction(() => (this.instanceAdmins = instanceAdmins));
       return instanceAdmins;
     } catch (error) {
@@ -159,7 +158,7 @@ export class InstanceStore implements IInstanceStore {
    */
   fetchInstanceConfigurations = async () => {
     try {
-      const instanceConfigurations = await this.instanceService.getInstanceConfigurations();
+      const instanceConfigurations = await this.instanceService.configurations();
       if (instanceConfigurations) runInAction(() => (this.instanceConfigurations = instanceConfigurations));
       return instanceConfigurations;
     } catch (error) {
@@ -174,7 +173,7 @@ export class InstanceStore implements IInstanceStore {
    */
   updateInstanceConfigurations = async (data: Partial<IFormattedInstanceConfiguration>) => {
     try {
-      const response = await this.instanceService.updateInstanceConfigurations(data);
+      const response = await this.instanceService.updateConfigurations(data);
       runInAction(() => {
         this.instanceConfigurations = this.instanceConfigurations?.map((config) => {
           const item = response.find((item) => item.key === config.key);
diff --git a/admin/core/store/user.store.ts b/admin/core/store/user.store.ts
index df17c9b00..85c56495b 100644
--- a/admin/core/store/user.store.ts
+++ b/admin/core/store/user.store.ts
@@ -1,10 +1,8 @@
 import { action, observable, runInAction, makeObservable } from "mobx";
+// plane internal packages
+import { EUserStatus, TUserStatus } from "@plane/constants";
+import { AuthService, UserService } from "@plane/services";
 import { IUser } from "@plane/types";
-// helpers
-import { EUserStatus, TUserStatus } from "@/helpers/user.helper";
-// services
-import { AuthService } from "@/services/auth.service";
-import { UserService } from "@/services/user.service";
 // root store
 import { CoreRootStore } from "@/store/root.store";
 
@@ -58,7 +56,7 @@ export class UserStore implements IUserStore {
   fetchCurrentUser = async () => {
     try {
       if (this.currentUser === undefined) this.isLoading = true;
-      const currentUser = await this.userService.currentUser();
+      const currentUser = await this.userService.adminDetails();
       if (currentUser) {
         await this.store.instance.fetchInstanceAdmins();
         runInAction(() => {
diff --git a/admin/core/store/workspace.store.ts b/admin/core/store/workspace.store.ts
index f892e14f0..64f7501d3 100644
--- a/admin/core/store/workspace.store.ts
+++ b/admin/core/store/workspace.store.ts
@@ -1,8 +1,8 @@
 import set from "lodash/set";
 import { action, observable, runInAction, makeObservable, computed } from "mobx";
+// plane imports
+import { InstanceWorkspaceService } from "@plane/services";
 import { IWorkspace, TLoader, TPaginationInfo } from "@plane/types";
-// services
-import { WorkspaceService } from "@/services/workspace.service";
 // root store
 import { CoreRootStore } from "@/store/root.store";
 
@@ -29,7 +29,7 @@ export class WorkspaceStore implements IWorkspaceStore {
   workspaces: Record<string, IWorkspace> = {};
   paginationInfo: TPaginationInfo | undefined = undefined;
   // services
-  workspaceService;
+  instanceWorkspaceService;
 
   constructor(private store: CoreRootStore) {
     makeObservable(this, {
@@ -48,7 +48,7 @@ export class WorkspaceStore implements IWorkspaceStore {
       // curd actions
       createWorkspace: action,
     });
-    this.workspaceService = new WorkspaceService();
+    this.instanceWorkspaceService = new InstanceWorkspaceService();
   }
 
   // computed
@@ -84,7 +84,7 @@ export class WorkspaceStore implements IWorkspaceStore {
       } else {
         this.loader = "init-loader";
       }
-      const paginatedWorkspaceData = await this.workspaceService.getWorkspaces();
+      const paginatedWorkspaceData = await this.instanceWorkspaceService.list();
       runInAction(() => {
         const { results, ...paginationInfo } = paginatedWorkspaceData;
         results.forEach((workspace: IWorkspace) => {
@@ -109,7 +109,7 @@ export class WorkspaceStore implements IWorkspaceStore {
     if (!this.paginationInfo || this.paginationInfo.next_page_results === false) return [];
     try {
       this.loader = "pagination";
-      const paginatedWorkspaceData = await this.workspaceService.getWorkspaces(this.paginationInfo.next_cursor);
+      const paginatedWorkspaceData = await this.instanceWorkspaceService.list(this.paginationInfo.next_cursor);
       runInAction(() => {
         const { results, ...paginationInfo } = paginatedWorkspaceData;
         results.forEach((workspace: IWorkspace) => {
@@ -135,7 +135,7 @@ export class WorkspaceStore implements IWorkspaceStore {
   createWorkspace = async (data: IWorkspace): Promise<IWorkspace> => {
     try {
       this.loader = "mutation";
-      const workspace = await this.workspaceService.createWorkspace(data);
+      const workspace = await this.instanceWorkspaceService.create(data);
       runInAction(() => {
         set(this.workspaces, [workspace.id], workspace);
       });
diff --git a/admin/helpers/authentication.helper.tsx b/admin/helpers/authentication.helper.tsx
deleted file mode 100644
index 627ff182c..000000000
--- a/admin/helpers/authentication.helper.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { ReactNode } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { KeyRound, Mails } from "lucide-react";
-// types
-import { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
-// components
-import {
-  EmailCodesConfiguration,
-  GithubConfiguration,
-  GitlabConfiguration,
-  GoogleConfiguration,
-  PasswordLoginConfiguration,
-} from "@/components/authentication";
-// helpers
-import { SUPPORT_EMAIL, resolveGeneralTheme } from "@/helpers/common.helper";
-// images
-import githubLightModeImage from "@/public/logos/github-black.png";
-import githubDarkModeImage from "@/public/logos/github-white.png";
-import GitlabLogo from "@/public/logos/gitlab-logo.svg";
-import GoogleLogo from "@/public/logos/google-logo.svg";
-
-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 {
-  // 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 TAuthErrorInfo = {
-  type: EErrorAlertType;
-  code: EAuthenticationErrorCodes;
-  title: string;
-  message: ReactNode;
-};
-
-const errorCodeMessages: {
-  [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
-} = {
-  // 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.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
-          Sign In
-        </Link>
-        &nbsp;now.
-      </div>
-    ),
-  },
-  [EAuthenticationErrorCodes.ADMIN_USER_DOES_NOT_EXIST]: {
-    title: `Admin user does not exist`,
-    message: () => (
-      <div>
-        Admin user does not exist.&nbsp;
-        <Link className="underline underline-offset-4 font-medium hover:font-bold transition-all" href={`/admin`}>
-          Sign In
-        </Link>
-        &nbsp;now.
-      </div>
-    ),
-  },
-  [EAuthenticationErrorCodes.ADMIN_USER_DEACTIVATED]: {
-    title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
-  },
-};
-
-export const authErrorHandler = (
-  errorCode: EAuthenticationErrorCodes,
-  email?: string | undefined
-): TAuthErrorInfo | undefined => {
-  const bannerAlertErrorCodes = [
-    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,
-  ];
-
-  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 getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps) => TInstanceAuthenticationModes[] = ({
-  disabled,
-  updateConfig,
-  resolvedTheme,
-}) => [
-    {
-      key: "unique-codes",
-      name: "Unique codes",
-      description:
-        "Log in or sign up for Plane using codes sent via email. You need to have set up SMTP to use this method.",
-      icon: <Mails className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-      config: <EmailCodesConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "passwords-login",
-      name: "Passwords",
-      description: "Allow members to create accounts with passwords and use it with their email addresses to sign in.",
-      icon: <KeyRound className="h-6 w-6 p-0.5 text-custom-text-300/80" />,
-      config: <PasswordLoginConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "google",
-      name: "Google",
-      description: "Allow members to log in or sign up for Plane with their Google accounts.",
-      icon: <Image src={GoogleLogo} height={20} width={20} alt="Google Logo" />,
-      config: <GoogleConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "github",
-      name: "GitHub",
-      description: "Allow members to log in or sign up for Plane with their GitHub accounts.",
-      icon: (
-        <Image
-          src={resolveGeneralTheme(resolvedTheme) === "dark" ? githubDarkModeImage : githubLightModeImage}
-          height={20}
-          width={20}
-          alt="GitHub Logo"
-        />
-      ),
-      config: <GithubConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-    {
-      key: "gitlab",
-      name: "GitLab",
-      description: "Allow members to log in or sign up to plane with their GitLab accounts.",
-      icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
-      config: <GitlabConfiguration disabled={disabled} updateConfig={updateConfig} />,
-    },
-  ];
diff --git a/admin/helpers/common.helper.ts b/admin/helpers/common.helper.ts
deleted file mode 100644
index e282e5792..000000000
--- a/admin/helpers/common.helper.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "";
-
-export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "";
-
-export const SPACE_BASE_URL = process.env.NEXT_PUBLIC_SPACE_BASE_URL || "";
-export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "";
-
-export const WEB_BASE_URL = process.env.NEXT_PUBLIC_WEB_BASE_URL || "";
-
-export const SUPPORT_EMAIL = process.env.NEXT_PUBLIC_SUPPORT_EMAIL || "";
-
-export const ASSET_PREFIX = ADMIN_BASE_PATH;
-
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
-
-export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
-  resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";
diff --git a/admin/helpers/file.helper.ts b/admin/helpers/file.helper.ts
deleted file mode 100644
index 6e1f54636..000000000
--- a/admin/helpers/file.helper.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
-
-/**
- * @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}`;
-};
diff --git a/admin/helpers/index.ts b/admin/helpers/index.ts
deleted file mode 100644
index ae6aab829..000000000
--- a/admin/helpers/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./instance.helper";
-export * from "./user.helper";
diff --git a/admin/helpers/password.helper.ts b/admin/helpers/password.helper.ts
deleted file mode 100644
index dfe9a5c65..000000000
--- a/admin/helpers/password.helper.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import zxcvbn from "zxcvbn";
-
-export enum E_PASSWORD_STRENGTH {
-  EMPTY = "empty",
-  LENGTH_NOT_VALID = "length_not_valid",
-  STRENGTH_NOT_VALID = "strength_not_valid",
-  STRENGTH_VALID = "strength_valid",
-}
-
-const PASSWORD_MIN_LENGTH = 8;
-// const PASSWORD_NUMBER_REGEX = /\d/;
-// const PASSWORD_CHAR_CAPS_REGEX = /[A-Z]/;
-// const PASSWORD_SPECIAL_CHAR_REGEX = /[`!@#$%^&*()_\-+=\[\]{};':"\\|,.<>\/?~ ]/;
-
-export const 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 const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => {
-  let passwordStrength: E_PASSWORD_STRENGTH = E_PASSWORD_STRENGTH.EMPTY;
-
-  if (!password || password === "" || password.length <= 0) {
-    return passwordStrength;
-  }
-
-  if (password.length >= PASSWORD_MIN_LENGTH) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
-  } else {
-    passwordStrength = E_PASSWORD_STRENGTH.LENGTH_NOT_VALID;
-    return passwordStrength;
-  }
-
-  const passwordCriteriaValidation = PASSWORD_CRITERIA.map((criteria) => criteria.isCriteriaValid(password)).every(
-    (criterion) => criterion
-  );
-  const passwordStrengthScore = zxcvbn(password).score;
-
-  if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
-    return passwordStrength;
-  }
-
-  if (passwordCriteriaValidation === true && passwordStrengthScore >= 3) {
-    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_VALID;
-  }
-
-  return passwordStrength;
-};
diff --git a/admin/helpers/string.helper.ts b/admin/helpers/string.helper.ts
deleted file mode 100644
index a48508118..000000000
--- a/admin/helpers/string.helper.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @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);
-};
diff --git a/admin/helpers/user.helper.ts b/admin/helpers/user.helper.ts
deleted file mode 100644
index 5c6a89a17..000000000
--- a/admin/helpers/user.helper.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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;
-};
diff --git a/admin/package.json b/admin/package.json
index e2fe4cf33..f4c6f2cbc 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -18,13 +18,14 @@
     "@plane/types": "*",
     "@plane/ui": "*",
     "@plane/utils": "*",
-    "@sentry/nextjs": "^8.32.0",
+    "@plane/services": "*",
+    "@sentry/nextjs": "^8.54.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash": "^4.17.0",
     "autoprefixer": "10.4.14",
-    "axios": "^1.7.4",
+    "axios": "^1.7.9",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.356.0",
+    "lucide-react": "^0.469.0",
     "mobx": "^6.12.0",
     "mobx-react": "^9.1.1",
     "next": "^14.2.20",
@@ -34,19 +35,18 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "7.51.5",
     "swr": "^2.2.4",
-    "tailwindcss": "3.3.2",
     "uuid": "^9.0.1",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@plane/eslint-config": "*",
+    "@plane/tailwind-config": "*",
     "@plane/typescript-config": "*",
     "@types/node": "18.16.1",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.18",
     "@types/uuid": "^9.0.8",
     "@types/zxcvbn": "^4.4.4",
-    "tailwind-config-custom": "*",
     "typescript": "5.3.3"
   }
 }
diff --git a/admin/tailwind.config.js b/admin/tailwind.config.js
index 05bc93bdc..a05d9dcd8 100644
--- a/admin/tailwind.config.js
+++ b/admin/tailwind.config.js
@@ -1,4 +1,5 @@
-const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+/* eslint-disable @typescript-eslint/no-require-imports */
+const sharedConfig = require("@plane/tailwind-config/tailwind.config.js");
 
 module.exports = {
   presets: [sharedConfig],
diff --git a/admin/tsconfig.json b/admin/tsconfig.json
index 174843581..f9bb7cf10 100644
--- a/admin/tsconfig.json
+++ b/admin/tsconfig.json
@@ -5,7 +5,6 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["core/*"],
-      "@/helpers/*": ["helpers/*"],
       "@/public/*": ["public/*"],
       "@/plane-admin/*": ["ce/*"]
     }
diff --git a/apiserver/plane/api/serializers/__init__.py b/apiserver/plane/api/serializers/__init__.py
index b7780a90c..4eb1457ce 100644
--- a/apiserver/plane/api/serializers/__init__.py
+++ b/apiserver/plane/api/serializers/__init__.py
@@ -15,3 +15,4 @@ from .state import StateLiteSerializer, StateSerializer
 from .cycle import CycleSerializer, CycleIssueSerializer, CycleLiteSerializer
 from .module import ModuleSerializer, ModuleIssueSerializer, ModuleLiteSerializer
 from .intake import IntakeIssueSerializer
+from .estimate import EstimatePointSerializer
\ No newline at end of file
diff --git a/apiserver/plane/api/serializers/base.py b/apiserver/plane/api/serializers/base.py
index d51434554..4b1e54707 100644
--- a/apiserver/plane/api/serializers/base.py
+++ b/apiserver/plane/api/serializers/base.py
@@ -72,6 +72,7 @@ class BaseSerializer(serializers.ModelSerializer):
                         StateLiteSerializer,
                         UserLiteSerializer,
                         WorkspaceLiteSerializer,
+                        EstimatePointSerializer,
                     )
 
                     # Expansion mapper
@@ -88,6 +89,7 @@ class BaseSerializer(serializers.ModelSerializer):
                         "owned_by": UserLiteSerializer,
                         "members": UserLiteSerializer,
                         "parent": IssueLiteSerializer,
+                        "estimate_point": EstimatePointSerializer,
                     }
                     # Check if field in expansion  then expand the field
                     if expand in expansion:
diff --git a/apiserver/plane/api/serializers/cycle.py b/apiserver/plane/api/serializers/cycle.py
index f4f06c324..ea3c4eb3d 100644
--- a/apiserver/plane/api/serializers/cycle.py
+++ b/apiserver/plane/api/serializers/cycle.py
@@ -4,6 +4,7 @@ from rest_framework import serializers
 # Module imports
 from .base import BaseSerializer
 from plane.db.models import Cycle, CycleIssue
+from plane.utils.timezone_converter import convert_to_utc
 
 
 class CycleSerializer(BaseSerializer):
@@ -24,6 +25,27 @@ class CycleSerializer(BaseSerializer):
             and data.get("start_date", None) > data.get("end_date", None)
         ):
             raise serializers.ValidationError("Start date cannot exceed end date")
+
+        if (
+            data.get("start_date", None) is not None
+            and data.get("end_date", None) is not None
+        ):
+            project_id = self.initial_data.get("project_id") or self.instance.project_id
+            is_start_date_end_date_equal = (
+                True
+                if str(data.get("start_date")) == str(data.get("end_date"))
+                else False
+            )
+            data["start_date"] = convert_to_utc(
+                date=str(data.get("start_date").date()),
+                project_id=project_id,
+                is_start_date=True,
+            )
+            data["end_date"] = convert_to_utc(
+                date=str(data.get("end_date", None).date()),
+                project_id=project_id,
+                is_start_date_end_date_equal=is_start_date_end_date_equal,
+            )
         return data
 
     class Meta:
diff --git a/apiserver/plane/api/serializers/estimate.py b/apiserver/plane/api/serializers/estimate.py
new file mode 100644
index 000000000..0d9235dad
--- /dev/null
+++ b/apiserver/plane/api/serializers/estimate.py
@@ -0,0 +1,10 @@
+# Module imports
+from plane.db.models import EstimatePoint
+from .base import BaseSerializer
+
+
+class EstimatePointSerializer(BaseSerializer):
+    class Meta:
+        model = EstimatePoint
+        fields = ["id", "value"]
+        read_only_fields = fields
diff --git a/apiserver/plane/api/serializers/issue.py b/apiserver/plane/api/serializers/issue.py
index 72918b268..275ebeb07 100644
--- a/apiserver/plane/api/serializers/issue.py
+++ b/apiserver/plane/api/serializers/issue.py
@@ -1,6 +1,7 @@
 # Django imports
 from django.utils import timezone
 from lxml import html
+from django.db import IntegrityError
 
 #  Third party imports
 from rest_framework import serializers
@@ -138,47 +139,56 @@ class IssueSerializer(BaseSerializer):
         updated_by_id = issue.updated_by_id
 
         if assignees is not None and len(assignees):
-            IssueAssignee.objects.bulk_create(
-                [
-                    IssueAssignee(
-                        assignee_id=assignee_id,
+            try:
+                IssueAssignee.objects.bulk_create(
+                    [
+                        IssueAssignee(
+                            assignee_id=assignee_id,
+                            issue=issue,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for assignee_id in assignees
+                    ],
+                    batch_size=10,
+                )
+            except IntegrityError:
+                pass
+        else:
+            try:
+                # Then assign it to default assignee
+                if default_assignee_id is not None:
+                    IssueAssignee.objects.create(
+                        assignee_id=default_assignee_id,
                         issue=issue,
                         project_id=project_id,
                         workspace_id=workspace_id,
                         created_by_id=created_by_id,
                         updated_by_id=updated_by_id,
                     )
-                    for assignee_id in assignees
-                ],
-                batch_size=10,
-            )
-        else:
-            # Then assign it to default assignee
-            if default_assignee_id is not None:
-                IssueAssignee.objects.create(
-                    assignee_id=default_assignee_id,
-                    issue=issue,
-                    project_id=project_id,
-                    workspace_id=workspace_id,
-                    created_by_id=created_by_id,
-                    updated_by_id=updated_by_id,
-                )
+            except IntegrityError:
+                pass
 
         if labels is not None and len(labels):
-            IssueLabel.objects.bulk_create(
-                [
-                    IssueLabel(
-                        label_id=label_id,
-                        issue=issue,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for label_id in labels
-                ],
-                batch_size=10,
-            )
+            try:
+                IssueLabel.objects.bulk_create(
+                    [
+                        IssueLabel(
+                            label_id=label_id,
+                            issue=issue,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for label_id in labels
+                    ],
+                    batch_size=10,
+                )
+            except IntegrityError:
+                pass
 
         return issue
 
@@ -194,37 +204,45 @@ class IssueSerializer(BaseSerializer):
 
         if assignees is not None:
             IssueAssignee.objects.filter(issue=instance).delete()
-            IssueAssignee.objects.bulk_create(
-                [
-                    IssueAssignee(
-                        assignee_id=assignee_id,
-                        issue=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for assignee_id in assignees
-                ],
-                batch_size=10,
-            )
+            try:
+                IssueAssignee.objects.bulk_create(
+                    [
+                        IssueAssignee(
+                            assignee_id=assignee_id,
+                            issue=instance,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for assignee_id in assignees
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+            except IntegrityError:
+                pass
 
         if labels is not None:
             IssueLabel.objects.filter(issue=instance).delete()
-            IssueLabel.objects.bulk_create(
-                [
-                    IssueLabel(
-                        label_id=label_id,
-                        issue=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for label_id in labels
-                ],
-                batch_size=10,
-            )
+            try:
+                IssueLabel.objects.bulk_create(
+                    [
+                        IssueLabel(
+                            label_id=label_id,
+                            issue=instance,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for label_id in labels
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+            except IntegrityError:
+                pass
 
         # Time updation occues even when other related models are updated
         instance.updated_at = timezone.now()
@@ -237,17 +255,37 @@ class IssueSerializer(BaseSerializer):
                 from .user import UserLiteSerializer
 
                 data["assignees"] = UserLiteSerializer(
-                    instance.assignees.all(), many=True
+                    User.objects.filter(
+                        pk__in=IssueAssignee.objects.filter(issue=instance).values_list(
+                            "assignee_id", flat=True
+                        )
+                    ),
+                    many=True,
                 ).data
             else:
                 data["assignees"] = [
-                    str(assignee.id) for assignee in instance.assignees.all()
+                    str(assignee)
+                    for assignee in IssueAssignee.objects.filter(
+                        issue=instance
+                    ).values_list("assignee_id", flat=True)
                 ]
         if "labels" in self.fields:
             if "labels" in self.expand:
-                data["labels"] = LabelSerializer(instance.labels.all(), many=True).data
+                data["labels"] = LabelSerializer(
+                    Label.objects.filter(
+                        pk__in=IssueLabel.objects.filter(issue=instance).values_list(
+                            "label_id", flat=True
+                        )
+                    ),
+                    many=True,
+                ).data
             else:
-                data["labels"] = [str(label.id) for label in instance.labels.all()]
+                data["labels"] = [
+                    str(label)
+                    for label in IssueLabel.objects.filter(issue=instance).values_list(
+                        "label_id", flat=True
+                    )
+                ]
 
         return data
 
diff --git a/apiserver/plane/api/urls/issue.py b/apiserver/plane/api/urls/issue.py
index e9bf030a2..71ab39855 100644
--- a/apiserver/plane/api/urls/issue.py
+++ b/apiserver/plane/api/urls/issue.py
@@ -71,4 +71,9 @@ urlpatterns = [
         IssueAttachmentEndpoint.as_view(),
         name="attachment",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/issue-attachments/<uuid:pk>/",
+        IssueAttachmentEndpoint.as_view(),
+        name="issue-attachment",
+    ),
 ]
diff --git a/apiserver/plane/api/views/intake.py b/apiserver/plane/api/views/intake.py
index c2d0733ba..faefc3761 100644
--- a/apiserver/plane/api/views/intake.py
+++ b/apiserver/plane/api/views/intake.py
@@ -109,16 +109,6 @@ class IntakeIssueAPIEndpoint(BaseAPIView):
                 {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-        # Create or get state
-        state, _ = State.objects.get_or_create(
-            name="Triage",
-            group="triage",
-            description="Default state for managing all Intake Issues",
-            project_id=project_id,
-            color="#ff7700",
-            is_triage=True,
-        )
-
         # create an issue
         issue = Issue.objects.create(
             name=request.data.get("issue", {}).get("name"),
@@ -128,7 +118,6 @@ class IntakeIssueAPIEndpoint(BaseAPIView):
             ),
             priority=request.data.get("issue", {}).get("priority", "none"),
             project_id=project_id,
-            state=state,
         )
 
         # create an intake issue
diff --git a/apiserver/plane/api/views/issue.py b/apiserver/plane/api/views/issue.py
index df7b9aec2..9f9b189ae 100644
--- a/apiserver/plane/api/views/issue.py
+++ b/apiserver/plane/api/views/issue.py
@@ -1,9 +1,10 @@
 # Python imports
 import json
-
-from django.core.serializers.json import DjangoJSONEncoder
+import uuid
 
 # Django imports
+from django.core.serializers.json import DjangoJSONEncoder
+from django.http import HttpResponseRedirect
 from django.db import IntegrityError
 from django.db.models import (
     Case,
@@ -19,11 +20,11 @@ from django.db.models import (
     Subquery,
 )
 from django.utils import timezone
+from django.conf import settings
 
 # Third party imports
 from rest_framework import status
 from rest_framework.response import Response
-from rest_framework.parsers import MultiPartParser, FormParser
 
 # Module imports
 from plane.api.serializers import (
@@ -50,8 +51,10 @@ from plane.db.models import (
     Project,
     ProjectMember,
     CycleIssue,
+    Workspace,
 )
-
+from plane.settings.storage import S3Storage
+from plane.bgtasks.storage_metadata_task import get_asset_object_metadata
 from .base import BaseAPIView
 
 
@@ -940,37 +943,162 @@ class IssueAttachmentEndpoint(BaseAPIView):
     serializer_class = IssueAttachmentSerializer
     permission_classes = [ProjectEntityPermission]
     model = FileAsset
-    parser_classes = (MultiPartParser, FormParser)
 
     def post(self, request, slug, project_id, issue_id):
-        serializer = IssueAttachmentSerializer(data=request.data)
+        name = request.data.get("name")
+        type = request.data.get("type", False)
+        size = request.data.get("size")
+        external_id = request.data.get("external_id")
+        external_source = request.data.get("external_source")
+
+        # Check if the request is valid
+        if not name or not size:
+            return Response(
+                {"error": "Invalid request.", "status": False},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        size_limit = min(size, settings.FILE_SIZE_LIMIT)
+
+        if not type or type not in settings.ATTACHMENT_MIME_TYPES:
+            return Response(
+                {"error": "Invalid file type.", "status": False},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Get the workspace
+        workspace = Workspace.objects.get(slug=slug)
+
+        # asset key
+        asset_key = f"{workspace.id}/{uuid.uuid4().hex}-{name}"
+
         if (
             request.data.get("external_id")
             and request.data.get("external_source")
             and FileAsset.objects.filter(
                 project_id=project_id,
                 workspace__slug=slug,
-                issue_id=issue_id,
                 external_source=request.data.get("external_source"),
                 external_id=request.data.get("external_id"),
+                issue_id=issue_id,
+                entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
             ).exists()
         ):
-            issue_attachment = FileAsset.objects.filter(
-                workspace__slug=slug,
+            asset = FileAsset.objects.filter(
                 project_id=project_id,
-                external_id=request.data.get("external_id"),
+                workspace__slug=slug,
                 external_source=request.data.get("external_source"),
+                external_id=request.data.get("external_id"),
+                issue_id=issue_id,
+                entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
             ).first()
             return Response(
                 {
-                    "error": "Issue attachment with the same external id and external source already exists",
-                    "id": str(issue_attachment.id),
+                    "error": "Issue with the same external id and external source already exists",
+                    "id": str(asset.id),
                 },
                 status=status.HTTP_409_CONFLICT,
             )
 
-        if serializer.is_valid():
-            serializer.save(project_id=project_id, issue_id=issue_id)
+        # Create a File Asset
+        asset = FileAsset.objects.create(
+            attributes={"name": name, "type": type, "size": size_limit},
+            asset=asset_key,
+            size=size_limit,
+            workspace_id=workspace.id,
+            created_by=request.user,
+            issue_id=issue_id,
+            project_id=project_id,
+            entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+            external_id=external_id,
+            external_source=external_source,
+        )
+
+        # Get the presigned URL
+        storage = S3Storage(request=request)
+        # Generate a presigned URL to share an S3 object
+        presigned_url = storage.generate_presigned_post(
+            object_name=asset_key, file_type=type, file_size=size_limit
+        )
+        # Return the presigned URL
+        return Response(
+            {
+                "upload_data": presigned_url,
+                "asset_id": str(asset.id),
+                "attachment": IssueAttachmentSerializer(asset).data,
+                "asset_url": asset.asset_url,
+            },
+            status=status.HTTP_200_OK,
+        )
+
+    def delete(self, request, slug, project_id, issue_id, pk):
+        issue_attachment = FileAsset.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        issue_attachment.is_deleted = True
+        issue_attachment.deleted_at = timezone.now()
+        issue_attachment.save()
+
+        issue_activity.delay(
+            type="attachment.activity.deleted",
+            requested_data=None,
+            actor_id=str(self.request.user.id),
+            issue_id=str(issue_id),
+            project_id=str(project_id),
+            current_instance=None,
+            epoch=int(timezone.now().timestamp()),
+            notification=True,
+            origin=request.META.get("HTTP_ORIGIN"),
+        )
+
+        # Get the storage metadata
+        if not issue_attachment.storage_metadata:
+            get_asset_object_metadata.delay(str(issue_attachment.id))
+        issue_attachment.save()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    def get(self, request, slug, project_id, issue_id, pk=None):
+        if pk:
+            # Get the asset
+            asset = FileAsset.objects.get(
+                id=pk, workspace__slug=slug, project_id=project_id
+            )
+
+            # Check if the asset is uploaded
+            if not asset.is_uploaded:
+                return Response(
+                    {"error": "The asset is not uploaded.", "status": False},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            storage = S3Storage(request=request)
+            presigned_url = storage.generate_presigned_url(
+                object_name=asset.asset.name,
+                disposition="attachment",
+                filename=asset.attributes.get("name"),
+            )
+            return HttpResponseRedirect(presigned_url)
+
+        # Get all the attachments
+        issue_attachments = FileAsset.objects.filter(
+            issue_id=issue_id,
+            entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+            workspace__slug=slug,
+            project_id=project_id,
+            is_uploaded=True,
+        )
+        # Serialize the attachments
+        serializer = IssueAttachmentSerializer(issue_attachments, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
+    def patch(self, request, slug, project_id, issue_id, pk):
+        issue_attachment = FileAsset.objects.get(
+            pk=pk, workspace__slug=slug, project_id=project_id
+        )
+        serializer = IssueAttachmentSerializer(issue_attachment)
+
+        # Send this activity only if the attachment is not uploaded before
+        if not issue_attachment.is_uploaded:
             issue_activity.delay(
                 type="attachment.activity.created",
                 requested_data=None,
@@ -982,30 +1110,13 @@ class IssueAttachmentEndpoint(BaseAPIView):
                 notification=True,
                 origin=request.META.get("HTTP_ORIGIN"),
             )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-    def delete(self, request, slug, project_id, issue_id, pk):
-        issue_attachment = FileAsset.objects.get(pk=pk)
-        issue_attachment.asset.delete(save=False)
-        issue_attachment.delete()
-        issue_activity.delay(
-            type="attachment.activity.deleted",
-            requested_data=None,
-            actor_id=str(self.request.user.id),
-            issue_id=str(self.kwargs.get("issue_id", None)),
-            project_id=str(self.kwargs.get("project_id", None)),
-            current_instance=None,
-            epoch=int(timezone.now().timestamp()),
-            notification=True,
-            origin=request.META.get("HTTP_ORIGIN"),
-        )
+            # Update the attachment
+            issue_attachment.is_uploaded = True
+            issue_attachment.created_by = request.user
 
+        # Get the storage metadata
+        if not issue_attachment.storage_metadata:
+            get_asset_object_metadata.delay(str(issue_attachment.id))
+        issue_attachment.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
-
-    def get(self, request, slug, project_id, issue_id):
-        issue_attachments = FileAsset.objects.filter(
-            issue_id=issue_id, workspace__slug=slug, project_id=project_id
-        )
-        serializer = IssueAttachmentSerializer(issue_attachments, many=True)
-        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/api/views/project.py b/apiserver/plane/api/views/project.py
index fa645a63c..e98f35d57 100644
--- a/apiserver/plane/api/views/project.py
+++ b/apiserver/plane/api/views/project.py
@@ -28,7 +28,7 @@ from plane.db.models import (
     Workspace,
     UserFavorite,
 )
-from plane.bgtasks.webhook_task import model_activity
+from plane.bgtasks.webhook_task import model_activity, webhook_activity
 from .base import BaseAPIView
 
 
@@ -258,7 +258,9 @@ class ProjectAPIEndpoint(BaseAPIView):
                 ProjectSerializer(project).data, cls=DjangoJSONEncoder
             )
 
-            intake_view = request.data.get("inbox_view", project.intake_view)
+            intake_view = request.data.get(
+                "inbox_view", request.data.get("intake_view", project.intake_view)
+            )
 
             if project.archived_at:
                 return Response(
@@ -286,16 +288,6 @@ class ProjectAPIEndpoint(BaseAPIView):
                             is_default=True,
                         )
 
-                    # Create the triage state in Backlog group
-                    State.objects.get_or_create(
-                        name="Triage",
-                        group="triage",
-                        description="Default state for managing all Intake Issues",
-                        project_id=pk,
-                        color="#ff7700",
-                        is_triage=True,
-                    )
-
                 project = self.get_queryset().filter(pk=serializer.data["id"]).first()
 
                 model_activity.delay(
@@ -334,6 +326,19 @@ class ProjectAPIEndpoint(BaseAPIView):
             entity_type="project", entity_identifier=pk, project_id=pk
         ).delete()
         project.delete()
+        webhook_activity.delay(
+            event="project",
+            verb="deleted",
+            field=None,
+            old_value=None,
+            new_value=None,
+            actor_id=request.user.id,
+            slug=slug,
+            current_site=request.META.get("HTTP_ORIGIN"),
+            event_id=project.id,
+            old_identifier=None,
+            new_identifier=None,
+        )
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
diff --git a/apiserver/plane/app/serializers/__init__.py b/apiserver/plane/app/serializers/__init__.py
index cd9adb939..479f08d5a 100644
--- a/apiserver/plane/app/serializers/__init__.py
+++ b/apiserver/plane/app/serializers/__init__.py
@@ -19,6 +19,10 @@ from .workspace import (
     WorkspaceMemberAdminSerializer,
     WorkspaceMemberMeSerializer,
     WorkspaceUserPropertiesSerializer,
+    WorkspaceUserLinkSerializer,
+    WorkspaceRecentVisitSerializer,
+    WorkspaceHomePreferenceSerializer,
+    StickySerializer,
 )
 from .project import (
     ProjectSerializer,
@@ -68,6 +72,8 @@ from .issue import (
     IssueReactionLiteSerializer,
     IssueAttachmentLiteSerializer,
     IssueLinkLiteSerializer,
+    IssueVersionDetailSerializer,
+    IssueDescriptionVersionDetailSerializer,
 )
 
 from .module import (
diff --git a/apiserver/plane/app/serializers/cycle.py b/apiserver/plane/app/serializers/cycle.py
index bf08de4fe..b56b08350 100644
--- a/apiserver/plane/app/serializers/cycle.py
+++ b/apiserver/plane/app/serializers/cycle.py
@@ -5,6 +5,7 @@ from rest_framework import serializers
 from .base import BaseSerializer
 from .issue import IssueStateSerializer
 from plane.db.models import Cycle, CycleIssue, CycleUserProperties
+from plane.utils.timezone_converter import convert_to_utc
 
 
 class CycleWriteSerializer(BaseSerializer):
@@ -15,6 +16,30 @@ class CycleWriteSerializer(BaseSerializer):
             and data.get("start_date", None) > data.get("end_date", None)
         ):
             raise serializers.ValidationError("Start date cannot exceed end date")
+        if (
+            data.get("start_date", None) is not None
+            and data.get("end_date", None) is not None
+        ):
+            project_id = (
+                self.initial_data.get("project_id", None)
+                or (self.instance and self.instance.project_id)
+                or self.context.get("project_id", None)
+            )
+            is_start_date_end_date_equal = (
+                True
+                if str(data.get("start_date")) == str(data.get("end_date"))
+                else False
+            )
+            data["start_date"] = convert_to_utc(
+                date=str(data.get("start_date").date()),
+                project_id=project_id,
+                is_start_date=True,
+            )
+            data["end_date"] = convert_to_utc(
+                date=str(data.get("end_date", None).date()),
+                project_id=project_id,
+                is_start_date_end_date_equal=is_start_date_end_date_equal,
+            )
         return data
 
     class Meta:
diff --git a/apiserver/plane/app/serializers/dashboard.py b/apiserver/plane/app/serializers/dashboard.py
index b0ed8841b..d09fc3e35 100644
--- a/apiserver/plane/app/serializers/dashboard.py
+++ b/apiserver/plane/app/serializers/dashboard.py
@@ -1,6 +1,6 @@
 # Module imports
 from .base import BaseSerializer
-from plane.db.models import Dashboard, Widget
+from plane.db.models import DeprecatedDashboard, DeprecatedWidget
 
 # Third party frameworks
 from rest_framework import serializers
@@ -8,7 +8,7 @@ from rest_framework import serializers
 
 class DashboardSerializer(BaseSerializer):
     class Meta:
-        model = Dashboard
+        model = DeprecatedDashboard
         fields = "__all__"
 
 
@@ -17,5 +17,5 @@ class WidgetSerializer(BaseSerializer):
     widget_filters = serializers.JSONField(read_only=True)
 
     class Meta:
-        model = Widget
+        model = DeprecatedWidget
         fields = ["id", "key", "is_visible", "widget_filters"]
diff --git a/apiserver/plane/app/serializers/favorite.py b/apiserver/plane/app/serializers/favorite.py
index 940b8ee82..18f92f3ea 100644
--- a/apiserver/plane/app/serializers/favorite.py
+++ b/apiserver/plane/app/serializers/favorite.py
@@ -53,7 +53,6 @@ def get_entity_model_and_serializer(entity_type):
     }
     return entity_map.get(entity_type, (None, None))
 
-
 class UserFavoriteSerializer(serializers.ModelSerializer):
     entity_data = serializers.SerializerMethodField()
 
diff --git a/apiserver/plane/app/serializers/issue.py b/apiserver/plane/app/serializers/issue.py
index 007f34849..2fb7c035d 100644
--- a/apiserver/plane/app/serializers/issue.py
+++ b/apiserver/plane/app/serializers/issue.py
@@ -2,6 +2,7 @@
 from django.utils import timezone
 from django.core.validators import URLValidator
 from django.core.exceptions import ValidationError
+from django.db import IntegrityError
 
 # Third Party imports
 from rest_framework import serializers
@@ -33,6 +34,8 @@ from plane.db.models import (
     IssueVote,
     IssueRelation,
     State,
+    IssueVersion,
+    IssueDescriptionVersion,
 )
 
 
@@ -132,47 +135,56 @@ class IssueCreateSerializer(BaseSerializer):
         updated_by_id = issue.updated_by_id
 
         if assignees is not None and len(assignees):
-            IssueAssignee.objects.bulk_create(
-                [
-                    IssueAssignee(
-                        assignee=user,
-                        issue=issue,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for user in assignees
-                ],
-                batch_size=10,
-            )
+            try:
+                IssueAssignee.objects.bulk_create(
+                    [
+                        IssueAssignee(
+                            assignee=user,
+                            issue=issue,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for user in assignees
+                    ],
+                    batch_size=10,
+                )
+            except IntegrityError:
+                pass
         else:
             # Then assign it to default assignee
             if default_assignee_id is not None:
-                IssueAssignee.objects.create(
-                    assignee_id=default_assignee_id,
-                    issue=issue,
-                    project_id=project_id,
-                    workspace_id=workspace_id,
-                    created_by_id=created_by_id,
-                    updated_by_id=updated_by_id,
-                )
-
-        if labels is not None and len(labels):
-            IssueLabel.objects.bulk_create(
-                [
-                    IssueLabel(
-                        label=label,
+                try:
+                    IssueAssignee.objects.create(
+                        assignee_id=default_assignee_id,
                         issue=issue,
                         project_id=project_id,
                         workspace_id=workspace_id,
                         created_by_id=created_by_id,
                         updated_by_id=updated_by_id,
                     )
-                    for label in labels
-                ],
-                batch_size=10,
-            )
+                except IntegrityError:
+                    pass
+
+        if labels is not None and len(labels):
+            try:
+                IssueLabel.objects.bulk_create(
+                    [
+                        IssueLabel(
+                            label=label,
+                            issue=issue,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for label in labels
+                    ],
+                    batch_size=10,
+                )
+            except IntegrityError:
+                pass
 
         return issue
 
@@ -188,37 +200,45 @@ class IssueCreateSerializer(BaseSerializer):
 
         if assignees is not None:
             IssueAssignee.objects.filter(issue=instance).delete()
-            IssueAssignee.objects.bulk_create(
-                [
-                    IssueAssignee(
-                        assignee=user,
-                        issue=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for user in assignees
-                ],
-                batch_size=10,
-            )
+            try:
+                IssueAssignee.objects.bulk_create(
+                    [
+                        IssueAssignee(
+                            assignee=user,
+                            issue=instance,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for user in assignees
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+            except IntegrityError:
+                pass
 
         if labels is not None:
             IssueLabel.objects.filter(issue=instance).delete()
-            IssueLabel.objects.bulk_create(
-                [
-                    IssueLabel(
-                        label=label,
-                        issue=instance,
-                        project_id=project_id,
-                        workspace_id=workspace_id,
-                        created_by_id=created_by_id,
-                        updated_by_id=updated_by_id,
-                    )
-                    for label in labels
-                ],
-                batch_size=10,
-            )
+            try:
+                IssueLabel.objects.bulk_create(
+                    [
+                        IssueLabel(
+                            label=label,
+                            issue=instance,
+                            project_id=project_id,
+                            workspace_id=workspace_id,
+                            created_by_id=created_by_id,
+                            updated_by_id=updated_by_id,
+                        )
+                        for label in labels
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+            except IntegrityError:
+                pass
 
         # Time updation occues even when other related models are updated
         instance.updated_at = timezone.now()
@@ -281,10 +301,26 @@ class IssueRelationSerializer(BaseSerializer):
     )
     name = serializers.CharField(source="related_issue.name", read_only=True)
     relation_type = serializers.CharField(read_only=True)
+    state_id = serializers.UUIDField(source="related_issue.state.id", read_only=True)
+    priority = serializers.CharField(source="related_issue.priority", read_only=True)
+    assignee_ids = serializers.ListField(
+        child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
+        write_only=True,
+        required=False,
+    )
 
     class Meta:
         model = IssueRelation
-        fields = ["id", "project_id", "sequence_id", "relation_type", "name"]
+        fields = [
+            "id",
+            "project_id",
+            "sequence_id",
+            "relation_type",
+            "name",
+            "state_id",
+            "priority",
+            "assignee_ids",
+        ]
         read_only_fields = ["workspace", "project"]
 
 
@@ -296,10 +332,26 @@ class RelatedIssueSerializer(BaseSerializer):
     sequence_id = serializers.IntegerField(source="issue.sequence_id", read_only=True)
     name = serializers.CharField(source="issue.name", read_only=True)
     relation_type = serializers.CharField(read_only=True)
+    state_id = serializers.UUIDField(source="issue.state.id", read_only=True)
+    priority = serializers.CharField(source="issue.priority", read_only=True)
+    assignee_ids = serializers.ListField(
+        child=serializers.PrimaryKeyRelatedField(queryset=User.objects.all()),
+        write_only=True,
+        required=False,
+    )
 
     class Meta:
         model = IssueRelation
-        fields = ["id", "project_id", "sequence_id", "relation_type", "name"]
+        fields = [
+            "id",
+            "project_id",
+            "sequence_id",
+            "relation_type",
+            "name",
+            "state_id",
+            "priority",
+            "assignee_ids",
+        ]
         read_only_fields = ["workspace", "project"]
 
 
@@ -470,6 +522,7 @@ class IssueAttachmentLiteSerializer(DynamicBaseSerializer):
             "asset",
             "attributes",
             # "issue_id",
+            "created_by",
             "updated_at",
             "updated_by",
             "asset_url",
@@ -667,3 +720,64 @@ class IssueSubscriberSerializer(BaseSerializer):
         model = IssueSubscriber
         fields = "__all__"
         read_only_fields = ["workspace", "project", "issue"]
+
+
+class IssueVersionDetailSerializer(BaseSerializer):
+    class Meta:
+        model = IssueVersion
+        fields = [
+            "id",
+            "workspace",
+            "project",
+            "issue",
+            "parent",
+            "state",
+            "estimate_point",
+            "name",
+            "priority",
+            "start_date",
+            "target_date",
+            "assignees",
+            "sequence_id",
+            "labels",
+            "sort_order",
+            "completed_at",
+            "archived_at",
+            "is_draft",
+            "external_source",
+            "external_id",
+            "type",
+            "cycle",
+            "modules",
+            "meta",
+            "name",
+            "last_saved_at",
+            "owned_by",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
+        read_only_fields = ["workspace", "project", "issue"]
+
+
+class IssueDescriptionVersionDetailSerializer(BaseSerializer):
+    class Meta:
+        model = IssueDescriptionVersion
+        fields = [
+            "id",
+            "workspace",
+            "project",
+            "issue",
+            "description_binary",
+            "description_html",
+            "description_stripped",
+            "description_json",
+            "last_saved_at",
+            "owned_by",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
+        read_only_fields = ["workspace", "project", "issue"]
diff --git a/apiserver/plane/app/serializers/page.py b/apiserver/plane/app/serializers/page.py
index b69221081..1fd2f4d3c 100644
--- a/apiserver/plane/app/serializers/page.py
+++ b/apiserver/plane/app/serializers/page.py
@@ -54,6 +54,8 @@ class PageSerializer(BaseSerializer):
         labels = validated_data.pop("labels", None)
         project_id = self.context["project_id"]
         owned_by_id = self.context["owned_by_id"]
+        description = self.context["description"]
+        description_binary = self.context["description_binary"]
         description_html = self.context["description_html"]
 
         # Get the workspace id from the project
@@ -62,6 +64,8 @@ class PageSerializer(BaseSerializer):
         # Create the page
         page = Page.objects.create(
             **validated_data,
+            description=description,
+            description_binary=description_binary,
             description_html=description_html,
             owned_by_id=owned_by_id,
             workspace_id=project.workspace_id,
diff --git a/apiserver/plane/app/serializers/project.py b/apiserver/plane/app/serializers/project.py
index cc7b7fbcb..73c8a85d9 100644
--- a/apiserver/plane/app/serializers/project.py
+++ b/apiserver/plane/app/serializers/project.py
@@ -90,17 +90,7 @@ class ProjectLiteSerializer(BaseSerializer):
 
 
 class ProjectListSerializer(DynamicBaseSerializer):
-    total_issues = serializers.IntegerField(read_only=True)
-    archived_issues = serializers.IntegerField(read_only=True)
-    archived_sub_issues = serializers.IntegerField(read_only=True)
-    draft_issues = serializers.IntegerField(read_only=True)
-    draft_sub_issues = serializers.IntegerField(read_only=True)
-    sub_issues = serializers.IntegerField(read_only=True)
     is_favorite = serializers.BooleanField(read_only=True)
-    total_members = serializers.IntegerField(read_only=True)
-    total_cycles = serializers.IntegerField(read_only=True)
-    total_modules = serializers.IntegerField(read_only=True)
-    is_member = serializers.BooleanField(read_only=True)
     sort_order = serializers.FloatField(read_only=True)
     member_role = serializers.IntegerField(read_only=True)
     anchor = serializers.CharField(read_only=True)
@@ -113,14 +103,9 @@ class ProjectListSerializer(DynamicBaseSerializer):
         if project_members is not None:
             # Filter members by the project ID
             return [
-                {
-                    "id": member.id,
-                    "member_id": member.member_id,
-                    "member__display_name": member.member.display_name,
-                    "member__avatar": member.member.avatar,
-                    "member__avatar_url": member.member.avatar_url,
-                }
+                member.member_id
                 for member in project_members
+                if member.is_active and not member.member.is_bot
             ]
         return []
 
@@ -134,10 +119,6 @@ class ProjectDetailSerializer(BaseSerializer):
     default_assignee = UserLiteSerializer(read_only=True)
     project_lead = UserLiteSerializer(read_only=True)
     is_favorite = serializers.BooleanField(read_only=True)
-    total_members = serializers.IntegerField(read_only=True)
-    total_cycles = serializers.IntegerField(read_only=True)
-    total_modules = serializers.IntegerField(read_only=True)
-    is_member = serializers.BooleanField(read_only=True)
     sort_order = serializers.FloatField(read_only=True)
     member_role = serializers.IntegerField(read_only=True)
     anchor = serializers.CharField(read_only=True)
diff --git a/apiserver/plane/app/serializers/webhook.py b/apiserver/plane/app/serializers/webhook.py
index fa4019f7a..1036b700c 100644
--- a/apiserver/plane/app/serializers/webhook.py
+++ b/apiserver/plane/app/serializers/webhook.py
@@ -116,7 +116,7 @@ class WebhookSerializer(DynamicBaseSerializer):
     class Meta:
         model = Webhook
         fields = "__all__"
-        read_only_fields = ["workspace", "secret_key"]
+        read_only_fields = ["workspace", "secret_key", "deleted_at"]
 
 
 class WebhookLogSerializer(DynamicBaseSerializer):
diff --git a/apiserver/plane/app/serializers/workspace.py b/apiserver/plane/app/serializers/workspace.py
index 49cd55bf7..52333c246 100644
--- a/apiserver/plane/app/serializers/workspace.py
+++ b/apiserver/plane/app/serializers/workspace.py
@@ -1,25 +1,40 @@
 # Third party imports
 from rest_framework import serializers
+from rest_framework import status
+from rest_framework.response import Response
 
 # Module imports
 from .base import BaseSerializer, DynamicBaseSerializer
 from .user import UserLiteSerializer, UserAdminLiteSerializer
 
+
 from plane.db.models import (
     Workspace,
     WorkspaceMember,
     WorkspaceMemberInvite,
     WorkspaceTheme,
     WorkspaceUserProperties,
+    WorkspaceUserLink,
+    UserRecentVisit,
+    Issue,
+    Page,
+    Project,
+    ProjectMember,
+    WorkspaceHomePreference,
+    Sticky,
+    WorkspaceUserPreference,
 )
 from plane.utils.constants import RESTRICTED_WORKSPACE_SLUGS
 
+# Django imports
+from django.core.validators import URLValidator
+from django.core.exceptions import ValidationError
+
 
 class WorkSpaceSerializer(DynamicBaseSerializer):
-    owner = UserLiteSerializer(read_only=True)
     total_members = serializers.IntegerField(read_only=True)
-    total_issues = serializers.IntegerField(read_only=True)
     logo_url = serializers.CharField(read_only=True)
+    role = serializers.IntegerField(read_only=True)
 
     def validate_slug(self, value):
         # Check if the slug is restricted
@@ -44,7 +59,7 @@ class WorkSpaceSerializer(DynamicBaseSerializer):
 class WorkspaceLiteSerializer(BaseSerializer):
     class Meta:
         model = Workspace
-        fields = ["name", "slug", "id"]
+        fields = ["name", "slug", "id", "logo_url"]
         read_only_fields = fields
 
 
@@ -75,9 +90,11 @@ class WorkspaceMemberAdminSerializer(DynamicBaseSerializer):
 
 
 class WorkSpaceMemberInviteSerializer(BaseSerializer):
-    workspace = WorkSpaceSerializer(read_only=True)
-    total_members = serializers.IntegerField(read_only=True)
-    created_by_detail = UserLiteSerializer(read_only=True, source="created_by")
+    workspace = WorkspaceLiteSerializer(read_only=True)
+    invite_link = serializers.SerializerMethodField()
+
+    def get_invite_link(self, obj):
+        return f"/workspace-invitations/?invitation_id={obj.id}&email={obj.email}&slug={obj.workspace.slug}"
 
     class Meta:
         model = WorkspaceMemberInvite
@@ -91,6 +108,7 @@ class WorkSpaceMemberInviteSerializer(BaseSerializer):
             "responded_at",
             "created_at",
             "updated_at",
+            "invite_link",
         ]
 
 
@@ -106,3 +124,183 @@ class WorkspaceUserPropertiesSerializer(BaseSerializer):
         model = WorkspaceUserProperties
         fields = "__all__"
         read_only_fields = ["workspace", "user"]
+
+
+class WorkspaceUserLinkSerializer(BaseSerializer):
+    class Meta:
+        model = WorkspaceUserLink
+        fields = "__all__"
+        read_only_fields = ["workspace", "owner"]
+
+    def to_internal_value(self, data):
+        url = data.get("url", "")
+        if url and not url.startswith(("http://", "https://")):
+            data["url"] = "http://" + url
+
+        return super().to_internal_value(data)
+
+    def validate_url(self, value):
+        url_validator = URLValidator()
+        try:
+            url_validator(value)
+        except ValidationError:
+            raise serializers.ValidationError({"error": "Invalid URL format."})
+
+        return value
+
+
+    def create(self, validated_data):
+        # Filtering the WorkspaceUserLink with the given url to check if the link already exists.
+
+        url = validated_data.get("url")
+
+        workspace_user_link = WorkspaceUserLink.objects.filter(
+            url=url,
+            workspace_id=validated_data.get("workspace_id"),
+            owner_id=validated_data.get("owner_id")
+        )
+
+        if workspace_user_link.exists():
+            raise serializers.ValidationError(
+                {"error": "URL already exists for this workspace and owner"}
+            )
+
+        return super().create(validated_data)
+
+    def update(self, instance, validated_data):
+        # Filtering the WorkspaceUserLink with the given url to check if the link already exists.
+
+        url = validated_data.get("url")
+
+        workspace_user_link = WorkspaceUserLink.objects.filter(
+                url=url,
+                workspace_id=instance.workspace_id,
+                owner=instance.owner
+            )
+
+        if workspace_user_link.exclude(pk=instance.id).exists():
+            raise serializers.ValidationError(
+                {"error": "URL already exists for this workspace and owner"}
+            )
+
+        return super().update(instance, validated_data)
+
+class IssueRecentVisitSerializer(serializers.ModelSerializer):
+    project_identifier = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Issue
+        fields = [
+            "id",
+            "name",
+            "state",
+            "priority",
+            "assignees",
+            "type",
+            "sequence_id",
+            "project_id",
+            "project_identifier",
+        ]
+
+    def get_project_identifier(self, obj):
+        project = obj.project
+
+        return project.identifier if project else None
+
+
+class ProjectRecentVisitSerializer(serializers.ModelSerializer):
+    project_members = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Project
+        fields = ["id", "name", "logo_props", "project_members", "identifier"]
+
+    def get_project_members(self, obj):
+        members = ProjectMember.objects.filter(
+            project_id=obj.id, member__is_bot=False, is_active=True
+        ).values_list("member", flat=True)
+
+        return members
+
+
+class PageRecentVisitSerializer(serializers.ModelSerializer):
+    project_id = serializers.SerializerMethodField()
+    project_identifier = serializers.SerializerMethodField()
+
+    class Meta:
+        model = Page
+        fields = [
+            "id",
+            "name",
+            "logo_props",
+            "project_id",
+            "owned_by",
+            "project_identifier",
+        ]
+
+    def get_project_id(self, obj):
+        return (
+            obj.project_id
+            if hasattr(obj, "project_id")
+            else obj.projects.values_list("id", flat=True).first()
+        )
+
+    def get_project_identifier(self, obj):
+        project = obj.projects.first()
+
+        return project.identifier if project else None
+
+
+def get_entity_model_and_serializer(entity_type):
+    entity_map = {
+        "issue": (Issue, IssueRecentVisitSerializer),
+        "page": (Page, PageRecentVisitSerializer),
+        "project": (Project, ProjectRecentVisitSerializer),
+    }
+    return entity_map.get(entity_type, (None, None))
+
+
+class WorkspaceRecentVisitSerializer(BaseSerializer):
+    entity_data = serializers.SerializerMethodField()
+
+    class Meta:
+        model = UserRecentVisit
+        fields = ["id", "entity_name", "entity_identifier", "entity_data", "visited_at"]
+        read_only_fields = ["workspace", "owner", "created_by", "updated_by"]
+
+    def get_entity_data(self, obj):
+        entity_name = obj.entity_name
+        entity_identifier = obj.entity_identifier
+
+        entity_model, entity_serializer = get_entity_model_and_serializer(entity_name)
+
+        if entity_model and entity_serializer:
+            try:
+                entity = entity_model.objects.get(pk=entity_identifier)
+
+                return entity_serializer(entity).data
+            except entity_model.DoesNotExist:
+                return None
+        return None
+
+
+class WorkspaceHomePreferenceSerializer(BaseSerializer):
+    class Meta:
+        model = WorkspaceHomePreference
+        fields = ["key", "is_enabled", "sort_order"]
+        read_only_fields = ["workspace", "created_by", "updated_by"]
+
+
+class StickySerializer(BaseSerializer):
+    class Meta:
+        model = Sticky
+        fields = "__all__"
+        read_only_fields = ["workspace", "owner"]
+        extra_kwargs = {"name": {"required": False}}
+
+
+class WorkspaceUserPreferenceSerializer(BaseSerializer):
+    class Meta:
+        model = WorkspaceUserPreference
+        fields = ["key", "is_pinned", "sort_order"]
+        read_only_fields = ["workspace", "created_by", "updated_by"]
diff --git a/apiserver/plane/app/urls/__init__.py b/apiserver/plane/app/urls/__init__.py
index 8798e8044..3be75536b 100644
--- a/apiserver/plane/app/urls/__init__.py
+++ b/apiserver/plane/app/urls/__init__.py
@@ -17,6 +17,7 @@ from .user import urlpatterns as user_urls
 from .views import urlpatterns as view_urls
 from .webhook import urlpatterns as webhook_urls
 from .workspace import urlpatterns as workspace_urls
+from .timezone import urlpatterns as timezone_urls
 
 urlpatterns = [
     *analytic_urls,
@@ -38,4 +39,5 @@ urlpatterns = [
     *workspace_urls,
     *api_urls,
     *webhook_urls,
+    *timezone_urls,
 ]
diff --git a/apiserver/plane/app/urls/analytic.py b/apiserver/plane/app/urls/analytic.py
index 668268350..abe18f2ad 100644
--- a/apiserver/plane/app/urls/analytic.py
+++ b/apiserver/plane/app/urls/analytic.py
@@ -7,6 +7,7 @@ from plane.app.views import (
     SavedAnalyticEndpoint,
     ExportAnalyticsEndpoint,
     DefaultAnalyticsEndpoint,
+    ProjectStatsEndpoint,
 )
 
 
@@ -43,4 +44,9 @@ urlpatterns = [
         DefaultAnalyticsEndpoint.as_view(),
         name="default-analytics",
     ),
+    path(
+        "workspaces/<str:slug>/project-stats/",
+        ProjectStatsEndpoint.as_view(),
+        name="project-analytics",
+    ),
 ]
diff --git a/apiserver/plane/app/urls/issue.py b/apiserver/plane/app/urls/issue.py
index 07dfa5112..6c5e45033 100644
--- a/apiserver/plane/app/urls/issue.py
+++ b/apiserver/plane/app/urls/issue.py
@@ -24,6 +24,10 @@ from plane.app.views import (
     IssueDetailEndpoint,
     IssueAttachmentV2Endpoint,
     IssueBulkUpdateDateEndpoint,
+    IssueVersionEndpoint,
+    IssueDescriptionVersionEndpoint,
+    IssueMetaEndpoint,
+    IssueDetailIdentifierEndpoint,
 )
 
 urlpatterns = [
@@ -256,4 +260,34 @@ urlpatterns = [
         IssueBulkUpdateDateEndpoint.as_view(),
         name="project-issue-dates",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/versions/",
+        IssueVersionEndpoint.as_view(),
+        name="page-versions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/versions/<uuid:pk>/",
+        IssueVersionEndpoint.as_view(),
+        name="page-versions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/description-versions/",
+        IssueDescriptionVersionEndpoint.as_view(),
+        name="page-versions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/description-versions/<uuid:pk>/",
+        IssueDescriptionVersionEndpoint.as_view(),
+        name="page-versions",
+    ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/issues/<uuid:issue_id>/meta/",
+        IssueMetaEndpoint.as_view(),
+        name="issue-meta",
+    ),
+    path(
+        "workspaces/<str:slug>/work-items/<str:project_identifier>-<str:issue_identifier>/",
+        IssueDetailIdentifierEndpoint.as_view(),
+        name="issue-detail-identifier",
+    ),
 ]
diff --git a/apiserver/plane/app/urls/page.py b/apiserver/plane/app/urls/page.py
index b49f1d4a2..f7eb7e424 100644
--- a/apiserver/plane/app/urls/page.py
+++ b/apiserver/plane/app/urls/page.py
@@ -8,6 +8,7 @@ from plane.app.views import (
     SubPagesEndpoint,
     PagesDescriptionViewSet,
     PageVersionEndpoint,
+    PageDuplicateEndpoint,
 )
 
 
@@ -78,4 +79,9 @@ urlpatterns = [
         PageVersionEndpoint.as_view(),
         name="page-versions",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/pages/<uuid:page_id>/duplicate/",
+        PageDuplicateEndpoint.as_view(),
+        name="page-duplicate",
+    ),
 ]
diff --git a/apiserver/plane/app/urls/project.py b/apiserver/plane/app/urls/project.py
index 4037402ab..d673d191e 100644
--- a/apiserver/plane/app/urls/project.py
+++ b/apiserver/plane/app/urls/project.py
@@ -23,6 +23,11 @@ urlpatterns = [
         ProjectViewSet.as_view({"get": "list", "post": "create"}),
         name="project",
     ),
+    path(
+        "workspaces/<str:slug>/projects/details/",
+        ProjectViewSet.as_view({"get": "list_detail"}),
+        name="project",
+    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:pk>/",
         ProjectViewSet.as_view(
diff --git a/apiserver/plane/app/urls/search.py b/apiserver/plane/app/urls/search.py
index bbea8093d..0bbbd9cf7 100644
--- a/apiserver/plane/app/urls/search.py
+++ b/apiserver/plane/app/urls/search.py
@@ -1,7 +1,7 @@
 from django.urls import path
 
 
-from plane.app.views import GlobalSearchEndpoint, IssueSearchEndpoint
+from plane.app.views import GlobalSearchEndpoint, IssueSearchEndpoint, SearchEndpoint
 
 
 urlpatterns = [
@@ -15,4 +15,9 @@ urlpatterns = [
         IssueSearchEndpoint.as_view(),
         name="project-issue-search",
     ),
+    path(
+        "workspaces/<str:slug>/entity-search/",
+        SearchEndpoint.as_view(),
+        name="entity-search",
+    ),
 ]
diff --git a/apiserver/plane/app/urls/timezone.py b/apiserver/plane/app/urls/timezone.py
new file mode 100644
index 000000000..ff14d029f
--- /dev/null
+++ b/apiserver/plane/app/urls/timezone.py
@@ -0,0 +1,8 @@
+from django.urls import path
+
+from plane.app.views import TimezoneEndpoint
+
+urlpatterns = [
+    # timezone endpoint
+    path("timezones/", TimezoneEndpoint.as_view(), name="timezone-list")
+]
diff --git a/apiserver/plane/app/urls/workspace.py b/apiserver/plane/app/urls/workspace.py
index d91fdb60b..f16fdb161 100644
--- a/apiserver/plane/app/urls/workspace.py
+++ b/apiserver/plane/app/urls/workspace.py
@@ -27,6 +27,11 @@ from plane.app.views import (
     WorkspaceFavoriteEndpoint,
     WorkspaceFavoriteGroupEndpoint,
     WorkspaceDraftIssueViewSet,
+    QuickLinkViewSet,
+    UserRecentVisitViewSet,
+    WorkspaceHomePreferenceViewSet,
+    WorkspaceStickyViewSet,
+    WorkspaceUserPreferenceViewSet,
 )
 
 
@@ -213,4 +218,56 @@ urlpatterns = [
         WorkspaceDraftIssueViewSet.as_view({"post": "create_draft_to_issue"}),
         name="workspace-drafts-issues",
     ),
+    # quick link
+    path(
+        "workspaces/<str:slug>/quick-links/",
+        QuickLinkViewSet.as_view({"get": "list", "post": "create"}),
+        name="workspace-quick-links",
+    ),
+    path(
+        "workspaces/<str:slug>/quick-links/<uuid:pk>/",
+        QuickLinkViewSet.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="workspace-quick-links",
+    ),
+    # Widgets
+    path(
+        "workspaces/<str:slug>/home-preferences/",
+        WorkspaceHomePreferenceViewSet.as_view(),
+        name="workspace-home-preference",
+    ),
+    path(
+        "workspaces/<str:slug>/home-preferences/<str:key>/",
+        WorkspaceHomePreferenceViewSet.as_view(),
+        name="workspace-home-preference",
+    ),
+    path(
+        "workspaces/<str:slug>/recent-visits/",
+        UserRecentVisitViewSet.as_view({"get": "list"}),
+        name="workspace-recent-visits",
+    ),
+    path(
+        "workspaces/<str:slug>/stickies/",
+        WorkspaceStickyViewSet.as_view({"get": "list", "post": "create"}),
+        name="workspace-sticky",
+    ),
+    path(
+        "workspaces/<str:slug>/stickies/<uuid:pk>/",
+        WorkspaceStickyViewSet.as_view(
+            {"get": "retrieve", "patch": "partial_update", "delete": "destroy"}
+        ),
+        name="workspace-sticky",
+    ),
+    # User Preference
+    path(
+        "workspaces/<str:slug>/sidebar-preferences/",
+        WorkspaceUserPreferenceViewSet.as_view(),
+        name="workspace-user-preference",
+    ),
+    path(
+        "workspaces/<str:slug>/sidebar-preferences/<str:key>/",
+        WorkspaceUserPreferenceViewSet.as_view(),
+        name="workspace-user-preference",
+    ),
 ]
diff --git a/apiserver/plane/app/views/__init__.py b/apiserver/plane/app/views/__init__.py
index 581a1065d..684179d90 100644
--- a/apiserver/plane/app/views/__init__.py
+++ b/apiserver/plane/app/views/__init__.py
@@ -41,10 +41,14 @@ from .workspace.base import (
 
 from .workspace.draft import WorkspaceDraftIssueViewSet
 
+from .workspace.home import WorkspaceHomePreferenceViewSet
+
 from .workspace.favorite import (
     WorkspaceFavoriteEndpoint,
     WorkspaceFavoriteGroupEndpoint,
 )
+from .workspace.recent_visit import UserRecentVisitViewSet
+from .workspace.user_preference import WorkspaceUserPreferenceViewSet
 
 from .workspace.member import (
     WorkSpaceMemberViewSet,
@@ -72,6 +76,8 @@ from .workspace.user import (
 from .workspace.estimate import WorkspaceEstimatesEndpoint
 from .workspace.module import WorkspaceModulesEndpoint
 from .workspace.cycle import WorkspaceCyclesEndpoint
+from .workspace.quick_link import QuickLinkViewSet
+from .workspace.sticky import WorkspaceStickyViewSet
 
 from .state.base import StateViewSet
 from .view.base import (
@@ -110,6 +116,8 @@ from .issue.base import (
     IssuePaginatedViewSet,
     IssueDetailEndpoint,
     IssueBulkUpdateDateEndpoint,
+    IssueMetaEndpoint,
+    IssueDetailIdentifierEndpoint,
 )
 
 from .issue.activity import IssueActivityEndpoint
@@ -136,6 +144,8 @@ from .issue.sub_issue import SubIssuesEndpoint
 
 from .issue.subscriber import IssueSubscriberViewSet
 
+from .issue.version import IssueVersionEndpoint, IssueDescriptionVersionEndpoint
+
 from .module.base import (
     ModuleViewSet,
     ModuleLinkViewSet,
@@ -155,10 +165,11 @@ from .page.base import (
     PageLogEndpoint,
     SubPagesEndpoint,
     PagesDescriptionViewSet,
+    PageDuplicateEndpoint,
 )
 from .page.version import PageVersionEndpoint
 
-from .search.base import GlobalSearchEndpoint
+from .search.base import GlobalSearchEndpoint, SearchEndpoint
 from .search.issue import IssueSearchEndpoint
 
 
@@ -181,6 +192,7 @@ from .analytic.base import (
     SavedAnalyticEndpoint,
     ExportAnalyticsEndpoint,
     DefaultAnalyticsEndpoint,
+    ProjectStatsEndpoint,
 )
 
 from .notification.base import (
@@ -204,3 +216,5 @@ from .error_404 import custom_404_view
 
 from .notification.base import MarkAllReadNotificationViewSet
 from .user.base import AccountEndpoint, ProfileEndpoint, UserSessionEndpoint
+
+from .timezone.base import TimezoneEndpoint
diff --git a/apiserver/plane/app/views/analytic/base.py b/apiserver/plane/app/views/analytic/base.py
index a36458406..631c6884a 100644
--- a/apiserver/plane/app/views/analytic/base.py
+++ b/apiserver/plane/app/views/analytic/base.py
@@ -3,7 +3,7 @@ from django.db.models import Count, F, Sum, Q
 from django.db.models.functions import ExtractMonth
 from django.utils import timezone
 from django.db.models.functions import Concat
-from django.db.models import Case, When, Value
+from django.db.models import Case, When, Value, OuterRef, Func
 from django.db import models
 
 # Third party imports
@@ -15,7 +15,16 @@ from plane.app.permissions import WorkSpaceAdminPermission
 from plane.app.serializers import AnalyticViewSerializer
 from plane.app.views.base import BaseAPIView, BaseViewSet
 from plane.bgtasks.analytic_plot_export import analytic_export_task
-from plane.db.models import AnalyticView, Issue, Workspace
+from plane.db.models import (
+    AnalyticView,
+    Issue,
+    Workspace,
+    Project,
+    ProjectMember,
+    Cycle,
+    Module,
+)
+
 from plane.utils.analytics_plot import build_graph_plot
 from plane.utils.issue_filters import issue_filters
 from plane.app.permissions import allow_permission, ROLE
@@ -441,3 +450,74 @@ class DefaultAnalyticsEndpoint(BaseAPIView):
             },
             status=status.HTTP_200_OK,
         )
+
+
+class ProjectStatsEndpoint(BaseAPIView):
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def get(self, request, slug):
+        fields = request.GET.get("fields", "").split(",")
+        project_ids = request.GET.get("project_ids", "")
+
+        valid_fields = {
+            "total_issues",
+            "completed_issues",
+            "total_members",
+            "total_cycles",
+            "total_modules",
+        }
+        requested_fields = set(filter(None, fields)) & valid_fields
+
+        if not requested_fields:
+            requested_fields = valid_fields
+
+        projects = Project.objects.filter(workspace__slug=slug)
+        if project_ids:
+            projects = projects.filter(id__in=project_ids.split(","))
+
+        annotations = {}
+        if "total_issues" in requested_fields:
+            annotations["total_issues"] = (
+                Issue.issue_objects.filter(project_id=OuterRef("pk"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+
+        if "completed_issues" in requested_fields:
+            annotations["completed_issues"] = (
+                Issue.issue_objects.filter(
+                    project_id=OuterRef("pk"), state__group="completed"
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+
+        if "total_cycles" in requested_fields:
+            annotations["total_cycles"] = (
+                Cycle.objects.filter(project_id=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+
+        if "total_modules" in requested_fields:
+            annotations["total_modules"] = (
+                Module.objects.filter(project_id=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+
+        if "total_members" in requested_fields:
+            annotations["total_members"] = (
+                ProjectMember.objects.filter(
+                    project_id=OuterRef("id"), member__is_bot=False, is_active=True
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+
+        projects = projects.annotate(**annotations).values("id", *requested_fields)
+        return Response(projects, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/asset/v2.py b/apiserver/plane/app/views/asset/v2.py
index 827c95908..da36b91a0 100644
--- a/apiserver/plane/app/views/asset/v2.py
+++ b/apiserver/plane/app/views/asset/v2.py
@@ -5,6 +5,7 @@ import uuid
 from django.conf import settings
 from django.http import HttpResponseRedirect
 from django.utils import timezone
+from django.db import IntegrityError
 
 # Third party imports
 from rest_framework import status
@@ -126,7 +127,13 @@ class UserAssetsV2Endpoint(BaseAPIView):
             )
 
         # Check if the file type is allowed
-        allowed_types = ["image/jpeg", "image/png", "image/webp", "image/jpg"]
+        allowed_types = [
+            "image/jpeg",
+            "image/png",
+            "image/webp",
+            "image/jpg",
+            "image/gif",
+        ]
         if type not in allowed_types:
             return Response(
                 {
@@ -673,15 +680,30 @@ class ProjectBulkAssetEndpoint(BaseAPIView):
             [self.save_project_cover(asset, project_id) for asset in assets]
 
         if asset.entity_type == FileAsset.EntityTypeContext.ISSUE_DESCRIPTION:
-            assets.update(issue_id=entity_id)
+            # For some cases, the bulk api is called after the issue is deleted creating
+            # an integrity error
+            try:
+                assets.update(issue_id=entity_id)
+            except IntegrityError:
+                pass
 
         if asset.entity_type == FileAsset.EntityTypeContext.COMMENT_DESCRIPTION:
-            assets.update(comment_id=entity_id)
+            # For some cases, the bulk api is called after the comment is deleted
+            # creating an integrity error
+            try:
+                assets.update(comment_id=entity_id)
+            except IntegrityError:
+                pass
 
         if asset.entity_type == FileAsset.EntityTypeContext.PAGE_DESCRIPTION:
             assets.update(page_id=entity_id)
 
         if asset.entity_type == FileAsset.EntityTypeContext.DRAFT_ISSUE_DESCRIPTION:
-            assets.update(draft_issue_id=entity_id)
+            # For some cases, the bulk api is called after the draft issue is deleted
+            # creating an integrity error
+            try:
+                assets.update(draft_issue_id=entity_id)
+            except IntegrityError:
+                pass
 
         return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apiserver/plane/app/views/cycle/base.py b/apiserver/plane/app/views/cycle/base.py
index 61ea9eed4..84a161619 100644
--- a/apiserver/plane/app/views/cycle/base.py
+++ b/apiserver/plane/app/views/cycle/base.py
@@ -1,5 +1,7 @@
 # Python imports
 import json
+import pytz
+
 
 # Django imports
 from django.contrib.postgres.aggregates import ArrayAgg
@@ -45,6 +47,7 @@ from plane.db.models import (
     User,
     Project,
     ProjectMember,
+    UserRecentVisit,
 )
 from plane.utils.analytics_plot import burndown_plot
 from plane.bgtasks.recent_visited_task import recent_visited_task
@@ -52,6 +55,7 @@ from plane.bgtasks.recent_visited_task import recent_visited_task
 # Module imports
 from .. import BaseAPIView, BaseViewSet
 from plane.bgtasks.webhook_task import model_activity
+from plane.utils.timezone_converter import convert_to_utc, user_timezone_converter
 
 
 class CycleViewSet(BaseViewSet):
@@ -67,6 +71,19 @@ class CycleViewSet(BaseViewSet):
             project_id=self.kwargs.get("project_id"),
             workspace__slug=self.kwargs.get("slug"),
         )
+
+        project = Project.objects.get(id=self.kwargs.get("project_id"))
+
+        # Fetch project for the specific record or pass project_id dynamically
+        project_timezone = project.timezone
+
+        # Convert the current time (timezone.now()) to the project's timezone
+        local_tz = pytz.timezone(project_timezone)
+        current_time_in_project_tz = timezone.now().astimezone(local_tz)
+
+        # Convert project local time back to UTC for comparison (start_date is stored in UTC)
+        current_time_in_utc = current_time_in_project_tz.astimezone(pytz.utc)
+
         return self.filter_queryset(
             super()
             .get_queryset()
@@ -116,15 +133,27 @@ class CycleViewSet(BaseViewSet):
                     ),
                 )
             )
+            .annotate(
+                cancelled_issues=Count(
+                    "issue_cycle__issue__id",
+                    distinct=True,
+                    filter=Q(
+                        issue_cycle__issue__state__group__in=["cancelled"],
+                        issue_cycle__issue__archived_at__isnull=True,
+                        issue_cycle__issue__is_draft=False,
+                        issue_cycle__deleted_at__isnull=True,
+                    ),
+                )
+            )
             .annotate(
                 status=Case(
                     When(
-                        Q(start_date__lte=timezone.now())
-                        & Q(end_date__gte=timezone.now()),
+                        Q(start_date__lte=current_time_in_utc)
+                        & Q(end_date__gte=current_time_in_utc),
                         then=Value("CURRENT"),
                     ),
-                    When(start_date__gt=timezone.now(), then=Value("UPCOMING")),
-                    When(end_date__lt=timezone.now(), then=Value("COMPLETED")),
+                    When(start_date__gt=current_time_in_utc, then=Value("UPCOMING")),
+                    When(end_date__lt=current_time_in_utc, then=Value("COMPLETED")),
                     When(
                         Q(start_date__isnull=True) & Q(end_date__isnull=True),
                         then=Value("DRAFT"),
@@ -160,10 +189,22 @@ class CycleViewSet(BaseViewSet):
         # Update the order by
         queryset = queryset.order_by("-is_favorite", "-created_at")
 
+        project = Project.objects.get(id=self.kwargs.get("project_id"))
+
+        # Fetch project for the specific record or pass project_id dynamically
+        project_timezone = project.timezone
+
+        # Convert the current time (timezone.now()) to the project's timezone
+        local_tz = pytz.timezone(project_timezone)
+        current_time_in_project_tz = timezone.now().astimezone(local_tz)
+
+        # Convert project local time back to UTC for comparison (start_date is stored in UTC)
+        current_time_in_utc = current_time_in_project_tz.astimezone(pytz.utc)
+
         # Current Cycle
         if cycle_view == "current":
             queryset = queryset.filter(
-                start_date__lte=timezone.now(), end_date__gte=timezone.now()
+                start_date__lte=current_time_in_utc, end_date__gte=current_time_in_utc
             )
 
             data = queryset.values(
@@ -186,11 +227,14 @@ class CycleViewSet(BaseViewSet):
                 "is_favorite",
                 "total_issues",
                 "completed_issues",
+                "cancelled_issues",
                 "assignee_ids",
                 "status",
                 "version",
                 "created_by",
             )
+            datetime_fields = ["start_date", "end_date"]
+            data = user_timezone_converter(data, datetime_fields, project_timezone)
 
             if data:
                 return Response(data, status=status.HTTP_200_OK)
@@ -215,12 +259,17 @@ class CycleViewSet(BaseViewSet):
             # meta fields
             "is_favorite",
             "total_issues",
+            "cancelled_issues",
             "completed_issues",
             "assignee_ids",
             "status",
             "version",
             "created_by",
         )
+        datetime_fields = ["start_date", "end_date"]
+        data = user_timezone_converter(
+            data, datetime_fields, request.user.user_timezone
+        )
         return Response(data, status=status.HTTP_200_OK)
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
@@ -232,7 +281,9 @@ class CycleViewSet(BaseViewSet):
             request.data.get("start_date", None) is not None
             and request.data.get("end_date", None) is not None
         ):
-            serializer = CycleWriteSerializer(data=request.data)
+            serializer = CycleWriteSerializer(
+                data=request.data, context={"project_id": project_id}
+            )
             if serializer.is_valid():
                 serializer.save(project_id=project_id, owned_by=request.user)
                 cycle = (
@@ -267,6 +318,11 @@ class CycleViewSet(BaseViewSet):
                     .first()
                 )
 
+                datetime_fields = ["start_date", "end_date"]
+                cycle = user_timezone_converter(
+                    cycle, datetime_fields, request.user.user_timezone
+                )
+
                 # Send the model activity
                 model_activity.delay(
                     model_name="cycle",
@@ -319,7 +375,9 @@ class CycleViewSet(BaseViewSet):
                     status=status.HTTP_400_BAD_REQUEST,
                 )
 
-        serializer = CycleWriteSerializer(cycle, data=request.data, partial=True)
+        serializer = CycleWriteSerializer(
+            cycle, data=request.data, partial=True, context={"project_id": project_id}
+        )
         if serializer.is_valid():
             serializer.save()
             cycle = queryset.values(
@@ -349,6 +407,11 @@ class CycleViewSet(BaseViewSet):
                 "created_by",
             ).first()
 
+            datetime_fields = ["start_date", "end_date"]
+            cycle = user_timezone_converter(
+                cycle, datetime_fields, request.user.user_timezone
+            )
+
             # Send the model activity
             model_activity.delay(
                 model_name="cycle",
@@ -417,6 +480,10 @@ class CycleViewSet(BaseViewSet):
             )
 
         queryset = queryset.first()
+        datetime_fields = ["start_date", "end_date"]
+        data = user_timezone_converter(
+            data, datetime_fields, request.user.user_timezone
+        )
 
         recent_visited_task.delay(
             slug=slug,
@@ -477,6 +544,13 @@ class CycleViewSet(BaseViewSet):
             entity_identifier=pk,
             project_id=project_id,
         ).delete()
+        # Delete the cycle from recent visits
+        UserRecentVisit.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+            entity_identifier=pk,
+            entity_name="cycle",
+        ).delete(soft=False)
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
@@ -492,6 +566,18 @@ class CycleDateCheckEndpoint(BaseAPIView):
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
+        is_start_date_end_date_equal = (
+            True if str(start_date) == str(end_date) else False
+        )
+        start_date = convert_to_utc(
+            date=str(start_date), project_id=project_id, is_start_date=True
+        )
+        end_date = convert_to_utc(
+            date=str(end_date),
+            project_id=project_id,
+            is_start_date_end_date_equal=is_start_date_end_date_equal,
+        )
+
         # Check if any cycle intersects in the given interval
         cycles = Cycle.objects.filter(
             Q(workspace__slug=slug)
diff --git a/apiserver/plane/app/views/dashboard/base.py b/apiserver/plane/app/views/dashboard/base.py
index 8ccce092e..ff67bb73b 100644
--- a/apiserver/plane/app/views/dashboard/base.py
+++ b/apiserver/plane/app/views/dashboard/base.py
@@ -32,15 +32,15 @@ from plane.app.serializers import (
     WidgetSerializer,
 )
 from plane.db.models import (
-    Dashboard,
-    DashboardWidget,
+    DeprecatedDashboard,
+    DeprecatedDashboardWidget,
     Issue,
     IssueActivity,
     FileAsset,
     IssueLink,
     IssueRelation,
     Project,
-    Widget,
+    DeprecatedWidget,
     WorkspaceMember,
     CycleIssue,
 )
@@ -53,10 +53,10 @@ from .. import BaseAPIView
 def dashboard_overview_stats(self, request, slug):
     assigned_issues = (
         Issue.issue_objects.filter(
+            (Q(assignees__in=[request.user]) & Q(issue_assignee__deleted_at__isnull=True)),
             project__project_projectmember__is_active=True,
             project__project_projectmember__member=request.user,
             workspace__slug=slug,
-            assignees__in=[request.user],
         )
         .filter(
             Q(
@@ -133,10 +133,13 @@ def dashboard_overview_stats(self, request, slug):
 
     completed_issues_count = (
         Issue.issue_objects.filter(
+            (
+                Q(assignees__in=[request.user])
+                & Q(issue_assignee__deleted_at__isnull=True)
+            ),
             workspace__slug=slug,
             project__project_projectmember__is_active=True,
             project__project_projectmember__member=request.user,
-            assignees__in=[request.user],
             state__group="completed",
         )
         .filter(
@@ -176,10 +179,13 @@ def dashboard_assigned_issues(self, request, slug):
     # get all the assigned issues
     assigned_issues = (
         Issue.issue_objects.filter(
+            (
+                Q(assignees__in=[request.user])
+                & Q(issue_assignee__deleted_at__isnull=True)
+            ),
             workspace__slug=slug,
             project__project_projectmember__member=request.user,
             project__project_projectmember__is_active=True,
-            assignees__in=[request.user],
         )
         .filter(**filters)
         .select_related("workspace", "project", "state", "parent")
@@ -687,7 +693,7 @@ class DashboardEndpoint(BaseAPIView):
         if not dashboard_id:
             dashboard_type = request.GET.get("dashboard_type", None)
             if dashboard_type == "home":
-                dashboard, created = Dashboard.objects.get_or_create(
+                dashboard, created = DeprecatedDashboard.objects.get_or_create(
                     type_identifier=dashboard_type,
                     owned_by=request.user,
                     is_default=True,
@@ -707,24 +713,24 @@ class DashboardEndpoint(BaseAPIView):
 
                     updated_dashboard_widgets = []
                     for widget_key in widgets_to_fetch:
-                        widget = Widget.objects.filter(key=widget_key).values_list(
-                            "id", flat=True
-                        )
+                        widget = DeprecatedWidget.objects.filter(
+                            key=widget_key
+                        ).values_list("id", flat=True)
                         if widget:
                             updated_dashboard_widgets.append(
-                                DashboardWidget(
+                                DeprecatedDashboardWidget(
                                     widget_id=widget, dashboard_id=dashboard.id
                                 )
                             )
 
-                    DashboardWidget.objects.bulk_create(
+                    DeprecatedDashboardWidget.objects.bulk_create(
                         updated_dashboard_widgets, batch_size=100
                     )
 
                 widgets = (
-                    Widget.objects.annotate(
+                    DeprecatedWidget.objects.annotate(
                         is_visible=Exists(
-                            DashboardWidget.objects.filter(
+                            DeprecatedDashboardWidget.objects.filter(
                                 widget_id=OuterRef("pk"),
                                 dashboard_id=dashboard.id,
                                 is_visible=True,
@@ -733,7 +739,7 @@ class DashboardEndpoint(BaseAPIView):
                     )
                     .annotate(
                         dashboard_filters=Subquery(
-                            DashboardWidget.objects.filter(
+                            DeprecatedDashboardWidget.objects.filter(
                                 widget_id=OuterRef("pk"),
                                 dashboard_id=dashboard.id,
                                 filters__isnull=False,
@@ -792,7 +798,7 @@ class DashboardEndpoint(BaseAPIView):
 
 class WidgetsEndpoint(BaseAPIView):
     def patch(self, request, dashboard_id, widget_id):
-        dashboard_widget = DashboardWidget.objects.filter(
+        dashboard_widget = DeprecatedDashboardWidget.objects.filter(
             widget_id=widget_id, dashboard_id=dashboard_id
         ).first()
         dashboard_widget.is_visible = request.data.get(
diff --git a/apiserver/plane/app/views/external/base.py b/apiserver/plane/app/views/external/base.py
index 1dfbc421a..5643da226 100644
--- a/apiserver/plane/app/views/external/base.py
+++ b/apiserver/plane/app/views/external/base.py
@@ -1,71 +1,171 @@
-# Python imports
-import requests
+# Python import
 import os
+from typing import List, Dict, Tuple
 
-# Third party imports
+# Third party import
 from openai import OpenAI
-from rest_framework.response import Response
+import requests
+
 from rest_framework import status
+from rest_framework.response import Response
 
-# Django imports
-
-# Module imports
-from ..base import BaseAPIView
-from plane.app.permissions import allow_permission, ROLE
-from plane.db.models import Workspace, Project
-from plane.app.serializers import ProjectLiteSerializer, WorkspaceLiteSerializer
+# Module import
+from plane.app.permissions import ROLE, allow_permission
+from plane.app.serializers import (ProjectLiteSerializer,
+                                   WorkspaceLiteSerializer)
+from plane.db.models import Project, Workspace
 from plane.license.utils.instance_value import get_configuration_value
+from plane.utils.exception_logger import log_exception
 
+from ..base import BaseAPIView
+
+
+class LLMProvider:
+    """Base class for LLM provider configurations"""
+    name: str = ""
+    models: List[str] = []
+    default_model: str = ""
+
+    @classmethod
+    def get_config(cls) -> Dict[str, str | List[str]]:
+        return {
+            "name": cls.name,
+            "models": cls.models,
+            "default_model": cls.default_model,
+        }
+
+class OpenAIProvider(LLMProvider):
+    name = "OpenAI"
+    models = ["gpt-3.5-turbo", "gpt-4o-mini", "gpt-4o", "o1-mini", "o1-preview"]
+    default_model = "gpt-4o-mini"
+
+class AnthropicProvider(LLMProvider):
+    name = "Anthropic"
+    models = [
+        "claude-3-5-sonnet-20240620",
+        "claude-3-haiku-20240307",
+        "claude-3-opus-20240229",
+        "claude-3-sonnet-20240229",
+        "claude-2.1",
+        "claude-2",
+        "claude-instant-1.2",
+        "claude-instant-1"
+    ]
+    default_model = "claude-3-sonnet-20240229"
+
+class GeminiProvider(LLMProvider):
+    name = "Gemini"
+    models = ["gemini-pro", "gemini-1.5-pro-latest", "gemini-pro-vision"]
+    default_model = "gemini-pro"
+
+SUPPORTED_PROVIDERS = {
+    "openai": OpenAIProvider,
+    "anthropic": AnthropicProvider,
+    "gemini": GeminiProvider,
+}
+
+def get_llm_config() -> Tuple[str | None, str | None, str | None]:
+    """
+    Helper to get LLM configuration values, returns:
+        - api_key, model, provider
+    """
+    api_key, provider_key, model = get_configuration_value([
+        {
+            "key": "LLM_API_KEY",
+            "default": os.environ.get("LLM_API_KEY", None),
+        },
+        {
+            "key": "LLM_PROVIDER",
+            "default": os.environ.get("LLM_PROVIDER", "openai"),
+        },
+        {
+            "key": "LLM_MODEL",
+            "default": os.environ.get("LLM_MODEL", None),
+        },
+    ])
+
+    provider = SUPPORTED_PROVIDERS.get(provider_key.lower())
+    if not provider:
+        log_exception(ValueError(f"Unsupported provider: {provider_key}"))
+        return None, None, None
+
+    if not api_key:
+        log_exception(ValueError(f"Missing API key for provider: {provider.name}"))
+        return None, None, None
+
+    # If no model specified, use provider's default
+    if not model:
+        model = provider.default_model
+
+    # Validate model is supported by provider
+    if model not in provider.models:
+        log_exception(ValueError(
+            f"Model {model} not supported by {provider.name}. "
+            f"Supported models: {', '.join(provider.models)}"
+        ))
+        return None, None, None
+
+    return api_key, model, provider_key
+
+
+def get_llm_response(task, prompt, api_key: str, model: str, provider: str) -> Tuple[str | None, str | None]:
+    """Helper to get LLM completion response"""
+    final_text = task + "\n" + prompt
+    try:
+        # For Gemini, prepend provider name to model
+        if provider.lower() == "gemini":
+            model = f"gemini/{model}"
+
+        client = OpenAI(api_key=api_key)
+        chat_completion = client.chat.completions.create(
+            model=model,
+            messages=[
+                {"role": "user", "content": final_text}
+            ]
+        )
+        text = chat_completion.choices[0].message.content
+        return text, None
+    except Exception as e:
+        log_exception(e)
+        error_type = e.__class__.__name__
+        if error_type == "AuthenticationError":
+            return None, f"Invalid API key for {provider}"
+        elif error_type == "RateLimitError":
+            return None, f"Rate limit exceeded for {provider}"
+        else:
+            return None, f"Error occurred while generating response from {provider}"
 
 class GPTIntegrationEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER])
     def post(self, request, slug, project_id):
-        OPENAI_API_KEY, GPT_ENGINE = get_configuration_value(
-            [
-                {
-                    "key": "OPENAI_API_KEY",
-                    "default": os.environ.get("OPENAI_API_KEY", None),
-                },
-                {
-                    "key": "GPT_ENGINE",
-                    "default": os.environ.get("GPT_ENGINE", "gpt-3.5-turbo"),
-                },
-            ]
-        )
+        api_key, model, provider = get_llm_config()
 
-        # Get the configuration value
-        # Check the keys
-        if not OPENAI_API_KEY or not GPT_ENGINE:
+        if not api_key or not model or not provider:
             return Response(
-                {"error": "OpenAI API key and engine is required"},
+                {"error": "LLM provider API key and model are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        prompt = request.data.get("prompt", False)
         task = request.data.get("task", False)
-
         if not task:
             return Response(
                 {"error": "Task is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-        final_text = task + "\n" + prompt
-
-        client = OpenAI(api_key=OPENAI_API_KEY)
-
-        response = client.chat.completions.create(
-            model=GPT_ENGINE, messages=[{"role": "user", "content": final_text}]
-        )
+        text, error = get_llm_response(task, request.data.get("prompt", False), api_key, model, provider)
+        if not text and error:
+            return Response(
+                {"error": "An internal error has occurred."},
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
 
         workspace = Workspace.objects.get(slug=slug)
         project = Project.objects.get(pk=project_id)
 
-        text = response.choices[0].message.content.strip()
-        text_html = text.replace("\n", "<br/>")
         return Response(
             {
                 "response": text,
-                "response_html": text_html,
+                "response_html": text.replace("\n", "<br/>"),
                 "project_detail": ProjectLiteSerializer(project).data,
                 "workspace_detail": WorkspaceLiteSerializer(workspace).data,
             },
@@ -76,47 +176,33 @@ class GPTIntegrationEndpoint(BaseAPIView):
 class WorkspaceGPTIntegrationEndpoint(BaseAPIView):
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
     def post(self, request, slug):
-        OPENAI_API_KEY, GPT_ENGINE = get_configuration_value(
-            [
-                {
-                    "key": "OPENAI_API_KEY",
-                    "default": os.environ.get("OPENAI_API_KEY", None),
-                },
-                {
-                    "key": "GPT_ENGINE",
-                    "default": os.environ.get("GPT_ENGINE", "gpt-3.5-turbo"),
-                },
-            ]
-        )
+        api_key, model, provider = get_llm_config()
 
-        # Get the configuration value
-        # Check the keys
-        if not OPENAI_API_KEY or not GPT_ENGINE:
+        if not api_key or not model or not provider:
             return Response(
-                {"error": "OpenAI API key and engine is required"},
+                {"error": "LLM provider API key and model are required"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
 
-        prompt = request.data.get("prompt", False)
         task = request.data.get("task", False)
-
         if not task:
             return Response(
                 {"error": "Task is required"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-        final_text = task + "\n" + prompt
+        text, error = get_llm_response(task, request.data.get("prompt", False), api_key, model, provider)
+        if not text and error:
+            return Response(
+                {"error": "An internal error has occurred."},
+                status=status.HTTP_500_INTERNAL_SERVER_ERROR,
+            )
 
-        client = OpenAI(api_key=OPENAI_API_KEY)
-
-        response = client.chat.completions.create(
-            model=GPT_ENGINE, messages=[{"role": "user", "content": final_text}]
-        )
-
-        text = response.choices[0].message.content.strip()
-        text_html = text.replace("\n", "<br/>")
         return Response(
-            {"response": text, "response_html": text_html}, status=status.HTTP_200_OK
+            {
+                "response": text,
+                "response_html": text.replace("\n", "<br/>"),
+            },
+            status=status.HTTP_200_OK,
         )
 
 
diff --git a/apiserver/plane/app/views/intake/base.py b/apiserver/plane/app/views/intake/base.py
index 8647117c5..631fe80da 100644
--- a/apiserver/plane/app/views/intake/base.py
+++ b/apiserver/plane/app/views/intake/base.py
@@ -174,14 +174,17 @@ class IntakeIssueViewSet(BaseViewSet):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
-        intake_id = Intake.objects.filter(
+        intake = Intake.objects.filter(
             workspace__slug=slug, project_id=project_id
         ).first()
+        if not intake:
+            return Response({"error": "Intake not found"}, status=status.HTTP_404_NOT_FOUND)
+
         project = Project.objects.get(pk=project_id)
         filters = issue_filters(request.GET, "GET", "issue__")
         intake_issue = (
             IntakeIssue.objects.filter(
-                intake_id=intake_id.id, project_id=project_id, **filters
+                intake_id=intake.id, project_id=project_id, **filters
             )
             .select_related("issue")
             .prefetch_related("issue__labels")
diff --git a/apiserver/plane/app/views/issue/attachment.py b/apiserver/plane/app/views/issue/attachment.py
index 4427227f1..d519a5269 100644
--- a/apiserver/plane/app/views/issue/attachment.py
+++ b/apiserver/plane/app/views/issue/attachment.py
@@ -120,10 +120,12 @@ class IssueAttachmentV2Endpoint(BaseAPIView):
 
         # Get the presigned URL
         storage = S3Storage(request=request)
+
         # Generate a presigned URL to share an S3 object
         presigned_url = storage.generate_presigned_post(
             object_name=asset_key, file_type=type, file_size=size_limit
         )
+
         # Return the presigned URL
         return Response(
             {
diff --git a/apiserver/plane/app/views/issue/base.py b/apiserver/plane/app/views/issue/base.py
index d0c614368..48ea2f6bc 100644
--- a/apiserver/plane/app/views/issue/base.py
+++ b/apiserver/plane/app/views/issue/base.py
@@ -44,6 +44,7 @@ from plane.db.models import (
     Project,
     ProjectMember,
     CycleIssue,
+    UserRecentVisit,
 )
 from plane.utils.grouper import (
     issue_group_values,
@@ -54,10 +55,11 @@ from plane.utils.issue_filters import issue_filters
 from plane.utils.order_queryset import order_issue_queryset
 from plane.utils.paginator import GroupedOffsetPaginator, SubGroupedOffsetPaginator
 from .. import BaseAPIView, BaseViewSet
-from plane.utils.user_timezone_converter import user_timezone_converter
+from plane.utils.timezone_converter import user_timezone_converter
 from plane.bgtasks.recent_visited_task import recent_visited_task
 from plane.utils.global_paginator import paginate
 from plane.bgtasks.webhook_task import model_activity
+from plane.bgtasks.issue_description_version_task import issue_description_version_task
 
 
 class IssueListEndpoint(BaseAPIView):
@@ -428,6 +430,13 @@ class IssueViewSet(BaseViewSet):
                 slug=slug,
                 origin=request.META.get("HTTP_ORIGIN"),
             )
+            # updated issue description version
+            issue_description_version_task.delay(
+                updated_issue=json.dumps(request.data, cls=DjangoJSONEncoder),
+                issue_id=str(serializer.data["id"]),
+                user_id=request.user.id,
+                is_creating=True,
+            )
             return Response(issue, status=status.HTTP_201_CREATED)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -538,7 +547,7 @@ class IssueViewSet(BaseViewSet):
             )
 
         """
-        if the role is guest and guest_view_all_features is false and owned by is not 
+        if the role is guest and guest_view_all_features is false and owned by is not
         the requesting user then dont show the issue
         """
 
@@ -649,6 +658,12 @@ class IssueViewSet(BaseViewSet):
                 slug=slug,
                 origin=request.META.get("HTTP_ORIGIN"),
             )
+            # updated issue description version
+            issue_description_version_task.delay(
+                updated_issue=current_instance,
+                issue_id=str(serializer.data.get("id", None)),
+                user_id=request.user.id,
+            )
             return Response(status=status.HTTP_204_NO_CONTENT)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
@@ -657,6 +672,13 @@ class IssueViewSet(BaseViewSet):
         issue = Issue.objects.get(workspace__slug=slug, project_id=project_id, pk=pk)
 
         issue.delete()
+        # delete the issue from recent visits
+        UserRecentVisit.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+            entity_identifier=pk,
+            entity_name="issue",
+        ).delete(soft=False)
         issue_activity.delay(
             type="issue.activity.deleted",
             requested_data=json.dumps({"issue_id": str(pk)}),
@@ -1074,3 +1096,192 @@ class IssueBulkUpdateDateEndpoint(BaseAPIView):
         return Response(
             {"message": "Issues updated successfully"}, status=status.HTTP_200_OK
         )
+
+
+class IssueMetaEndpoint(BaseAPIView):
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="PROJECT")
+    def get(self, request, slug, project_id, issue_id):
+        issue = Issue.issue_objects.only("sequence_id", "project__identifier").get(
+            id=issue_id, project_id=project_id, workspace__slug=slug
+        )
+        return Response(
+            {
+                "sequence_id": issue.sequence_id,
+                "project_identifier": issue.project.identifier,
+            },
+            status=status.HTTP_200_OK,
+        )
+
+
+class IssueDetailIdentifierEndpoint(BaseAPIView):
+
+    def strict_str_to_int(self, s):
+        if not s.isdigit() and not (s.startswith('-') and s[1:].isdigit()):
+            raise ValueError("Invalid integer string")
+        return int(s)
+
+    def get(self, request, slug, project_identifier, issue_identifier):
+
+        # Check if the issue identifier is a valid integer
+        try:
+            issue_identifier = self.strict_str_to_int(issue_identifier)
+        except ValueError:
+            return Response(
+                {"error": "Invalid issue identifier"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Fetch the project
+        project = Project.objects.get(
+            identifier__iexact=project_identifier,
+            workspace__slug=slug,
+        )
+
+        # Check if the user is a member of the project
+        if not ProjectMember.objects.filter(
+            workspace__slug=slug,
+            project_id=project.id,
+            member=request.user,
+            is_active=True,
+        ).exists():
+            return Response(
+                {"error": "You are not allowed to view this issue"},
+                status=status.HTTP_403_FORBIDDEN,
+            )
+
+        # Fetch the issue
+        issue = (
+            Issue.issue_objects.filter(project_id=project.id)
+            .filter(workspace__slug=slug)
+            .select_related("workspace", "project", "state", "parent")
+            .prefetch_related("assignees", "labels", "issue_module__module")
+            .annotate(
+                cycle_id=Subquery(
+                    CycleIssue.objects.filter(issue=OuterRef("id")).values("cycle_id")[
+                        :1
+                    ]
+                )
+            )
+            .annotate(
+                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                attachment_count=FileAsset.objects.filter(
+                    issue_id=OuterRef("id"),
+                    entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+                )
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .annotate(
+                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
+                .order_by()
+                .annotate(count=Func(F("id"), function="Count"))
+                .values("count")
+            )
+            .filter(sequence_id=issue_identifier)
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "labels__id",
+                        distinct=True,
+                        filter=Q(
+                            ~Q(labels__id__isnull=True)
+                            & Q(label_issue__deleted_at__isnull=True)
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "assignees__id",
+                        distinct=True,
+                        filter=Q(
+                            ~Q(assignees__id__isnull=True)
+                            & Q(assignees__member_project__is_active=True)
+                            & Q(issue_assignee__deleted_at__isnull=True)
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                module_ids=Coalesce(
+                    ArrayAgg(
+                        "issue_module__module_id",
+                        distinct=True,
+                        filter=Q(
+                            ~Q(issue_module__module_id__isnull=True)
+                            & Q(issue_module__module__archived_at__isnull=True)
+                            & Q(issue_module__deleted_at__isnull=True)
+                        ),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_reactions",
+                    queryset=IssueReaction.objects.select_related("issue", "actor"),
+                )
+            )
+            .prefetch_related(
+                Prefetch(
+                    "issue_link",
+                    queryset=IssueLink.objects.select_related("created_by"),
+                )
+            )
+            .annotate(
+                is_subscribed=Exists(
+                    IssueSubscriber.objects.filter(
+                            workspace__slug=slug,
+                            project_id=project.id,
+                        issue__sequence_id=issue_identifier,
+                        subscriber=request.user,
+                    )
+                )
+            )
+        ).first()
+
+        # Check if the issue exists
+        if not issue:
+            return Response(
+                {"error": "The required object does not exist."},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        """
+        if the role is guest and guest_view_all_features is false and owned by is not
+        the requesting user then dont show the issue
+        """
+
+        if (
+            ProjectMember.objects.filter(
+                workspace__slug=slug,
+                project_id=project.id,
+                member=request.user,
+                role=5,
+                is_active=True,
+            ).exists()
+            and not project.guest_view_all_features
+            and not issue.created_by == request.user
+        ):
+            return Response(
+                {"error": "You are not allowed to view this issue"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        recent_visited_task.delay(
+            slug=slug,
+            entity_name="issue",
+            entity_identifier=str(issue.id),
+            user_id=str(request.user.id),
+            project_id=str(project.id),
+        )
+
+        # Serialize the issue
+        serializer = IssueDetailSerializer(issue, expand=self.expand)
+        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/issue/comment.py b/apiserver/plane/app/views/issue/comment.py
index d072bb881..91d27bff2 100644
--- a/apiserver/plane/app/views/issue/comment.py
+++ b/apiserver/plane/app/views/issue/comment.py
@@ -5,6 +5,7 @@ import json
 from django.utils import timezone
 from django.db.models import Exists
 from django.core.serializers.json import DjangoJSONEncoder
+from django.db import IntegrityError
 
 # Third Party imports
 from rest_framework.response import Response
@@ -164,24 +165,32 @@ class CommentReactionViewSet(BaseViewSet):
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def create(self, request, slug, project_id, comment_id):
-        serializer = CommentReactionSerializer(data=request.data)
-        if serializer.is_valid():
-            serializer.save(
-                project_id=project_id, actor_id=request.user.id, comment_id=comment_id
+        try:
+            serializer = CommentReactionSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(
+                    project_id=project_id,
+                    actor_id=request.user.id,
+                    comment_id=comment_id,
+                )
+                issue_activity.delay(
+                    type="comment_reaction.activity.created",
+                    requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                    actor_id=str(request.user.id),
+                    issue_id=None,
+                    project_id=str(project_id),
+                    current_instance=None,
+                    epoch=int(timezone.now().timestamp()),
+                    notification=True,
+                    origin=request.META.get("HTTP_ORIGIN"),
+                )
+                return Response(serializer.data, status=status.HTTP_201_CREATED)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError:
+            return Response(
+                {"error": "Reaction already exists for the user"},
+                status=status.HTTP_400_BAD_REQUEST,
             )
-            issue_activity.delay(
-                type="comment_reaction.activity.created",
-                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                actor_id=str(request.user.id),
-                issue_id=None,
-                project_id=str(project_id),
-                current_instance=None,
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=request.META.get("HTTP_ORIGIN"),
-            )
-            return Response(serializer.data, status=status.HTTP_201_CREATED)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def destroy(self, request, slug, project_id, comment_id, reaction_code):
diff --git a/apiserver/plane/app/views/issue/label.py b/apiserver/plane/app/views/issue/label.py
index b8a960161..79a8a7770 100644
--- a/apiserver/plane/app/views/issue/label.py
+++ b/apiserver/plane/app/views/issue/label.py
@@ -35,7 +35,9 @@ class LabelViewSet(BaseViewSet):
             .order_by("sort_order")
         )
 
-    @invalidate_cache(path="/api/workspaces/:slug/labels/", url_params=True, user=False)
+    @invalidate_cache(
+        path="/api/workspaces/:slug/labels/", url_params=True, user=False, multiple=True
+    )
     @allow_permission([ROLE.ADMIN])
     def create(self, request, slug, project_id):
         try:
@@ -53,6 +55,20 @@ class LabelViewSet(BaseViewSet):
     @invalidate_cache(path="/api/workspaces/:slug/labels/", url_params=True, user=False)
     @allow_permission([ROLE.ADMIN])
     def partial_update(self, request, *args, **kwargs):
+        # Check if the label name is unique within the project
+        if (
+            "name" in request.data
+            and Label.objects.filter(
+                project_id=kwargs["project_id"], name=request.data["name"]
+            )
+            .exclude(pk=kwargs["pk"])
+            .exists()
+        ):
+            return Response(
+                {"error": "Label with the same name already exists in the project"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        # call the parent method to perform the update
         return super().partial_update(request, *args, **kwargs)
 
     @invalidate_cache(path="/api/workspaces/:slug/labels/", url_params=True, user=False)
@@ -72,7 +88,7 @@ class BulkCreateIssueLabelsEndpoint(BaseAPIView):
                 Label(
                     name=label.get("name", "Migrated"),
                     description=label.get("description", "Migrated Issue"),
-                    color=f"#{random.randint(0, 0xFFFFFF+1):06X}",
+                    color=f"#{random.randint(0, 0xFFFFFF + 1):06X}",
                     project_id=project_id,
                     workspace_id=project.workspace_id,
                     created_by=request.user,
diff --git a/apiserver/plane/app/views/issue/relation.py b/apiserver/plane/app/views/issue/relation.py
index 35d88a54b..4b50e4b03 100644
--- a/apiserver/plane/app/views/issue/relation.py
+++ b/apiserver/plane/app/views/issue/relation.py
@@ -268,27 +268,19 @@ class IssueRelationViewSet(BaseViewSet):
             )
 
     def remove_relation(self, request, slug, project_id, issue_id):
-        relation_type = request.data.get("relation_type", None)
         related_issue = request.data.get("related_issue", None)
 
-        if relation_type in ["blocking", "start_after", "finish_after"]:
-            issue_relation = IssueRelation.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                issue_id=related_issue,
-                related_issue_id=issue_id,
-            )
-        else:
-            issue_relation = IssueRelation.objects.get(
-                workspace__slug=slug,
-                project_id=project_id,
-                issue_id=issue_id,
-                related_issue_id=related_issue,
-            )
-        current_instance = json.dumps(
-            IssueRelationSerializer(issue_relation).data, cls=DjangoJSONEncoder
+        issue_relations = IssueRelation.objects.filter(
+            workspace__slug=slug,
+        ).filter(
+            Q(issue_id=related_issue, related_issue_id=issue_id)
+            | Q(issue_id=issue_id, related_issue_id=related_issue)
         )
-        issue_relation.delete()
+        issue_relations = issue_relations.first()
+        current_instance = json.dumps(
+            IssueRelationSerializer(issue_relations).data, cls=DjangoJSONEncoder
+        )
+        issue_relations.delete()
         issue_activity.delay(
             type="issue_relation.activity.deleted",
             requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
diff --git a/apiserver/plane/app/views/issue/sub_issue.py b/apiserver/plane/app/views/issue/sub_issue.py
index e461917fb..19e2522d2 100644
--- a/apiserver/plane/app/views/issue/sub_issue.py
+++ b/apiserver/plane/app/views/issue/sub_issue.py
@@ -20,7 +20,7 @@ from plane.app.serializers import IssueSerializer
 from plane.app.permissions import ProjectEntityPermission
 from plane.db.models import Issue, IssueLink, FileAsset, CycleIssue
 from plane.bgtasks.issue_activities_task import issue_activity
-from plane.utils.user_timezone_converter import user_timezone_converter
+from plane.utils.timezone_converter import user_timezone_converter
 from collections import defaultdict
 
 
diff --git a/apiserver/plane/app/views/issue/version.py b/apiserver/plane/app/views/issue/version.py
new file mode 100644
index 000000000..ab26ca5a6
--- /dev/null
+++ b/apiserver/plane/app/views/issue/version.py
@@ -0,0 +1,118 @@
+# Third party imports
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.db.models import IssueVersion, IssueDescriptionVersion
+from ..base import BaseAPIView
+from plane.app.serializers import (
+    IssueVersionDetailSerializer,
+    IssueDescriptionVersionDetailSerializer,
+)
+from plane.app.permissions import allow_permission, ROLE
+from plane.utils.global_paginator import paginate
+from plane.utils.timezone_converter import user_timezone_converter
+
+
+class IssueVersionEndpoint(BaseAPIView):
+    def process_paginated_result(self, fields, results, timezone):
+        paginated_data = results.values(*fields)
+
+        datetime_fields = ["created_at", "updated_at"]
+        paginated_data = user_timezone_converter(
+            paginated_data, datetime_fields, timezone
+        )
+
+        return paginated_data
+
+    @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def get(self, request, slug, project_id, issue_id, pk=None):
+        if pk:
+            issue_version = IssueVersion.objects.get(
+                workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+            )
+
+            serializer = IssueVersionDetailSerializer(issue_version)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+
+        cursor = request.GET.get("cursor", None)
+
+        required_fields = [
+            "id",
+            "workspace",
+            "project",
+            "issue",
+            "last_saved_at",
+            "owned_by",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
+
+        issue_versions_queryset = IssueVersion.objects.filter(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id
+        )
+
+        paginated_data = paginate(
+            base_queryset=issue_versions_queryset,
+            queryset=issue_versions_queryset,
+            cursor=cursor,
+            on_result=lambda results: self.process_paginated_result(
+                required_fields, results, request.user.user_timezone
+            ),
+        )
+
+        return Response(paginated_data, status=status.HTTP_200_OK)
+
+
+class IssueDescriptionVersionEndpoint(BaseAPIView):
+    def process_paginated_result(self, fields, results, timezone):
+        paginated_data = results.values(*fields)
+
+        datetime_fields = ["created_at", "updated_at"]
+        paginated_data = user_timezone_converter(
+            paginated_data, datetime_fields, timezone
+        )
+
+        return paginated_data
+
+    @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def get(self, request, slug, project_id, issue_id, pk=None):
+        if pk:
+            issue_description_version = IssueDescriptionVersion.objects.get(
+                workspace__slug=slug, project_id=project_id, issue_id=issue_id, pk=pk
+            )
+
+            serializer = IssueDescriptionVersionDetailSerializer(
+                issue_description_version
+            )
+            return Response(serializer.data, status=status.HTTP_200_OK)
+
+        cursor = request.GET.get("cursor", None)
+
+        required_fields = [
+            "id",
+            "workspace",
+            "project",
+            "issue",
+            "last_saved_at",
+            "owned_by",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        ]
+
+        issue_description_versions_queryset = IssueDescriptionVersion.objects.filter(
+            workspace__slug=slug, project_id=project_id, issue_id=issue_id
+        )
+        paginated_data = paginate(
+            base_queryset=issue_description_versions_queryset,
+            queryset=issue_description_versions_queryset,
+            cursor=cursor,
+            on_result=lambda results: self.process_paginated_result(
+                required_fields, results, request.user.user_timezone
+            ),
+        )
+        return Response(paginated_data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/module/archive.py b/apiserver/plane/app/views/module/archive.py
index 82c1d47eb..d5c632f96 100644
--- a/apiserver/plane/app/views/module/archive.py
+++ b/apiserver/plane/app/views/module/archive.py
@@ -28,7 +28,7 @@ from plane.app.permissions import ProjectEntityPermission
 from plane.app.serializers import ModuleDetailSerializer
 from plane.db.models import Issue, Module, ModuleLink, UserFavorite, Project
 from plane.utils.analytics_plot import burndown_plot
-from plane.utils.user_timezone_converter import user_timezone_converter
+from plane.utils.timezone_converter import user_timezone_converter
 
 
 # Module imports
diff --git a/apiserver/plane/app/views/module/base.py b/apiserver/plane/app/views/module/base.py
index 8f9839b71..d9118de0a 100644
--- a/apiserver/plane/app/views/module/base.py
+++ b/apiserver/plane/app/views/module/base.py
@@ -54,9 +54,10 @@ from plane.db.models import (
     ModuleLink,
     ModuleUserProperties,
     Project,
+    UserRecentVisit,
 )
 from plane.utils.analytics_plot import burndown_plot
-from plane.utils.user_timezone_converter import user_timezone_converter
+from plane.utils.timezone_converter import user_timezone_converter
 from plane.bgtasks.webhook_task import model_activity
 from .. import BaseAPIView, BaseViewSet
 from plane.bgtasks.recent_visited_task import recent_visited_task
@@ -808,6 +809,13 @@ class ModuleViewSet(BaseViewSet):
             entity_identifier=pk,
             project_id=project_id,
         ).delete()
+        # delete the module from recent visits
+        UserRecentVisit.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+            entity_identifier=pk,
+            entity_name="module",
+        ).delete(soft=False)
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
diff --git a/apiserver/plane/app/views/module/issue.py b/apiserver/plane/app/views/module/issue.py
index 06b0a2fb1..832e9a5cd 100644
--- a/apiserver/plane/app/views/module/issue.py
+++ b/apiserver/plane/app/views/module/issue.py
@@ -280,7 +280,7 @@ class ModuleIssueViewSet(BaseViewSet):
                 issue_id=str(issue_id),
                 project_id=str(project_id),
                 current_instance=json.dumps(
-                    {"module_name": module_issue.first().module.name}
+                    {"module_name": module_issue.first().module.name if (module_issue.first() and module_issue.first().module) else None}
                 ),
                 epoch=int(timezone.now().timestamp()),
                 notification=True,
diff --git a/apiserver/plane/app/views/page/base.py b/apiserver/plane/app/views/page/base.py
index 46ce81ce1..e8a3c3ffd 100644
--- a/apiserver/plane/app/views/page/base.py
+++ b/apiserver/plane/app/views/page/base.py
@@ -33,13 +33,14 @@ from plane.db.models import (
     ProjectMember,
     ProjectPage,
     Project,
+    UserRecentVisit,
 )
 from plane.utils.error_codes import ERROR_CODES
 from ..base import BaseAPIView, BaseViewSet
 from plane.bgtasks.page_transaction_task import page_transaction
 from plane.bgtasks.page_version_task import page_version
 from plane.bgtasks.recent_visited_task import recent_visited_task
-
+from plane.bgtasks.copy_s3_object import copy_s3_objects
 
 def unarchive_archive_page_and_descendants(page_id, archived_at):
     # Your SQL query
@@ -121,6 +122,8 @@ class PageViewSet(BaseViewSet):
             context={
                 "project_id": project_id,
                 "owned_by_id": request.user.id,
+                "description": request.data.get("description", {}),
+                "description_binary": request.data.get("description_binary", None),
                 "description_html": request.data.get("description_html", "<p></p>"),
             },
         )
@@ -385,6 +388,13 @@ class PageViewSet(BaseViewSet):
             entity_identifier=pk,
             entity_type="page",
         ).delete()
+        # Delete the page from recent visit
+        UserRecentVisit.objects.filter(
+            project_id=project_id,
+            workspace__slug=slug,
+            entity_identifier=pk,
+            entity_name="page",
+        ).delete(soft=False)
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
@@ -553,3 +563,61 @@ class PagesDescriptionViewSet(BaseViewSet):
             return Response({"message": "Updated successfully"})
         else:
             return Response({"error": "No binary data provided"})
+
+
+class PageDuplicateEndpoint(BaseAPIView):
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def post(self, request, slug, project_id, page_id):
+        page = Page.objects.filter(
+            pk=page_id, workspace__slug=slug, projects__id=project_id
+        ).first()
+
+        # get all the project ids where page is present
+        project_ids = ProjectPage.objects.filter(page_id=page_id).values_list(
+            "project_id", flat=True
+        )
+
+        page.pk = None
+        page.name = f"{page.name} (Copy)"
+        page.description_binary = None
+        page.owned_by = request.user
+        page.created_by = request.user
+        page.updated_by = request.user
+        page.save()
+
+        for project_id in project_ids:
+            ProjectPage.objects.create(
+                workspace_id=page.workspace_id,
+                project_id=project_id,
+                page_id=page.id,
+                created_by_id=page.created_by_id,
+                updated_by_id=page.updated_by_id,
+            )
+
+        page_transaction.delay(
+            {"description_html": page.description_html}, None, page.id
+        )
+
+        # Copy the s3 objects uploaded in the page
+        copy_s3_objects.delay(
+            entity_name="PAGE",
+            entity_identifier=page.id,
+            project_id=project_id,
+            slug=slug,
+            user_id=request.user.id,
+        )
+
+        page = (
+            Page.objects.filter(pk=page.id)
+            .annotate(
+                project_ids=Coalesce(
+                    ArrayAgg(
+                        "projects__id", distinct=True, filter=~Q(projects__id=True)
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                )
+            )
+            .first()
+        )
+        serializer = PageDetailSerializer(page)
+        return Response(serializer.data, status=status.HTTP_201_CREATED)
diff --git a/apiserver/plane/app/views/project/base.py b/apiserver/plane/app/views/project/base.py
index 16b2a6e77..2b9d65e10 100644
--- a/apiserver/plane/app/views/project/base.py
+++ b/apiserver/plane/app/views/project/base.py
@@ -6,7 +6,7 @@ import json
 
 # Django imports
 from django.db import IntegrityError
-from django.db.models import Exists, F, Func, OuterRef, Prefetch, Q, Subquery
+from django.db.models import Exists, F, OuterRef, Prefetch, Q, Subquery
 from django.core.serializers.json import DjangoJSONEncoder
 
 # Third Party imports
@@ -25,12 +25,9 @@ from plane.app.serializers import (
 from plane.app.permissions import ProjectMemberPermission, allow_permission, ROLE
 from plane.db.models import (
     UserFavorite,
-    Cycle,
     Intake,
     DeployBoard,
     IssueUserProperty,
-    Issue,
-    Module,
     Project,
     ProjectIdentifier,
     ProjectMember,
@@ -39,7 +36,7 @@ from plane.db.models import (
     WorkspaceMember,
 )
 from plane.utils.cache import cache_response
-from plane.bgtasks.webhook_task import model_activity
+from plane.bgtasks.webhook_task import model_activity, webhook_activity
 from plane.bgtasks.recent_visited_task import recent_visited_task
 from plane.utils.exception_logger import log_exception
 
@@ -73,36 +70,6 @@ class ProjectViewSet(BaseViewSet):
                     )
                 )
             )
-            .annotate(
-                is_member=Exists(
-                    ProjectMember.objects.filter(
-                        member=self.request.user,
-                        project_id=OuterRef("pk"),
-                        workspace__slug=self.kwargs.get("slug"),
-                        is_active=True,
-                    )
-                )
-            )
-            .annotate(
-                total_members=ProjectMember.objects.filter(
-                    project_id=OuterRef("id"), member__is_bot=False, is_active=True
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                total_cycles=Cycle.objects.filter(project_id=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                total_modules=Module.objects.filter(project_id=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
             .annotate(
                 member_role=ProjectMember.objects.filter(
                     project_id=OuterRef("pk"),
@@ -133,7 +100,7 @@ class ProjectViewSet(BaseViewSet):
     @allow_permission(
         allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
     )
-    def list(self, request, slug):
+    def list_detail(self, request, slug):
         fields = [field for field in request.GET.get("fields", "").split(",") if field]
         projects = self.get_queryset().order_by("sort_order", "name")
         if WorkspaceMember.objects.filter(
@@ -170,6 +137,73 @@ class ProjectViewSet(BaseViewSet):
         ).data
         return Response(projects, status=status.HTTP_200_OK)
 
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
+    )
+    def list(self, request, slug):
+        sort_order = ProjectMember.objects.filter(
+            member=self.request.user,
+            project_id=OuterRef("pk"),
+            workspace__slug=self.kwargs.get("slug"),
+            is_active=True,
+        ).values("sort_order")
+
+        projects = (
+            Project.objects.filter(workspace__slug=self.kwargs.get("slug"))
+            .select_related(
+                "workspace", "workspace__owner", "default_assignee", "project_lead"
+            )
+            .annotate(
+                member_role=ProjectMember.objects.filter(
+                    project_id=OuterRef("pk"),
+                    member_id=self.request.user.id,
+                    is_active=True,
+                ).values("role")
+            )
+            .annotate(inbox_view=F("intake_view"))
+            .annotate(sort_order=Subquery(sort_order))
+            .distinct()
+        ).values(
+            "id",
+            "name",
+            "identifier",
+            "sort_order",
+            "logo_props",
+            "member_role",
+            "archived_at",
+            "workspace",
+            "cycle_view",
+            "issue_views_view",
+            "module_view",
+            "page_view",
+            "inbox_view",
+            "project_lead",
+            "created_at",
+            "updated_at",
+            "created_by",
+            "updated_by",
+        )
+
+        if WorkspaceMember.objects.filter(
+            member=request.user, workspace__slug=slug, is_active=True, role=5
+        ).exists():
+            projects = projects.filter(
+                project_projectmember__member=self.request.user,
+                project_projectmember__is_active=True,
+            )
+
+        if WorkspaceMember.objects.filter(
+            member=request.user, workspace__slug=slug, is_active=True, role=15
+        ).exists():
+            projects = projects.filter(
+                Q(
+                    project_projectmember__member=self.request.user,
+                    project_projectmember__is_active=True,
+                )
+                | Q(network=2)
+            )
+        return Response(projects, status=status.HTTP_200_OK)
+
     @allow_permission(
         allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
     )
@@ -182,58 +216,6 @@ class ProjectViewSet(BaseViewSet):
             )
             .filter(archived_at__isnull=True)
             .filter(pk=pk)
-            .annotate(
-                total_issues=Issue.issue_objects.filter(
-                    project_id=self.kwargs.get("pk")
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                sub_issues=Issue.issue_objects.filter(
-                    project_id=self.kwargs.get("pk"), parent__isnull=False
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                archived_issues=Issue.objects.filter(
-                    project_id=self.kwargs.get("pk"), archived_at__isnull=False
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                archived_sub_issues=Issue.objects.filter(
-                    project_id=self.kwargs.get("pk"),
-                    archived_at__isnull=False,
-                    parent__isnull=False,
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                draft_issues=Issue.objects.filter(
-                    project_id=self.kwargs.get("pk"), is_draft=True
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                draft_sub_issues=Issue.objects.filter(
-                    project_id=self.kwargs.get("pk"),
-                    is_draft=True,
-                    parent__isnull=False,
-                )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
         ).first()
 
         if project is None:
@@ -416,16 +398,6 @@ class ProjectViewSet(BaseViewSet):
                             is_default=True,
                         )
 
-                    # Create the triage state in Backlog group
-                    State.objects.get_or_create(
-                        name="Triage",
-                        group="triage",
-                        description="Default state for managing all Intake Issues",
-                        project_id=pk,
-                        color="#ff7700",
-                        is_triage=True,
-                    )
-
                 project = self.get_queryset().filter(pk=serializer.data["id"]).first()
 
                 model_activity.delay(
@@ -472,7 +444,19 @@ class ProjectViewSet(BaseViewSet):
         ):
             project = Project.objects.get(pk=pk)
             project.delete()
-
+            webhook_activity.delay(
+                event="project",
+                verb="deleted",
+                field=None,
+                old_value=None,
+                new_value=None,
+                actor_id=request.user.id,
+                slug=slug,
+                current_site=request.META.get("HTTP_ORIGIN"),
+                event_id=project.id,
+                old_identifier=None,
+                new_identifier=None,
+            )
             # Delete the project members
             DeployBoard.objects.filter(project_id=pk, workspace__slug=slug).delete()
 
diff --git a/apiserver/plane/app/views/search/base.py b/apiserver/plane/app/views/search/base.py
index 5161103f5..b98e2855f 100644
--- a/apiserver/plane/app/views/search/base.py
+++ b/apiserver/plane/app/views/search/base.py
@@ -2,10 +2,21 @@
 import re
 
 # Django imports
-from django.db.models import Q, OuterRef, Subquery, Value, UUIDField, CharField
+from django.db import models
+from django.db.models import (
+    Q,
+    OuterRef,
+    Subquery,
+    Value,
+    UUIDField,
+    CharField,
+    When,
+    Case,
+)
 from django.contrib.postgres.aggregates import ArrayAgg
 from django.contrib.postgres.fields import ArrayField
-from django.db.models.functions import Coalesce
+from django.db.models.functions import Coalesce, Concat
+from django.utils import timezone
 
 # Third party imports
 from rest_framework import status
@@ -21,7 +32,9 @@ from plane.db.models import (
     Module,
     Page,
     IssueView,
+    ProjectMember,
     ProjectPage,
+    WorkspaceMember,
 )
 
 
@@ -237,3 +250,466 @@ class GlobalSearchEndpoint(BaseAPIView):
             func = MODELS_MAPPER.get(model, None)
             results[model] = func(query, slug, project_id, workspace_search)
         return Response({"results": results}, status=status.HTTP_200_OK)
+
+
+class SearchEndpoint(BaseAPIView):
+    def get(self, request, slug):
+        query = request.query_params.get("query", False)
+        query_types = request.query_params.get("query_type", "user_mention").split(",")
+        query_types = [qt.strip() for qt in query_types]
+        count = int(request.query_params.get("count", 5))
+        project_id = request.query_params.get("project_id", None)
+        issue_id = request.query_params.get("issue_id", None)
+
+        response_data = {}
+
+        if project_id:
+            for query_type in query_types:
+                if query_type == "user_mention":
+                    fields = [
+                        "member__first_name",
+                        "member__last_name",
+                        "member__display_name",
+                    ]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    users = (
+                        ProjectMember.objects.filter(
+                            q,
+                            is_active=True,
+                            workspace__slug=slug,
+                            member__is_bot=False,
+                            project_id=project_id,
+                        )
+                        .annotate(
+                            member__avatar_url=Case(
+                                When(
+                                    member__avatar_asset__isnull=False,
+                                    then=Concat(
+                                        Value("/api/assets/v2/static/"),
+                                        "member__avatar_asset",
+                                        Value("/"),
+                                    ),
+                                ),
+                                When(
+                                    member__avatar_asset__isnull=True,
+                                    then="member__avatar",
+                                ),
+                                default=Value(None),
+                                output_field=CharField(),
+                            )
+                        )
+                        .order_by("-created_at")
+                    )
+
+                    if issue_id:
+                        issue_created_by = (
+                            Issue.objects.filter(id=issue_id)
+                            .values_list("created_by_id", flat=True)
+                            .first()
+                        )
+                        users = (
+                            users.filter(Q(role__gt=10) | Q(member_id=issue_created_by))
+                            .distinct()
+                            .values(
+                                "member__avatar_url",
+                                "member__display_name",
+                                "member__id",
+                            )
+                        )
+                    else:
+                        users = (
+                            users.filter(Q(role__gt=10))
+                            .distinct()
+                            .values(
+                                "member__avatar_url",
+                                "member__display_name",
+                                "member__id",
+                            )
+                        )
+
+                    response_data["user_mention"] = list(users[:count])
+
+                elif query_type == "project":
+                    fields = ["name", "identifier"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+                    projects = (
+                        Project.objects.filter(
+                            q,
+                            Q(project_projectmember__member=self.request.user)
+                            | Q(network=2),
+                            workspace__slug=slug,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name", "id", "identifier", "logo_props", "workspace__slug"
+                        )[:count]
+                    )
+                    response_data["project"] = list(projects)
+
+                elif query_type == "issue":
+                    fields = ["name", "sequence_id", "project__identifier"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            if field == "sequence_id":
+                                sequences = re.findall(r"\b\d+\b", query)
+                                for sequence_id in sequences:
+                                    q |= Q(**{"sequence_id": sequence_id})
+                            else:
+                                q |= Q(**{f"{field}__icontains": query})
+
+                    issues = (
+                        Issue.issue_objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                            project_id=project_id,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "sequence_id",
+                            "project__identifier",
+                            "project_id",
+                            "priority",
+                            "state_id",
+                            "type_id",
+                        )[:count]
+                    )
+                    response_data["issue"] = list(issues)
+
+                elif query_type == "cycle":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    cycles = (
+                        Cycle.objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                            project_id=project_id,
+                        )
+                        .annotate(
+                            status=Case(
+                                When(
+                                    Q(start_date__lte=timezone.now())
+                                    & Q(end_date__gte=timezone.now()),
+                                    then=Value("CURRENT"),
+                                ),
+                                When(
+                                    start_date__gt=timezone.now(),
+                                    then=Value("UPCOMING"),
+                                ),
+                                When(
+                                    end_date__lt=timezone.now(), then=Value("COMPLETED")
+                                ),
+                                When(
+                                    Q(start_date__isnull=True)
+                                    & Q(end_date__isnull=True),
+                                    then=Value("DRAFT"),
+                                ),
+                                default=Value("DRAFT"),
+                                output_field=CharField(),
+                            )
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "project_id",
+                            "project__identifier",
+                            "status",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["cycle"] = list(cycles)
+
+                elif query_type == "module":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    modules = (
+                        Module.objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                            project_id=project_id,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "project_id",
+                            "project__identifier",
+                            "status",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["module"] = list(modules)
+
+                elif query_type == "page":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    pages = (
+                        Page.objects.filter(
+                            q,
+                            projects__project_projectmember__member=self.request.user,
+                            projects__project_projectmember__is_active=True,
+                            projects__id=project_id,
+                            workspace__slug=slug,
+                            access=0,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "logo_props",
+                            "projects__id",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["page"] = list(pages)
+            return Response(response_data, status=status.HTTP_200_OK)
+
+        else:
+            for query_type in query_types:
+                if query_type == "user_mention":
+                    fields = [
+                        "member__first_name",
+                        "member__last_name",
+                        "member__display_name",
+                    ]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+                    users = (
+                        WorkspaceMember.objects.filter(
+                            q,
+                            is_active=True,
+                            workspace__slug=slug,
+                            member__is_bot=False,
+                        )
+                        .annotate(
+                            member__avatar_url=Case(
+                                When(
+                                    member__avatar_asset__isnull=False,
+                                    then=Concat(
+                                        Value("/api/assets/v2/static/"),
+                                        "member__avatar_asset",
+                                        Value("/"),
+                                    ),
+                                ),
+                                When(
+                                    member__avatar_asset__isnull=True,
+                                    then="member__avatar",
+                                ),
+                                default=Value(None),
+                                output_field=models.CharField(),
+                            )
+                        )
+                        .order_by("-created_at")
+                        .values(
+                            "member__avatar_url", "member__display_name", "member__id"
+                        )[:count]
+                    )
+                    response_data["user_mention"] = list(users)
+
+                elif query_type == "project":
+                    fields = ["name", "identifier"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+                    projects = (
+                        Project.objects.filter(
+                            q,
+                            Q(project_projectmember__member=self.request.user)
+                            | Q(network=2),
+                            workspace__slug=slug,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name", "id", "identifier", "logo_props", "workspace__slug"
+                        )[:count]
+                    )
+                    response_data["project"] = list(projects)
+
+                elif query_type == "issue":
+                    fields = ["name", "sequence_id", "project__identifier"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            if field == "sequence_id":
+                                sequences = re.findall(r"\b\d+\b", query)
+                                for sequence_id in sequences:
+                                    q |= Q(**{"sequence_id": sequence_id})
+                            else:
+                                q |= Q(**{f"{field}__icontains": query})
+
+                    issues = (
+                        Issue.issue_objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "sequence_id",
+                            "project__identifier",
+                            "project_id",
+                            "priority",
+                            "state_id",
+                            "type_id",
+                        )[:count]
+                    )
+                    response_data["issue"] = list(issues)
+
+                elif query_type == "cycle":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    cycles = (
+                        Cycle.objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                        )
+                        .annotate(
+                            status=Case(
+                                When(
+                                    Q(start_date__lte=timezone.now())
+                                    & Q(end_date__gte=timezone.now()),
+                                    then=Value("CURRENT"),
+                                ),
+                                When(
+                                    start_date__gt=timezone.now(),
+                                    then=Value("UPCOMING"),
+                                ),
+                                When(
+                                    end_date__lt=timezone.now(), then=Value("COMPLETED")
+                                ),
+                                When(
+                                    Q(start_date__isnull=True)
+                                    & Q(end_date__isnull=True),
+                                    then=Value("DRAFT"),
+                                ),
+                                default=Value("DRAFT"),
+                                output_field=CharField(),
+                            )
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "project_id",
+                            "project__identifier",
+                            "status",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["cycle"] = list(cycles)
+
+                elif query_type == "module":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    modules = (
+                        Module.objects.filter(
+                            q,
+                            project__project_projectmember__member=self.request.user,
+                            project__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "project_id",
+                            "project__identifier",
+                            "status",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["module"] = list(modules)
+
+                elif query_type == "page":
+                    fields = ["name"]
+                    q = Q()
+
+                    if query:
+                        for field in fields:
+                            q |= Q(**{f"{field}__icontains": query})
+
+                    pages = (
+                        Page.objects.filter(
+                            q,
+                            projects__project_projectmember__member=self.request.user,
+                            projects__project_projectmember__is_active=True,
+                            workspace__slug=slug,
+                            access=0,
+                            is_global=True,
+                        )
+                        .order_by("-created_at")
+                        .distinct()
+                        .values(
+                            "name",
+                            "id",
+                            "logo_props",
+                            "projects__id",
+                            "workspace__slug",
+                        )[:count]
+                    )
+                    response_data["page"] = list(pages)
+            return Response(response_data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/search/issue.py b/apiserver/plane/app/views/search/issue.py
index 13fdc4eff..3db9e1cba 100644
--- a/apiserver/plane/app/views/search/issue.py
+++ b/apiserver/plane/app/views/search/issue.py
@@ -1,5 +1,3 @@
-# Python imports
-
 # Django imports
 from django.db.models import Q
 
@@ -9,7 +7,7 @@ from rest_framework.response import Response
 
 # Module imports
 from .base import BaseAPIView
-from plane.db.models import Issue, ProjectMember
+from plane.db.models import Issue, ProjectMember, IssueRelation
 from plane.utils.issue_search import search_issues
 
 
@@ -47,17 +45,18 @@ class IssueSearchEndpoint(BaseAPIView):
                 )
         if issue_relation == "true" and issue_id:
             issue = Issue.issue_objects.filter(pk=issue_id).first()
+            related_issue_ids = IssueRelation.objects.filter(
+                Q(related_issue=issue) | Q(issue=issue)
+            ).values_list(
+                "issue_id", "related_issue_id"
+            ).distinct()
+
+            related_issue_ids = [item for sublist in related_issue_ids for item in sublist]
+
             if issue:
                 issues = issues.filter(
                     ~Q(pk=issue_id),
-                    ~(
-                        Q(issue_related__issue=issue)
-                        & Q(issue_related__deleted_at__isnull=True)
-                    ),
-                    ~(
-                        Q(issue_relation__related_issue=issue)
-                        & Q(issue_relation__deleted_at__isnull=True)
-                    ),
+                    ~Q(pk__in=related_issue_ids),
                 )
         if sub_issue == "true" and issue_id:
             issue = Issue.issue_objects.filter(pk=issue_id).first()
diff --git a/apiserver/plane/app/views/state/base.py b/apiserver/plane/app/views/state/base.py
index 00f4813e6..419cd5a35 100644
--- a/apiserver/plane/app/views/state/base.py
+++ b/apiserver/plane/app/views/state/base.py
@@ -1,6 +1,9 @@
 # Python imports
 from itertools import groupby
 
+# Django imports
+from django.db.utils import IntegrityError
+
 # Third party imports
 from rest_framework.response import Response
 from rest_framework import status
@@ -37,11 +40,36 @@ class StateViewSet(BaseViewSet):
     @invalidate_cache(path="workspaces/:slug/states/", url_params=True, user=False)
     @allow_permission([ROLE.ADMIN])
     def create(self, request, slug, project_id):
-        serializer = StateSerializer(data=request.data)
-        if serializer.is_valid():
-            serializer.save(project_id=project_id)
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        try:
+            serializer = StateSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(project_id=project_id)
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError as e:
+            if "already exists" in str(e):
+                return Response(
+                    {"name": "The state name is already taken"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def partial_update(self, request, slug, project_id, pk):
+        try:
+            state = State.objects.get(
+                pk=pk, project_id=project_id, workspace__slug=slug
+            )
+            serializer = StateSerializer(state, data=request.data, partial=True)
+            if serializer.is_valid():
+                serializer.save()
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError as e:
+            if "already exists" in str(e):
+                return Response(
+                    {"name": "The state name is already taken"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def list(self, request, slug, project_id):
diff --git a/apiserver/plane/app/views/timezone/base.py b/apiserver/plane/app/views/timezone/base.py
new file mode 100644
index 000000000..77c877047
--- /dev/null
+++ b/apiserver/plane/app/views/timezone/base.py
@@ -0,0 +1,247 @@
+# Python imports
+import pytz
+from datetime import datetime
+
+# Django imports
+from django.utils.decorators import method_decorator
+from django.views.decorators.cache import cache_page
+
+# Third party imports
+from rest_framework import status
+from rest_framework.response import Response
+from rest_framework.permissions import AllowAny
+from rest_framework.views import APIView
+
+# Module imports
+from plane.authentication.rate_limit import AuthenticationThrottle
+
+
+class TimezoneEndpoint(APIView):
+    permission_classes = [AllowAny]
+
+    throttle_classes = [AuthenticationThrottle]
+
+    @method_decorator(cache_page(60 * 60 * 24))
+    def get(self, request):
+        timezone_mapping = {
+            "-1100": [
+                ("Midway Island", "Pacific/Midway"),
+                ("American Samoa", "Pacific/Pago_Pago"),
+            ],
+            "-1000": [
+                ("Hawaii", "Pacific/Honolulu"),
+                ("Aleutian Islands", "America/Adak"),
+            ],
+            "-0930": [("Marquesas Islands", "Pacific/Marquesas")],
+            "-0900": [
+                ("Alaska", "America/Anchorage"),
+                ("Gambier Islands", "Pacific/Gambier"),
+            ],
+            "-0800": [
+                ("Pacific Time (US and Canada)", "America/Los_Angeles"),
+                ("Baja California", "America/Tijuana"),
+            ],
+            "-0700": [
+                ("Mountain Time (US and Canada)", "America/Denver"),
+                ("Arizona", "America/Phoenix"),
+                ("Chihuahua, Mazatlan", "America/Chihuahua"),
+            ],
+            "-0600": [
+                ("Central Time (US and Canada)", "America/Chicago"),
+                ("Saskatchewan", "America/Regina"),
+                ("Guadalajara, Mexico City, Monterrey", "America/Mexico_City"),
+                ("Tegucigalpa, Honduras", "America/Tegucigalpa"),
+                ("Costa Rica", "America/Costa_Rica"),
+            ],
+            "-0500": [
+                ("Eastern Time (US and Canada)", "America/New_York"),
+                ("Lima", "America/Lima"),
+                ("Bogota", "America/Bogota"),
+                ("Quito", "America/Guayaquil"),
+                ("Chetumal", "America/Cancun"),
+            ],
+            "-0430": [("Caracas (Old Venezuela Time)", "America/Caracas")],
+            "-0400": [
+                ("Atlantic Time (Canada)", "America/Halifax"),
+                ("Caracas", "America/Caracas"),
+                ("Santiago", "America/Santiago"),
+                ("La Paz", "America/La_Paz"),
+                ("Manaus", "America/Manaus"),
+                ("Georgetown", "America/Guyana"),
+                ("Bermuda", "Atlantic/Bermuda"),
+            ],
+            "-0330": [("Newfoundland Time (Canada)", "America/St_Johns")],
+            "-0300": [
+                ("Buenos Aires", "America/Argentina/Buenos_Aires"),
+                ("Brasilia", "America/Sao_Paulo"),
+                ("Greenland", "America/Godthab"),
+                ("Montevideo", "America/Montevideo"),
+                ("Falkland Islands", "Atlantic/Stanley"),
+            ],
+            "-0200": [
+                (
+                    "South Georgia and the South Sandwich Islands",
+                    "Atlantic/South_Georgia",
+                )
+            ],
+            "-0100": [
+                ("Azores", "Atlantic/Azores"),
+                ("Cape Verde Islands", "Atlantic/Cape_Verde"),
+            ],
+            "+0000": [
+                ("Dublin", "Europe/Dublin"),
+                ("Reykjavik", "Atlantic/Reykjavik"),
+                ("Lisbon", "Europe/Lisbon"),
+                ("Monrovia", "Africa/Monrovia"),
+                ("Casablanca", "Africa/Casablanca"),
+            ],
+            "+0100": [
+                ("Central European Time (Berlin, Rome, Paris)", "Europe/Paris"),
+                ("West Central Africa", "Africa/Lagos"),
+                ("Algiers", "Africa/Algiers"),
+                ("Lagos", "Africa/Lagos"),
+                ("Tunis", "Africa/Tunis"),
+            ],
+            "+0200": [
+                ("Eastern European Time (Cairo, Helsinki, Kyiv)", "Europe/Kiev"),
+                ("Athens", "Europe/Athens"),
+                ("Jerusalem", "Asia/Jerusalem"),
+                ("Johannesburg", "Africa/Johannesburg"),
+                ("Harare, Pretoria", "Africa/Harare"),
+            ],
+            "+0300": [
+                ("Moscow Time", "Europe/Moscow"),
+                ("Baghdad", "Asia/Baghdad"),
+                ("Nairobi", "Africa/Nairobi"),
+                ("Kuwait, Riyadh", "Asia/Riyadh"),
+            ],
+            "+0330": [("Tehran", "Asia/Tehran")],
+            "+0400": [
+                ("Abu Dhabi", "Asia/Dubai"),
+                ("Baku", "Asia/Baku"),
+                ("Yerevan", "Asia/Yerevan"),
+                ("Astrakhan", "Europe/Astrakhan"),
+                ("Tbilisi", "Asia/Tbilisi"),
+                ("Mauritius", "Indian/Mauritius"),
+            ],
+            "+0500": [
+                ("Islamabad", "Asia/Karachi"),
+                ("Karachi", "Asia/Karachi"),
+                ("Tashkent", "Asia/Tashkent"),
+                ("Yekaterinburg", "Asia/Yekaterinburg"),
+                ("Maldives", "Indian/Maldives"),
+                ("Chagos", "Indian/Chagos"),
+            ],
+            "+0530": [
+                ("Chennai", "Asia/Kolkata"),
+                ("Kolkata", "Asia/Kolkata"),
+                ("Mumbai", "Asia/Kolkata"),
+                ("New Delhi", "Asia/Kolkata"),
+                ("Sri Jayawardenepura", "Asia/Colombo"),
+            ],
+            "+0545": [("Kathmandu", "Asia/Kathmandu")],
+            "+0600": [
+                ("Dhaka", "Asia/Dhaka"),
+                ("Almaty", "Asia/Almaty"),
+                ("Bishkek", "Asia/Bishkek"),
+                ("Thimphu", "Asia/Thimphu"),
+            ],
+            "+0630": [
+                ("Yangon (Rangoon)", "Asia/Yangon"),
+                ("Cocos Islands", "Indian/Cocos"),
+            ],
+            "+0700": [
+                ("Bangkok", "Asia/Bangkok"),
+                ("Hanoi", "Asia/Ho_Chi_Minh"),
+                ("Jakarta", "Asia/Jakarta"),
+                ("Novosibirsk", "Asia/Novosibirsk"),
+                ("Krasnoyarsk", "Asia/Krasnoyarsk"),
+            ],
+            "+0800": [
+                ("Beijing", "Asia/Shanghai"),
+                ("Singapore", "Asia/Singapore"),
+                ("Perth", "Australia/Perth"),
+                ("Hong Kong", "Asia/Hong_Kong"),
+                ("Ulaanbaatar", "Asia/Ulaanbaatar"),
+                ("Palau", "Pacific/Palau"),
+            ],
+            "+0845": [("Eucla", "Australia/Eucla")],
+            "+0900": [
+                ("Tokyo", "Asia/Tokyo"),
+                ("Seoul", "Asia/Seoul"),
+                ("Yakutsk", "Asia/Yakutsk"),
+            ],
+            "+0930": [
+                ("Adelaide", "Australia/Adelaide"),
+                ("Darwin", "Australia/Darwin"),
+            ],
+            "+1000": [
+                ("Sydney", "Australia/Sydney"),
+                ("Brisbane", "Australia/Brisbane"),
+                ("Guam", "Pacific/Guam"),
+                ("Vladivostok", "Asia/Vladivostok"),
+                ("Tahiti", "Pacific/Tahiti"),
+            ],
+            "+1030": [("Lord Howe Island", "Australia/Lord_Howe")],
+            "+1100": [
+                ("Solomon Islands", "Pacific/Guadalcanal"),
+                ("Magadan", "Asia/Magadan"),
+                ("Norfolk Island", "Pacific/Norfolk"),
+                ("Bougainville Island", "Pacific/Bougainville"),
+                ("Chokurdakh", "Asia/Srednekolymsk"),
+            ],
+            "+1200": [
+                ("Auckland", "Pacific/Auckland"),
+                ("Wellington", "Pacific/Auckland"),
+                ("Fiji Islands", "Pacific/Fiji"),
+                ("Anadyr", "Asia/Anadyr"),
+            ],
+            "+1245": [("Chatham Islands", "Pacific/Chatham")],
+            "+1300": [("Nuku'alofa", "Pacific/Tongatapu"), ("Samoa", "Pacific/Apia")],
+            "+1400": [("Kiritimati Island", "Pacific/Kiritimati")],
+        }
+
+        timezone_list = []
+        now = datetime.now()
+
+        # Process timezone mapping
+        for offset, locations in timezone_mapping.items():
+            sign = "-" if offset.startswith("-") else "+"
+            hours = offset[1:3]
+            minutes = offset[3:] if len(offset) > 3 else "00"
+
+            for friendly_name, tz_identifier in locations:
+                try:
+                    tz = pytz.timezone(tz_identifier)
+                    current_offset = now.astimezone(tz).strftime("%z")
+
+                    # converting and formatting UTC offset to GMT offset
+                    current_utc_offset = now.astimezone(tz).utcoffset()
+                    total_seconds = int(current_utc_offset.total_seconds())
+                    hours_offset = total_seconds // 3600
+                    minutes_offset = abs(total_seconds % 3600) // 60
+                    gmt_offset = (
+                        f"GMT{'+' if hours_offset >= 0 else '-'}"
+                        f"{abs(hours_offset):02}:{minutes_offset:02}"
+                    )
+
+                    timezone_value = {
+                        "offset": int(current_offset),
+                        "utc_offset": f"UTC{sign}{hours}:{minutes}",
+                        "gmt_offset": gmt_offset,
+                        "value": tz_identifier,
+                        "label": f"{friendly_name}",
+                    }
+
+                    timezone_list.append(timezone_value)
+                except pytz.exceptions.UnknownTimeZoneError:
+                    continue
+
+        # Sort by offset and then by label
+        timezone_list.sort(key=lambda x: (x["offset"], x["label"]))
+
+        # Remove offset from final output
+        for tz in timezone_list:
+            del tz["offset"]
+
+        return Response({"timezones": timezone_list}, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/view/base.py b/apiserver/plane/app/views/view/base.py
index ca4048b70..c2b401abf 100644
--- a/apiserver/plane/app/views/view/base.py
+++ b/apiserver/plane/app/views/view/base.py
@@ -24,6 +24,7 @@ from plane.db.models import (
     ProjectMember,
     Project,
     CycleIssue,
+    UserRecentVisit,
 )
 from plane.utils.grouper import (
     issue_group_values,
@@ -495,6 +496,13 @@ class IssueViewViewSet(BaseViewSet):
                 entity_identifier=pk,
                 entity_type="view",
             ).delete()
+            # Delete the page from recent visit
+            UserRecentVisit.objects.filter(
+                project_id=project_id,
+                workspace__slug=slug,
+                entity_identifier=pk,
+                entity_name="view",
+            ).delete(soft=False)
         else:
             return Response(
                 {"error": "Only admin or owner can delete the view"},
diff --git a/apiserver/plane/app/views/webhook/base.py b/apiserver/plane/app/views/webhook/base.py
index d62838fab..d7ff5cf3a 100644
--- a/apiserver/plane/app/views/webhook/base.py
+++ b/apiserver/plane/app/views/webhook/base.py
@@ -120,7 +120,7 @@ class WebhookLogsEndpoint(BaseAPIView):
     @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
     def get(self, request, slug, webhook_id):
         webhook_logs = WebhookLog.objects.filter(
-            workspace__slug=slug, webhook_id=webhook_id
+            workspace__slug=slug, webhook=webhook_id
         )
         serializer = WebhookLogSerializer(webhook_logs, many=True)
         return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/base.py b/apiserver/plane/app/views/workspace/base.py
index 058f7702a..5be9a7558 100644
--- a/apiserver/plane/app/views/workspace/base.py
+++ b/apiserver/plane/app/views/workspace/base.py
@@ -7,9 +7,11 @@ from datetime import date
 from dateutil.relativedelta import relativedelta
 from django.db import IntegrityError
 from django.db.models import Count, F, Func, OuterRef, Prefetch, Q
+
 from django.db.models.fields import DateField
 from django.db.models.functions import Cast, ExtractDay, ExtractWeek
 
+
 # Django imports
 from django.http import HttpResponse
 from django.utils import timezone
@@ -62,12 +64,6 @@ class WorkSpaceViewSet(BaseViewSet):
             .values("count")
         )
 
-        issue_count = (
-            Issue.issue_objects.filter(workspace=OuterRef("id"))
-            .order_by()
-            .annotate(count=Func(F("id"), function="Count"))
-            .values("count")
-        )
         return (
             self.filter_queryset(super().get_queryset().select_related("owner"))
             .order_by("name")
@@ -76,8 +72,6 @@ class WorkSpaceViewSet(BaseViewSet):
                 workspace_member__is_active=True,
             )
             .annotate(total_members=member_count)
-            .annotate(total_issues=issue_count)
-            .select_related("owner")
         )
 
     def create(self, request):
@@ -123,7 +117,14 @@ class WorkSpaceViewSet(BaseViewSet):
                     role=20,
                     company_role=request.data.get("company_role", ""),
                 )
-                return Response(serializer.data, status=status.HTTP_201_CREATED)
+
+                # Get total members and role
+                total_members=WorkspaceMember.objects.filter(workspace_id=serializer.data["id"]).count()
+                data = serializer.data
+                data["total_members"] = total_members
+                data["role"] = 20
+
+                return Response(data, status=status.HTTP_201_CREATED)
             return Response(
                 [serializer.errors[error][0] for error in serializer.errors],
                 status=status.HTTP_400_BAD_REQUEST,
@@ -166,11 +167,9 @@ class UserWorkSpacesEndpoint(BaseAPIView):
             .values("count")
         )
 
-        issue_count = (
-            Issue.issue_objects.filter(workspace=OuterRef("id"))
-            .order_by()
-            .annotate(count=Func(F("id"), function="Count"))
-            .values("count")
+        role = (
+            WorkspaceMember.objects.filter(workspace=OuterRef("id"), member=request.user, is_active=True)
+            .values("role")
         )
 
         workspace = (
@@ -182,19 +181,19 @@ class UserWorkSpacesEndpoint(BaseAPIView):
                     ),
                 )
             )
-            .select_related("owner")
-            .annotate(total_members=member_count)
-            .annotate(total_issues=issue_count)
+            .annotate(role=role, total_members=member_count)
             .filter(
                 workspace_member__member=request.user, workspace_member__is_active=True
             )
             .distinct()
         )
+
         workspaces = WorkSpaceSerializer(
             self.filter_queryset(workspace),
             fields=fields if fields else None,
             many=True,
         ).data
+
         return Response(workspaces, status=status.HTTP_200_OK)
 
 
diff --git a/apiserver/plane/app/views/workspace/cycle.py b/apiserver/plane/app/views/workspace/cycle.py
index ec08f47c9..a9398a91d 100644
--- a/apiserver/plane/app/views/workspace/cycle.py
+++ b/apiserver/plane/app/views/workspace/cycle.py
@@ -10,7 +10,7 @@ from plane.app.views.base import BaseAPIView
 from plane.db.models import Cycle
 from plane.app.permissions import WorkspaceViewerPermission
 from plane.app.serializers.cycle import CycleSerializer
-
+from plane.utils.timezone_converter import user_timezone_converter
 
 class WorkspaceCyclesEndpoint(BaseAPIView):
     permission_classes = [WorkspaceViewerPermission]
diff --git a/apiserver/plane/app/views/workspace/favorite.py b/apiserver/plane/app/views/workspace/favorite.py
index 38fa1bdef..055f4d678 100644
--- a/apiserver/plane/app/views/workspace/favorite.py
+++ b/apiserver/plane/app/views/workspace/favorite.py
@@ -4,6 +4,7 @@ from rest_framework.response import Response
 
 # Django modules
 from django.db.models import Q
+from django.db import IntegrityError
 
 # Module imports
 from plane.app.views.base import BaseAPIView
@@ -31,16 +32,21 @@ class WorkspaceFavoriteEndpoint(BaseAPIView):
 
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
     def post(self, request, slug):
-        workspace = Workspace.objects.get(slug=slug)
-        serializer = UserFavoriteSerializer(data=request.data)
-        if serializer.is_valid():
-            serializer.save(
-                user_id=request.user.id,
-                workspace=workspace,
-                project_id=request.data.get("project_id", None),
+        try:
+            workspace = Workspace.objects.get(slug=slug)
+            serializer = UserFavoriteSerializer(data=request.data)
+            if serializer.is_valid():
+                serializer.save(
+                    user_id=request.user.id,
+                    workspace=workspace,
+                    project_id=request.data.get("project_id", None),
+                )
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        except IntegrityError:
+            return Response(
+                {"error": "Favorite already exists"}, status=status.HTTP_400_BAD_REQUEST
             )
-            return Response(serializer.data, status=status.HTTP_200_OK)
-        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER], level="WORKSPACE")
     def patch(self, request, slug, favorite_id):
diff --git a/apiserver/plane/app/views/workspace/home.py b/apiserver/plane/app/views/workspace/home.py
new file mode 100644
index 000000000..5ee9b0a39
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/home.py
@@ -0,0 +1,85 @@
+# Module imports
+from ..base import BaseAPIView
+from plane.db.models.workspace import WorkspaceHomePreference
+from plane.app.permissions import allow_permission, ROLE
+from plane.db.models import Workspace
+from plane.app.serializers.workspace import WorkspaceHomePreferenceSerializer
+
+# Third party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+
+class WorkspaceHomePreferenceViewSet(BaseAPIView):
+    model = WorkspaceHomePreference
+
+    def get_serializer_class(self):
+        return WorkspaceHomePreferenceSerializer
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def get(self, request, slug):
+        workspace = Workspace.objects.get(slug=slug)
+
+        get_preference = WorkspaceHomePreference.objects.filter(
+            user=request.user, workspace_id=workspace.id
+        )
+
+        create_preference_keys = []
+
+        keys = [
+            key
+            for key, _ in WorkspaceHomePreference.HomeWidgetKeys.choices
+            if key not in ["quick_tutorial", "new_at_plane"]
+        ]
+
+        sort_order_counter = 1
+
+        for preference in keys:
+            if preference not in get_preference.values_list("key", flat=True):
+                create_preference_keys.append(preference)
+
+                sort_order = 1000 - sort_order_counter
+
+                preference = WorkspaceHomePreference.objects.bulk_create(
+                    [
+                        WorkspaceHomePreference(
+                            key=key,
+                            user=request.user,
+                            workspace=workspace,
+                            sort_order=sort_order,
+                        )
+                        for key in create_preference_keys
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+                sort_order_counter += 1
+
+        preference = WorkspaceHomePreference.objects.filter(
+            user=request.user, workspace_id=workspace.id
+        )
+
+        return Response(
+            preference.values("key", "is_enabled", "config", "sort_order"),
+            status=status.HTTP_200_OK,
+        )
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def patch(self, request, slug, key):
+        preference = WorkspaceHomePreference.objects.filter(
+            key=key, workspace__slug=slug, user=request.user
+        ).first()
+
+        if preference:
+            serializer = WorkspaceHomePreferenceSerializer(
+                preference, data=request.data, partial=True
+            )
+
+            if serializer.is_valid():
+                serializer.save()
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        return Response(
+            {"detail": "Preference not found"}, status=status.HTTP_400_BAD_REQUEST
+        )
diff --git a/apiserver/plane/app/views/workspace/invite.py b/apiserver/plane/app/views/workspace/invite.py
index 486a3c93b..fd3f97c19 100644
--- a/apiserver/plane/app/views/workspace/invite.py
+++ b/apiserver/plane/app/views/workspace/invite.py
@@ -251,8 +251,7 @@ class UserWorkspaceInvitationsViewSet(BaseViewSet):
             super()
             .get_queryset()
             .filter(email=self.request.user.email)
-            .select_related("workspace", "workspace__owner", "created_by")
-            .annotate(total_members=Count("workspace__workspace_member"))
+            .select_related("workspace")
         )
 
     @invalidate_cache(path="/api/workspaces/", user=False)
diff --git a/apiserver/plane/app/views/workspace/quick_link.py b/apiserver/plane/app/views/workspace/quick_link.py
new file mode 100644
index 000000000..b7decea95
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/quick_link.py
@@ -0,0 +1,74 @@
+# Third party imports
+from rest_framework import status
+from rest_framework.response import Response
+
+# Module imports
+from plane.db.models import WorkspaceUserLink, Workspace
+from plane.app.serializers import WorkspaceUserLinkSerializer
+from ..base import BaseViewSet
+from plane.app.permissions import allow_permission, ROLE
+
+
+class QuickLinkViewSet(BaseViewSet):
+    model = WorkspaceUserLink
+
+    def get_serializer_class(self):
+        return WorkspaceUserLinkSerializer
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def create(self, request, slug):
+        workspace = Workspace.objects.get(slug=slug)
+        serializer = WorkspaceUserLinkSerializer(data=request.data)
+
+        if serializer.is_valid():
+            serializer.save(workspace_id=workspace.id, owner_id=request.user.id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def partial_update(self, request, slug, pk):
+        quick_link = WorkspaceUserLink.objects.filter(
+            pk=pk, workspace__slug=slug, owner=request.user
+        ).first()
+
+        if quick_link:
+            serializer = WorkspaceUserLinkSerializer(
+                quick_link, data=request.data, partial=True
+            )
+            if serializer.is_valid():
+                serializer.save()
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+        return Response(
+            {"detail": "Quick link not found."}, status=status.HTTP_404_NOT_FOUND
+        )
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def retrieve(self, request, slug, pk):
+        try:
+            quick_link = WorkspaceUserLink.objects.get(
+                pk=pk, workspace__slug=slug, owner=request.user
+            )
+            serializer = WorkspaceUserLinkSerializer(quick_link)
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        except WorkspaceUserLink.DoesNotExist:
+            return Response(
+                {"error": "Quick link not found."}, status=status.HTTP_404_NOT_FOUND
+            )
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def destroy(self, request, slug, pk):
+        quick_link = WorkspaceUserLink.objects.get(
+            pk=pk, workspace__slug=slug, owner=request.user
+        )
+        quick_link.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def list(self, request, slug):
+        quick_links = WorkspaceUserLink.objects.filter(
+            workspace__slug=slug, owner=request.user
+        )
+
+        serializer = WorkspaceUserLinkSerializer(quick_links, many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/recent_visit.py b/apiserver/plane/app/views/workspace/recent_visit.py
new file mode 100644
index 000000000..4fe15b513
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/recent_visit.py
@@ -0,0 +1,35 @@
+# Third party imports
+from rest_framework import status
+from rest_framework.response import Response
+
+from plane.db.models import UserRecentVisit
+from plane.app.serializers import WorkspaceRecentVisitSerializer
+
+# Modules imports
+from ..base import BaseViewSet
+from plane.app.permissions import allow_permission, ROLE
+
+
+class UserRecentVisitViewSet(BaseViewSet):
+    model = UserRecentVisit
+
+    def get_serializer_class(self):
+        return WorkspaceRecentVisitSerializer
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def list(self, request, slug):
+        user_recent_visits = UserRecentVisit.objects.filter(
+            workspace__slug=slug, user=request.user
+        )
+
+        entity_name = request.query_params.get("entity_name")
+
+        if entity_name:
+            user_recent_visits = user_recent_visits.filter(entity_name=entity_name)
+
+        user_recent_visits = user_recent_visits.filter(
+            entity_name__in=["issue", "page", "project"]
+        )
+
+        serializer = WorkspaceRecentVisitSerializer(user_recent_visits[:20], many=True)
+        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apiserver/plane/app/views/workspace/sticky.py b/apiserver/plane/app/views/workspace/sticky.py
new file mode 100644
index 000000000..4870a6abe
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/sticky.py
@@ -0,0 +1,59 @@
+# Third party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+# Module imports
+from plane.app.views.base import BaseViewSet
+from plane.app.permissions import ROLE, allow_permission
+from plane.db.models import Sticky, Workspace
+from plane.app.serializers import StickySerializer
+
+
+class WorkspaceStickyViewSet(BaseViewSet):
+    serializer_class = StickySerializer
+    model = Sticky
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(owner_id=self.request.user.id)
+            .select_related("workspace", "owner")
+            .distinct()
+        )
+
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
+    )
+    def create(self, request, slug):
+        workspace = Workspace.objects.get(slug=slug)
+        serializer = StickySerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(workspace_id=workspace.id, owner_id=request.user.id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @allow_permission(
+        allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE"
+    )
+    def list(self, request, slug):
+        query = request.query_params.get("query", False)
+        stickies = self.get_queryset().order_by("-sort_order")
+        if query:
+            stickies = stickies.filter(description_stripped__icontains=query)
+
+        return self.paginate(
+            request=request,
+            queryset=(stickies),
+            on_results=lambda stickies: StickySerializer(stickies, many=True).data,
+            default_per_page=20,
+        )
+
+    @allow_permission(allowed_roles=[], creator=True, model=Sticky, level="WORKSPACE")
+    def partial_update(self, request, *args, **kwargs):
+        return super().partial_update(request, *args, **kwargs)
+
+    @allow_permission(allowed_roles=[], creator=True, model=Sticky, level="WORKSPACE")
+    def destroy(self, request, *args, **kwargs):
+        return super().destroy(request, *args, **kwargs)
diff --git a/apiserver/plane/app/views/workspace/user.py b/apiserver/plane/app/views/workspace/user.py
index 0010b4ae7..cc1caa92c 100644
--- a/apiserver/plane/app/views/workspace/user.py
+++ b/apiserver/plane/app/views/workspace/user.py
@@ -375,8 +375,11 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
 
         state_distribution = (
             Issue.issue_objects.filter(
+                (
+                    Q(assignees__in=[user_id])
+                    & Q(issue_assignee__deleted_at__isnull=True)
+                ),
                 workspace__slug=slug,
-                assignees__in=[user_id],
                 project__project_projectmember__member=request.user,
                 project__project_projectmember__is_active=True,
             )
@@ -391,8 +394,11 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
 
         priority_distribution = (
             Issue.issue_objects.filter(
+                (
+                    Q(assignees__in=[user_id])
+                    & Q(issue_assignee__deleted_at__isnull=True)
+                ),
                 workspace__slug=slug,
-                assignees__in=[user_id],
                 project__project_projectmember__member=request.user,
                 project__project_projectmember__is_active=True,
             )
@@ -426,8 +432,11 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
 
         assigned_issues_count = (
             Issue.issue_objects.filter(
+                (
+                    Q(assignees__in=[user_id])
+                    & Q(issue_assignee__deleted_at__isnull=True)
+                ),
                 workspace__slug=slug,
-                assignees__in=[user_id],
                 project__project_projectmember__member=request.user,
                 project__project_projectmember__is_active=True,
             )
@@ -438,8 +447,11 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
         pending_issues_count = (
             Issue.issue_objects.filter(
                 ~Q(state__group__in=["completed", "cancelled"]),
+                (
+                    Q(assignees__in=[user_id])
+                    & Q(issue_assignee__deleted_at__isnull=True)
+                ),
                 workspace__slug=slug,
-                assignees__in=[user_id],
                 project__project_projectmember__member=request.user,
                 project__project_projectmember__is_active=True,
             )
@@ -449,8 +461,11 @@ class WorkspaceUserProfileStatsEndpoint(BaseAPIView):
 
         completed_issues_count = (
             Issue.issue_objects.filter(
+                (
+                    Q(assignees__in=[user_id])
+                    & Q(issue_assignee__deleted_at__isnull=True)
+                ),
                 workspace__slug=slug,
-                assignees__in=[user_id],
                 state__group="completed",
                 project__project_projectmember__member=request.user,
                 project__project_projectmember__is_active=True,
diff --git a/apiserver/plane/app/views/workspace/user_preference.py b/apiserver/plane/app/views/workspace/user_preference.py
new file mode 100644
index 000000000..07ae70ac0
--- /dev/null
+++ b/apiserver/plane/app/views/workspace/user_preference.py
@@ -0,0 +1,85 @@
+# Module imports
+from ..base import BaseAPIView
+from plane.db.models.workspace import WorkspaceUserPreference
+from plane.app.serializers.workspace import WorkspaceUserPreferenceSerializer
+from plane.app.permissions import allow_permission, ROLE
+from plane.db.models import Workspace
+
+
+# Third party imports
+from rest_framework.response import Response
+from rest_framework import status
+
+
+class WorkspaceUserPreferenceViewSet(BaseAPIView):
+    model = WorkspaceUserPreference
+
+    def get_serializer_class(self):
+        return WorkspaceUserPreferenceSerializer
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def get(self, request, slug):
+        workspace = Workspace.objects.get(slug=slug)
+
+        get_preference = WorkspaceUserPreference.objects.filter(
+            user=request.user, workspace_id=workspace.id
+        )
+
+        create_preference_keys = []
+
+        keys = [
+            key
+            for key, _ in WorkspaceUserPreference.UserPreferenceKeys.choices
+        ]
+
+        for preference in keys:
+            if preference not in get_preference.values_list("key", flat=True):
+                create_preference_keys.append(preference)
+
+                preference = WorkspaceUserPreference.objects.bulk_create(
+                    [
+                        WorkspaceUserPreference(
+                            key=key, user=request.user, workspace=workspace, sort_order=(65535 + (i*10000))
+                        )
+                        for i, key in enumerate(create_preference_keys)
+                    ],
+                    batch_size=10,
+                    ignore_conflicts=True,
+                )
+
+        preferences = WorkspaceUserPreference.objects.filter(
+            user=request.user, workspace_id=workspace.id
+        ).order_by("sort_order").values("key", "is_pinned", "sort_order")
+
+
+        user_preferences = {}
+
+        for preference in preferences:
+            user_preferences[(str(preference["key"]))] = {
+                "is_pinned": preference["is_pinned"],
+                "sort_order": preference["sort_order"],
+        }
+        return Response(
+            user_preferences,
+            status=status.HTTP_200_OK,
+        )
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def patch(self, request, slug, key):
+        preference = WorkspaceUserPreference.objects.filter(
+            key=key, workspace__slug=slug, user=request.user
+        ).first()
+
+        if preference:
+            serializer = WorkspaceUserPreferenceSerializer(
+                preference, data=request.data, partial=True
+            )
+
+            if serializer.is_valid():
+                serializer.save()
+                return Response(serializer.data, status=status.HTTP_200_OK)
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        return Response(
+            {"detail": "Preference not found"}, status=status.HTTP_404_NOT_FOUND
+        )
diff --git a/apiserver/plane/authentication/urls.py b/apiserver/plane/authentication/urls.py
index b52cf2a21..d474fe4df 100644
--- a/apiserver/plane/authentication/urls.py
+++ b/apiserver/plane/authentication/urls.py
@@ -53,7 +53,6 @@ urlpatterns = [
     path("magic-generate/", MagicGenerateEndpoint.as_view(), name="magic-generate"),
     path("magic-sign-in/", MagicSignInEndpoint.as_view(), name="magic-sign-in"),
     path("magic-sign-up/", MagicSignUpEndpoint.as_view(), name="magic-sign-up"),
-    path("get-csrf-token/", CSRFTokenEndpoint.as_view(), name="get_csrf_token"),
     path(
         "spaces/magic-generate/",
         MagicGenerateSpaceEndpoint.as_view(),
diff --git a/apiserver/plane/authentication/views/app/password_management.py b/apiserver/plane/authentication/views/app/password_management.py
index cad498e63..5b8d383c7 100644
--- a/apiserver/plane/authentication/views/app/password_management.py
+++ b/apiserver/plane/authentication/views/app/password_management.py
@@ -100,8 +100,20 @@ class ResetPasswordEndpoint(View):
     def post(self, request, uidb64, token):
         try:
             # Decode the id from the uidb64
-            id = smart_str(urlsafe_base64_decode(uidb64))
-            user = User.objects.get(id=id)
+            try:
+                id = smart_str(urlsafe_base64_decode(uidb64))
+                user = User.objects.get(id=id)
+            except (ValueError, User.DoesNotExist):
+                exc = AuthenticationException(
+                    error_code=AUTHENTICATION_ERROR_CODES["INVALID_PASSWORD_TOKEN"],
+                    error_message="INVALID_PASSWORD_TOKEN",
+                )
+                params = exc.get_error_dict()
+                url = urljoin(
+                    base_host(request=request, is_app=True),
+                    "accounts/reset-password?" + urlencode(params),
+                )
+                return HttpResponseRedirect(url)
 
             # check if the token is valid for the user
             if not PasswordResetTokenGenerator().check_token(user, token):
diff --git a/apiserver/plane/bgtasks/copy_s3_object.py b/apiserver/plane/bgtasks/copy_s3_object.py
new file mode 100644
index 000000000..d73b96454
--- /dev/null
+++ b/apiserver/plane/bgtasks/copy_s3_object.py
@@ -0,0 +1,150 @@
+# Python imports
+import uuid
+import base64
+import requests
+from bs4 import BeautifulSoup
+
+# Django imports
+from django.conf import settings
+
+# Module imports
+from plane.db.models import FileAsset, Page, Issue
+from plane.utils.exception_logger import log_exception
+from plane.settings.storage import S3Storage
+from celery import shared_task
+
+
+def get_entity_id_field(entity_type, entity_id):
+    entity_mapping = {
+        FileAsset.EntityTypeContext.WORKSPACE_LOGO: {"workspace_id": entity_id},
+        FileAsset.EntityTypeContext.PROJECT_COVER: {"project_id": entity_id},
+        FileAsset.EntityTypeContext.USER_AVATAR: {"user_id": entity_id},
+        FileAsset.EntityTypeContext.USER_COVER: {"user_id": entity_id},
+        FileAsset.EntityTypeContext.ISSUE_ATTACHMENT: {"issue_id": entity_id},
+        FileAsset.EntityTypeContext.ISSUE_DESCRIPTION: {"issue_id": entity_id},
+        FileAsset.EntityTypeContext.PAGE_DESCRIPTION: {"page_id": entity_id},
+        FileAsset.EntityTypeContext.COMMENT_DESCRIPTION: {"comment_id": entity_id},
+        FileAsset.EntityTypeContext.DRAFT_ISSUE_DESCRIPTION: {
+            "draft_issue_id": entity_id
+        },
+    }
+    return entity_mapping.get(entity_type, {})
+
+
+def extract_asset_ids(html, tag):
+    try:
+        soup = BeautifulSoup(html, "html.parser")
+        return [tag.get("src") for tag in soup.find_all(tag) if tag.get("src")]
+    except Exception as e:
+        log_exception(e)
+        return []
+
+
+def replace_asset_ids(html, tag, duplicated_assets):
+    try:
+        soup = BeautifulSoup(html, "html.parser")
+        for mention_tag in soup.find_all(tag):
+            for asset in duplicated_assets:
+                if mention_tag.get("src") == asset["old_asset_id"]:
+                    mention_tag["src"] = asset["new_asset_id"]
+        return str(soup)
+    except Exception as e:
+        log_exception(e)
+        return html
+
+
+def update_description(entity, duplicated_assets, tag):
+    updated_html = replace_asset_ids(entity.description_html, tag, duplicated_assets)
+    entity.description_html = updated_html
+    entity.save()
+    return updated_html
+
+
+# Get the description binary and description from the live server
+def sync_with_external_service(entity_name, description_html):
+    try:
+        data = {
+            "description_html": description_html,
+            "variant": "rich" if entity_name == "PAGE" else "document",
+        }
+        response = requests.post(
+            f"{settings.LIVE_BASE_URL}/convert-document/",
+            json=data,
+            headers=None,
+        )
+        if response.status_code == 200:
+            return response.json()
+    except requests.RequestException as e:
+        log_exception(e)
+    return {}
+
+
+@shared_task
+def copy_s3_objects(entity_name, entity_identifier, project_id, slug, user_id):
+    """
+    Step 1: Extract asset ids from the description_html of the entity
+    Step 2: Duplicate the assets
+    Step 3: Update the description_html of the entity with the new asset ids (change the src of img tag)
+    Step 4: Request the live server to generate the description_binary and description for the entity
+
+    """
+    try:
+        model_class = {"PAGE": Page, "ISSUE": Issue}.get(entity_name)
+        if not model_class:
+            raise ValueError(f"Unsupported entity_name: {entity_name}")
+
+        entity = model_class.objects.get(id=entity_identifier)
+        asset_ids = extract_asset_ids(entity.description_html, "image-component")
+
+        duplicated_assets = []
+        workspace = entity.workspace
+        storage = S3Storage()
+        original_assets = FileAsset.objects.filter(
+            workspace=workspace, project_id=project_id, id__in=asset_ids
+        )
+
+        for original_asset in original_assets:
+            destination_key = f"{workspace.id}/{uuid.uuid4().hex}-{original_asset.attributes.get('name')}"
+            duplicated_asset = FileAsset.objects.create(
+                attributes={
+                    "name": original_asset.attributes.get("name"),
+                    "type": original_asset.attributes.get("type"),
+                    "size": original_asset.attributes.get("size"),
+                },
+                asset=destination_key,
+                size=original_asset.size,
+                workspace=workspace,
+                created_by_id=user_id,
+                entity_type=original_asset.entity_type,
+                project_id=project_id,
+                storage_metadata=original_asset.storage_metadata,
+                **get_entity_id_field(original_asset.entity_type, entity_identifier),
+            )
+            storage.copy_object(original_asset.asset, destination_key)
+            duplicated_assets.append(
+                {
+                    "new_asset_id": str(duplicated_asset.id),
+                    "old_asset_id": str(original_asset.id),
+                }
+            )
+
+        if duplicated_assets:
+            FileAsset.objects.filter(
+                pk__in=[item["new_asset_id"] for item in duplicated_assets]
+            ).update(is_uploaded=True)
+            updated_html = update_description(
+                entity, duplicated_assets, "image-component"
+            )
+            external_data = sync_with_external_service(entity_name, updated_html)
+
+            if external_data:
+                entity.description = external_data.get("description")
+                entity.description_binary = base64.b64decode(
+                    external_data.get("description_binary")
+                )
+                entity.save()
+
+        return
+    except Exception as e:
+        log_exception(e)
+        return []
diff --git a/apiserver/plane/bgtasks/deletion_task.py b/apiserver/plane/bgtasks/deletion_task.py
index 30ff7e8bd..ef57873cf 100644
--- a/apiserver/plane/bgtasks/deletion_task.py
+++ b/apiserver/plane/bgtasks/deletion_task.py
@@ -82,7 +82,10 @@ def soft_delete_related_objects(app_label, model_name, instance_pk, using=None):
                                 )
                 else:
                     # Handle other relationships
-                    related_queryset = getattr(instance, related_name).all()
+                    related_queryset = getattr(instance, related_name)(
+                        manager="objects"
+                    ).all()
+
                     for related_obj in related_queryset:
                         if hasattr(related_obj, "deleted_at"):
                             if not related_obj.deleted_at:
diff --git a/apiserver/plane/bgtasks/issue_activities_task.py b/apiserver/plane/bgtasks/issue_activities_task.py
index e0e2ea84e..dacb39236 100644
--- a/apiserver/plane/bgtasks/issue_activities_task.py
+++ b/apiserver/plane/bgtasks/issue_activities_task.py
@@ -9,10 +9,10 @@ from celery import shared_task
 from django.core.serializers.json import DjangoJSONEncoder
 from django.utils import timezone
 
-from plane.app.serializers import IssueActivitySerializer
-from plane.bgtasks.notification_task import notifications
 
 # Module imports
+from plane.app.serializers import IssueActivitySerializer
+from plane.bgtasks.notification_task import notifications
 from plane.db.models import (
     CommentReaction,
     Cycle,
@@ -32,7 +32,7 @@ from plane.settings.redis import redis_instance
 from plane.utils.exception_logger import log_exception
 from plane.bgtasks.webhook_task import webhook_activity
 from plane.utils.issue_relation_mapper import get_inverse_relation
-
+from plane.utils.valid_uuid import is_valid_uuid
 
 # Track Changes in name
 def track_name(
@@ -738,8 +738,10 @@ def delete_comment_activity(
     issue_activities,
     epoch,
 ):
+    requested_data = json.loads(requested_data) if requested_data is not None else None
     issue_activities.append(
         IssueActivity(
+            issue_comment_id=requested_data.get("comment_id", None),
             issue_id=issue_id,
             project_id=project_id,
             workspace_id=workspace_id,
@@ -788,14 +790,15 @@ def create_cycle_issue_activity(
                 issue_id=updated_record.get("issue_id"),
                 actor_id=actor_id,
                 verb="updated",
-                old_value=old_cycle.name,
-                new_value=new_cycle.name,
+                old_value=old_cycle.name if old_cycle else "",
+                new_value=new_cycle.name if new_cycle else "",
                 field="cycles",
                 project_id=project_id,
                 workspace_id=workspace_id,
-                comment=f"updated cycle from {old_cycle.name} to {new_cycle.name}",
-                old_identifier=old_cycle.id,
-                new_identifier=new_cycle.id,
+                comment=f"""updated cycle from {old_cycle.name if old_cycle else ""}
+                to {new_cycle.name if new_cycle else ""}""",
+                old_identifier=old_cycle.id if old_cycle else None,
+                new_identifier=new_cycle.id if new_cycle else None,
                 epoch=epoch,
             )
         )
@@ -891,11 +894,11 @@ def create_module_issue_activity(
             actor_id=actor_id,
             verb="created",
             old_value="",
-            new_value=module.name,
+            new_value=module.name if module else "",
             field="modules",
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f"added module {module.name}",
+            comment=f"added module {module.name if module else ''}",
             new_identifier=requested_data.get("module_id"),
             epoch=epoch,
         )
@@ -1411,7 +1414,7 @@ def delete_issue_relation_activity(
             ),
             project_id=project_id,
             workspace_id=workspace_id,
-            comment=f'deleted {requested_data.get("relation_type")} relation',
+            comment=f"deleted {requested_data.get('relation_type')} relation",
             old_identifier=requested_data.get("related_issue"),
             epoch=epoch,
         )
@@ -1565,9 +1568,14 @@ def issue_activity(
     try:
         issue_activities = []
 
+        # check if project_id is valid
+        if not is_valid_uuid(project_id):
+            return
+
         project = Project.objects.get(pk=project_id)
         workspace_id = project.workspace_id
 
+
         if issue_id is not None:
             if origin:
                 ri = redis_instance()
diff --git a/apiserver/plane/bgtasks/issue_description_version_sync.py b/apiserver/plane/bgtasks/issue_description_version_sync.py
new file mode 100644
index 000000000..14956cb50
--- /dev/null
+++ b/apiserver/plane/bgtasks/issue_description_version_sync.py
@@ -0,0 +1,125 @@
+# Python imports
+from typing import Optional
+import logging
+
+# Django imports
+from django.utils import timezone
+from django.db import transaction
+
+# Third party imports
+from celery import shared_task
+
+# Module imports
+from plane.db.models import Issue, IssueDescriptionVersion, ProjectMember
+from plane.utils.exception_logger import log_exception
+
+
+def get_owner_id(issue: Issue) -> Optional[int]:
+    """Get the owner ID of the issue"""
+
+    if issue.updated_by_id:
+        return issue.updated_by_id
+
+    if issue.created_by_id:
+        return issue.created_by_id
+
+    # Find project admin as fallback
+    project_member = ProjectMember.objects.filter(
+        project_id=issue.project_id,
+        role=20,  # Admin role
+    ).first()
+
+    return project_member.member_id if project_member else None
+
+
+@shared_task
+def sync_issue_description_version(batch_size=5000, offset=0, countdown=300):
+    """Task to create IssueDescriptionVersion records for existing Issues in batches"""
+    try:
+        with transaction.atomic():
+            base_query = Issue.objects
+            total_issues_count = base_query.count()
+
+            if total_issues_count == 0:
+                return
+
+            # Calculate batch range
+            end_offset = min(offset + batch_size, total_issues_count)
+
+            # Fetch issues with related data
+            issues_batch = (
+                base_query.order_by("created_at")
+                .select_related("workspace", "project")
+                .only(
+                    "id",
+                    "workspace_id",
+                    "project_id",
+                    "created_by_id",
+                    "updated_by_id",
+                    "description_binary",
+                    "description_html",
+                    "description_stripped",
+                    "description",
+                )[offset:end_offset]
+            )
+
+            if not issues_batch:
+                return
+
+            version_objects = []
+            for issue in issues_batch:
+                # Validate required fields
+                if not issue.workspace_id or not issue.project_id:
+                    logging.warning(
+                        f"Skipping {issue.id} - missing workspace_id or project_id"
+                    )
+                    continue
+
+                # Determine owned_by_id
+                owned_by_id = get_owner_id(issue)
+                if owned_by_id is None:
+                    logging.warning(f"Skipping issue {issue.id} - missing owned_by")
+                    continue
+
+                # Create version object
+                version_objects.append(
+                    IssueDescriptionVersion(
+                        workspace_id=issue.workspace_id,
+                        project_id=issue.project_id,
+                        created_by_id=issue.created_by_id,
+                        updated_by_id=issue.updated_by_id,
+                        owned_by_id=owned_by_id,
+                        last_saved_at=timezone.now(),
+                        issue_id=issue.id,
+                        description_binary=issue.description_binary,
+                        description_html=issue.description_html,
+                        description_stripped=issue.description_stripped,
+                        description_json=issue.description,
+                    )
+                )
+
+            # Bulk create version objects
+            if version_objects:
+                IssueDescriptionVersion.objects.bulk_create(version_objects)
+
+            # Schedule next batch if needed
+            if end_offset < total_issues_count:
+                sync_issue_description_version.apply_async(
+                    kwargs={
+                        "batch_size": batch_size,
+                        "offset": end_offset,
+                        "countdown": countdown,
+                    },
+                    countdown=countdown,
+                )
+        return
+    except Exception as e:
+        log_exception(e)
+        return
+
+
+@shared_task
+def schedule_issue_description_version(batch_size=5000, countdown=300):
+    sync_issue_description_version.delay(
+        batch_size=int(batch_size), countdown=countdown
+    )
diff --git a/apiserver/plane/bgtasks/issue_description_version_task.py b/apiserver/plane/bgtasks/issue_description_version_task.py
new file mode 100644
index 000000000..a29fb6c57
--- /dev/null
+++ b/apiserver/plane/bgtasks/issue_description_version_task.py
@@ -0,0 +1,84 @@
+from celery import shared_task
+from django.db import transaction
+from django.utils import timezone
+from typing import Optional, Dict
+import json
+
+from plane.db.models import Issue, IssueDescriptionVersion
+from plane.utils.exception_logger import log_exception
+
+
+def should_update_existing_version(
+    version: IssueDescriptionVersion, user_id: str, max_time_difference: int = 600
+) -> bool:
+    if not version:
+        return
+
+    time_difference = (timezone.now() - version.last_saved_at).total_seconds()
+    return (
+        str(version.owned_by_id) == str(user_id)
+        and time_difference <= max_time_difference
+    )
+
+
+def update_existing_version(version: IssueDescriptionVersion, issue) -> None:
+    version.description_json = issue.description
+    version.description_html = issue.description_html
+    version.description_binary = issue.description_binary
+    version.description_stripped = issue.description_stripped
+    version.last_saved_at = timezone.now()
+
+    version.save(
+        update_fields=[
+            "description_json",
+            "description_html",
+            "description_binary",
+            "description_stripped",
+            "last_saved_at",
+        ]
+    )
+
+
+@shared_task
+def issue_description_version_task(
+    updated_issue, issue_id, user_id, is_creating=False
+) -> Optional[bool]:
+    try:
+        # Parse updated issue data
+        current_issue: Dict = json.loads(updated_issue) if updated_issue else {}
+
+        # Get current issue
+        issue = Issue.objects.get(id=issue_id)
+
+        # Check if description has changed
+        if (
+            current_issue.get("description_html") == issue.description_html
+            and not is_creating
+        ):
+            return
+
+        with transaction.atomic():
+            # Get latest version
+            latest_version = (
+                IssueDescriptionVersion.objects.filter(issue_id=issue_id)
+                .order_by("-last_saved_at")
+                .first()
+            )
+
+            # Determine whether to update existing or create new version
+            if should_update_existing_version(version=latest_version, user_id=user_id):
+                update_existing_version(latest_version, issue)
+            else:
+                IssueDescriptionVersion.log_issue_description_version(issue, user_id)
+
+            return
+
+    except Issue.DoesNotExist:
+        # Issue no longer exists, skip processing
+        return
+    except json.JSONDecodeError as e:
+        log_exception(f"Invalid JSON for updated_issue: {e}")
+        return
+    except Exception as e:
+        log_exception(f"Error processing issue description version: {e}")
+        return
diff --git a/apiserver/plane/bgtasks/issue_version_sync.py b/apiserver/plane/bgtasks/issue_version_sync.py
new file mode 100644
index 000000000..698cedf15
--- /dev/null
+++ b/apiserver/plane/bgtasks/issue_version_sync.py
@@ -0,0 +1,254 @@
+# Python imports
+import json
+from typing import Optional, List, Dict
+from uuid import UUID
+from itertools import groupby
+import logging
+
+# Django imports
+from django.utils import timezone
+from django.db import transaction
+
+# Third party imports
+from celery import shared_task
+
+# Module imports
+from plane.db.models import (
+    Issue,
+    IssueVersion,
+    ProjectMember,
+    CycleIssue,
+    ModuleIssue,
+    IssueActivity,
+    IssueAssignee,
+    IssueLabel,
+)
+from plane.utils.exception_logger import log_exception
+
+
+@shared_task
+def issue_task(updated_issue, issue_id, user_id):
+    try:
+        current_issue = json.loads(updated_issue) if updated_issue else {}
+        issue = Issue.objects.get(id=issue_id)
+
+        updated_current_issue = {}
+        for key, value in current_issue.items():
+            if getattr(issue, key) != value:
+                updated_current_issue[key] = value
+
+        if updated_current_issue:
+            issue_version = (
+                IssueVersion.objects.filter(issue_id=issue_id)
+                .order_by("-last_saved_at")
+                .first()
+            )
+
+            if (
+                issue_version
+                and str(issue_version.owned_by) == str(user_id)
+                and (timezone.now() - issue_version.last_saved_at).total_seconds()
+                <= 600
+            ):
+                for key, value in updated_current_issue.items():
+                    setattr(issue_version, key, value)
+                issue_version.last_saved_at = timezone.now()
+                issue_version.save(
+                    update_fields=list(updated_current_issue.keys()) + ["last_saved_at"]
+                )
+            else:
+                IssueVersion.log_issue_version(issue, user_id)
+
+        return
+    except Issue.DoesNotExist:
+        return
+    except Exception as e:
+        log_exception(e)
+        return
+
+
+def get_owner_id(issue: Issue) -> Optional[int]:
+    """Get the owner ID of the issue"""
+
+    if issue.updated_by_id:
+        return issue.updated_by_id
+
+    if issue.created_by_id:
+        return issue.created_by_id
+
+    # Find project admin as fallback
+    project_member = ProjectMember.objects.filter(
+        project_id=issue.project_id,
+        role=20,  # Admin role
+    ).first()
+
+    return project_member.member_id if project_member else None
+
+
+def get_related_data(issue_ids: List[UUID]) -> Dict:
+    """Get related data for the given issue IDs"""
+
+    cycle_issues = {
+        ci.issue_id: ci.cycle_id
+        for ci in CycleIssue.objects.filter(issue_id__in=issue_ids)
+    }
+
+    # Get assignees with proper grouping
+    assignee_records = list(
+        IssueAssignee.objects.filter(issue_id__in=issue_ids)
+        .values_list("issue_id", "assignee_id")
+        .order_by("issue_id")
+    )
+    assignees = {}
+    for issue_id, group in groupby(assignee_records, key=lambda x: x[0]):
+        assignees[issue_id] = [str(g[1]) for g in group]
+
+    # Get labels with proper grouping
+    label_records = list(
+        IssueLabel.objects.filter(issue_id__in=issue_ids)
+        .values_list("issue_id", "label_id")
+        .order_by("issue_id")
+    )
+    labels = {}
+    for issue_id, group in groupby(label_records, key=lambda x: x[0]):
+        labels[issue_id] = [str(g[1]) for g in group]
+
+    # Get modules with proper grouping
+    module_records = list(
+        ModuleIssue.objects.filter(issue_id__in=issue_ids)
+        .values_list("issue_id", "module_id")
+        .order_by("issue_id")
+    )
+    modules = {}
+    for issue_id, group in groupby(module_records, key=lambda x: x[0]):
+        modules[issue_id] = [str(g[1]) for g in group]
+
+    # Get latest activities
+    latest_activities = {}
+    activities = IssueActivity.objects.filter(issue_id__in=issue_ids).order_by(
+        "issue_id", "-created_at"
+    )
+    for issue_id, activities_group in groupby(activities, key=lambda x: x.issue_id):
+        first_activity = next(activities_group, None)
+        if first_activity:
+            latest_activities[issue_id] = first_activity.id
+
+    return {
+        "cycle_issues": cycle_issues,
+        "assignees": assignees,
+        "labels": labels,
+        "modules": modules,
+        "activities": latest_activities,
+    }
+
+
+def create_issue_version(issue: Issue, related_data: Dict) -> Optional[IssueVersion]:
+    """Create IssueVersion object from the given issue and related data"""
+
+    try:
+        if not issue.workspace_id or not issue.project_id:
+            logging.warning(
+                f"Skipping issue {issue.id} - missing workspace_id or project_id"
+            )
+            return None
+
+        owned_by_id = get_owner_id(issue)
+        if owned_by_id is None:
+            logging.warning(f"Skipping issue {issue.id} - missing owned_by")
+            return None
+
+        return IssueVersion(
+            workspace_id=issue.workspace_id,
+            project_id=issue.project_id,
+            created_by_id=issue.created_by_id,
+            updated_by_id=issue.updated_by_id,
+            owned_by_id=owned_by_id,
+            last_saved_at=timezone.now(),
+            activity_id=related_data["activities"].get(issue.id),
+            properties=getattr(issue, "properties", {}),
+            meta=getattr(issue, "meta", {}),
+            issue_id=issue.id,
+            parent=issue.parent_id,
+            state=issue.state_id,
+            estimate_point=issue.estimate_point_id,
+            name=issue.name,
+            priority=issue.priority,
+            start_date=issue.start_date,
+            target_date=issue.target_date,
+            assignees=related_data["assignees"].get(issue.id, []),
+            sequence_id=issue.sequence_id,
+            labels=related_data["labels"].get(issue.id, []),
+            sort_order=issue.sort_order,
+            completed_at=issue.completed_at,
+            archived_at=issue.archived_at,
+            is_draft=issue.is_draft,
+            external_source=issue.external_source,
+            external_id=issue.external_id,
+            type=issue.type_id,
+            cycle=related_data["cycle_issues"].get(issue.id),
+            modules=related_data["modules"].get(issue.id, []),
+        )
+    except Exception as e:
+        log_exception(e)
+        return None
+
+
+@shared_task
+def sync_issue_version(batch_size=5000, offset=0, countdown=300):
+    """Task to create IssueVersion records for existing Issues in batches"""
+
+    try:
+        with transaction.atomic():
+            base_query = Issue.objects
+            total_issues_count = base_query.count()
+
+            if total_issues_count == 0:
+                return
+
+            end_offset = min(offset + batch_size, total_issues_count)
+
+            # Get issues batch with optimized queries
+            issues_batch = list(
+                base_query.order_by("created_at")
+                .select_related("workspace", "project")
+                .all()[offset:end_offset]
+            )
+
+            if not issues_batch:
+                return
+
+            # Get all related data in bulk
+            issue_ids = [issue.id for issue in issues_batch]
+            related_data = get_related_data(issue_ids)
+
+            issue_versions = []
+            for issue in issues_batch:
+                version = create_issue_version(issue, related_data)
+                if version:
+                    issue_versions.append(version)
+
+            # Bulk create versions
+            if issue_versions:
+                IssueVersion.objects.bulk_create(issue_versions, batch_size=1000)
+
+            # Schedule the next batch if there are more workspaces to process
+            if end_offset < total_issues_count:
+                sync_issue_version.apply_async(
+                    kwargs={
+                        "batch_size": batch_size,
+                        "offset": end_offset,
+                        "countdown": countdown,
+                    },
+                    countdown=countdown,
+                )
+
+            logging.info(f"Processed Issues: {end_offset}")
+            return
+    except Exception as e:
+        log_exception(e)
+        return
+
+
+@shared_task
+def schedule_issue_version(batch_size=5000, countdown=300):
+    sync_issue_version.delay(batch_size=int(batch_size), countdown=countdown)
diff --git a/apiserver/plane/bgtasks/notification_task.py b/apiserver/plane/bgtasks/notification_task.py
index f61c2e3c3..e58344bbf 100644
--- a/apiserver/plane/bgtasks/notification_task.py
+++ b/apiserver/plane/bgtasks/notification_task.py
@@ -32,7 +32,6 @@ from bs4 import BeautifulSoup
 
 def update_mentions_for_issue(issue, project, new_mentions, removed_mention):
     aggregated_issue_mentions = []
-
     for mention_id in new_mentions:
         aggregated_issue_mentions.append(
             IssueMention(
@@ -125,7 +124,9 @@ def extract_mentions(issue_instance):
         data = json.loads(issue_instance)
         html = data.get("description_html")
         soup = BeautifulSoup(html, "html.parser")
-        mention_tags = soup.find_all("mention-component", attrs={"target": "users"})
+        mention_tags = soup.find_all(
+            "mention-component", attrs={"entity_name": "user_mention"}
+        )
 
         mentions = [mention_tag["entity_identifier"] for mention_tag in mention_tags]
 
@@ -139,7 +140,9 @@ def extract_comment_mentions(comment_value):
     try:
         mentions = []
         soup = BeautifulSoup(comment_value, "html.parser")
-        mentions_tags = soup.find_all("mention-component", attrs={"target": "users"})
+        mentions_tags = soup.find_all(
+            "mention-component", attrs={"entity_name": "user_mention"}
+        )
         for mention_tag in mentions_tags:
             mentions.append(mention_tag["entity_identifier"])
         return list(set(mentions))
@@ -255,12 +258,9 @@ def notifications(
             new_mentions = get_new_mentions(
                 requested_instance=requested_data, current_instance=current_instance
             )
-
-            new_mentions = [
-                str(mention)
-                for mention in new_mentions
-                if mention in set(project_members)
-            ]
+            new_mentions = list(
+                set(new_mentions) & {str(member) for member in project_members}
+            )
             removed_mention = get_removed_mentions(
                 requested_instance=requested_data, current_instance=current_instance
             )
diff --git a/apiserver/plane/bgtasks/recent_visited_task.py b/apiserver/plane/bgtasks/recent_visited_task.py
index e8e3eb60f..4203867da 100644
--- a/apiserver/plane/bgtasks/recent_visited_task.py
+++ b/apiserver/plane/bgtasks/recent_visited_task.py
@@ -1,5 +1,6 @@
 # Python imports
 from django.utils import timezone
+from django.db import DatabaseError
 
 # Third party imports
 from celery import shared_task
@@ -22,8 +23,12 @@ def recent_visited_task(entity_name, entity_identifier, user_id, project_id, slu
         ).first()
 
         if recent_visited:
-            recent_visited.visited_at = timezone.now()
-            recent_visited.save(update_fields=["visited_at"])
+            # Check if the database is available
+            try:
+                recent_visited.visited_at = timezone.now()
+                recent_visited.save(update_fields=["visited_at"])
+            except DatabaseError:
+                pass
         else:
             recent_visited_count = UserRecentVisit.objects.filter(
                 user_id=user_id, workspace_id=workspace.id
diff --git a/apiserver/plane/bgtasks/webhook_task.py b/apiserver/plane/bgtasks/webhook_task.py
index d5d8b0043..c1ea01a4d 100644
--- a/apiserver/plane/bgtasks/webhook_task.py
+++ b/apiserver/plane/bgtasks/webhook_task.py
@@ -136,7 +136,7 @@ def webhook_task(self, webhook, slug, event, event_data, action, current_site):
         # Log the webhook request
         WebhookLog.objects.create(
             workspace_id=str(webhook.workspace_id),
-            webhook_id=str(webhook.id),
+            webhook=str(webhook.id),
             event_type=str(event),
             request_method=str(action),
             request_headers=str(headers),
@@ -153,7 +153,7 @@ def webhook_task(self, webhook, slug, event, event_data, action, current_site):
         # Log the failed webhook request
         WebhookLog.objects.create(
             workspace_id=str(webhook.workspace_id),
-            webhook_id=str(webhook.id),
+            webhook=str(webhook.id),
             event_type=str(event),
             request_method=str(action),
             request_headers=str(headers),
@@ -304,7 +304,7 @@ def webhook_send_task(
         # Log the webhook request
         WebhookLog.objects.create(
             workspace_id=str(webhook.workspace_id),
-            webhook_id=str(webhook.id),
+            webhook=str(webhook.id),
             event_type=str(event),
             request_method=str(action),
             request_headers=str(headers),
@@ -319,7 +319,7 @@ def webhook_send_task(
         # Log the failed webhook request
         WebhookLog.objects.create(
             workspace_id=str(webhook.workspace_id),
-            webhook_id=str(webhook.id),
+            webhook=str(webhook.id),
             event_type=str(event),
             request_method=str(action),
             request_headers=str(headers),
@@ -387,7 +387,11 @@ def webhook_activity(
                 webhook=webhook.id,
                 slug=slug,
                 event=event,
-                event_data=get_model_data(event=event, event_id=event_id),
+                event_data=(
+                    {"id": event_id}
+                    if verb == "deleted"
+                    else get_model_data(event=event, event_id=event_id)
+                ),
                 action=verb,
                 current_site=current_site,
                 activity={
diff --git a/apiserver/plane/bgtasks/workspace_invitation_task.py b/apiserver/plane/bgtasks/workspace_invitation_task.py
index c0b945e62..a8bd0d7d0 100644
--- a/apiserver/plane/bgtasks/workspace_invitation_task.py
+++ b/apiserver/plane/bgtasks/workspace_invitation_task.py
@@ -16,9 +16,9 @@ from plane.utils.exception_logger import log_exception
 
 
 @shared_task
-def workspace_invitation(email, workspace_id, token, current_site, invitor):
+def workspace_invitation(email, workspace_id, token, current_site, inviter):
     try:
-        user = User.objects.get(email=invitor)
+        user = User.objects.get(email=inviter)
 
         workspace = Workspace.objects.get(pk=workspace_id)
         workspace_member_invite = WorkspaceMemberInvite.objects.get(
@@ -26,7 +26,7 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
         )
 
         # Relative link
-        relative_link = f"/workspace-invitations/?invitation_id={workspace_member_invite.id}&email={email}&slug={workspace.slug}"
+        relative_link = f"/workspace-invitations/?invitation_id={workspace_member_invite.id}&email={email}&slug={workspace.slug}"  # noqa: E501
 
         # The complete url including the domain
         abs_url = str(current_site) + relative_link
@@ -42,7 +42,7 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
         ) = get_email_configuration()
 
         # Subject of the email
-        subject = f"{user.first_name or user.display_name or user.email} has invited you to join them in {workspace.name} on Plane"
+        subject = f"{user.first_name or user.display_name or user.email} has invited you to join them in {workspace.name} on Plane"  # noqa: E501
 
         context = {
             "email": email,
@@ -78,11 +78,9 @@ def workspace_invitation(email, workspace_id, token, current_site, invitor):
         )
         msg.attach_alternative(html_content, "text/html")
         msg.send()
-        logging.getLogger("plane").info("Email sent succesfully")
-
+        logging.getLogger("plane").info("Email sent successfully")
         return
-    except (Workspace.DoesNotExist, WorkspaceMemberInvite.DoesNotExist) as e:
-        log_exception(e)
+    except (Workspace.DoesNotExist, WorkspaceMemberInvite.DoesNotExist):
         return
     except Exception as e:
         log_exception(e)
diff --git a/apiserver/plane/db/management/commands/sync_issue_description_version.py b/apiserver/plane/db/management/commands/sync_issue_description_version.py
new file mode 100644
index 000000000..7ff2fc391
--- /dev/null
+++ b/apiserver/plane/db/management/commands/sync_issue_description_version.py
@@ -0,0 +1,23 @@
+# Django imports
+from django.core.management.base import BaseCommand
+
+# Module imports
+from plane.bgtasks.issue_description_version_sync import (
+    schedule_issue_description_version,
+)
+
+
+class Command(BaseCommand):
+    help = "Creates IssueDescriptionVersion records for existing Issues in batches"
+
+    def handle(self, *args, **options):
+        batch_size = input("Enter the batch size: ")
+        batch_countdown = input("Enter the batch countdown: ")
+
+        schedule_issue_description_version.delay(
+            batch_size=batch_size, countdown=int(batch_countdown)
+        )
+
+        self.stdout.write(
+            self.style.SUCCESS("Successfully created issue description version task")
+        )
diff --git a/apiserver/plane/db/management/commands/sync_issue_version.py b/apiserver/plane/db/management/commands/sync_issue_version.py
new file mode 100644
index 000000000..2b6632f26
--- /dev/null
+++ b/apiserver/plane/db/management/commands/sync_issue_version.py
@@ -0,0 +1,19 @@
+# Django imports
+from django.core.management.base import BaseCommand
+
+# Module imports
+from plane.bgtasks.issue_version_sync import schedule_issue_version
+
+
+class Command(BaseCommand):
+    help = "Creates IssueVersion records for existing Issues in batches"
+
+    def handle(self, *args, **options):
+        batch_size = input("Enter the batch size: ")
+        batch_countdown = input("Enter the batch countdown: ")
+
+        schedule_issue_version.delay(
+            batch_size=batch_size, countdown=int(batch_countdown)
+        )
+
+        self.stdout.write(self.style.SUCCESS("Successfully created issue version task"))
diff --git a/apiserver/plane/db/migrations/0087_remove_issueversion_description_and_more.py b/apiserver/plane/db/migrations/0087_remove_issueversion_description_and_more.py
new file mode 100644
index 000000000..086f52316
--- /dev/null
+++ b/apiserver/plane/db/migrations/0087_remove_issueversion_description_and_more.py
@@ -0,0 +1,117 @@
+# Generated by Django 4.2.17 on 2024-12-13 10:09
+
+from django.conf import settings
+import django.core.validators
+from django.db import migrations, models
+import django.db.models.deletion
+import django.utils.timezone
+import plane.db.models.user
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0086_issueversion_alter_teampage_unique_together_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='issueversion',
+            name='description',
+        ),
+        migrations.RemoveField(
+            model_name='issueversion',
+            name='description_binary',
+        ),
+        migrations.RemoveField(
+            model_name='issueversion',
+            name='description_html',
+        ),
+        migrations.RemoveField(
+            model_name='issueversion',
+            name='description_stripped',
+        ),
+        migrations.AddField(
+            model_name='issueversion',
+            name='activity',
+            field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='versions', to='db.issueactivity'),
+        ),
+        migrations.AddField(
+            model_name='profile',
+            name='is_mobile_onboarded',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='profile',
+            name='mobile_onboarding_step',
+            field=models.JSONField(default=plane.db.models.user.get_mobile_default_onboarding),
+        ),
+        migrations.AddField(
+            model_name='profile',
+            name='mobile_timezone_auto_set',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AddField(
+            model_name='profile',
+            name='language',
+            field=models.CharField(default='en', max_length=255),
+        ),
+        migrations.AlterField(
+            model_name='issueversion',
+            name='owned_by',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_versions', to=settings.AUTH_USER_MODEL),
+        ),
+        migrations.CreateModel(
+            name='Sticky',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('deleted_at', models.DateTimeField(blank=True, null=True, verbose_name='Deleted At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('name', models.TextField()),
+                ('description', models.JSONField(blank=True, default=dict)),
+                ('description_html', models.TextField(blank=True, default='<p></p>')),
+                ('description_stripped', models.TextField(blank=True, null=True)),
+                ('description_binary', models.BinaryField(null=True)),
+                ('logo_props', models.JSONField(default=dict)),
+                ('color', models.CharField(blank=True, max_length=255, null=True)),
+                ('background_color', models.CharField(blank=True, max_length=255, null=True)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('owner', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='stickies', to=settings.AUTH_USER_MODEL)),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='stickies', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Sticky',
+                'verbose_name_plural': 'Stickies',
+                'db_table': 'stickies',
+                'ordering': ('-created_at',),
+            },
+        ),
+        migrations.CreateModel(
+            name='IssueDescriptionVersion',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('deleted_at', models.DateTimeField(blank=True, null=True, verbose_name='Deleted At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('description_binary', models.BinaryField(null=True)),
+                ('description_html', models.TextField(blank=True, default='<p></p>')),
+                ('description_stripped', models.TextField(blank=True, null=True)),
+                ('description_json', models.JSONField(blank=True, default=dict)),
+                ('last_saved_at', models.DateTimeField(default=django.utils.timezone.now)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('issue', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='description_versions', to='db.issue')),
+                ('owned_by', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='issue_description_versions', to=settings.AUTH_USER_MODEL)),
+                ('project', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='project_%(class)s', to='db.project')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='workspace_%(class)s', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Issue Description Version',
+                'verbose_name_plural': 'Issue Description Versions',
+                'db_table': 'issue_description_versions',
+            },
+        ),
+    ]
diff --git a/apiserver/plane/db/migrations/0088_sticky_sort_order_workspaceuserlink.py b/apiserver/plane/db/migrations/0088_sticky_sort_order_workspaceuserlink.py
new file mode 100644
index 000000000..1b3122157
--- /dev/null
+++ b/apiserver/plane/db/migrations/0088_sticky_sort_order_workspaceuserlink.py
@@ -0,0 +1,124 @@
+# Generated by Django 4.2.15 on 2024-12-24 14:57
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0087_remove_issueversion_description_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="sticky",
+            name="sort_order",
+            field=models.FloatField(default=65535),
+        ),
+        migrations.CreateModel(
+            name="WorkspaceUserLink",
+            fields=[
+                (
+                    "created_at",
+                    models.DateTimeField(auto_now_add=True, verbose_name="Created At"),
+                ),
+                (
+                    "updated_at",
+                    models.DateTimeField(
+                        auto_now=True, verbose_name="Last Modified At"
+                    ),
+                ),
+                (
+                    "deleted_at",
+                    models.DateTimeField(
+                        blank=True, null=True, verbose_name="Deleted At"
+                    ),
+                ),
+                (
+                    "id",
+                    models.UUIDField(
+                        db_index=True,
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                        unique=True,
+                    ),
+                ),
+                ("title", models.CharField(blank=True, max_length=255, null=True)),
+                ("url", models.TextField()),
+                ("metadata", models.JSONField(default=dict)),
+                (
+                    "created_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_created_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Created By",
+                    ),
+                ),
+                (
+                    "owner",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="owner_workspace_user_link",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+                (
+                    "project",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="project_%(class)s",
+                        to="db.project",
+                    ),
+                ),
+                (
+                    "updated_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_updated_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Last Modified By",
+                    ),
+                ),
+                (
+                    "workspace",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="workspace_%(class)s",
+                        to="db.workspace",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Workspace User Link",
+                "verbose_name_plural": "Workspace User Links",
+                "db_table": "workspace_user_links",
+                "ordering": ("-created_at",),
+            },
+        ),
+        migrations.AlterField(
+            model_name="pagelog",
+            name="entity_name",
+            field=models.CharField(max_length=30, verbose_name="Transaction Type"),
+        ),
+        migrations.AlterUniqueTogether(
+            name="webhook",
+            unique_together={("workspace", "url", "deleted_at")},
+        ),
+        migrations.AddConstraint(
+            model_name="webhook",
+            constraint=models.UniqueConstraint(
+                condition=models.Q(("deleted_at__isnull", True)),
+                fields=("workspace", "url"),
+                name="webhook_url_unique_url_when_deleted_at_null",
+            ),
+        ),
+    ]
diff --git a/apiserver/plane/db/migrations/0089_workspacehomepreference_and_more.py b/apiserver/plane/db/migrations/0089_workspacehomepreference_and_more.py
new file mode 100644
index 000000000..b13f65070
--- /dev/null
+++ b/apiserver/plane/db/migrations/0089_workspacehomepreference_and_more.py
@@ -0,0 +1,120 @@
+# Generated by Django 4.2.17 on 2025-01-02 07:47
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("db", "0088_sticky_sort_order_workspaceuserlink"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="WorkspaceHomePreference",
+            fields=[
+                (
+                    "created_at",
+                    models.DateTimeField(auto_now_add=True, verbose_name="Created At"),
+                ),
+                (
+                    "updated_at",
+                    models.DateTimeField(
+                        auto_now=True, verbose_name="Last Modified At"
+                    ),
+                ),
+                (
+                    "deleted_at",
+                    models.DateTimeField(
+                        blank=True, null=True, verbose_name="Deleted At"
+                    ),
+                ),
+                (
+                    "id",
+                    models.UUIDField(
+                        db_index=True,
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                        unique=True,
+                    ),
+                ),
+                ("key", models.CharField(max_length=255)),
+                ("is_enabled", models.BooleanField(default=True)),
+                ("config", models.JSONField(default=dict)),
+                (
+                    "created_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_created_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Created By",
+                    ),
+                ),
+                (
+                    "updated_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_updated_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Last Modified By",
+                    ),
+                ),
+                (
+                    "user",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="workspace_user_home_preferences",
+                        to=settings.AUTH_USER_MODEL,
+                    ),
+                ),
+                (
+                    "workspace",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="workspace_user_home_preferences",
+                        to="db.workspace",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Workspace Home Preference",
+                "verbose_name_plural": "Workspace Home Preferences",
+                "db_table": "workspace_home_preferences",
+                "ordering": ("-created_at",),
+            },
+        ),
+        migrations.AddConstraint(
+            model_name="workspacehomepreference",
+            constraint=models.UniqueConstraint(
+                condition=models.Q(("deleted_at__isnull", True)),
+                fields=("workspace", "user", "key"),
+                name="workspace_user_home_preferences_unique_workspace_user_key_when_deleted_at_null",
+            ),
+        ),
+        migrations.AlterUniqueTogether(
+            name="workspacehomepreference",
+            unique_together={("workspace", "user", "key", "deleted_at")},
+        ),
+        migrations.AlterField(
+            model_name="page",
+            name="name",
+            field=models.TextField(blank=True),
+        ),
+        migrations.AlterField(
+            model_name="sticky",
+            name="name",
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='workspacehomepreference',
+            name='sort_order',
+            field=models.PositiveIntegerField(default=65535),
+        ),
+    ]
diff --git a/apiserver/plane/db/migrations/0090_rename_dashboard_deprecateddashboard_and_more.py b/apiserver/plane/db/migrations/0090_rename_dashboard_deprecateddashboard_and_more.py
new file mode 100644
index 000000000..e0d16d5a6
--- /dev/null
+++ b/apiserver/plane/db/migrations/0090_rename_dashboard_deprecateddashboard_and_more.py
@@ -0,0 +1,87 @@
+ # Generated by Django 4.2.17 on 2025-01-09 14:43
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0089_workspacehomepreference_and_more'),
+    ]
+
+    operations = [
+        migrations.RenameModel(
+            old_name='Dashboard',
+            new_name='DeprecatedDashboard',
+        ),
+        migrations.RenameModel(
+            old_name='DashboardWidget',
+            new_name='DeprecatedDashboardWidget',
+        ),
+        migrations.RenameModel(
+            old_name='Widget',
+            new_name='DeprecatedWidget',
+        ),
+        migrations.AlterModelOptions(
+            name='deprecateddashboard',
+            options={'ordering': ('-created_at',), 'verbose_name': 'DeprecatedDashboard', 'verbose_name_plural': 'DeprecatedDashboards'},
+        ),
+        migrations.AlterModelOptions(
+            name='deprecateddashboardwidget',
+            options={'ordering': ('-created_at',), 'verbose_name': 'Deprecated Dashboard Widget', 'verbose_name_plural': 'Deprecated Dashboard Widgets'},
+        ),
+        migrations.AlterModelOptions(
+            name='deprecatedwidget',
+            options={'ordering': ('-created_at',), 'verbose_name': 'DeprecatedWidget', 'verbose_name_plural': 'DeprecatedWidgets'},
+        ),
+        migrations.AlterField(
+            model_name='workspacehomepreference',
+            name='sort_order',
+            field=models.FloatField(default=65535),
+        ),
+        migrations.AlterModelTable(
+            name='deprecateddashboard',
+            table='deprecated_dashboards',
+        ),
+        migrations.AlterModelTable(
+            name='deprecateddashboardwidget',
+            table='deprecated_dashboard_widgets',
+        ),
+        migrations.AlterModelTable(
+            name='deprecatedwidget',
+            table='deprecated_widgets',
+        ),
+        migrations.CreateModel(
+            name='WorkspaceUserPreference',
+            fields=[
+                ('created_at', models.DateTimeField(auto_now_add=True, verbose_name='Created At')),
+                ('updated_at', models.DateTimeField(auto_now=True, verbose_name='Last Modified At')),
+                ('deleted_at', models.DateTimeField(blank=True, null=True, verbose_name='Deleted At')),
+                ('id', models.UUIDField(db_index=True, default=uuid.uuid4, editable=False, primary_key=True, serialize=False, unique=True)),
+                ('key', models.CharField(max_length=255)),
+                ('is_pinned', models.BooleanField(default=False)),
+                ('sort_order', models.FloatField(default=65535)),
+                ('created_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_created_by', to=settings.AUTH_USER_MODEL, verbose_name='Created By')),
+                ('updated_by', models.ForeignKey(null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='%(class)s_updated_by', to=settings.AUTH_USER_MODEL, verbose_name='Last Modified By')),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='workspace_user_preferences', to=settings.AUTH_USER_MODEL)),
+                ('workspace', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='workspace_user_preferences', to='db.workspace')),
+            ],
+            options={
+                'verbose_name': 'Workspace User Preference',
+                'verbose_name_plural': 'Workspace User Preferences',
+                'db_table': 'workspace_user_preferences',
+                'ordering': ('-created_at',),
+            },
+        ),
+        migrations.AddConstraint(
+            model_name='workspaceuserpreference',
+            constraint=models.UniqueConstraint(condition=models.Q(('deleted_at__isnull', True)), fields=('workspace', 'user', 'key'), name='workspace_user_preferences_unique_workspace_user_key_when_deleted_at_null'),
+        ),
+        migrations.AlterUniqueTogether(
+            name='workspaceuserpreference',
+            unique_together={('workspace', 'user', 'key', 'deleted_at')},
+        ),
+    ]
diff --git a/apiserver/plane/db/migrations/0091_issuecomment_edited_at_and_more.py b/apiserver/plane/db/migrations/0091_issuecomment_edited_at_and_more.py
new file mode 100644
index 000000000..c6fb825a7
--- /dev/null
+++ b/apiserver/plane/db/migrations/0091_issuecomment_edited_at_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.17 on 2025-01-30 16:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0090_rename_dashboard_deprecateddashboard_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='issuecomment',
+            name='edited_at',
+            field=models.DateTimeField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='profile',
+            name='is_smooth_cursor_enabled',
+            field=models.BooleanField(default=False),
+        ),
+        migrations.AlterField(
+            model_name='userrecentvisit',
+            name='entity_name',
+            field=models.CharField(max_length=30),
+        ),
+        migrations.AlterField(
+            model_name='webhooklog',
+            name='webhook',
+            field=models.UUIDField(),
+        )
+    ]
diff --git a/apiserver/plane/db/models/__init__.py b/apiserver/plane/db/models/__init__.py
index e3a9df254..8e20a8d67 100644
--- a/apiserver/plane/db/models/__init__.py
+++ b/apiserver/plane/db/models/__init__.py
@@ -3,7 +3,7 @@ from .api import APIActivityLog, APIToken
 from .asset import FileAsset
 from .base import BaseModel
 from .cycle import Cycle, CycleIssue, CycleUserProperties
-from .dashboard import Dashboard, DashboardWidget, Widget
+from .dashboard import DeprecatedDashboard, DeprecatedDashboardWidget, DeprecatedWidget
 from .deploy_board import DeployBoard
 from .draft import (
     DraftIssue,
@@ -41,6 +41,8 @@ from .issue import (
     IssueSequence,
     IssueSubscriber,
     IssueVote,
+    IssueVersion,
+    IssueDescriptionVersion,
 )
 from .module import Module, ModuleIssue, ModuleLink, ModuleMember, ModuleUserProperties
 from .notification import EmailNotificationLog, Notification, UserNotificationPreference
@@ -66,17 +68,11 @@ from .workspace import (
     WorkspaceMemberInvite,
     WorkspaceTheme,
     WorkspaceUserProperties,
+    WorkspaceUserLink,
+    WorkspaceHomePreference,
+    WorkspaceUserPreference,
 )
 
-
-
-
-
-
-
-
-
-
 from .favorite import UserFavorite
 
 from .issue_type import IssueType
@@ -86,3 +82,5 @@ from .recent_visit import UserRecentVisit
 from .label import Label
 
 from .device import Device, DeviceSession
+
+from .sticky import Sticky
diff --git a/apiserver/plane/db/models/dashboard.py b/apiserver/plane/db/models/dashboard.py
index e0f401753..d1101e352 100644
--- a/apiserver/plane/db/models/dashboard.py
+++ b/apiserver/plane/db/models/dashboard.py
@@ -8,7 +8,7 @@ from ..mixins import TimeAuditModel
 from .base import BaseModel
 
 
-class Dashboard(BaseModel):
+class DeprecatedDashboard(BaseModel):
     DASHBOARD_CHOICES = (
         ("workspace", "Workspace"),
         ("project", "Project"),
@@ -36,13 +36,13 @@ class Dashboard(BaseModel):
         return f"{self.name}"
 
     class Meta:
-        verbose_name = "Dashboard"
-        verbose_name_plural = "Dashboards"
-        db_table = "dashboards"
+        verbose_name = "DeprecatedDashboard"
+        verbose_name_plural = "DeprecatedDashboards"
+        db_table = "deprecated_dashboards"
         ordering = ("-created_at",)
 
 
-class Widget(TimeAuditModel):
+class DeprecatedWidget(TimeAuditModel):
     id = models.UUIDField(
         default=uuid.uuid4, unique=True, editable=False, db_index=True, primary_key=True
     )
@@ -55,18 +55,18 @@ class Widget(TimeAuditModel):
         return f"{self.key}"
 
     class Meta:
-        verbose_name = "Widget"
-        verbose_name_plural = "Widgets"
-        db_table = "widgets"
+        verbose_name = "DeprecatedWidget"
+        verbose_name_plural = "DeprecatedWidgets"
+        db_table = "deprecated_widgets"
         ordering = ("-created_at",)
 
 
-class DashboardWidget(BaseModel):
+class DeprecatedDashboardWidget(BaseModel):
     widget = models.ForeignKey(
-        Widget, on_delete=models.CASCADE, related_name="dashboard_widgets"
+        DeprecatedWidget, on_delete=models.CASCADE, related_name="dashboard_widgets"
     )
     dashboard = models.ForeignKey(
-        Dashboard, on_delete=models.CASCADE, related_name="dashboard_widgets"
+        DeprecatedDashboard, on_delete=models.CASCADE, related_name="dashboard_widgets"
     )
     is_visible = models.BooleanField(default=True)
     sort_order = models.FloatField(default=65535)
@@ -86,7 +86,7 @@ class DashboardWidget(BaseModel):
                 name="dashboard_widget_unique_widget_dashboard_when_deleted_at_null",
             )
         ]
-        verbose_name = "Dashboard Widget"
-        verbose_name_plural = "Dashboard Widgets"
-        db_table = "dashboard_widgets"
+        verbose_name = "Deprecated Dashboard Widget"
+        verbose_name_plural = "Deprecated Dashboard Widgets"
+        db_table = "deprecated_dashboard_widgets"
         ordering = ("-created_at",)
diff --git a/apiserver/plane/db/models/issue.py b/apiserver/plane/db/models/issue.py
index 9ea1d3b26..fe5e9937c 100644
--- a/apiserver/plane/db/models/issue.py
+++ b/apiserver/plane/db/models/issue.py
@@ -15,6 +15,7 @@ from django import apps
 from plane.utils.html_processor import strip_tags
 from plane.db.mixins import SoftDeletionManager
 from plane.utils.exception_logger import log_exception
+from .base import BaseModel
 from .project import ProjectBaseModel
 
 
@@ -466,6 +467,7 @@ class IssueComment(ProjectBaseModel):
     )
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
+    edited_at = models.DateTimeField(null=True, blank=True)
 
     def save(self, *args, **kwargs):
         self.comment_stripped = (
@@ -660,9 +662,6 @@ class IssueVote(ProjectBaseModel):
 
 
 class IssueVersion(ProjectBaseModel):
-    issue = models.ForeignKey(
-        "db.Issue", on_delete=models.CASCADE, related_name="versions"
-    )
     PRIORITY_CHOICES = (
         ("urgent", "Urgent"),
         ("high", "High"),
@@ -670,14 +669,11 @@ class IssueVersion(ProjectBaseModel):
         ("low", "Low"),
         ("none", "None"),
     )
+
     parent = models.UUIDField(blank=True, null=True)
     state = models.UUIDField(blank=True, null=True)
     estimate_point = models.UUIDField(blank=True, null=True)
     name = models.CharField(max_length=255, verbose_name="Issue Name")
-    description = models.JSONField(blank=True, default=dict)
-    description_html = models.TextField(blank=True, default="<p></p>")
-    description_stripped = models.TextField(blank=True, null=True)
-    description_binary = models.BinaryField(null=True)
     priority = models.CharField(
         max_length=30,
         choices=PRIORITY_CHOICES,
@@ -686,7 +682,9 @@ class IssueVersion(ProjectBaseModel):
     )
     start_date = models.DateField(null=True, blank=True)
     target_date = models.DateField(null=True, blank=True)
+    assignees = ArrayField(models.UUIDField(), blank=True, default=list)
     sequence_id = models.IntegerField(default=1, verbose_name="Issue Sequence ID")
+    labels = ArrayField(models.UUIDField(), blank=True, default=list)
     sort_order = models.FloatField(default=65535)
     completed_at = models.DateTimeField(null=True)
     archived_at = models.DateField(null=True)
@@ -694,14 +692,26 @@ class IssueVersion(ProjectBaseModel):
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
     type = models.UUIDField(blank=True, null=True)
-    last_saved_at = models.DateTimeField(default=timezone.now)
-    owned_by = models.UUIDField()
-    assignees = ArrayField(models.UUIDField(), blank=True, default=list)
-    labels = ArrayField(models.UUIDField(), blank=True, default=list)
     cycle = models.UUIDField(null=True, blank=True)
     modules = ArrayField(models.UUIDField(), blank=True, default=list)
-    properties = models.JSONField(default=dict)
-    meta = models.JSONField(default=dict)
+    properties = models.JSONField(default=dict)  # issue properties
+    meta = models.JSONField(default=dict)  # issue meta
+    last_saved_at = models.DateTimeField(default=timezone.now)
+
+    issue = models.ForeignKey(
+        "db.Issue", on_delete=models.CASCADE, related_name="versions"
+    )
+    activity = models.ForeignKey(
+        "db.IssueActivity",
+        on_delete=models.SET_NULL,
+        null=True,
+        related_name="versions",
+    )
+    owned_by = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="issue_versions",
+    )
 
     class Meta:
         verbose_name = "Issue Version"
@@ -721,39 +731,93 @@ class IssueVersion(ProjectBaseModel):
 
             Module = apps.get_model("db.Module")
             CycleIssue = apps.get_model("db.CycleIssue")
+            IssueAssignee = apps.get_model("db.IssueAssignee")
+            IssueLabel = apps.get_model("db.IssueLabel")
 
             cycle_issue = CycleIssue.objects.filter(issue=issue).first()
 
             cls.objects.create(
                 issue=issue,
-                parent=issue.parent,
-                state=issue.state,
-                point=issue.point,
-                estimate_point=issue.estimate_point,
+                parent=issue.parent_id,
+                state=issue.state_id,
+                estimate_point=issue.estimate_point_id,
                 name=issue.name,
-                description=issue.description,
-                description_html=issue.description_html,
-                description_stripped=issue.description_stripped,
-                description_binary=issue.description_binary,
                 priority=issue.priority,
                 start_date=issue.start_date,
                 target_date=issue.target_date,
+                assignees=list(
+                    IssueAssignee.objects.filter(issue=issue).values_list(
+                        "assignee_id", flat=True
+                    )
+                ),
                 sequence_id=issue.sequence_id,
+                labels=list(
+                    IssueLabel.objects.filter(issue=issue).values_list(
+                        "label_id", flat=True
+                    )
+                ),
                 sort_order=issue.sort_order,
                 completed_at=issue.completed_at,
                 archived_at=issue.archived_at,
                 is_draft=issue.is_draft,
                 external_source=issue.external_source,
                 external_id=issue.external_id,
-                type=issue.type,
-                last_saved_at=issue.last_saved_at,
-                assignees=issue.assignees,
-                labels=issue.labels,
-                cycle=cycle_issue.cycle if cycle_issue else None,
-                modules=Module.objects.filter(issue=issue).values_list("id", flat=True),
+                type=issue.type_id,
+                cycle=cycle_issue.cycle_id if cycle_issue else None,
+                modules=list(
+                    Module.objects.filter(issue=issue).values_list("id", flat=True)
+                ),
+                properties={},
+                meta={},
+                last_saved_at=timezone.now(),
                 owned_by=user,
             )
             return True
         except Exception as e:
             log_exception(e)
             return False
+
+
+class IssueDescriptionVersion(ProjectBaseModel):
+    issue = models.ForeignKey(
+        "db.Issue", on_delete=models.CASCADE, related_name="description_versions"
+    )
+    description_binary = models.BinaryField(null=True)
+    description_html = models.TextField(blank=True, default="<p></p>")
+    description_stripped = models.TextField(blank=True, null=True)
+    description_json = models.JSONField(default=dict, blank=True)
+    last_saved_at = models.DateTimeField(default=timezone.now)
+    owned_by = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="issue_description_versions",
+    )
+
+    class Meta:
+        verbose_name = "Issue Description Version"
+        verbose_name_plural = "Issue Description Versions"
+        db_table = "issue_description_versions"
+
+    @classmethod
+    def log_issue_description_version(cls, issue, user):
+        try:
+            """
+            Log the issue description version
+            """
+            cls.objects.create(
+                workspace_id=issue.workspace_id,
+                project_id=issue.project_id,
+                created_by_id=issue.created_by_id,
+                updated_by_id=issue.updated_by_id,
+                owned_by_id=user,
+                last_saved_at=timezone.now(),
+                issue_id=issue.id,
+                description_binary=issue.description_binary,
+                description_html=issue.description_html,
+                description_stripped=issue.description_stripped,
+                description_json=issue.description,
+            )
+            return True
+        except Exception as e:
+            log_exception(e)
+            return False
diff --git a/apiserver/plane/db/models/page.py b/apiserver/plane/db/models/page.py
index 81e2b15a0..91ffcf023 100644
--- a/apiserver/plane/db/models/page.py
+++ b/apiserver/plane/db/models/page.py
@@ -20,7 +20,7 @@ class Page(BaseModel):
     workspace = models.ForeignKey(
         "db.Workspace", on_delete=models.CASCADE, related_name="pages"
     )
-    name = models.CharField(max_length=255, blank=True)
+    name = models.TextField(blank=True)
     description = models.JSONField(default=dict, blank=True)
     description_binary = models.BinaryField(null=True)
     description_html = models.TextField(blank=True, default="<p></p>")
@@ -90,7 +90,7 @@ class PageLog(BaseModel):
     page = models.ForeignKey(Page, related_name="page_log", on_delete=models.CASCADE)
     entity_identifier = models.UUIDField(null=True)
     entity_name = models.CharField(
-        max_length=30, choices=TYPE_CHOICES, verbose_name="Transaction Type"
+        max_length=30, verbose_name="Transaction Type"
     )
     workspace = models.ForeignKey(
         "db.Workspace", on_delete=models.CASCADE, related_name="workspace_page_log"
diff --git a/apiserver/plane/db/models/recent_visit.py b/apiserver/plane/db/models/recent_visit.py
index 14737eba5..42855081b 100644
--- a/apiserver/plane/db/models/recent_visit.py
+++ b/apiserver/plane/db/models/recent_visit.py
@@ -17,7 +17,7 @@ class EntityNameEnum(models.TextChoices):
 
 class UserRecentVisit(WorkspaceBaseModel):
     entity_identifier = models.UUIDField(null=True)
-    entity_name = models.CharField(max_length=30, choices=EntityNameEnum.choices)
+    entity_name = models.CharField(max_length=30)
     user = models.ForeignKey(
         settings.AUTH_USER_MODEL,
         on_delete=models.CASCADE,
diff --git a/apiserver/plane/db/models/sticky.py b/apiserver/plane/db/models/sticky.py
new file mode 100644
index 000000000..34f37b81e
--- /dev/null
+++ b/apiserver/plane/db/models/sticky.py
@@ -0,0 +1,57 @@
+# Django imports
+from django.conf import settings
+from django.db import models
+
+# Module imports
+from .base import BaseModel
+
+# Third party imports
+from plane.utils.html_processor import strip_tags
+
+
+class Sticky(BaseModel):
+    name = models.TextField(null=True, blank=True)
+
+    description = models.JSONField(blank=True, default=dict)
+    description_html = models.TextField(blank=True, default="<p></p>")
+    description_stripped = models.TextField(blank=True, null=True)
+    description_binary = models.BinaryField(null=True)
+
+    logo_props = models.JSONField(default=dict)
+    color = models.CharField(max_length=255, blank=True, null=True)
+    background_color = models.CharField(max_length=255, blank=True, null=True)
+
+    workspace = models.ForeignKey(
+        "db.Workspace", on_delete=models.CASCADE, related_name="stickies"
+    )
+    owner = models.ForeignKey(
+        settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name="stickies"
+    )
+    sort_order = models.FloatField(default=65535)
+
+    class Meta:
+        verbose_name = "Sticky"
+        verbose_name_plural = "Stickies"
+        db_table = "stickies"
+        ordering = ("-created_at",)
+
+    def save(self, *args, **kwargs):
+        # Strip the html tags using html parser
+        self.description_stripped = (
+            None
+            if (self.description_html == "" or self.description_html is None)
+            else strip_tags(self.description_html)
+        )
+        if self._state.adding:
+            # Get the maximum sequence value from the database
+            last_id = Sticky.objects.filter(workspace=self.workspace).aggregate(
+                largest=models.Max("sort_order")
+            )["largest"]
+            # if last_id is not None
+            if last_id is not None:
+                self.sort_order = last_id + 10000
+
+        super(Sticky, self).save(*args, **kwargs)
+
+    def __str__(self):
+        return str(self.name)
diff --git a/apiserver/plane/db/models/user.py b/apiserver/plane/db/models/user.py
index 34a86a251..a7ac5251e 100644
--- a/apiserver/plane/db/models/user.py
+++ b/apiserver/plane/db/models/user.py
@@ -26,6 +26,14 @@ def get_default_onboarding():
     }
 
 
+def get_mobile_default_onboarding():
+    return {
+        "profile_complete": False,
+        "workspace_create": False,
+        "workspace_join": False,
+    }
+
+
 class User(AbstractBaseUser, PermissionsMixin):
     id = models.UUIDField(
         default=uuid.uuid4, unique=True, editable=False, db_index=True, primary_key=True
@@ -179,6 +187,14 @@ class Profile(TimeAuditModel):
     has_billing_address = models.BooleanField(default=False)
     company_name = models.CharField(max_length=255, blank=True)
 
+    is_smooth_cursor_enabled = models.BooleanField(default=False)
+    # mobile
+    is_mobile_onboarded = models.BooleanField(default=False)
+    mobile_onboarding_step = models.JSONField(default=get_mobile_default_onboarding)
+    mobile_timezone_auto_set = models.BooleanField(default=False)
+    # language
+    language = models.CharField(max_length=255, default="en")
+
     class Meta:
         verbose_name = "Profile"
         verbose_name_plural = "Profiles"
diff --git a/apiserver/plane/db/models/webhook.py b/apiserver/plane/db/models/webhook.py
index ec8fcda3a..b1428523b 100644
--- a/apiserver/plane/db/models/webhook.py
+++ b/apiserver/plane/db/models/webhook.py
@@ -47,11 +47,18 @@ class Webhook(BaseModel):
         return f"{self.workspace.slug} {self.url}"
 
     class Meta:
-        unique_together = ["workspace", "url"]
+        unique_together = ["workspace", "url", "deleted_at"]
         verbose_name = "Webhook"
         verbose_name_plural = "Webhooks"
         db_table = "webhooks"
         ordering = ("-created_at",)
+        constraints = [
+            models.UniqueConstraint(
+                fields=["workspace", "url"],
+                condition=models.Q(deleted_at__isnull=True),
+                name="webhook_url_unique_url_when_deleted_at_null",
+            )
+        ]
 
 
 class WebhookLog(BaseModel):
@@ -59,7 +66,7 @@ class WebhookLog(BaseModel):
         "db.Workspace", on_delete=models.CASCADE, related_name="webhook_logs"
     )
     # Associated webhook
-    webhook = models.ForeignKey(Webhook, on_delete=models.CASCADE, related_name="logs")
+    webhook = models.UUIDField()
 
     # Basic request details
     event_type = models.CharField(max_length=255, blank=True, null=True)
@@ -82,4 +89,4 @@ class WebhookLog(BaseModel):
         ordering = ("-created_at",)
 
     def __str__(self):
-        return f"{self.event_type} {str(self.webhook.url)}"
+        return f"{self.event_type} {str(self.webhook)}"
diff --git a/apiserver/plane/db/models/workspace.py b/apiserver/plane/db/models/workspace.py
index f8082e492..2c0370a61 100644
--- a/apiserver/plane/db/models/workspace.py
+++ b/apiserver/plane/db/models/workspace.py
@@ -1,4 +1,5 @@
 # Python imports
+from django.db.models.functions import Ln
 import pytz
 
 # Django imports
@@ -322,3 +323,106 @@ class WorkspaceUserProperties(BaseModel):
 
     def __str__(self):
         return f"{self.workspace.name} {self.user.email}"
+
+
+class WorkspaceUserLink(WorkspaceBaseModel):
+    title = models.CharField(max_length=255, null=True, blank=True)
+    url = models.TextField()
+    metadata = models.JSONField(default=dict)
+    owner = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="owner_workspace_user_link",
+    )
+
+    class Meta:
+        verbose_name = "Workspace User Link"
+        verbose_name_plural = "Workspace User Links"
+        db_table = "workspace_user_links"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.workspace.id} {self.url}"
+
+
+class WorkspaceHomePreference(BaseModel):
+    """Preference for the home page of a workspace for a user"""
+
+    class HomeWidgetKeys(models.TextChoices):
+        QUICK_LINKS = "quick_links", "Quick Links"
+        RECENTS = "recents", "Recents"
+        MY_STICKIES = "my_stickies", "My Stickies"
+        NEW_AT_PLANE = "new_at_plane", "New at Plane"
+        QUICK_TUTORIAL = "quick_tutorial", "Quick Tutorial"
+
+    workspace = models.ForeignKey(
+        "db.Workspace",
+        on_delete=models.CASCADE,
+        related_name="workspace_user_home_preferences",
+    )
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="workspace_user_home_preferences",
+    )
+    key = models.CharField(max_length=255)
+    is_enabled = models.BooleanField(default=True)
+    config = models.JSONField(default=dict)
+    sort_order = models.FloatField(default=65535)
+
+    class Meta:
+        unique_together = ["workspace", "user", "key", "deleted_at"]
+        constraints = [
+            models.UniqueConstraint(
+                fields=["workspace", "user", "key"],
+                condition=models.Q(deleted_at__isnull=True),
+                name="workspace_user_home_preferences_unique_workspace_user_key_when_deleted_at_null",
+            )
+        ]
+        verbose_name = "Workspace Home Preference"
+        verbose_name_plural = "Workspace Home Preferences"
+        db_table = "workspace_home_preferences"
+        ordering = ("-created_at",)
+
+    def __str__(self):
+        return f"{self.workspace.name} {self.user.email} {self.key}"
+
+
+class WorkspaceUserPreference(BaseModel):
+    """Preference for the workspace for a user"""
+
+    class UserPreferenceKeys(models.TextChoices):        
+        VIEWS = "views", "Views"
+        ACTIVE_CYCLES = "active_cycles", "Active Cycles"
+        ANALYTICS = "analytics", "Analytics"
+        DRAFTS = "drafts", "Drafts"
+        YOUR_WORK = "your_work", "Your Work"
+        ARCHIVES = "archives", "Archives"
+
+    workspace = models.ForeignKey(
+        "db.Workspace",
+        on_delete=models.CASCADE,
+        related_name="workspace_user_preferences",
+    )
+    user = models.ForeignKey(
+        settings.AUTH_USER_MODEL,
+        on_delete=models.CASCADE,
+        related_name="workspace_user_preferences",
+    )
+    key = models.CharField(max_length=255)
+    is_pinned = models.BooleanField(default=False)
+    sort_order = models.FloatField(default=65535)
+
+    class Meta:
+        unique_together = ["workspace", "user", "key", "deleted_at"]
+        constraints = [
+            models.UniqueConstraint(
+                fields=["workspace", "user", "key"],
+                condition=models.Q(deleted_at__isnull=True),
+                name="workspace_user_preferences_unique_workspace_user_key_when_deleted_at_null",
+            )
+        ]
+        verbose_name = "Workspace User Preference"
+        verbose_name_plural = "Workspace User Preferences"
+        db_table = "workspace_user_preferences"
+        ordering = ("-created_at",)
diff --git a/apiserver/plane/license/api/views/admin.py b/apiserver/plane/license/api/views/admin.py
index 10c6df5c3..97f0e446e 100644
--- a/apiserver/plane/license/api/views/admin.py
+++ b/apiserver/plane/license/api/views/admin.py
@@ -290,11 +290,12 @@ class InstanceAdminSignInEndpoint(View):
         # Fetch the user
         user = User.objects.filter(email=email).first()
 
-        # is_active
-        if not user.is_active:
+        # Error out if the user is not present
+        if not user:
             exc = AuthenticationException(
-                error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DEACTIVATED"],
-                error_message="ADMIN_USER_DEACTIVATED",
+                error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DOES_NOT_EXIST"],
+                error_message="ADMIN_USER_DOES_NOT_EXIST",
+                payload={"email": email},
             )
             url = urljoin(
                 base_host(request=request, is_admin=True),
@@ -302,12 +303,11 @@ class InstanceAdminSignInEndpoint(View):
             )
             return HttpResponseRedirect(url)
 
-        # Error out if the user is not present
-        if not user:
+        # is_active
+        if not user.is_active:
             exc = AuthenticationException(
-                error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DOES_NOT_EXIST"],
-                error_message="ADMIN_USER_DOES_NOT_EXIST",
-                payload={"email": email},
+                error_code=AUTHENTICATION_ERROR_CODES["ADMIN_USER_DEACTIVATED"],
+                error_message="ADMIN_USER_DEACTIVATED",
             )
             url = urljoin(
                 base_host(request=request, is_admin=True),
diff --git a/apiserver/plane/license/management/commands/configure_instance.py b/apiserver/plane/license/management/commands/configure_instance.py
index 548c9c77e..8458df5df 100644
--- a/apiserver/plane/license/management/commands/configure_instance.py
+++ b/apiserver/plane/license/management/commands/configure_instance.py
@@ -132,20 +132,33 @@ class Command(BaseCommand):
                 "is_encrypted": False,
             },
             {
-                "key": "OPENAI_API_KEY",
-                "value": os.environ.get("OPENAI_API_KEY"),
-                "category": "OPENAI",
+                "key": "LLM_API_KEY",
+                "value": os.environ.get("LLM_API_KEY"),
+                "category": "AI",
                 "is_encrypted": True,
             },
             {
-                "key": "GPT_ENGINE",
+                "key": "LLM_PROVIDER",
+                "value": os.environ.get("LLM_PROVIDER", "openai"),
+                "category": "AI",
+                "is_encrypted": False,
+            },
+            {
+                "key": "LLM_MODEL",
+                "value": os.environ.get("LLM_MODEL", "gpt-4o-mini"),
+                "category": "AI",
+                "is_encrypted": False,
+            },
+            # Deprecated, use LLM_MODEL
+            {
+                "key": "GPT_ENGINE",  
                 "value": os.environ.get("GPT_ENGINE", "gpt-3.5-turbo"),
                 "category": "SMTP",
                 "is_encrypted": False,
             },
             {
                 "key": "UNSPLASH_ACCESS_KEY",
-                "value": os.environ.get("UNSPLASH_ACESS_KEY", ""),
+                "value": os.environ.get("UNSPLASH_ACCESS_KEY", ""),
                 "category": "UNSPLASH",
                 "is_encrypted": True,
             },
diff --git a/apiserver/plane/settings/common.py b/apiserver/plane/settings/common.py
index ed42dfe19..10776f9af 100644
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@@ -262,6 +262,9 @@ CELERY_IMPORTS = (
     "plane.license.bgtasks.tracer",
     # management tasks
     "plane.bgtasks.dummy_data_task",
+    # issue version tasks
+    "plane.bgtasks.issue_version_sync",
+    "plane.bgtasks.issue_description_version_sync",
 )
 
 # Sentry Settings
@@ -333,6 +336,8 @@ CSRF_FAILURE_VIEW = "plane.authentication.views.common.csrf_failure"
 ADMIN_BASE_URL = os.environ.get("ADMIN_BASE_URL", None)
 SPACE_BASE_URL = os.environ.get("SPACE_BASE_URL", None)
 APP_BASE_URL = os.environ.get("APP_BASE_URL")
+LIVE_BASE_URL = os.environ.get("LIVE_BASE_URL")
+
 
 HARD_DELETE_AFTER_DAYS = int(os.environ.get("HARD_DELETE_AFTER_DAYS", 60))
 
@@ -358,6 +363,18 @@ ATTACHMENT_MIME_TYPES = [
     "application/vnd.openxmlformats-officedocument.presentationml.presentation",
     "text/plain",
     "application/rtf",
+    "application/vnd.oasis.opendocument.spreadsheet",
+    "application/vnd.oasis.opendocument.text",
+    "application/vnd.oasis.opendocument.presentation",
+    "application/vnd.oasis.opendocument.graphics",
+    # Microsoft Visio
+    "application/vnd.visio",
+    # Netpbm format
+    "image/x-portable-graymap",
+    "image/x-portable-bitmap",
+    "image/x-portable-pixmap",
+    # Open Office Bae
+    "application/vnd.oasis.opendocument.database",
     # Audio
     "audio/mpeg",
     "audio/wav",
diff --git a/apiserver/plane/settings/storage.py b/apiserver/plane/settings/storage.py
index d82d1c912..c843e9af4 100644
--- a/apiserver/plane/settings/storage.py
+++ b/apiserver/plane/settings/storage.py
@@ -151,3 +151,17 @@ class S3Storage(S3Boto3Storage):
             "ETag": response.get("ETag"),
             "Metadata": response.get("Metadata", {}),
         }
+
+    def copy_object(self, object_name, new_object_name):
+        """Copy an S3 object to a new location"""
+        try:
+            response = self.s3_client.copy_object(
+                Bucket=self.aws_storage_bucket_name,
+                CopySource={"Bucket": self.aws_storage_bucket_name, "Key": object_name},
+                Key=new_object_name,
+            )
+        except ClientError as e:
+            log_exception(e)
+            return None
+
+        return response
diff --git a/apiserver/plane/space/utils/grouper.py b/apiserver/plane/space/utils/grouper.py
index 250b54e89..274058842 100644
--- a/apiserver/plane/space/utils/grouper.py
+++ b/apiserver/plane/space/utils/grouper.py
@@ -91,6 +91,7 @@ def issue_on_results(issues, group_by, sub_group_by):
             Case(
                 When(
                     votes__isnull=False,
+                    votes__deleted_at__isnull=True,
                     then=JSONObject(
                         vote=F("votes__vote"),
                         actor_details=JSONObject(
@@ -117,13 +118,14 @@ def issue_on_results(issues, group_by, sub_group_by):
                 default=None,
                 output_field=JSONField(),
             ),
-            filter=Q(votes__isnull=False),
+            filter=Q(votes__isnull=False,votes__deleted_at__isnull=True),
             distinct=True,
         ),
         reaction_items=ArrayAgg(
             Case(
                 When(
                     issue_reactions__isnull=False,
+                    issue_reactions__deleted_at__isnull=True,
                     then=JSONObject(
                         reaction=F("issue_reactions__reaction"),
                         actor_details=JSONObject(
@@ -150,7 +152,7 @@ def issue_on_results(issues, group_by, sub_group_by):
                 default=None,
                 output_field=JSONField(),
             ),
-            filter=Q(issue_reactions__isnull=False),
+            filter=Q(issue_reactions__isnull=False, issue_reactions__deleted_at__isnull=True),
             distinct=True,
         ),
     ).values(*required_fields, "vote_items", "reaction_items")
diff --git a/apiserver/plane/space/views/asset.py b/apiserver/plane/space/views/asset.py
index 2c6722038..3e1d4d6f7 100644
--- a/apiserver/plane/space/views/asset.py
+++ b/apiserver/plane/space/views/asset.py
@@ -86,7 +86,13 @@ class EntityAssetEndpoint(BaseAPIView):
             )
 
         # Check if the file type is allowed
-        allowed_types = ["image/jpeg", "image/png", "image/webp"]
+        allowed_types = [
+            "image/jpeg",
+            "image/png",
+            "image/webp",
+            "image/jpg",
+            "image/gif",
+        ]
         if type not in allowed_types:
             return Response(
                 {
diff --git a/apiserver/plane/space/views/intake.py b/apiserver/plane/space/views/intake.py
index 0d39dd276..bfce3a8bb 100644
--- a/apiserver/plane/space/views/intake.py
+++ b/apiserver/plane/space/views/intake.py
@@ -130,15 +130,6 @@ class IntakeIssuePublicViewSet(BaseViewSet):
                 {"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST
             )
 
-        # Create or get state
-        state, _ = State.objects.get_or_create(
-            name="Triage",
-            group="backlog",
-            description="Default state for managing all Intake Issues",
-            project_id=project_deploy_board.project_id,
-            color="#ff7700",
-        )
-
         # create an issue
         issue = Issue.objects.create(
             name=request.data.get("issue", {}).get("name"),
@@ -148,7 +139,6 @@ class IntakeIssuePublicViewSet(BaseViewSet):
             ),
             priority=request.data.get("issue", {}).get("priority", "low"),
             project_id=project_deploy_board.project_id,
-            state=state,
         )
 
         # Create an Issue Activity
diff --git a/apiserver/plane/space/views/issue.py b/apiserver/plane/space/views/issue.py
index a1ab332f9..699253ae5 100644
--- a/apiserver/plane/space/views/issue.py
+++ b/apiserver/plane/space/views/issue.py
@@ -701,6 +701,7 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                     Case(
                         When(
                             votes__isnull=False,
+                            votes__deleted_at__isnull=True,
                             then=JSONObject(
                                 vote=F("votes__vote"),
                                 actor_details=JSONObject(
@@ -732,7 +733,11 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                         output_field=JSONField(),
                     ),
                     filter=Case(
-                        When(votes__isnull=False, then=True),
+                        When(
+                            votes__isnull=False,
+                            votes__deleted_at__isnull=True,
+                            then=True,
+                        ),
                         default=False,
                         output_field=JSONField(),
                     ),
@@ -742,6 +747,7 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                     Case(
                         When(
                             issue_reactions__isnull=False,
+                            issue_reactions__deleted_at__isnull=True,
                             then=JSONObject(
                                 reaction=F("issue_reactions__reaction"),
                                 actor_details=JSONObject(
@@ -775,7 +781,11 @@ class IssueRetrievePublicEndpoint(BaseAPIView):
                         output_field=JSONField(),
                     ),
                     filter=Case(
-                        When(issue_reactions__isnull=False, then=True),
+                        When(
+                            issue_reactions__isnull=False,
+                            issue_reactions__deleted_at__isnull=True,
+                            then=True,
+                        ),
                         default=False,
                         output_field=JSONField(),
                     ),
diff --git a/apiserver/plane/space/views/meta.py b/apiserver/plane/space/views/meta.py
index fa4413599..d092e7e58 100644
--- a/apiserver/plane/space/views/meta.py
+++ b/apiserver/plane/space/views/meta.py
@@ -14,9 +14,9 @@ class ProjectMetaDataEndpoint(BaseAPIView):
 
     def get(self, request, anchor):
         try:
-            deploy_board = DeployBoard.objects.filter(
+            deploy_board = DeployBoard.objects.get(
                 anchor=anchor, entity_name="project"
-            ).first()
+            )
         except DeployBoard.DoesNotExist:
             return Response(
                 {"error": "Project is not published"}, status=status.HTTP_404_NOT_FOUND
diff --git a/apiserver/plane/utils/timezone_converter.py b/apiserver/plane/utils/timezone_converter.py
new file mode 100644
index 000000000..40480b4f6
--- /dev/null
+++ b/apiserver/plane/utils/timezone_converter.py
@@ -0,0 +1,125 @@
+# Python imports
+import pytz
+from datetime import datetime, time
+from datetime import timedelta
+
+# Django imports
+from django.utils import timezone
+
+# Module imports
+from plane.db.models import Project
+
+
+def user_timezone_converter(queryset, datetime_fields, user_timezone):
+    # Create a timezone object for the user's timezone
+    user_tz = pytz.timezone(user_timezone)
+
+    # Check if queryset is a dictionary (single item) or a list of dictionaries
+    if isinstance(queryset, dict):
+        queryset_values = [queryset]
+    else:
+        queryset_values = list(queryset)
+
+    # Iterate over the dictionaries in the list
+    for item in queryset_values:
+        # Iterate over the datetime fields
+        for field in datetime_fields:
+            # Convert the datetime field to the user's timezone
+            if field in item and item[field]:
+                item[field] = item[field].astimezone(user_tz)
+
+    # If queryset was a single item, return a single item
+    if isinstance(queryset, dict):
+        return queryset_values[0]
+    else:
+        return queryset_values
+
+
+def convert_to_utc(
+    date, project_id, is_start_date=False, is_start_date_end_date_equal=False
+):
+    """
+    Converts a start date string to the project's local timezone at 12:00 AM
+    and then converts it to UTC for storage.
+
+    Args:
+        date (str): The date string in "YYYY-MM-DD" format.
+        project_id (int): The project's ID to fetch the associated timezone.
+
+    Returns:
+        datetime: The UTC datetime.
+    """
+    # Retrieve the project's timezone using the project ID
+    project = Project.objects.get(id=project_id)
+    project_timezone = project.timezone
+    if not date or not project_timezone:
+        raise ValueError("Both date and timezone must be provided.")
+
+    # Parse the string into a date object
+    start_date = datetime.strptime(date, "%Y-%m-%d").date()
+
+    # Get the project's timezone
+    local_tz = pytz.timezone(project_timezone)
+
+    # Combine the date with 12:00 AM time
+    local_datetime = datetime.combine(start_date, time.min)
+
+    # Localize the datetime to the project's timezone
+    localized_datetime = local_tz.localize(local_datetime)
+
+    # If it's an start date, add one minute
+    if is_start_date:
+        localized_datetime += timedelta(minutes=0, seconds=1)
+
+        # Convert the localized datetime to UTC
+        utc_datetime = localized_datetime.astimezone(pytz.utc)
+
+        current_datetime_in_project_tz = timezone.now().astimezone(local_tz)
+        current_datetime_in_utc = current_datetime_in_project_tz.astimezone(pytz.utc)
+
+        if localized_datetime.date() == current_datetime_in_project_tz.date():
+            return current_datetime_in_utc
+
+        return utc_datetime
+    else:
+        # If it's start an end date are equal, add 23 hours, 59 minutes, and 59 seconds
+        # to make it the end of the day
+        if is_start_date_end_date_equal:
+            localized_datetime += timedelta(hours=23, minutes=59, seconds=59)
+
+        # Convert the localized datetime to UTC
+        utc_datetime = localized_datetime.astimezone(pytz.utc)
+
+        # Return the UTC datetime for storage
+        return utc_datetime
+
+
+def convert_utc_to_project_timezone(utc_datetime, project_id):
+    """
+    Converts a UTC datetime (stored in the database) to the project's local timezone.
+
+    Args:
+        utc_datetime (datetime): The UTC datetime to be converted.
+        project_id (int): The project's ID to fetch the associated timezone.
+
+    Returns:
+        datetime: The datetime in the project's local timezone.
+    """
+    # Retrieve the project's timezone using the project ID
+    project = Project.objects.get(id=project_id)
+    project_timezone = project.timezone
+    if not project_timezone:
+        raise ValueError("Project timezone must be provided.")
+
+    # Get the timezone object for the project's timezone
+    local_tz = pytz.timezone(project_timezone)
+
+    # Convert the UTC datetime to the project's local timezone
+    if utc_datetime.tzinfo is None:
+        # Localize UTC datetime if it's naive (i.e., without timezone info)
+        utc_datetime = pytz.utc.localize(utc_datetime)
+
+    # Convert to the project's local timezone
+    local_datetime = utc_datetime.astimezone(local_tz)
+
+    return local_datetime
diff --git a/apiserver/plane/utils/user_timezone_converter.py b/apiserver/plane/utils/user_timezone_converter.py
deleted file mode 100644
index 550abfe99..000000000
--- a/apiserver/plane/utils/user_timezone_converter.py
+++ /dev/null
@@ -1,26 +0,0 @@
-import pytz
-
-
-def user_timezone_converter(queryset, datetime_fields, user_timezone):
-    # Create a timezone object for the user's timezone
-    user_tz = pytz.timezone(user_timezone)
-
-    # Check if queryset is a dictionary (single item) or a list of dictionaries
-    if isinstance(queryset, dict):
-        queryset_values = [queryset]
-    else:
-        queryset_values = list(queryset)
-
-    # Iterate over the dictionaries in the list
-    for item in queryset_values:
-        # Iterate over the datetime fields
-        for field in datetime_fields:
-            # Convert the datetime field to the user's timezone
-            if field in item and item[field]:
-                item[field] = item[field].astimezone(user_tz)
-
-    # If queryset was a single item, return a single item
-    if isinstance(queryset, dict):
-        return queryset_values[0]
-    else:
-        return queryset_values
diff --git a/apiserver/plane/utils/valid_uuid.py b/apiserver/plane/utils/valid_uuid.py
new file mode 100644
index 000000000..a44105136
--- /dev/null
+++ b/apiserver/plane/utils/valid_uuid.py
@@ -0,0 +1,8 @@
+import uuid
+
+def is_valid_uuid(uuid_str):
+    try:
+        uuid.UUID(uuid_str, version=4)
+        return True
+    except ValueError:
+        return False
diff --git a/apiserver/requirements/base.txt b/apiserver/requirements/base.txt
index 40e90aedf..41a5e0f13 100644
--- a/apiserver/requirements/base.txt
+++ b/apiserver/requirements/base.txt
@@ -1,10 +1,10 @@
 # base requirements
 
 # django
-Django==4.2.17
+Django==4.2.18
 # rest framework
 djangorestframework==3.15.2
-# postgres 
+# postgres
 psycopg==3.1.18
 psycopg-binary==3.1.18
 psycopg-c==3.1.18
@@ -37,7 +37,7 @@ uvicorn==0.29.0
 # sockets
 channels==4.1.0
 # ai
-openai==1.25.0
+openai==1.63.2
 # slack
 slack-sdk==3.27.1
 # apm
@@ -51,7 +51,7 @@ beautifulsoup4==4.12.3
 # analytics
 posthog==3.5.0
 # crypto
-cryptography==43.0.1
+cryptography==44.0.1
 # html validator
 lxml==5.2.1
 # s3
@@ -66,4 +66,4 @@ PyJWT==2.8.0
 opentelemetry-api==1.28.1
 opentelemetry-sdk==1.28.1
 opentelemetry-instrumentation-django==0.49b1
-opentelemetry-exporter-otlp==1.28.1
\ No newline at end of file
+opentelemetry-exporter-otlp==1.28.1
diff --git a/apiserver/requirements/local.txt b/apiserver/requirements/local.txt
index 02792201b..2146554f6 100644
--- a/apiserver/requirements/local.txt
+++ b/apiserver/requirements/local.txt
@@ -2,4 +2,4 @@
 # debug toolbar
 django-debug-toolbar==4.3.0
 # formatter
-ruff==0.4.2
\ No newline at end of file
+ruff==0.9.7
diff --git a/app.json b/app.json
index bc5789078..600b524d2 100644
--- a/app.json
+++ b/app.json
@@ -70,7 +70,7 @@
       "value": ""
     },
     "GITHUB_CLIENT_SECRET": {
-      "description": "Github Client Secret",
+      "description": "GitHub Client Secret",
       "value": ""
     },
     "NEXT_PUBLIC_API_BASE_URL": {
diff --git a/deploy/selfhost/README.md b/deploy/selfhost/README.md
index d93d85ca1..e5a8089e6 100644
--- a/deploy/selfhost/README.md
+++ b/deploy/selfhost/README.md
@@ -55,14 +55,26 @@ Installing plane is a very easy and minimal step process.
 - 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 Stable Release
+### Downloading Latest Release
 
 ```
 mkdir plane-selfhost
 
 cd plane-selfhost
+```
 
-curl -fsSL -o setup.sh https://raw.githubusercontent.com/makeplane/plane/master/deploy/selfhost/install.sh
+#### 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
 ```
@@ -77,8 +89,9 @@ Lets get started by running the `./setup.sh` command.
 
 This will prompt you with the below options.
 
+#### Docker Compose 
 ```bash
-Select a Action you want to perform:
+Select an Action you want to perform:
    1) Install (x86_64)
    2) Start
    3) Stop
@@ -87,17 +100,42 @@ Select a Action you want to perform:
    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 create a folder `plane-app` or `plane-app-preview` (in case of preview deployment) and will download 2 files inside that
+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.
+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.
 
 ---
 
@@ -116,7 +154,7 @@ There are many other settings you can play with, but we suggest you configure `E
 
 ---
 
-### Continue with setup - Start Server
+### 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 sevices
 
@@ -147,9 +185,11 @@ You have successfully self hosted `Plane` instance. Access the application by go
 
 ---
 
-### Stopping the Server
+### Stopping the Server / Remove Stack
 
-In case you want to make changes to `.env` variables, we suggest you to stop the services before doing that.
+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 sevices
 
@@ -171,14 +211,34 @@ 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 sevices
+
+```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
+### Restarting the Server / Redeploy Stack
 
-In case you want to make changes to `.env` variables, without stopping the server or you noticed some abnormalies in services, you can restart the services with RESTART option.
+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 sevices
 
+#### Docker Compose
 ```bash
 Select a Action you want to perform:
    1) Install (x86_64)
@@ -197,14 +257,32 @@ 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
+### 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)
@@ -231,13 +309,41 @@ Once done, choose `8` to exit from prompt.
 
 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.
+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:
@@ -253,7 +359,22 @@ Select a Action you want to perform:
 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:
@@ -267,9 +388,10 @@ Select a Service you want to view the logs for:
    8) Redis
    9) Postgres
    10) Minio
+   11) RabbitMQ
    0) Back to Main Menu
 
-Service: 
+Service: 3
 ```
 
 Select any of the service to view the logs e.g. `3`. Expect something similar to this
@@ -323,7 +445,7 @@ Similarly, you can view the logs of other services.
 
 ---
 
-### Backup Data
+### 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.
 
@@ -355,7 +477,7 @@ Backup completed successfully. Backup files are stored in /....../plane-app/back
 
 ---
 
-### Restore Data
+### Restore Data (Docker Compose)
 
 When you want to restore the previously backed-up data, follow the instructions below.
 
diff --git a/deploy/selfhost/docker-compose.yml b/deploy/selfhost/docker-compose.yml
index fe47e625f..49123c73c 100644
--- a/deploy/selfhost/docker-compose.yml
+++ b/deploy/selfhost/docker-compose.yml
@@ -1,131 +1,131 @@
-x-app-env: &app-env
-  environment:
-    - NGINX_PORT=${NGINX_PORT:-80}
-    - WEB_URL=${WEB_URL:-http://localhost}
-    - DEBUG=${DEBUG:-0}
-    - SENTRY_DSN=${SENTRY_DSN:-""}
-    - SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT:-"production"}
-    - CORS_ALLOWED_ORIGINS=${CORS_ALLOWED_ORIGINS:-}
-    # Gunicorn Workers
-    - GUNICORN_WORKERS=${GUNICORN_WORKERS:-1}
-    #DB SETTINGS
-    - 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}
-    - DATABASE_URL=${DATABASE_URL:-postgresql://plane:plane@plane-db/plane}
-    # REDIS SETTINGS
-    - REDIS_HOST=${REDIS_HOST:-plane-redis}
-    - REDIS_PORT=${REDIS_PORT:-6379}
-    - REDIS_URL=${REDIS_URL:-redis://plane-redis:6379/}
+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}
 
-    # 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}
-    - AMQP_URL=${AMQP_URL:-amqp://plane:plane@plane-mq:5672/plane}
-    # Application secret
-    - SECRET_KEY=${SECRET_KEY:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
-    # DATA STORE SETTINGS
-    - USE_MINIO=${USE_MINIO:-1}
-    - 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}
-    - MINIO_ROOT_USER=${MINIO_ROOT_USER:-"access-key"}
-    - MINIO_ROOT_PASSWORD=${MINIO_ROOT_PASSWORD:-"secret-key"}
-    - BUCKET_NAME=${BUCKET_NAME:-uploads}
-    - FILE_SIZE_LIMIT=${FILE_SIZE_LIMIT:-5242880}
-    # Live server env
-    - API_BASE_URL=${API_BASE_URL:-http://api:8000}
+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
+  NGINX_PORT: ${NGINX_PORT:-80}
+  BUCKET_NAME: ${AWS_S3_BUCKET_NAME:-uploads}
+  FILE_SIZE_LIMIT: ${FILE_SIZE_LIMIT:-5242880}
+
+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}
+
+x-app-env: &app-env
+  WEB_URL: ${WEB_URL:-http://localhost}
+  DEBUG: ${DEBUG:-0}
+  SENTRY_DSN: ${SENTRY_DSN}
+  SENTRY_ENVIRONMENT: ${SENTRY_ENVIRONMENT:-production}
+  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:-60gp0byfz2dvffa45cxl20p1scy9xbpf6d8c5y0geejgkyp1b5}
+  AMQP_URL: ${AMQP_URL:-amqp://plane:plane@plane-mq:5672/plane}
 
 services:
   web:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-frontend:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: node web/server.js web
     deploy:
       replicas: ${WEB_REPLICAS:-1}
+      restart_policy:
+        condition: on-failure
     depends_on:
       - api
       - worker
 
   space:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-space:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: node space/server.js space
     deploy:
       replicas: ${SPACE_REPLICAS:-1}
+      restart_policy:
+        condition: on-failure
     depends_on:
       - api
       - worker
       - web
 
   admin:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-admin:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: node admin/server.js admin
     deploy:
       replicas: ${ADMIN_REPLICAS:-1}
+      restart_policy:
+        condition: on-failure
     depends_on:
       - api
       - web
 
   live:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-live:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: node live/dist/server.js live
+    environment:
+      <<: [*live-env]
     deploy:
       replicas: ${LIVE_REPLICAS:-1}
+      restart_policy:
+        condition: on-failure
     depends_on:
       - api
       - web
 
   api:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: ./bin/docker-entrypoint-api.sh
     deploy:
       replicas: ${API_REPLICAS:-1}
+      restart_policy:
+        condition: on-failure
     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:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: ./bin/docker-entrypoint-worker.sh
+    deploy:
+      replicas: ${WORKER_REPLICAS:-1}
+      restart_policy:
+        condition: on-failure
     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
@@ -133,14 +133,16 @@ services:
       - plane-mq
 
   beat-worker:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: ./bin/docker-entrypoint-beat.sh
+    deploy:
+      replicas: ${BEAT_WORKER_REPLICAS:-1}
+      restart_policy:
+        condition: on-failure
     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
@@ -148,60 +150,80 @@ services:
       - plane-mq
 
   migrator:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-backend:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: "no"
     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:
-    <<: *app-env
     image: postgres:15.7-alpine
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: postgres -c 'max_connections=1000'
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: on-failure
+    environment:
+      <<: *db-env
     volumes:
       - pgdata:/var/lib/postgresql/data
 
   plane-redis:
-    <<: *app-env
     image: valkey/valkey:7.2.5-alpine
-    pull_policy: if_not_present
-    restart: unless-stopped
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: on-failure
     volumes:
       - redisdata:/data
 
   plane-mq:
-    <<: *app-env
     image: rabbitmq:3.13.6-management-alpine
-    restart: always
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: on-failure
+    environment:
+      <<: *mq-env
     volumes:
       - rabbitmq_data:/var/lib/rabbitmq
 
+  # Comment this if you using any external s3 compatible storage
   plane-minio:
-    <<: *app-env
     image: minio/minio:latest
-    pull_policy: if_not_present
-    restart: unless-stopped
     command: server /export --console-address ":9090"
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: on-failure
+    environment:
+      <<: *minio-env
     volumes:
       - uploads:/export
 
   # Comment this if you already have a reverse proxy running
   proxy:
-    <<: *app-env
     image: ${DOCKERHUB_USER:-makeplane}/plane-proxy:${APP_RELEASE:-stable}
-    platform: ${DOCKER_PLATFORM:-}
-    pull_policy: if_not_present
-    restart: unless-stopped
     ports:
-      - ${NGINX_PORT}:80
+      - target: 80
+        published: ${NGINX_PORT:-80}
+        protocol: tcp
+        mode: host
+    environment:
+      <<: *proxy-env
+    deploy:
+      replicas: 1
+      restart_policy:
+        condition: on-failure
     depends_on:
       - web
       - api
@@ -210,7 +232,6 @@ services:
 volumes:
   pgdata:
   redisdata:
-  
   uploads:
   logs_api:
   logs_worker:
diff --git a/deploy/selfhost/install.sh b/deploy/selfhost/install.sh
index 08cd4d916..1ee0d6f35 100755
--- a/deploy/selfhost/install.sh
+++ b/deploy/selfhost/install.sh
@@ -4,9 +4,12 @@ BRANCH=${BRANCH:-master}
 SCRIPT_DIR=$PWD
 SERVICE_FOLDER=plane-app
 PLANE_INSTALL_DIR=$PWD/$SERVICE_FOLDER
-export APP_RELEASE="stable"
+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/deploy/selfhost"
 
 CPU_ARCH=$(uname -m)
 OS_NAME=$(uname)
@@ -16,13 +19,6 @@ mkdir -p $PLANE_INSTALL_DIR/archive
 DOCKER_FILE_PATH=$PLANE_INSTALL_DIR/docker-compose.yaml
 DOCKER_ENV_PATH=$PLANE_INSTALL_DIR/plane.env
 
-SED_PREFIX=()
-if [ "$OS_NAME" == "Darwin" ]; then
-  SED_PREFIX=("-i" "")
-else
-  SED_PREFIX=("-i")
-fi
-
 function print_header() {
 clear
 
@@ -59,6 +55,17 @@ function spinner() {
     printf "    \b\b\b\b" >&2
 }
 
+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 initialize(){
     printf "Please wait while we check the availability of Docker images for the selected release ($APP_RELEASE) with ${UPPER_CPU_ARCH} support." >&2
 
@@ -130,8 +137,12 @@ function updateEnvFile() {
             echo "$key=$value" >> "$file"
             return
         else 
-            # if key exists, update the value
-            sed "${SED_PREFIX[@]}" "s/^$key=.*/$key=$value/g" "$file"
+            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"
@@ -182,7 +193,7 @@ function buildYourOwnImage(){
     local PLANE_TEMP_CODE_DIR=~/tmp/plane
     rm -rf $PLANE_TEMP_CODE_DIR
     mkdir -p $PLANE_TEMP_CODE_DIR
-    REPO=https://github.com/makeplane/plane.git
+    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/deploy/selfhost/build.yml" "$PLANE_TEMP_CODE_DIR/build.yml"
@@ -204,6 +215,10 @@ 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
@@ -232,8 +247,49 @@ function download() {
         mv $PLANE_INSTALL_DIR/docker-compose.yaml $PLANE_INSTALL_DIR/archive/$TS.docker-compose.yaml
     fi
 
-    curl -H 'Cache-Control: no-cache, no-store' -s -o $PLANE_INSTALL_DIR/docker-compose.yaml  https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/docker-compose.yml?$(date +%s)
-    curl -H 'Cache-Control: no-cache, no-store' -s -o $PLANE_INSTALL_DIR/variables-upgrade.env https://raw.githubusercontent.com/makeplane/plane/$BRANCH/deploy/selfhost/variables.env?$(date +%s)
+    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.yaml
+    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.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 -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.yaml $PLANE_INSTALL_DIR/docker-compose.yaml
+            exit 1
+        fi
+    fi
 
     if [ -f "$DOCKER_ENV_PATH" ];
     then
@@ -335,6 +391,34 @@ function restartServices() {
     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
 
@@ -373,12 +457,13 @@ function viewLogs(){
         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 <= 10 )); do
-            echo "Invalid selection. Please enter a number between 1 and 11."
+        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
 
@@ -397,6 +482,7 @@ function viewLogs(){
                 8) viewSpecificLogs "plane-redis";;
                 9) viewSpecificLogs "plane-db";;
                 10) viewSpecificLogs "plane-minio";;
+                11) viewSpecificLogs "plane-mq";;
                 0) askForAction;;
                 *) echo "INVALID SERVICE NAME SUPPLIED";;
             esac
@@ -415,6 +501,7 @@ function viewLogs(){
             redis) viewSpecificLogs "plane-redis";;
             postgres) viewSpecificLogs "plane-db";;
             minio) viewSpecificLogs "plane-minio";;
+            rabbitmq) viewSpecificLogs "plane-mq";;
             *) echo "INVALID SERVICE NAME SUPPLIED";;
         esac
     else
diff --git a/deploy/selfhost/swarm.sh b/deploy/selfhost/swarm.sh
new file mode 100755
index 000000000..49fe77576
--- /dev/null
+++ b/deploy/selfhost/swarm.sh
@@ -0,0 +1,612 @@
+#!/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/deploy/selfhost"
+
+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/deploy/selfhost/variables.env b/deploy/selfhost/variables.env
index b5221c71a..b10cf11d0 100644
--- a/deploy/selfhost/variables.env
+++ b/deploy/selfhost/variables.env
@@ -5,6 +5,9 @@ WEB_REPLICAS=1
 SPACE_REPLICAS=1
 ADMIN_REPLICAS=1
 API_REPLICAS=1
+WORKER_REPLICAS=1
+BEAT_WORKER_REPLICAS=1
+LIVE_REPLICAS=1
 
 NGINX_PORT=80
 WEB_URL=http://${APP_DOMAIN}
@@ -47,9 +50,6 @@ 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
-MINIO_ROOT_USER=access-key
-MINIO_ROOT_PASSWORD=secret-key
-BUCKET_NAME=uploads
 FILE_SIZE_LIMIT=5242880
 
 # Gunicorn Workers
diff --git a/live/.prettierignore b/live/.prettierignore
new file mode 100644
index 000000000..8f6f9062d
--- /dev/null
+++ b/live/.prettierignore
@@ -0,0 +1,6 @@
+.next
+.turbo
+out/
+dist/
+build/
+node_modules/
\ No newline at end of file
diff --git a/live/.prettierrc b/live/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/live/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/live/Dockerfile.dev b/live/Dockerfile.dev
index 92dee3e26..d893194ca 100644
--- a/live/Dockerfile.dev
+++ b/live/Dockerfile.dev
@@ -1,4 +1,4 @@
-FROM node:18-alpine
+FROM node:20-alpine
 RUN apk add --no-cache libc6-compat
 # Set working directory
 WORKDIR /app
diff --git a/live/Dockerfile.live b/live/Dockerfile.live
index 6664fee97..ae9eba9d1 100644
--- a/live/Dockerfile.live
+++ b/live/Dockerfile.live
@@ -1,4 +1,4 @@
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 # The web Dockerfile is copy-pasted into our main docs at /docs/handbook/deploying-with-docker.
 # Make sure you update this Dockerfile, the Dockerfile in the web workspace and copy that over to Dockerfile in the docs.
 
diff --git a/live/package.json b/live/package.json
index e098564e1..31d0b5149 100644
--- a/live/package.json
+++ b/live/package.json
@@ -16,17 +16,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@hocuspocus/extension-database": "^2.11.3",
-    "@hocuspocus/extension-logger": "^2.11.3",
-    "@hocuspocus/extension-redis": "^2.13.5",
-    "@hocuspocus/server": "^2.11.3",
+    "@hocuspocus/extension-database": "^2.15.0",
+    "@hocuspocus/extension-logger": "^2.15.0",
+    "@hocuspocus/extension-redis": "^2.15.0",
+    "@hocuspocus/server": "^2.15.0",
+    "@plane/constants": "*",
     "@plane/editor": "*",
     "@plane/types": "*",
-    "@sentry/node": "^8.28.0",
+    "@sentry/node": "^9.0.1",
     "@sentry/profiling-node": "^8.28.0",
-    "@tiptap/core": "^2.4.0",
-    "@tiptap/html": "^2.3.0",
-    "axios": "^1.7.2",
+    "@tiptap/core": "2.10.4",
+    "@tiptap/html": "2.11.0",
+    "axios": "^1.7.9",
     "compression": "^1.7.4",
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
@@ -39,9 +40,9 @@
     "pino-http": "^10.3.0",
     "pino-pretty": "^11.2.2",
     "uuid": "^10.0.0",
-    "y-prosemirror": "^1.2.9",
+    "y-prosemirror": "^1.2.15",
     "y-protocols": "^1.0.6",
-    "yjs": "^13.6.14"
+    "yjs": "^13.6.20"
   },
   "devDependencies": {
     "@babel/cli": "^7.25.6",
diff --git a/live/src/core/helpers/convert-document.ts b/live/src/core/helpers/convert-document.ts
new file mode 100644
index 000000000..123989190
--- /dev/null
+++ b/live/src/core/helpers/convert-document.ts
@@ -0,0 +1,44 @@
+// plane editor
+import {
+  getAllDocumentFormatsFromDocumentEditorBinaryData,
+  getAllDocumentFormatsFromRichTextEditorBinaryData,
+  getBinaryDataFromDocumentEditorHTMLString,
+  getBinaryDataFromRichTextEditorHTMLString,
+} from "@plane/editor";
+// plane types
+import { TDocumentPayload } from "@plane/types";
+
+type TArgs = {
+  document_html: string;
+  variant: "rich" | "document";
+};
+
+export const convertHTMLDocumentToAllFormats = (args: TArgs): TDocumentPayload => {
+  const { document_html, variant } = args;
+
+  let allFormats: TDocumentPayload;
+
+  if (variant === "rich") {
+    const contentBinary = getBinaryDataFromRichTextEditorHTMLString(document_html);
+    const { contentBinaryEncoded, contentHTML, contentJSON } =
+      getAllDocumentFormatsFromRichTextEditorBinaryData(contentBinary);
+    allFormats = {
+      description: contentJSON,
+      description_html: contentHTML,
+      description_binary: contentBinaryEncoded,
+    };
+  } else if (variant === "document") {
+    const contentBinary = getBinaryDataFromDocumentEditorHTMLString(document_html);
+    const { contentBinaryEncoded, contentHTML, contentJSON } =
+      getAllDocumentFormatsFromDocumentEditorBinaryData(contentBinary);
+    allFormats = {
+      description: contentJSON,
+      description_html: contentHTML,
+      description_binary: contentBinaryEncoded,
+    };
+  } else {
+    throw new Error(`Invalid variant provided: ${variant}`);
+  }
+
+  return allFormats;
+};
diff --git a/live/src/core/types/common.d.ts b/live/src/core/types/common.d.ts
index 3156060ef..90fd335ae 100644
--- a/live/src/core/types/common.d.ts
+++ b/live/src/core/types/common.d.ts
@@ -6,3 +6,8 @@ export type TDocumentTypes = "project_page" | TAdditionalDocumentTypes;
 export type HocusPocusServerContext = {
   cookie: string;
 };
+
+export type TConvertDocumentRequestBody = {
+  description_html: string;
+  variant: "rich" | "document";
+};
diff --git a/live/src/server.ts b/live/src/server.ts
index 1868b86c1..93f56bdb5 100644
--- a/live/src/server.ts
+++ b/live/src/server.ts
@@ -1,20 +1,19 @@
-import "@/core/config/sentry-config.js";
-
-import express from "express";
-import expressWs from "express-ws";
 import * as Sentry from "@sentry/node";
 import compression from "compression";
-import helmet from "helmet";
-
-// cors
 import cors from "cors";
-
-// core hocuspocus server
+import expressWs from "express-ws";
+import express from "express";
+import helmet from "helmet";
+// config
+import "@/core/config/sentry-config.js";
+// hocuspocus server
 import { getHocusPocusServer } from "@/core/hocuspocus-server.js";
-
 // helpers
+import { convertHTMLDocumentToAllFormats } from "@/core/helpers/convert-document.js";
 import { logger, manualLogger } from "@/core/helpers/logger.js";
 import { errorHandler } from "@/core/helpers/error-handler.js";
+// types
+import { TConvertDocumentRequestBody } from "@/core/types/common.js";
 
 const app = express();
 expressWs(app);
@@ -29,7 +28,7 @@ app.use(
   compression({
     level: 6,
     threshold: 5 * 1000,
-  }),
+  })
 );
 
 // Logging middleware
@@ -62,6 +61,31 @@ router.ws("/collaboration", (ws, req) => {
   }
 });
 
+router.post("/convert-document", (req, res) => {
+  const { description_html, variant } = req.body as TConvertDocumentRequestBody;
+  try {
+    if (description_html === undefined || variant === undefined) {
+      res.status(400).send({
+        message: "Missing required fields",
+      });
+      return;
+    }
+    const { description, description_binary } = convertHTMLDocumentToAllFormats({
+      document_html: description_html,
+      variant,
+    });
+    res.status(200).json({
+      description,
+      description_binary,
+    });
+  } catch (error) {
+    manualLogger.error("Error in /convert-document endpoint:", error);
+    res.status(500).send({
+      message: `Internal server error. ${error}`,
+    });
+  }
+});
+
 app.use(process.env.LIVE_BASE_PATH || "/live", router);
 
 app.use((_req, res) => {
@@ -82,9 +106,7 @@ const gracefulShutdown = async () => {
   try {
     // Close the HocusPocus server WebSocket connections
     await HocusPocusServer.destroy();
-    manualLogger.info(
-      "HocusPocus server WebSocket connections closed gracefully.",
-    );
+    manualLogger.info("HocusPocus server WebSocket connections closed gracefully.");
 
     // Close the Express server
     liveServer.close(() => {
diff --git a/package.json b/package.json
index f14aa4ac7..71f8fa0ee 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,11 @@
   "devDependencies": {
     "prettier": "latest",
     "prettier-plugin-tailwindcss": "^0.5.4",
-    "turbo": "^2.3.3"
+    "turbo": "^2.4.2"
+  },
+  "resolutions": {
+    "nanoid": "3.3.8",
+    "esbuild": "0.25.0"
   },
   "packageManager": "yarn@1.22.22",
   "name": "plane"
diff --git a/packages/constants/.prettierignore b/packages/constants/.prettierignore
new file mode 100644
index 000000000..e841c6b32
--- /dev/null
+++ b/packages/constants/.prettierignore
@@ -0,0 +1,5 @@
+.next
+.turbo
+out/
+dist/
+build/
\ No newline at end of file
diff --git a/packages/constants/.prettierrc b/packages/constants/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/packages/constants/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/packages/constants/src/ai.ts b/packages/constants/src/ai.ts
new file mode 100644
index 000000000..812530244
--- /dev/null
+++ b/packages/constants/src/ai.ts
@@ -0,0 +1,3 @@
+export enum AI_EDITOR_TASKS {
+  ASK_ANYTHING = "ASK_ANYTHING",
+}
diff --git a/packages/constants/src/analytics.ts b/packages/constants/src/analytics.ts
new file mode 100644
index 000000000..6c8211ae0
--- /dev/null
+++ b/packages/constants/src/analytics.ts
@@ -0,0 +1,81 @@
+// types
+import { TXAxisValues, TYAxisValues } from "@plane/types";
+
+export const ANALYTICS_TABS = [
+  {
+    key: "scope_and_demand",
+    i18n_title: "workspace_analytics.tabs.scope_and_demand",
+  },
+  { key: "custom", i18n_title: "workspace_analytics.tabs.custom" },
+];
+
+export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
+  [
+    {
+      value: "state_id",
+      label: "State name",
+    },
+    {
+      value: "state__group",
+      label: "State group",
+    },
+    {
+      value: "priority",
+      label: "Priority",
+    },
+    {
+      value: "labels__id",
+      label: "Label",
+    },
+    {
+      value: "assignees__id",
+      label: "Assignee",
+    },
+    {
+      value: "estimate_point__value",
+      label: "Estimate point",
+    },
+    {
+      value: "issue_cycle__cycle_id",
+      label: "Cycle",
+    },
+    {
+      value: "issue_module__module_id",
+      label: "Module",
+    },
+    {
+      value: "completed_at",
+      label: "Completed date",
+    },
+    {
+      value: "target_date",
+      label: "Due date",
+    },
+    {
+      value: "start_date",
+      label: "Start date",
+    },
+    {
+      value: "created_at",
+      label: "Created date",
+    },
+  ];
+
+export const ANALYTICS_Y_AXIS_VALUES: { value: TYAxisValues; label: string }[] =
+  [
+    {
+      value: "issue_count",
+      label: "Work item Count",
+    },
+    {
+      value: "estimate",
+      label: "Estimate",
+    },
+  ];
+
+export const ANALYTICS_DATE_KEYS = [
+  "completed_at",
+  "target_date",
+  "start_date",
+  "created_at",
+];
diff --git a/packages/constants/src/auth.ts b/packages/constants/src/auth.ts
index 59f08a37f..bcdda31b4 100644
--- a/packages/constants/src/auth.ts
+++ b/packages/constants/src/auth.ts
@@ -1,3 +1,36 @@
+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",
@@ -6,6 +39,14 @@ export enum EAuthPageTypes {
   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",
@@ -17,15 +58,35 @@ export enum EAuthSteps {
   UNIQUE_CODE = "UNIQUE_CODE",
 }
 
-// TODO: remove this
 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: EAdminAuthErrorCodes;
+  title: string;
+  message: any;
+};
+
+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 enum EAuthErrorCodes {
   // Global
   INSTANCE_NOT_CONFIGURED = "5000",
@@ -74,7 +135,7 @@ export enum EAuthErrorCodes {
   INCORRECT_OLD_PASSWORD = "5135",
   MISSING_PASSWORD = "5138",
   INVALID_NEW_PASSWORD = "5140",
-  // set passowrd
+  // set password
   PASSWORD_ALREADY_SET = "5145",
   // Admin
   ADMIN_ALREADY_EXIST = "5150",
diff --git a/packages/constants/src/chart.ts b/packages/constants/src/chart.ts
new file mode 100644
index 000000000..f921b8b37
--- /dev/null
+++ b/packages/constants/src/chart.ts
@@ -0,0 +1,2 @@
+export const LABEL_CLASSNAME = "uppercase text-custom-text-300/60 text-sm tracking-wide";
+export const AXIS_LINE_CLASSNAME = "text-custom-text-400/70";
diff --git a/packages/constants/src/cycle.ts b/packages/constants/src/cycle.ts
new file mode 100644
index 000000000..752f23dbe
--- /dev/null
+++ b/packages/constants/src/cycle.ts
@@ -0,0 +1,42 @@
+// 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-green-600",
+    bgColor: "bg-green-50",
+  },
+  {
+    i18n_label: "project_cycles.status.draft",
+    value: "draft",
+    i18n_title: "project_cycles.status.draft",
+    color: "#525252",
+    textColor: "text-custom-text-300",
+    bgColor: "bg-custom-background-90",
+  },
+];
diff --git a/packages/constants/src/dashboard.ts b/packages/constants/src/dashboard.ts
new file mode 100644
index 000000000..d7a3ae611
--- /dev/null
+++ b/packages/constants/src/dashboard.ts
@@ -0,0 +1,92 @@
+// types
+import { 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-green-500/20",
+  "bg-red-500/20",
+  "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 000000000..48be02b01
--- /dev/null
+++ b/packages/constants/src/emoji.ts
@@ -0,0 +1,10 @@
+export const ISSUE_REACTION_EMOJI_CODES = [
+  "128077",
+  "128078",
+  "128516",
+  "128165",
+  "128533",
+  "129505",
+  "9992",
+  "128064",
+];
diff --git a/packages/constants/src/endpoints.ts b/packages/constants/src/endpoints.ts
index fa6db6ec7..cd1c08d7a 100644
--- a/packages/constants/src/endpoints.ts
+++ b/packages/constants/src/endpoints.ts
@@ -1,18 +1,29 @@
 export const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || "";
-// PI Base Url
-export const PI_BASE_URL = process.env.NEXT_PUBLIC_PI_BASE_URL || "";
+export const API_BASE_PATH = process.env.NEXT_PUBLIC_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.NEXT_PUBLIC_ADMIN_BASE_URL || "";
-export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_ADMIN_BASE_PATH || "";
-export const GOD_MODE_URL = encodeURI(`${ADMIN_BASE_URL}${ADMIN_BASE_PATH}/`);
+export const ADMIN_BASE_PATH = process.env.NEXT_PUBLIC_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.NEXT_PUBLIC_SPACE_BASE_URL || "";
-export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_SPACE_BASE_PATH || "";
-export const SITES_URL = encodeURI(`${SPACE_BASE_URL}${SPACE_BASE_PATH}/`);
+export const SPACE_BASE_PATH = process.env.NEXT_PUBLIC_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.NEXT_PUBLIC_LIVE_BASE_URL || "";
-export const LIVE_BASE_PATH = process.env.NEXT_PUBLIC_LIVE_BASE_PATH || "";
-export const LIVE_URL = encodeURI(`${LIVE_BASE_URL}${LIVE_BASE_PATH}/`);
+export const LIVE_BASE_PATH = process.env.NEXT_PUBLIC_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.NEXT_PUBLIC_WEB_BASE_URL || "";
+export const WEB_BASE_PATH = process.env.NEXT_PUBLIC_WEB_BASE_PATH || "/";
+export const WEB_URL = encodeURI(`${WEB_BASE_URL}${WEB_BASE_PATH}`);
 // plane website url
 export const WEBSITE_URL =
   process.env.NEXT_PUBLIC_WEBSITE_URL || "https://plane.so";
+// support email
+export const SUPPORT_EMAIL =
+  process.env.NEXT_PUBLIC_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/web/core/constants/event-tracker.ts b/packages/constants/src/event-tracker.ts
similarity index 94%
rename from web/core/constants/event-tracker.ts
rename to packages/constants/src/event-tracker.ts
index c0ac86935..4fb1ea15c 100644
--- a/web/core/constants/event-tracker.ts
+++ b/packages/constants/src/event-tracker.ts
@@ -8,6 +8,8 @@ export type IssueEventProps = {
 export type EventProps = {
   eventName: string;
   payload: any;
+  updates?: any;
+  path?: string;
 };
 
 export const getWorkspaceEventPayload = (payload: any) => ({
@@ -102,7 +104,10 @@ export const getIssueEventPayload = (props: IssueEventProps) => {
     module_id: payload.module_id,
     archived_at: payload.archived_at,
     state: payload.state,
-    view_id: path?.includes("workspace-views") || path?.includes("views") ? path.split("/").pop() : "",
+    view_id:
+      path?.includes("workspace-views") || path?.includes("views")
+        ? path.split("/").pop()
+        : "",
   };
 
   if (eventName === ISSUE_UPDATED) {
@@ -164,12 +169,12 @@ export const MODULE_LINK_CREATED = "Module link created";
 export const MODULE_LINK_UPDATED = "Module link updated";
 export const MODULE_LINK_DELETED = "Module link deleted";
 // Issue Events
-export const ISSUE_CREATED = "Issue created";
-export const ISSUE_UPDATED = "Issue updated";
-export const ISSUE_DELETED = "Issue deleted";
-export const ISSUE_ARCHIVED = "Issue archived";
-export const ISSUE_RESTORED = "Issue restored";
-export const ISSUE_OPENED = "Issue opened";
+export const ISSUE_CREATED = "Work item created";
+export const ISSUE_UPDATED = "Work item updated";
+export const ISSUE_DELETED = "Work item deleted";
+export const ISSUE_ARCHIVED = "Work item archived";
+export const ISSUE_RESTORED = "Work item restored";
+export const ISSUE_OPENED = "Work item opened";
 // Project State Events
 export const STATE_CREATED = "State created";
 export const STATE_UPDATED = "State updated";
@@ -206,7 +211,7 @@ export const PRODUCT_TOUR_COMPLETED = "Product tour completed";
 export const PRODUCT_TOUR_SKIPPED = "Product tour skipped";
 // Dashboard Events
 export const CHANGELOG_REDIRECTED = "Changelog redirected";
-export const GITHUB_REDIRECTED = "Github redirected";
+export const GITHUB_REDIRECTED = "GitHub redirected";
 // Sidebar Events
 export const SIDEBAR_CLICKED = "Sidenav clicked";
 // Global View Events
diff --git a/space/core/constants/common.ts b/packages/constants/src/file.ts
similarity index 100%
rename from space/core/constants/common.ts
rename to packages/constants/src/file.ts
diff --git a/web/core/constants/filters.ts b/packages/constants/src/filter.ts
similarity index 90%
rename from web/core/constants/filters.ts
rename to packages/constants/src/filter.ts
index 98189bc78..cc8d98c45 100644
--- a/web/core/constants/filters.ts
+++ b/packages/constants/src/filter.ts
@@ -1,3 +1,7 @@
+export enum E_SORT_ORDER {
+  ASC = "asc",
+  DESC = "desc",
+}
 export const DATE_AFTER_FILTER_OPTIONS = [
   {
     name: "1 week from now",
@@ -28,6 +32,7 @@ export const DATE_BEFORE_FILTER_OPTIONS = [
   },
   {
     name: "1 month ago",
+    i18n_name: "date_filters.1_month_ago",
     value: "1_months;before;fromnow",
   },
 ];
diff --git a/web/core/constants/graph.ts b/packages/constants/src/graph.ts
similarity index 83%
rename from web/core/constants/graph.ts
rename to packages/constants/src/graph.ts
index 0376a7f9f..1ed7e4f9d 100644
--- a/web/core/constants/graph.ts
+++ b/packages/constants/src/graph.ts
@@ -1,7 +1,4 @@
-// nivo
-import { Theme } from "@nivo/core";
-
-export const CHARTS_THEME: Theme = {
+export const CHARTS_THEME = {
   background: "transparent",
   text: {
     color: "rgb(var(--color-text-200))",
@@ -29,7 +26,7 @@ export const CHARTS_THEME: Theme = {
   },
 };
 
-export const DEFAULT_MARGIN = {
+export const CHART_DEFAULT_MARGIN = {
   top: 50,
   right: 50,
   bottom: 50,
diff --git a/packages/constants/src/inbox.ts b/packages/constants/src/inbox.ts
new file mode 100644
index 000000000..cf5270a04
--- /dev/null
+++ b/packages/constants/src/inbox.ts
@@ -0,0 +1,91 @@
+import { TInboxDuplicateIssueDetails, TIssue } from "@plane/types";
+
+export enum EInboxIssueCurrentTab {
+	OPEN = "open",
+	CLOSED = "closed",
+}
+
+export enum EInboxIssueStatus {
+	PENDING = -2,
+	DECLINED = -1,
+	SNOOZED = 0,
+	ACCEPTED = 1,
+	DUPLICATE = 2,
+}
+
+export type TInboxIssueCurrentTab = EInboxIssueCurrentTab;
+export type TInboxIssueStatus = EInboxIssueStatus;
+export type TInboxIssue = {
+	id: string;
+	status: TInboxIssueStatus;
+	snoozed_till: Date | null;
+	duplicate_to: string | undefined;
+	source: string;
+	issue: TIssue;
+	created_by: string;
+	duplicate_issue_detail: TInboxDuplicateIssueDetails | undefined;
+};
+
+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",
+	},
+];
diff --git a/packages/constants/src/index.ts b/packages/constants/src/index.ts
index 418908622..7fedff05d 100644
--- a/packages/constants/src/index.ts
+++ b/packages/constants/src/index.ts
@@ -1,4 +1,31 @@
+export * from "./ai";
+export * from "./analytics";
 export * from "./auth";
+export * from "./chart";
 export * from "./endpoints";
+export * from "./file";
+export * from "./filter";
+export * from "./graph";
+export * from "./instance";
 export * from "./issue";
+export * from "./metadata";
+export * from "./notification";
+export * from "./state";
+export * from "./swr";
+export * from "./tab-indices";
+export * from "./user";
 export * from "./workspace";
+export * from "./stickies";
+export * from "./cycle";
+export * from "./module";
+export * from "./project";
+export * from "./views";
+export * from "./themes";
+export * from "./inbox";
+export * from "./profile";
+export * from "./workspace-drafts";
+export * from "./label";
+export * from "./event-tracker";
+export * from "./spreadsheet";
+export * from "./dashboard";
+export * from "./page";
diff --git a/admin/helpers/instance.helper.ts b/packages/constants/src/instance.ts
similarity index 100%
rename from admin/helpers/instance.helper.ts
rename to packages/constants/src/instance.ts
diff --git a/packages/constants/src/issue.ts b/packages/constants/src/issue.ts
deleted file mode 100644
index 5db398c76..000000000
--- a/packages/constants/src/issue.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-export const ALL_ISSUES = "All Issues";
-
-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",
-}
-
-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 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",
-}
diff --git a/packages/constants/src/issue/common.ts b/packages/constants/src/issue/common.ts
new file mode 100644
index 000000000..a63dd110d
--- /dev/null
+++ b/packages/constants/src/issue/common.ts
@@ -0,0 +1,217 @@
+import {
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  IIssueDisplayProperties,
+} 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",
+  "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 EIssueServiceType {
+  ISSUES = "issues",
+  EPICS = "epics",
+}
+
+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",
+  DRAFT = "DRAFT",
+  DEFAULT = "DEFAULT",
+  WORKSPACE_DRAFT = "WORKSPACE_DRAFT",
+  EPIC = "EPIC",
+}
+
+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;
+
+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 ISSUE_DISPLAY_PROPERTIES: {
+  key: keyof IIssueDisplayProperties;
+  titleTranslationKey: string;
+}[] = [
+  {
+    key: "key",
+    titleTranslationKey: "issue.display.properties.id",
+  },
+  {
+    key: "issue_type",
+    titleTranslationKey: "issue.display.properties.issue_type",
+  },
+  {
+    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" },
+];
diff --git a/packages/constants/src/issue/filter.ts b/packages/constants/src/issue/filter.ts
new file mode 100644
index 000000000..5d1d694b7
--- /dev/null
+++ b/packages/constants/src/issue/filter.ts
@@ -0,0 +1,530 @@
+import {
+  ILayoutDisplayFiltersOptions,
+  TIssueActivityComment,
+} from "@plane/types";
+import {
+  TIssueFilterPriorityObject,
+  ISSUE_DISPLAY_PROPERTIES_KEYS,
+  EIssuesStoreType,
+} from "./common";
+
+import { 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 = "filters",
+  DISPLAY_FILTERS = "display_filters",
+  DISPLAY_PROPERTIES = "display_properties",
+  KANBAN_FILTERS = "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-red-500 border-red-500 text-white",
+    icon: "error",
+  },
+  {
+    key: "high",
+    titleTranslationKey: "issue.priority.high",
+    className: "text-orange-500 border-custom-border-300",
+    icon: "signal_cellular_alt",
+  },
+  {
+    key: "medium",
+    titleTranslationKey: "issue.priority.medium",
+    className: "text-yellow-500 border-custom-border-300",
+    icon: "signal_cellular_alt_2_bar",
+  },
+  {
+    key: "low",
+    titleTranslationKey: "issue.priority.low",
+    className: "text-green-500 border-custom-border-300",
+    icon: "signal_cellular_alt_1_bar",
+  },
+  {
+    key: "none",
+    titleTranslationKey: "common.none",
+    className: "text-gray-500 border-custom-border-300",
+    icon: "block",
+  },
+];
+
+export type TFiltersByLayout = {
+  [layoutType: string]: ILayoutDisplayFiltersOptions;
+};
+
+export type TIssueFiltersToDisplayByPageType = {
+  [pageType: string]: TFiltersByLayout;
+};
+
+export const ISSUE_DISPLAY_FILTERS_BY_PAGE: TIssueFiltersToDisplayByPageType = {
+  profile_issues: {
+    list: {
+      filters: [
+        "priority",
+        "state_group",
+        "labels",
+        "start_date",
+        "target_date",
+      ],
+      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: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups", "sub_issue"],
+      },
+    },
+    kanban: {
+      filters: [
+        "priority",
+        "state_group",
+        "labels",
+        "start_date",
+        "target_date",
+      ],
+      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: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
+  archived_issues: {
+    list: {
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+        "issue_type",
+      ],
+      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+      display_filters: {
+        group_by: [
+          "state",
+          "cycle",
+          "module",
+          "state_detail.group",
+          "priority",
+          "labels",
+          "assignees",
+          "created_by",
+          null,
+        ],
+        order_by: [
+          "sort_order",
+          "-created_at",
+          "-updated_at",
+          "start_date",
+          "-priority",
+        ],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
+  draft_issues: {
+    list: {
+      filters: [
+        "priority",
+        "state_group",
+        "cycle",
+        "module",
+        "labels",
+        "start_date",
+        "target_date",
+        "issue_type",
+      ],
+      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+      display_filters: {
+        group_by: [
+          "state_detail.group",
+          "cycle",
+          "module",
+          "priority",
+          "project",
+          "labels",
+          null,
+        ],
+        order_by: [
+          "sort_order",
+          "-created_at",
+          "-updated_at",
+          "start_date",
+          "-priority",
+        ],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+    kanban: {
+      filters: [
+        "priority",
+        "state_group",
+        "cycle",
+        "module",
+        "labels",
+        "start_date",
+        "target_date",
+        "issue_type",
+      ],
+      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+      display_filters: {
+        group_by: [
+          "state_detail.group",
+          "cycle",
+          "module",
+          "priority",
+          "project",
+          "labels",
+        ],
+        order_by: [
+          "sort_order",
+          "-created_at",
+          "-updated_at",
+          "start_date",
+          "-priority",
+        ],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups"],
+      },
+    },
+  },
+  my_issues: {
+    spreadsheet: {
+      filters: [
+        "priority",
+        "state_group",
+        "labels",
+        "assignees",
+        "created_by",
+        "subscriber",
+        "project",
+        "start_date",
+        "target_date",
+      ],
+      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+      display_filters: {
+        order_by: [],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["sub_issue"],
+      },
+    },
+    list: {
+      filters: [
+        "priority",
+        "state_group",
+        "labels",
+        "assignees",
+        "created_by",
+        "subscriber",
+        "project",
+        "start_date",
+        "target_date",
+      ],
+      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+      display_filters: {
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: false,
+        values: [],
+      },
+    },
+  },
+  issues: {
+    list: {
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+        "issue_type",
+      ],
+      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",
+        ],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups", "sub_issue"],
+      },
+    },
+    kanban: {
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+        "issue_type",
+      ],
+      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: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups", "sub_issue"],
+      },
+    },
+    calendar: {
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "issue_type",
+      ],
+      display_properties: ["key", "issue_type"],
+      display_filters: {
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["sub_issue"],
+      },
+    },
+    spreadsheet: {
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+        "issue_type",
+      ],
+      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
+      display_filters: {
+        order_by: [
+          "sort_order",
+          "-created_at",
+          "-updated_at",
+          "start_date",
+          "-priority",
+        ],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["sub_issue"],
+      },
+    },
+    gantt_chart: {
+      filters: [
+        "priority",
+        "state",
+        "cycle",
+        "module",
+        "assignees",
+        "mentions",
+        "created_by",
+        "labels",
+        "start_date",
+        "target_date",
+        "issue_type",
+      ],
+      display_properties: ["key", "issue_type"],
+      display_filters: {
+        order_by: [
+          "sort_order",
+          "-created_at",
+          "-updated_at",
+          "start_date",
+          "-priority",
+        ],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["sub_issue"],
+      },
+    },
+  },
+};
+
+export const ISSUE_STORE_TO_FILTERS_MAP: Partial<
+  Record<EIssuesStoreType, TFiltersByLayout>
+> = {
+  [EIssuesStoreType.PROJECT]: ISSUE_DISPLAY_FILTERS_BY_PAGE.issues,
+};
+
+export enum EActivityFilterType {
+  ACTIVITY = "ACTIVITY",
+  COMMENT = "COMMENT",
+}
+
+export type TActivityFilters = EActivityFilterType;
+
+export const ACTIVITY_FILTER_TYPE_OPTIONS: Record<
+  TActivityFilters,
+  { labelTranslationKey: string }
+> = {
+  [EActivityFilterType.ACTIVITY]: {
+    labelTranslationKey: "common.updates",
+  },
+  [EActivityFilterType.COMMENT]: {
+    labelTranslationKey: "common.comments",
+  },
+};
+
+export type TActivityFilterOption = {
+  key: TActivityFilters;
+  labelTranslationKey: string;
+  isSelected: boolean;
+  onClick: () => void;
+};
+
+export const defaultActivityFilters: TActivityFilters[] = [
+  EActivityFilterType.ACTIVITY,
+  EActivityFilterType.COMMENT,
+];
+
+export const filterActivityOnSelectedFilters = (
+  activity: TIssueActivityComment[],
+  filters: TActivityFilters[]
+): TIssueActivityComment[] =>
+  activity.filter((activity) =>
+    filters.includes(activity.activity_type as TActivityFilters)
+  );
+
+export const ENABLE_ISSUE_DEPENDENCIES = false;
diff --git a/packages/constants/src/issue/index.ts b/packages/constants/src/issue/index.ts
new file mode 100644
index 000000000..633203223
--- /dev/null
+++ b/packages/constants/src/issue/index.ts
@@ -0,0 +1,3 @@
+export * from "./common";
+export * from "./filter";
+export * from "./layout";
diff --git a/packages/constants/src/issue/layout.ts b/packages/constants/src/issue/layout.ts
new file mode 100644
index 000000000..6dd62fd17
--- /dev/null
+++ b/packages/constants/src/issue/layout.ts
@@ -0,0 +1,76 @@
+export type TIssueLayout =
+  | "list"
+  | "kanban"
+  | "calendar"
+  | "spreadsheet"
+  | "gantt";
+
+export enum EIssueLayoutTypes {
+  LIST = "list",
+  KANBAN = "kanban",
+  CALENDAR = "calendar",
+  GANTT = "gantt_chart",
+  SPREADSHEET = "spreadsheet",
+}
+
+export type TIssueLayoutMap = Record<
+  EIssueLayoutTypes,
+  {
+    key: EIssueLayoutTypes;
+    i18n_title: string;
+    i18n_label: string;
+  }
+>;
+
+export const SITES_ISSUE_LAYOUTS: {
+  key: TIssueLayout;
+  titleTranslationKey: string;
+  icon: any;
+}[] = [
+  {
+    key: "list",
+    icon: "List",
+    titleTranslationKey: "issue.layouts.list",
+  },
+  {
+    key: "kanban",
+    icon: "Kanban",
+    titleTranslationKey: "issue.layouts.kanban",
+  },
+  // { key: "calendar", title: "Calendar", icon: Calendar },
+  // { key: "spreadsheet", title: "Spreadsheet", icon: Sheet },
+  // { key: "gantt", title: "Gantt chart", icon: GanttChartSquare },
+];
+
+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;
+}[] = Object.values(ISSUE_LAYOUT_MAP);
diff --git a/web/core/constants/label.ts b/packages/constants/src/label.ts
similarity index 100%
rename from web/core/constants/label.ts
rename to packages/constants/src/label.ts
diff --git a/packages/constants/src/metadata.ts b/packages/constants/src/metadata.ts
new file mode 100644
index 000000000..017cc84c2
--- /dev/null
+++ b/packages/constants/src/metadata.ts
@@ -0,0 +1,23 @@
+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/web/core/constants/module.ts b/packages/constants/src/module.ts
similarity index 51%
rename from web/core/constants/module.ts
rename to packages/constants/src/module.ts
index 8d26ab5f4..6ce30f0dc 100644
--- a/web/core/constants/module.ts
+++ b/packages/constants/src/module.ts
@@ -1,51 +1,54 @@
-import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
 // types
-import { TModuleLayoutOptions, TModuleOrderByOptions, TModuleStatus } from "@plane/types";
+import {
+  TModuleLayoutOptions,
+  TModuleOrderByOptions,
+  TModuleStatus,
+} from "@plane/types";
 
 export const MODULE_STATUS: {
-  label: string;
+  i18n_label: string;
   value: TModuleStatus;
   color: string;
   textColor: string;
   bgColor: string;
 }[] = [
   {
-    label: "Backlog",
+    i18n_label: "project_modules.status.backlog",
     value: "backlog",
     color: "#a3a3a2",
     textColor: "text-custom-text-400",
     bgColor: "bg-custom-background-80",
   },
   {
-    label: "Planned",
+    i18n_label: "project_modules.status.planned",
     value: "planned",
     color: "#3f76ff",
     textColor: "text-blue-500",
     bgColor: "bg-indigo-50",
   },
   {
-    label: "In Progress",
+    i18n_label: "project_modules.status.in_progress",
     value: "in-progress",
     color: "#f39e1f",
     textColor: "text-amber-500",
     bgColor: "bg-amber-50",
   },
   {
-    label: "Paused",
+    i18n_label: "project_modules.status.paused",
     value: "paused",
     color: "#525252",
     textColor: "text-custom-text-300",
     bgColor: "bg-custom-background-90",
   },
   {
-    label: "Completed",
+    i18n_label: "project_modules.status.completed",
     value: "completed",
     color: "#16a34a",
     textColor: "text-green-600",
     bgColor: "bg-green-100",
   },
   {
-    label: "Cancelled",
+    i18n_label: "project_modules.status.cancelled",
     value: "cancelled",
     color: "#ef4444",
     textColor: "text-red-500",
@@ -53,47 +56,50 @@ export const MODULE_STATUS: {
   },
 ];
 
-export const MODULE_VIEW_LAYOUTS: { key: TModuleLayoutOptions; icon: any; title: string }[] = [
+export const MODULE_VIEW_LAYOUTS: {
+  key: TModuleLayoutOptions;
+  i18n_title: string;
+}[] = [
   {
     key: "list",
-    icon: List,
-    title: "List layout",
+    i18n_title: "project_modules.layout.list",
   },
   {
     key: "board",
-    icon: LayoutGrid,
-    title: "Gallery layout",
+    i18n_title: "project_modules.layout.board",
   },
   {
     key: "gantt",
-    icon: GanttChartSquare,
-    title: "Timeline layout",
+    i18n_title: "project_modules.layout.timeline",
   },
 ];
 
-export const MODULE_ORDER_BY_OPTIONS: { key: TModuleOrderByOptions; label: string }[] = [
+export const MODULE_ORDER_BY_OPTIONS: {
+  key: TModuleOrderByOptions;
+  i18n_label: string;
+}[] = [
   {
     key: "name",
-    label: "Name",
+    i18n_label: "project_modules.order_by.name",
   },
   {
     key: "progress",
-    label: "Progress",
+    i18n_label: "project_modules.order_by.progress",
   },
   {
     key: "issues_length",
-    label: "Number of issues",
+    i18n_label: "project_modules.order_by.issues",
   },
   {
     key: "target_date",
-    label: "Due date",
+    i18n_label: "project_modules.order_by.due_date",
   },
   {
     key: "created_at",
-    label: "Created date",
+    i18n_label: "project_modules.order_by.created_at",
   },
   {
     key: "sort_order",
-    label: "Manual",
+    i18n_label: "project_modules.order_by.manual",
   },
 ];
diff --git a/web/core/constants/notification.ts b/packages/constants/src/notification.ts
similarity index 82%
rename from web/core/constants/notification.ts
rename to packages/constants/src/notification.ts
index 36ab3c8ee..cb267c4ad 100644
--- a/web/core/constants/notification.ts
+++ b/packages/constants/src/notification.ts
@@ -29,12 +29,13 @@ export type TNotificationTab = ENotificationTab.ALL | ENotificationTab.MENTIONS;
 
 export const NOTIFICATION_TABS = [
   {
-    label: "All",
+    i18n_label: "notification.tabs.all",
     value: ENotificationTab.ALL,
-    count: (unReadNotification: TUnreadNotificationsCount) => unReadNotification?.total_unread_notifications_count || 0,
+    count: (unReadNotification: TUnreadNotificationsCount) =>
+      unReadNotification?.total_unread_notifications_count || 0,
   },
   {
-    label: "Mentions",
+    i18n_label: "notification.tabs.mentions",
     value: ENotificationTab.MENTIONS,
     count: (unReadNotification: TUnreadNotificationsCount) =>
       unReadNotification?.mention_unread_notifications_count || 0,
@@ -43,15 +44,15 @@ export const NOTIFICATION_TABS = [
 
 export const FILTER_TYPE_OPTIONS = [
   {
-    label: "Assigned to me",
+    i18n_label: "notification.filter.assigned",
     value: ENotificationFilterType.ASSIGNED,
   },
   {
-    label: "Created by me",
+    i18n_label: "notification.filter.created",
     value: ENotificationFilterType.CREATED,
   },
   {
-    label: "Subscribed by me",
+    i18n_label: "notification.filter.subscribed",
     value: ENotificationFilterType.SUBSCRIBED,
   },
 ];
@@ -59,7 +60,7 @@ export const FILTER_TYPE_OPTIONS = [
 export const NOTIFICATION_SNOOZE_OPTIONS = [
   {
     key: "1_day",
-    label: "1 day",
+    i18n_label: "notification.snooze.1_day",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 24 * 60 * 60 * 1000);
@@ -67,7 +68,7 @@ export const NOTIFICATION_SNOOZE_OPTIONS = [
   },
   {
     key: "3_days",
-    label: "3 days",
+    i18n_label: "notification.snooze.3_days",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 3 * 24 * 60 * 60 * 1000);
@@ -75,7 +76,7 @@ export const NOTIFICATION_SNOOZE_OPTIONS = [
   },
   {
     key: "5_days",
-    label: "5 days",
+    i18n_label: "notification.snooze.5_days",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 5 * 24 * 60 * 60 * 1000);
@@ -83,7 +84,7 @@ export const NOTIFICATION_SNOOZE_OPTIONS = [
   },
   {
     key: "1_week",
-    label: "1 week",
+    i18n_label: "notification.snooze.1_week",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 7 * 24 * 60 * 60 * 1000);
@@ -91,7 +92,7 @@ export const NOTIFICATION_SNOOZE_OPTIONS = [
   },
   {
     key: "2_weeks",
-    label: "2 weeks",
+    i18n_label: "notification.snooze.2_weeks",
     value: () => {
       const date = new Date();
       return new Date(date.getTime() + 14 * 24 * 60 * 60 * 1000);
@@ -99,7 +100,7 @@ export const NOTIFICATION_SNOOZE_OPTIONS = [
   },
   {
     key: "custom",
-    label: "Custom",
+    i18n_label: "notification.snooze.custom",
     value: undefined,
   },
 ];
diff --git a/packages/constants/src/page.ts b/packages/constants/src/page.ts
new file mode 100644
index 000000000..182cff40e
--- /dev/null
+++ b/packages/constants/src/page.ts
@@ -0,0 +1,14 @@
+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/web/core/constants/profile.ts b/packages/constants/src/profile.ts
similarity index 67%
rename from web/core/constants/profile.ts
rename to packages/constants/src/profile.ts
index 479cb825b..f7765a0cf 100644
--- a/web/core/constants/profile.ts
+++ b/packages/constants/src/profile.ts
@@ -1,78 +1,73 @@
-import React from "react";
-// icons
-import { Activity, Bell, CircleUser, KeyRound, LucideProps, Settings2 } from "lucide-react";
-
 export const PROFILE_ACTION_LINKS: {
   key: string;
-  label: string;
+  i18n_label: string;
   href: string;
   highlight: (pathname: string) => boolean;
-  Icon: React.FC<LucideProps>;
 }[] = [
   {
     key: "profile",
-    label: "Profile",
+    i18n_label: "profile.actions.profile",
     href: `/profile`,
     highlight: (pathname: string) => pathname === "/profile/",
-    Icon: CircleUser,
   },
   {
     key: "security",
-    label: "Security",
+    i18n_label: "profile.actions.security",
     href: `/profile/security`,
     highlight: (pathname: string) => pathname === "/profile/security/",
-    Icon: KeyRound,
   },
   {
     key: "activity",
-    label: "Activity",
+    i18n_label: "profile.actions.activity",
     href: `/profile/activity`,
     highlight: (pathname: string) => pathname === "/profile/activity/",
-    Icon: Activity,
   },
   {
     key: "appearance",
-    label: "Appearance",
+    i18n_label: "profile.actions.appearance",
     href: `/profile/appearance`,
     highlight: (pathname: string) => pathname.includes("/profile/appearance"),
-    Icon: Settings2,
   },
   {
     key: "notifications",
-    label: "Notifications",
+    i18n_label: "profile.actions.notifications",
     href: `/profile/notifications`,
     highlight: (pathname: string) => pathname === "/profile/notifications/",
-    Icon: Bell,
   },
 ];
 
 export const PROFILE_VIEWER_TAB = [
   {
+    key: "summary",
     route: "",
-    label: "Summary",
+    i18n_label: "profile.tabs.summary",
     selected: "/",
   },
 ];
 
 export const PROFILE_ADMINS_TAB = [
   {
+    key: "assigned",
     route: "assigned",
-    label: "Assigned",
+    i18n_label: "profile.tabs.assigned",
     selected: "/assigned/",
   },
   {
+    key: "created",
     route: "created",
-    label: "Created",
+    i18n_label: "profile.tabs.created",
     selected: "/created/",
   },
   {
+    key: "subscribed",
     route: "subscribed",
-    label: "Subscribed",
+    i18n_label: "profile.tabs.subscribed",
     selected: "/subscribed/",
   },
   {
+    key: "activity",
     route: "activity",
-    label: "Activity",
+    i18n_label: "profile.tabs.activity",
     selected: "/activity/",
   },
 ];
diff --git a/web/core/constants/project.ts b/packages/constants/src/project.ts
similarity index 61%
rename from web/core/constants/project.ts
rename to packages/constants/src/project.ts
index e984cb968..a4d68295f 100644
--- a/web/core/constants/project.ts
+++ b/packages/constants/src/project.ts
@@ -1,41 +1,65 @@
 // icons
-import { Globe2, Lock, LucideIcon } from "lucide-react";
-import { TProjectAppliedDisplayFilterKeys, TProjectOrderByOptions } from "@plane/types";
+import {
+  TProjectAppliedDisplayFilterKeys,
+  TProjectOrderByOptions,
+} from "@plane/types";
 
-export const NETWORK_CHOICES: {
+export type TNetworkChoiceIconKey = "Lock" | "Globe2";
+
+export type TNetworkChoice = {
   key: 0 | 2;
-  label: string;
+  labelKey: string;
+  i18n_label: string;
   description: string;
-  icon: LucideIcon;
-}[] = [
+  iconKey: TNetworkChoiceIconKey;
+};
+
+export const NETWORK_CHOICES: TNetworkChoice[] = [
   {
     key: 0,
-    label: "Private",
-    description: "Accessible only by invite",
-    icon: Lock,
+    labelKey: "Private",
+    i18n_label: "workspace_projects.network.private.title",
+    description: "workspace_projects.network.private.description", //"Accessible only by invite",
+    iconKey: "Lock",
   },
   {
     key: 2,
-    label: "Public",
-    description: "Anyone in the workspace except Guests can join",
-    icon: Globe2,
+    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: "Backlog",
-  unstarted: "Unstarted",
-  started: "Started",
-  completed: "Completed",
-  cancelled: "Cancelled",
+  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 = [
-  { label: "1 month", value: 1 },
-  { label: "3 months", value: 3 },
-  { label: "6 months", value: 6 },
-  { label: "9 months", value: 9 },
-  { label: "12 months", value: 12 },
+  { i18n_label: "common.months_count", value: 1 },
+  { i18n_label: "common.months_count", value: 3 },
+  { i18n_label: "common.months_count", value: 6 },
+  { i18n_label: "common.months_count", value: 9 },
+  { i18n_label: "common.months_count", value: 12 },
 ];
 
 export const PROJECT_UNSPLASH_COVERS = [
@@ -59,55 +83,55 @@ export const PROJECT_UNSPLASH_COVERS = [
 
 export const PROJECT_ORDER_BY_OPTIONS: {
   key: TProjectOrderByOptions;
-  label: string;
+  i18n_label: string;
 }[] = [
   {
     key: "sort_order",
-    label: "Manual",
+    i18n_label: "workspace_projects.sort.manual",
   },
   {
     key: "name",
-    label: "Name",
+    i18n_label: "workspace_projects.sort.name",
   },
   {
     key: "created_at",
-    label: "Created date",
+    i18n_label: "workspace_projects.sort.created_at",
   },
   {
     key: "members_length",
-    label: "Number of members",
+    i18n_label: "workspace_projects.sort.members_length",
   },
 ];
 
 export const PROJECT_DISPLAY_FILTER_OPTIONS: {
   key: TProjectAppliedDisplayFilterKeys;
-  label: string;
+  i18n_label: string;
 }[] = [
   {
     key: "my_projects",
-    label: "My projects",
+    i18n_label: "workspace_projects.scope.my_projects",
   },
   {
     key: "archived_projects",
-    label: "Archived",
+    i18n_label: "workspace_projects.scope.archived_projects",
   },
 ];
 
 export const PROJECT_ERROR_MESSAGES = {
   permissionError: {
-    title: "You don't have permission to perform this action.",
-    message: undefined,
+    i18n_title: "workspace_projects.error.permission",
+    i18n_message: undefined,
   },
   cycleDeleteError: {
-    title: "Error",
-    message: "Failed to delete cycle",
+    i18n_title: "error",
+    i18n_message: "workspace_projects.error.cycle_delete",
   },
   moduleDeleteError: {
-    title: "Error",
-    message: "Failed to delete module",
+    i18n_title: "error",
+    i18n_message: "workspace_projects.error.module_delete",
   },
   issueDeleteError: {
-    title: "Error",
-    message: "Failed to delete issue",
+    i18n_title: "error",
+    i18n_message: "workspace_projects.error.issue_delete",
   },
 };
diff --git a/packages/constants/src/spreadsheet.ts b/packages/constants/src/spreadsheet.ts
new file mode 100644
index 000000000..57723e449
--- /dev/null
+++ b/packages/constants/src/spreadsheet.ts
@@ -0,0 +1 @@
+export const SPREADSHEET_SELECT_GROUP = "spreadsheet-issues";
diff --git a/web/core/constants/state.ts b/packages/constants/src/state.ts
similarity index 60%
rename from web/core/constants/state.ts
rename to packages/constants/src/state.ts
index 24d10cf56..9f5db17c7 100644
--- a/web/core/constants/state.ts
+++ b/packages/constants/src/state.ts
@@ -1,4 +1,9 @@
-import { TStateGroups } from "@plane/types";
+export type TStateGroups =
+  | "backlog"
+  | "unstarted"
+  | "started"
+  | "completed"
+  | "cancelled";
 
 export type TDraggableData = {
   groupKey: TStateGroups;
@@ -39,7 +44,10 @@ export const STATE_GROUPS: {
   },
 };
 
-export const ARCHIVABLE_STATE_GROUPS = [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key];
+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,
@@ -48,4 +56,27 @@ export const PENDING_STATE_GROUPS = [
   STATE_GROUPS.cancelled.key,
 ];
 
+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 000000000..6bf6fd20b
--- /dev/null
+++ b/packages/constants/src/stickies.ts
@@ -0,0 +1 @@
+export const STICKIES_PER_PAGE = 30;
diff --git a/packages/constants/src/swr.ts b/packages/constants/src/swr.ts
new file mode 100644
index 000000000..e981dd1d0
--- /dev/null
+++ b/packages/constants/src/swr.ts
@@ -0,0 +1,16 @@
+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/web/core/constants/tab-indices.ts b/packages/constants/src/tab-indices.ts
similarity index 84%
rename from web/core/constants/tab-indices.ts
rename to packages/constants/src/tab-indices.ts
index 58a12f417..0382b67f3 100644
--- a/web/core/constants/tab-indices.ts
+++ b/packages/constants/src/tab-indices.ts
@@ -2,7 +2,6 @@ export const ISSUE_FORM_TAB_INDICES = [
   "name",
   "description_html",
   "feeling_lucky",
-  "ai_assistant",
   "state_id",
   "priority",
   "assignee_ids",
@@ -54,7 +53,14 @@ export const PROJECT_CREATE_TAB_INDICES = [
   "logo_props",
 ];
 
-export const PROJECT_CYCLE_TAB_INDICES = ["name", "description", "date_range", "cancel", "submit", "project_id"];
+export const PROJECT_CYCLE_TAB_INDICES = [
+  "name",
+  "description",
+  "date_range",
+  "cancel",
+  "submit",
+  "project_id",
+];
 
 export const PROJECT_MODULE_TAB_INDICES = [
   "name",
@@ -67,9 +73,21 @@ export const PROJECT_MODULE_TAB_INDICES = [
   "submit",
 ];
 
-export const PROJECT_VIEW_TAB_INDICES = ["name", "description", "filters", "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 const PROJECT_PAGE_TAB_INDICES = [
+  "name",
+  "public",
+  "private",
+  "cancel",
+  "submit",
+];
 
 export enum ETabIndices {
   ISSUE_FORM = "issue-form",
diff --git a/web/core/constants/themes.ts b/packages/constants/src/themes.ts
similarity index 69%
rename from web/core/constants/themes.ts
rename to packages/constants/src/themes.ts
index c221a631e..84e8c0d0b 100644
--- a/web/core/constants/themes.ts
+++ b/packages/constants/src/themes.ts
@@ -1,8 +1,15 @@
-export const THEMES = ["light", "dark", "light-contrast", "dark-contrast", "custom"];
+export const THEMES = [
+  "light",
+  "dark",
+  "light-contrast",
+  "dark-contrast",
+  "custom",
+];
 
 export interface I_THEME_OPTION {
+  key: string;
   value: string;
-  label: string;
+  i18n_label: string;
   type: string;
   icon: {
     border: string;
@@ -13,8 +20,9 @@ export interface I_THEME_OPTION {
 
 export const THEME_OPTIONS: I_THEME_OPTION[] = [
   {
+    key: "system_preference",
     value: "system",
-    label: "System preference",
+    i18n_label: "System preference",
     type: "light",
     icon: {
       border: "#DEE2E6",
@@ -23,8 +31,9 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
     },
   },
   {
+    key: "light",
     value: "light",
-    label: "Light",
+    i18n_label: "Light",
     type: "light",
     icon: {
       border: "#DEE2E6",
@@ -33,8 +42,9 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
     },
   },
   {
+    key: "dark",
     value: "dark",
-    label: "Dark",
+    i18n_label: "Dark",
     type: "dark",
     icon: {
       border: "#2E3234",
@@ -43,8 +53,9 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
     },
   },
   {
+    key: "light_contrast",
     value: "light-contrast",
-    label: "Light high contrast",
+    i18n_label: "Light high contrast",
     type: "light",
     icon: {
       border: "#000000",
@@ -53,8 +64,9 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
     },
   },
   {
+    key: "dark_contrast",
     value: "dark-contrast",
-    label: "Dark high contrast",
+    i18n_label: "Dark high contrast",
     type: "dark",
     icon: {
       border: "#FFFFFF",
@@ -63,8 +75,9 @@ export const THEME_OPTIONS: I_THEME_OPTION[] = [
     },
   },
   {
+    key: "custom",
     value: "custom",
-    label: "Custom theme",
+    i18n_label: "Custom theme",
     type: "light",
     icon: {
       border: "#FFC9C9",
diff --git a/web/ce/constants/user-permissions/index.ts b/packages/constants/src/user.ts
similarity index 51%
rename from web/ce/constants/user-permissions/index.ts
rename to packages/constants/src/user.ts
index e37a2aae9..996756949 100644
--- a/web/ce/constants/user-permissions/index.ts
+++ b/packages/constants/src/user.ts
@@ -1,7 +1,42 @@
+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 enum EUserWorkspaceRoles {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}
+
+export enum EUserProjectRoles {
+  ADMIN = 20,
+  MEMBER = 15,
+  GUEST = 5,
+}
+
 export type TUserPermissionsLevel = EUserPermissionsLevel;
 
 export enum EUserPermissions {
@@ -29,7 +64,11 @@ export type TUserAllowedPermissions = {
 export const USER_ALLOWED_PERMISSIONS: TUserAllowedPermissions = {
   workspace: {
     dashboard: {
-      read: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+      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 000000000..8ac837de8
--- /dev/null
+++ b/packages/constants/src/views.ts
@@ -0,0 +1,23 @@
+export enum EViewAccess {
+  PRIVATE,
+  PUBLIC,
+}
+
+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/web/core/constants/workspace-drafts.ts b/packages/constants/src/workspace-drafts.ts
similarity index 100%
rename from web/core/constants/workspace-drafts.ts
rename to packages/constants/src/workspace-drafts.ts
diff --git a/packages/constants/src/workspace.ts b/packages/constants/src/workspace.ts
index c17b5432e..d1389759c 100644
--- a/packages/constants/src/workspace.ts
+++ b/packages/constants/src/workspace.ts
@@ -1,5 +1,8 @@
+import { TStaticViewTypes } from "@plane/types";
+import { EUserWorkspaceRoles } from "./user";
+
 export const ORGANIZATION_SIZE = [
-  "Just myself",
+  "Just myself", // TODO: translate
   "2-10",
   "11-50",
   "51-200",
@@ -74,3 +77,250 @@ export const RESTRICTED_URLS = [
   "instances",
   "instance",
 ];
+
+export const WORKSPACE_SETTINGS = {
+  general: {
+    key: "general",
+    i18n_label: "workspace_settings.settings.general.title",
+    href: `/settings`,
+    access: [EUserWorkspaceRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
+  },
+  members: {
+    key: "members",
+    i18n_label: "workspace_settings.settings.members.title",
+    href: `/settings/members`,
+    access: [EUserWorkspaceRoles.ADMIN],
+    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],
+    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/`,
+  },
+  "api-tokens": {
+    key: "api-tokens",
+    i18n_label: "workspace_settings.settings.api_tokens.title",
+    href: `/settings/api-tokens`,
+    access: [EUserWorkspaceRoles.ADMIN],
+    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens/`,
+  },
+};
+
+export const WORKSPACE_SETTINGS_LINKS: {
+  key: string;
+  i18n_label: string;
+  href: string;
+  access: EUserWorkspaceRoles[];
+  highlight: (pathname: string, baseUrl: string) => boolean;
+}[] = [
+  WORKSPACE_SETTINGS["general"],
+  WORKSPACE_SETTINGS["members"],
+  WORKSPACE_SETTINGS["billing-and-plans"],
+  WORKSPACE_SETTINGS["export"],
+  WORKSPACE_SETTINGS["webhooks"],
+  WORKSPACE_SETTINGS["api-tokens"],
+];
+
+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[];
+}
+
+export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
+  "your-work": {
+    key: "your_work",
+    labelTranslationKey: "your_work",
+    href: `/profile/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  views: {
+    key: "views",
+    labelTranslationKey: "views",
+    href: `/workspace-views/all-issues/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+  analytics: {
+    key: "analytics",
+    labelTranslationKey: "analytics",
+    href: `/analytics/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  drafts: {
+    key: "drafts",
+    labelTranslationKey: "drafts",
+    href: `/drafts/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+  archives: {
+    key: "archives",
+    labelTranslationKey: "archives",
+    href: `/projects/archives/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+  },
+};
+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["your-work"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["drafts"],
+  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],
+  },
+  inbox: {
+    key: "inbox",
+    labelTranslationKey: "notification.label",
+    href: `/notifications/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+  projects: {
+    key: "projects",
+    labelTranslationKey: "projects",
+    href: `/projects/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+  },
+};
+
+export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["inbox"],
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
+];
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 8f7295a0e..a82e2727c 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -12,14 +12,12 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.mts",
-      "import": "./dist/index.mjs",
-      "module": "./dist/index.mjs"
+      "import": "./dist/index.mjs"
     },
     "./lib": {
       "require": "./dist/lib.js",
       "types": "./dist/lib.d.mts",
-      "import": "./dist/lib.mjs",
-      "module": "./dist/lib.mjs"
+      "import": "./dist/lib.mjs"
     }
   },
   "scripts": {
@@ -36,53 +34,52 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
-    "@hocuspocus/provider": "^2.13.5",
+    "@hocuspocus/provider": "^2.15.0",
+    "@plane/types": "*",
     "@plane/ui": "*",
     "@plane/utils": "*",
-    "@tiptap/core": "^2.1.13",
-    "@tiptap/extension-blockquote": "^2.1.13",
-    "@tiptap/extension-character-count": "^2.6.5",
-    "@tiptap/extension-collaboration": "^2.3.2",
-    "@tiptap/extension-image": "^2.1.13",
-    "@tiptap/extension-list-item": "^2.1.13",
-    "@tiptap/extension-mention": "^2.1.13",
-    "@tiptap/extension-placeholder": "^2.3.0",
-    "@tiptap/extension-task-item": "^2.1.13",
-    "@tiptap/extension-task-list": "^2.1.13",
-    "@tiptap/extension-text-align": "^2.8.0",
-    "@tiptap/extension-text-style": "^2.7.1",
-    "@tiptap/extension-underline": "^2.1.13",
-    "@tiptap/pm": "^2.1.13",
-    "@tiptap/react": "^2.1.13",
-    "@tiptap/starter-kit": "^2.1.13",
-    "@tiptap/suggestion": "^2.0.13",
+    "@tiptap/core": "2.10.4",
+    "@tiptap/extension-blockquote": "2.10.4",
+    "@tiptap/extension-character-count": "2.11.0",
+    "@tiptap/extension-collaboration": "2.11.0",
+    "@tiptap/extension-image": "2.11.0",
+    "@tiptap/extension-list-item": "2.11.0",
+    "@tiptap/extension-mention": "2.11.0",
+    "@tiptap/extension-placeholder": "2.11.0",
+    "@tiptap/extension-task-item": "2.11.0",
+    "@tiptap/extension-task-list": "2.11.0",
+    "@tiptap/extension-text-align": "2.11.0",
+    "@tiptap/extension-text-style": "2.11.0",
+    "@tiptap/extension-underline": "2.11.0",
+    "@tiptap/html": "2.11.0",
+    "@tiptap/pm": "2.11.0",
+    "@tiptap/react": "2.11.0",
+    "@tiptap/starter-kit": "2.11.0",
+    "@tiptap/suggestion": "2.11.0",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^1.2.1",
     "highlight.js": "^11.8.0",
     "jsx-dom-cjs": "^8.0.3",
     "linkifyjs": "^4.1.3",
     "lowlight": "^3.0.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.469.0",
     "prosemirror-codemark": "^0.4.2",
     "prosemirror-utils": "^1.2.2",
-    "react-moveable": "^0.54.2",
-    "tailwind-merge": "^1.14.0",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.9",
+    "tiptap-markdown": "^0.8.10",
     "uuid": "^10.0.0",
     "y-indexeddb": "^9.0.12",
-    "y-prosemirror": "^1.2.5",
+    "y-prosemirror": "^1.2.15",
     "y-protocols": "^1.0.6",
-    "yjs": "^13.6.15"
+    "yjs": "^13.6.20"
   },
   "devDependencies": {
     "@plane/eslint-config": "*",
+    "@plane/tailwind-config": "*",
     "@plane/typescript-config": "*",
     "@types/node": "18.15.3",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.18",
     "postcss": "^8.4.38",
-    "tailwind-config-custom": "*",
     "tsup": "^7.2.0",
     "typescript": "5.3.3"
   },
diff --git a/packages/editor/src/ce/extensions/document-extensions.tsx b/packages/editor/src/ce/extensions/document-extensions.tsx
index 35d7c0f3d..445f5e0f8 100644
--- a/packages/editor/src/ce/extensions/document-extensions.tsx
+++ b/packages/editor/src/ce/extensions/document-extensions.tsx
@@ -1,5 +1,6 @@
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { Extensions } from "@tiptap/core";
+import { AnyExtension } from "@tiptap/core";
 import { SlashCommands } from "@/extensions";
 // plane editor types
 import { TIssueEmbedConfig } from "@/plane-editor/types";
@@ -13,15 +14,24 @@ type Props = {
   userDetails: TUserDetails;
 };
 
-export const DocumentEditorAdditionalExtensions = (_props: Props) => {
-  const { disabledExtensions } = _props;
-  const extensions: Extensions = disabledExtensions?.includes("slash-commands")
-    ? []
-    : [
-        SlashCommands({
-          disabledExtensions,
-        }),
-      ];
-
-  return extensions;
+type ExtensionConfig = {
+  isEnabled: (disabledExtensions: TExtensions[]) => boolean;
+  getExtension: (props: Props) => AnyExtension;
+};
+
+const extensionRegistry: ExtensionConfig[] = [
+  {
+    isEnabled: (disabledExtensions) => !disabledExtensions.includes("slash-commands"),
+    getExtension: () => SlashCommands({}),
+  },
+];
+
+export const DocumentEditorAdditionalExtensions = (_props: Props) => {
+  const { disabledExtensions = [] } = _props;
+
+  const documentExtensions = extensionRegistry
+    .filter((config) => config.isEnabled(disabledExtensions))
+    .map((config) => config.getExtension(_props));
+
+  return documentExtensions;
 };
diff --git a/packages/editor/src/ce/extensions/slash-commands.tsx b/packages/editor/src/ce/extensions/slash-commands.tsx
index 6eabee082..faefa7452 100644
--- a/packages/editor/src/ce/extensions/slash-commands.tsx
+++ b/packages/editor/src/ce/extensions/slash-commands.tsx
@@ -4,7 +4,7 @@ import { TSlashCommandAdditionalOption } from "@/extensions";
 import { TExtensions } from "@/types";
 
 type Props = {
-  disabledExtensions: TExtensions[];
+  disabledExtensions?: TExtensions[];
 };
 
 export const coreEditorAdditionalSlashCommandOptions = (props: Props): TSlashCommandAdditionalOption[] => {
diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
index cd7d6f354..751c79101 100644
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@@ -1,3 +1,4 @@
+import { Extensions } from "@tiptap/core";
 import React from "react";
 // components
 import { DocumentContentLoader, PageRenderer } from "@/components/editors";
@@ -16,9 +17,11 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   const {
     onTransaction,
     aiHandler,
+    bubbleMenuEnabled = true,
     containerClassName,
     disabledExtensions,
     displayConfig = DEFAULT_DISPLAY_CONFIG,
+    editable,
     editorClassName = "",
     embedHandler,
     fileHandler,
@@ -33,7 +36,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     user,
   } = props;
 
-  const extensions = [];
+  const extensions: Extensions = [];
   if (embedHandler?.issue) {
     extensions.push(
       IssueWidget({
@@ -44,8 +47,8 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
 
   // use document editor
   const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
-    onTransaction,
     disabledExtensions,
+    editable,
     editorClassName,
     embedHandler,
     extensions,
@@ -54,6 +57,7 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
     handleEditorReady,
     id,
     mentionHandler,
+    onTransaction,
     placeholder,
     realtimeConfig,
     serverHandler,
@@ -73,8 +77,9 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
 
   return (
     <PageRenderer
-      displayConfig={displayConfig}
       aiHandler={aiHandler}
+      bubbleMenuEnabled={bubbleMenuEnabled}
+      displayConfig={displayConfig}
       editor={editor}
       editorContainerClassName={editorContainerClassNames}
       id={id}
diff --git a/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx
deleted file mode 100644
index 89acace7b..000000000
--- a/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { forwardRef, MutableRefObject } from "react";
-// components
-import { DocumentContentLoader, PageRenderer } from "@/components/editors";
-// constants
-import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// extensions
-import { IssueWidget } from "@/extensions";
-// helpers
-import { getEditorClassNames } from "@/helpers/common";
-// hooks
-import { useReadOnlyCollaborativeEditor } from "@/hooks/use-read-only-collaborative-editor";
-// types
-import { EditorReadOnlyRefApi, ICollaborativeDocumentReadOnlyEditor } from "@/types";
-
-const CollaborativeDocumentReadOnlyEditor = (props: ICollaborativeDocumentReadOnlyEditor) => {
-  const {
-    containerClassName,
-    disabledExtensions,
-    displayConfig = DEFAULT_DISPLAY_CONFIG,
-    editorClassName = "",
-    embedHandler,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    realtimeConfig,
-    serverHandler,
-    user,
-  } = props;
-  const extensions = [];
-  if (embedHandler?.issue) {
-    extensions.push(
-      IssueWidget({
-        widgetCallback: embedHandler.issue.widgetCallback,
-      })
-    );
-  }
-
-  const { editor, hasServerConnectionFailed, hasServerSynced } = useReadOnlyCollaborativeEditor({
-    disabledExtensions,
-    editorClassName,
-    extensions,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    realtimeConfig,
-    serverHandler,
-    user,
-  });
-
-  const editorContainerClassName = getEditorClassNames({
-    containerClassName,
-  });
-
-  if (!editor) return null;
-
-  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
-
-  return (
-    <PageRenderer
-      displayConfig={displayConfig}
-      id={id}
-      editor={editor}
-      editorContainerClassName={editorContainerClassName}
-    />
-  );
-};
-
-const CollaborativeDocumentReadOnlyEditorWithRef = forwardRef<
-  EditorReadOnlyRefApi,
-  ICollaborativeDocumentReadOnlyEditor
->((props, ref) => (
-  <CollaborativeDocumentReadOnlyEditor {...props} forwardedRef={ref as MutableRefObject<EditorReadOnlyRefApi | null>} />
-));
-
-CollaborativeDocumentReadOnlyEditorWithRef.displayName = "CollaborativeDocumentReadOnlyEditorWithRef";
-
-export { CollaborativeDocumentReadOnlyEditorWithRef };
diff --git a/packages/editor/src/core/components/editors/document/index.ts b/packages/editor/src/core/components/editors/document/index.ts
index 514b620e3..571cb7e9a 100644
--- a/packages/editor/src/core/components/editors/document/index.ts
+++ b/packages/editor/src/core/components/editors/document/index.ts
@@ -1,5 +1,4 @@
 export * from "./collaborative-editor";
-export * from "./collaborative-read-only-editor";
 export * from "./loader";
 export * from "./page-renderer";
 export * from "./read-only-editor";
diff --git a/packages/editor/src/core/components/editors/document/page-renderer.tsx b/packages/editor/src/core/components/editors/document/page-renderer.tsx
index d1ff3b3d0..a29768656 100644
--- a/packages/editor/src/core/components/editors/document/page-renderer.tsx
+++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@@ -15,12 +15,13 @@ import { Editor, ReactRenderer } from "@tiptap/react";
 // components
 import { EditorContainer, EditorContentWrapper } from "@/components/editors";
 import { LinkView, LinkViewProps } from "@/components/links";
-import { AIFeaturesMenu, BlockMenu } from "@/components/menus";
+import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus";
 // types
 import { TAIHandler, TDisplayConfig } from "@/types";
 
 type IPageRenderer = {
   aiHandler?: TAIHandler;
+  bubbleMenuEnabled: boolean;
   displayConfig: TDisplayConfig;
   editor: Editor;
   editorContainerClassName: string;
@@ -29,7 +30,7 @@ type IPageRenderer = {
 };
 
 export const PageRenderer = (props: IPageRenderer) => {
-  const { aiHandler, displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
+  const { aiHandler, bubbleMenuEnabled, displayConfig, editor, editorContainerClassName, id, tabIndex } = props;
   // states
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
@@ -140,10 +141,11 @@ export const PageRenderer = (props: IPageRenderer) => {
         >
           <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
           {editor.isEditable && (
-            <>
+            <div>
+              {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
               <BlockMenu editor={editor} />
               <AIFeaturesMenu menu={aiHandler?.menu} />
-            </>
+            </div>
           )}
         </EditorContainer>
       </div>
diff --git a/packages/editor/src/core/components/editors/document/read-only-editor.tsx b/packages/editor/src/core/components/editors/document/read-only-editor.tsx
index b36fb44a7..fa1770f0c 100644
--- a/packages/editor/src/core/components/editors/document/read-only-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/read-only-editor.tsx
@@ -1,3 +1,4 @@
+import { Extensions } from "@tiptap/core";
 import { forwardRef, MutableRefObject } from "react";
 // components
 import { PageRenderer } from "@/components/editors";
@@ -10,7 +11,13 @@ import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
 // types
-import { EditorReadOnlyRefApi, IMentionHighlight, TDisplayConfig, TExtensions, TFileHandler } from "@/types";
+import {
+  EditorReadOnlyRefApi,
+  TDisplayConfig,
+  TExtensions,
+  TReadOnlyFileHandler,
+  TReadOnlyMentionHandler,
+} from "@/types";
 
 interface IDocumentReadOnlyEditor {
   disabledExtensions: TExtensions[];
@@ -20,12 +27,10 @@ interface IDocumentReadOnlyEditor {
   displayConfig?: TDisplayConfig;
   editorClassName?: string;
   embedHandler: any;
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   tabIndex?: number;
   handleEditorReady?: (value: boolean) => void;
-  mentionHandler: {
-    highlights: () => Promise<IMentionHighlight[]>;
-  };
+  mentionHandler: TReadOnlyMentionHandler;
   forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
 }
 
@@ -43,7 +48,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
     initialValue,
     mentionHandler,
   } = props;
-  const extensions = [];
+  const extensions: Extensions = [];
   if (embedHandler?.issue) {
     extensions.push(
       IssueWidget({
@@ -71,6 +76,7 @@ const DocumentReadOnlyEditor = (props: IDocumentReadOnlyEditor) => {
 
   return (
     <PageRenderer
+      bubbleMenuEnabled={false}
       displayConfig={displayConfig}
       editor={editor}
       editorContainerClassName={editorContainerClassName}
diff --git a/packages/editor/src/core/components/editors/editor-container.tsx b/packages/editor/src/core/components/editors/editor-container.tsx
index e070d7e45..d6563f7b0 100644
--- a/packages/editor/src/core/components/editors/editor-container.tsx
+++ b/packages/editor/src/core/components/editors/editor-container.tsx
@@ -1,9 +1,9 @@
 import { FC, ReactNode } from "react";
 import { Editor } from "@tiptap/react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TDisplayConfig } from "@/types";
 
diff --git a/packages/editor/src/core/components/editors/editor-wrapper.tsx b/packages/editor/src/core/components/editors/editor-wrapper.tsx
index 075420ed7..9d1297e23 100644
--- a/packages/editor/src/core/components/editors/editor-wrapper.tsx
+++ b/packages/editor/src/core/components/editors/editor-wrapper.tsx
@@ -1,4 +1,4 @@
-import { Editor, Extension } from "@tiptap/core";
+import { Editor, Extensions } from "@tiptap/core";
 // components
 import { EditorContainer } from "@/components/editors";
 // constants
@@ -12,7 +12,7 @@ import { EditorContentWrapper } from "./editor-content";
 
 type Props = IEditorProps & {
   children?: (editor: Editor) => React.ReactNode;
-  extensions: Extension<any, any>[];
+  extensions: Extensions;
 };
 
 export const EditorWrapper: React.FC<Props> = (props) => {
@@ -38,6 +38,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
   } = props;
 
   const editor = useEditor({
+    editable: true,
     disabledExtensions,
     editorClassName,
     enableHistory: true,
diff --git a/packages/editor/src/core/components/menus/ai-menu.tsx b/packages/editor/src/core/components/menus/ai-menu.tsx
index 43793fae3..968c7d469 100644
--- a/packages/editor/src/core/components/menus/ai-menu.tsx
+++ b/packages/editor/src/core/components/menus/ai-menu.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import tippy, { Instance } from "tippy.js";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { TAIHandler } from "@/types";
 
@@ -23,6 +23,7 @@ export const AIFeaturesMenu: React.FC<Props> = (props) => {
     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,
diff --git a/packages/editor/src/core/components/menus/block-menu.tsx b/packages/editor/src/core/components/menus/block-menu.tsx
index 77d5ce81e..c143abd00 100644
--- a/packages/editor/src/core/components/menus/block-menu.tsx
+++ b/packages/editor/src/core/components/menus/block-menu.tsx
@@ -34,6 +34,7 @@ export const BlockMenu = (props: BlockMenuProps) => {
       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,
diff --git a/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
index e3ccc6cf6..b168525a7 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx
@@ -1,20 +1,20 @@
 import { Editor } from "@tiptap/core";
 import { AlignCenter, AlignLeft, AlignRight, LucideIcon } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { TextAlignItem } from "@/components/menus";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TEditorCommands } from "@/types";
+import { EditorStateType } from "./root";
 
 type Props = {
   editor: Editor;
-  onClose: () => void;
+  editorState: EditorStateType;
 };
 
 export const TextAlignmentSelector: React.FC<Props> = (props) => {
-  const { editor, onClose } = props;
-
+  const { editor, editorState } = props;
   const menuItem = TextAlignItem(editor);
 
   const textAlignmentOptions: {
@@ -32,10 +32,7 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
         menuItem.command({
           alignment: "left",
         }),
-      isActive: () =>
-        menuItem.isActive({
-          alignment: "left",
-        }),
+      isActive: () => editorState.left,
     },
     {
       itemKey: "text-align",
@@ -45,10 +42,7 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
         menuItem.command({
           alignment: "center",
         }),
-      isActive: () =>
-        menuItem.isActive({
-          alignment: "center",
-        }),
+      isActive: () => editorState.center,
     },
     {
       itemKey: "text-align",
@@ -58,10 +52,7 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
         menuItem.command({
           alignment: "right",
         }),
-      isActive: () =>
-        menuItem.isActive({
-          alignment: "right",
-        }),
+      isActive: () => editorState.right,
     },
   ];
 
@@ -74,7 +65,6 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
           onClick={(e) => {
             e.stopPropagation();
             item.command();
-            onClose();
           }}
           className={cn(
             "size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
diff --git a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
index bc7f5a56f..ced7ea179 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx
@@ -1,23 +1,26 @@
-import { Dispatch, FC, SetStateAction } from "react";
 import { Editor } from "@tiptap/react";
 import { ALargeSmall, Ban } from "lucide-react";
+import { Dispatch, FC, SetStateAction } from "react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
 // helpers
-import { cn } from "@/helpers/common";
 import { BackgroundColorItem, TextColorItem } from "../menu-items";
+import { EditorStateType } from "./root";
 
 type Props = {
   editor: Editor;
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
+  editorState: EditorStateType;
 };
 
 export const BubbleMenuColorSelector: FC<Props> = (props) => {
-  const { editor, isOpen, setIsOpen } = props;
+  const { editor, isOpen, setIsOpen, editorState } = props;
 
-  const activeTextColor = COLORS_LIST.find((c) => TextColorItem(editor).isActive({ color: c.key }));
-  const activeBackgroundColor = COLORS_LIST.find((c) => BackgroundColorItem(editor).isActive({ color: c.key }));
+  const activeTextColor = editorState.color;
+  const activeBackgroundColor = editorState.backgroundColor;
 
   return (
     <div className="relative h-full">
@@ -70,7 +73,7 @@ export const BubbleMenuColorSelector: FC<Props> = (props) => {
               <button
                 type="button"
                 className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
-                onClick={() => TextColorItem(editor).command(undefined)}
+                onClick={() => TextColorItem(editor).command({ color: undefined })}
               >
                 <Ban className="size-4" />
               </button>
@@ -93,7 +96,7 @@ export const BubbleMenuColorSelector: FC<Props> = (props) => {
               <button
                 type="button"
                 className="flex-shrink-0 size-6 grid place-items-center rounded text-custom-text-300 border-[0.5px] border-custom-border-400 hover:bg-custom-background-80 transition-colors"
-                onClick={() => BackgroundColorItem(editor).command(undefined)}
+                onClick={() => BackgroundColorItem(editor).command({ color: undefined })}
               >
                 <Ban className="size-4" />
               </button>
diff --git a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
index eaa20ed26..333edf78a 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx
@@ -1,8 +1,10 @@
-import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react";
 import { Editor } from "@tiptap/core";
-import { Check, Link, Trash } from "lucide-react";
+import { Check, Link, Trash2 } from "lucide-react";
+import { Dispatch, FC, SetStateAction, useCallback, useRef, useState } from "react";
+// plane utils
+import { cn } from "@plane/utils";
 // helpers
-import { cn, isValidHttpUrl } from "@/helpers/common";
+import { isValidHttpUrl } from "@/helpers/common";
 import { setLinkEditor, unsetLinkEditor } from "@/helpers/editor-commands";
 
 type Props = {
@@ -13,22 +15,26 @@ type Props = {
 
 export const BubbleMenuLinkSelector: FC<Props> = (props) => {
   const { editor, isOpen, setIsOpen } = props;
+  // states
+  const [error, setError] = useState(false);
   // refs
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const onLinkSubmit = useCallback(() => {
+  const handleLinkSubmit = useCallback(() => {
     const input = inputRef.current;
-    const url = input?.value;
-    if (url && isValidHttpUrl(url)) {
+    if (!input) return;
+    let url = input.value;
+    if (!url) return;
+    if (!url.startsWith("http")) url = `http://${url}`;
+    if (isValidHttpUrl(url)) {
       setLinkEditor(editor, url);
       setIsOpen(false);
+      setError(false);
+    } else {
+      setError(true);
     }
   }, [editor, inputRef, setIsOpen]);
 
-  useEffect(() => {
-    inputRef.current && inputRef.current?.focus();
-  });
-
   return (
     <div className="relative h-full">
       <button
@@ -45,52 +51,62 @@ export const BubbleMenuLinkSelector: FC<Props> = (props) => {
           e.stopPropagation();
         }}
       >
-        <span>Link</span>
+        Link
         <Link className="flex-shrink-0 size-3" />
       </button>
       {isOpen && (
-        <div
-          className="dow-xl fixed top-full z-[99999] mt-1 flex w-60 overflow-hidden rounded border border-custom-border-300 bg-custom-background-100 animate-in fade-in slide-in-from-top-1"
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              onLinkSubmit();
-            }
-          }}
-        >
-          <input
-            ref={inputRef}
-            type="url"
-            placeholder="Paste a link"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            className="flex-1 border-r border-custom-border-300 bg-custom-background-100 p-1 text-sm outline-none placeholder:text-custom-text-400"
-            defaultValue={editor.getAttributes("link").href || ""}
-          />
-          {editor.getAttributes("link").href ? (
-            <button
-              type="button"
-              className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
-              onClick={(e) => {
-                unsetLinkEditor(editor);
-                setIsOpen(false);
-                e.stopPropagation();
+        <div className="fixed top-full z-[99999] mt-1 w-60 animate-in fade-in slide-in-from-top-1 rounded bg-custom-background-100 shadow-custom-shadow-rg">
+          <div
+            className={cn("flex rounded border border-custom-border-300 transition-colors", {
+              "border-red-500": error,
+            })}
+          >
+            <input
+              ref={inputRef}
+              type="url"
+              placeholder="Enter or paste a link"
+              onClick={(e) => e.stopPropagation()}
+              className="flex-1 border-r border-custom-border-300 bg-custom-background-100 py-2 px-1.5 text-xs outline-none placeholder:text-custom-text-400 rounded"
+              defaultValue={editor.getAttributes("link").href || ""}
+              onKeyDown={(e) => {
+                setError(false);
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  handleLinkSubmit();
+                }
               }}
-            >
-              <Trash className="h-4 w-4" />
-            </button>
-          ) : (
-            <button
-              className="flex items-center rounded-sm p-1 text-custom-text-300 transition-all hover:bg-custom-background-90"
-              type="button"
-              onClick={(e) => {
-                onLinkSubmit();
-                e.stopPropagation();
-              }}
-            >
-              <Check className="h-4 w-4" />
-            </button>
+              onFocus={() => setError(false)}
+              autoFocus
+            />
+            {editor.getAttributes("link").href ? (
+              <button
+                type="button"
+                className="grid place-items-center rounded-sm p-1 text-red-500 hover:bg-red-500/20 transition-all"
+                onClick={(e) => {
+                  unsetLinkEditor(editor);
+                  setIsOpen(false);
+                  e.stopPropagation();
+                }}
+              >
+                <Trash2 className="size-4" />
+              </button>
+            ) : (
+              <button
+                type="button"
+                className="h-full aspect-square grid place-items-center p-1 rounded-sm text-custom-text-300 hover:bg-custom-background-80 transition-all"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleLinkSubmit();
+                }}
+              >
+                <Check className="size-4" />
+              </button>
+            )}
+          </div>
+          {error && (
+            <p className="text-xs text-red-500 my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
+              Please enter a valid URL
+            </p>
           )}
         </div>
       )}
diff --git a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
index a121c48ef..7d1378800 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx
@@ -1,6 +1,8 @@
 import { Dispatch, FC, SetStateAction } from "react";
 import { Editor } from "@tiptap/react";
 import { Check, ChevronDown } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import {
   BulletListItem,
@@ -17,8 +19,6 @@ import {
   HeadingSixItem,
   EditorMenuItem,
 } from "@/components/menus";
-// helpers
-import { cn } from "@/helpers/common";
 // types
 import { TEditorCommands } from "@/types";
 
diff --git a/packages/editor/src/core/components/menus/bubble-menu/root.tsx b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
index 18079f089..149c6f6c2 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/root.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
@@ -1,7 +1,10 @@
-import { FC, useEffect, useState } from "react";
-import { BubbleMenu, BubbleMenuProps, Editor, isNodeSelection } from "@tiptap/react";
+import { BubbleMenu, BubbleMenuProps, Editor, isNodeSelection, useEditorState } from "@tiptap/react";
+import { FC, useEffect, useState, useRef } from "react";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import {
+  BackgroundColorItem,
   BoldItem,
   BubbleMenuColorSelector,
   BubbleMenuLinkSelector,
@@ -9,27 +12,74 @@ import {
   CodeItem,
   ItalicItem,
   StrikeThroughItem,
+  TextAlignItem,
+  TextColorItem,
   UnderLineItem,
 } from "@/components/menus";
+// constants
+import { COLORS_LIST } from "@/constants/common";
 // extensions
 import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection";
-// helpers
-import { cn } from "@/helpers/common";
 // local components
 import { TextAlignmentSelector } from "./alignment-selector";
 
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children">;
 
-export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
-  // states
+export interface EditorStateType {
+  code: boolean;
+  bold: boolean;
+  italic: boolean;
+  underline: boolean;
+  strike: 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;
+}
+
+export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: { editor: Editor }) => {
+  const menuRef = useRef<HTMLDivElement>(null);
   const [isNodeSelectorOpen, setIsNodeSelectorOpen] = useState(false);
   const [isLinkSelectorOpen, setIsLinkSelectorOpen] = useState(false);
   const [isColorSelectorOpen, setIsColorSelectorOpen] = useState(false);
   const [isSelecting, setIsSelecting] = useState(false);
 
-  const basicFormattingOptions = props.editor.isActive("code")
-    ? [CodeItem(props.editor)]
-    : [BoldItem(props.editor), ItalicItem(props.editor), UnderLineItem(props.editor), StrikeThroughItem(props.editor)];
+  const formattingItems = {
+    code: CodeItem(props.editor),
+    bold: BoldItem(props.editor),
+    italic: ItalicItem(props.editor),
+    underline: UnderLineItem(props.editor),
+    strike: StrikeThroughItem(props.editor),
+    textAlign: TextAlignItem(props.editor),
+  };
+
+  const editorState: EditorStateType = useEditorState({
+    editor: props.editor,
+    selector: ({ editor }: { editor: Editor }) => ({
+      code: formattingItems.code.isActive(),
+      bold: formattingItems.bold.isActive(),
+      italic: formattingItems.italic.isActive(),
+      underline: formattingItems.underline.isActive(),
+      strike: formattingItems.strike.isActive(),
+      left: formattingItems.textAlign.isActive({ alignment: "left" }),
+      right: formattingItems.textAlign.isActive({ alignment: "right" }),
+      center: formattingItems.textAlign.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.strike];
 
   const bubbleMenuProps: EditorBubbleMenuProps = {
     ...props,
@@ -51,6 +101,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
     },
     tippyOptions: {
       moveTransition: "transform 0.15s ease-out",
+      duration: [300, 0],
       onHidden: () => {
         setIsNodeSelectorOpen(false);
         setIsLinkSelectorOpen(false);
@@ -60,7 +111,9 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
   };
 
   useEffect(() => {
-    function handleMouseDown() {
+    function handleMouseDown(e: MouseEvent) {
+      if (menuRef.current?.contains(e.target as Node)) return;
+
       function handleMouseMove() {
         if (!props.editor.state.selection.empty) {
           setIsSelecting(true);
@@ -70,7 +123,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
 
       function handleMouseUp() {
         setIsSelecting(false);
-
         document.removeEventListener("mousemove", handleMouseMove);
         document.removeEventListener("mouseup", handleMouseUp);
       }
@@ -84,30 +136,28 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
     return () => {
       document.removeEventListener("mousedown", handleMouseDown);
     };
-  }, []);
+  }, [props.editor]);
 
   return (
-    <BubbleMenu
-      {...bubbleMenuProps}
-      className="flex py-2 divide-x divide-custom-border-200 rounded-lg border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
-    >
+    <BubbleMenu {...bubbleMenuProps}>
       {!isSelecting && (
-        <>
+        <div
+          ref={menuRef}
+          className="flex py-2 divide-x divide-custom-border-200 rounded-lg border border-custom-border-200 bg-custom-background-100 shadow-custom-shadow-rg"
+        >
           <div className="px-2">
-            {!props.editor.isActive("table") && (
-              <BubbleMenuNodeSelector
-                editor={props.editor!}
-                isOpen={isNodeSelectorOpen}
-                setIsOpen={() => {
-                  setIsNodeSelectorOpen((prev) => !prev);
-                  setIsLinkSelectorOpen(false);
-                  setIsColorSelectorOpen(false);
-                }}
-              />
-            )}
+            <BubbleMenuNodeSelector
+              editor={props.editor!}
+              isOpen={isNodeSelectorOpen}
+              setIsOpen={() => {
+                setIsNodeSelectorOpen((prev) => !prev);
+                setIsLinkSelectorOpen(false);
+                setIsColorSelectorOpen(false);
+              }}
+            />
           </div>
-          <div className="px-2">
-            {!props.editor.isActive("code") && (
+          {!editorState.code && (
+            <div className="px-2">
               <BubbleMenuLinkSelector
                 editor={props.editor}
                 isOpen={isLinkSelectorOpen}
@@ -117,21 +167,22 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
                   setIsColorSelectorOpen(false);
                 }}
               />
-            )}
-          </div>
-          <div className="px-2">
-            {!props.editor.isActive("code") && (
+            </div>
+          )}
+          {!editorState.code && (
+            <div className="px-2">
               <BubbleMenuColorSelector
                 editor={props.editor}
                 isOpen={isColorSelectorOpen}
+                editorState={editorState}
                 setIsOpen={() => {
                   setIsColorSelectorOpen((prev) => !prev);
                   setIsNodeSelectorOpen(false);
                   setIsLinkSelectorOpen(false);
                 }}
               />
-            )}
-          </div>
+            </div>
+          )}
           <div className="flex gap-0.5 px-2">
             {basicFormattingOptions.map((item) => (
               <button
@@ -144,7 +195,7 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
                 className={cn(
                   "size-7 grid place-items-center rounded text-custom-text-300 hover:bg-custom-background-80 active:bg-custom-background-80 transition-colors",
                   {
-                    "bg-custom-background-80 text-custom-text-100": item.isActive(""),
+                    "bg-custom-background-80 text-custom-text-100": editorState[item.key],
                   }
                 )}
               >
@@ -152,16 +203,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
               </button>
             ))}
           </div>
-          <TextAlignmentSelector
-            editor={props.editor}
-            onClose={() => {
-              const editor = props.editor as Editor;
-              if (!editor) return;
-              const pos = editor.state.selection.to;
-              editor.commands.setTextSelection(pos ?? 0);
-            }}
-          />
-        </>
+          <TextAlignmentSelector editor={props.editor} editorState={editorState} />
+        </div>
       )}
     </BubbleMenu>
   );
diff --git a/packages/editor/src/core/components/menus/menu-items.ts b/packages/editor/src/core/components/menus/menu-items.ts
index 5e987fca6..8cb4accc5 100644
--- a/packages/editor/src/core/components/menus/menu-items.ts
+++ b/packages/editor/src/core/components/menus/menu-items.ts
@@ -142,8 +142,8 @@ export const UnderLineItem = (editor: Editor): EditorMenuItem<"underline"> => ({
   icon: UnderlineIcon,
 });
 
-export const StrikeThroughItem = (editor: Editor): EditorMenuItem<"strikethrough"> => ({
-  key: "strikethrough",
+export const StrikeThroughItem = (editor: Editor): EditorMenuItem<"strike"> => ({
+  key: "strike",
   name: "Strikethrough",
   isActive: () => editor?.isActive("strike"),
   command: () => toggleStrike(editor),
@@ -202,8 +202,7 @@ export const ImageItem = (editor: Editor): EditorMenuItem<"image"> => ({
   key: "image",
   name: "Image",
   isActive: () => editor?.isActive("image") || editor?.isActive("imageComponent"),
-  command: ({ savedSelection }) =>
-    insertImage({ editor, event: "insert", pos: savedSelection?.from ?? editor.state.selection.from }),
+  command: () => insertImage({ editor, event: "insert", pos: editor.state.selection.from }),
   icon: ImageIcon,
 });
 
@@ -219,24 +218,33 @@ export const HorizontalRuleItem = (editor: Editor) =>
 export const TextColorItem = (editor: Editor): EditorMenuItem<"text-color"> => ({
   key: "text-color",
   name: "Color",
-  isActive: ({ color }) => editor.isActive("customColor", { color }),
-  command: ({ color }) => toggleTextColor(color, editor),
+  isActive: (props) => editor.isActive("customColor", { color: props?.color }),
+  command: (props) => {
+    if (!props) return;
+    toggleTextColor(props.color, editor);
+  },
   icon: Palette,
 });
 
 export const BackgroundColorItem = (editor: Editor): EditorMenuItem<"background-color"> => ({
   key: "background-color",
   name: "Background color",
-  isActive: ({ color }) => editor.isActive("customColor", { backgroundColor: color }),
-  command: ({ color }) => toggleBackgroundColor(color, editor),
+  isActive: (props) => editor.isActive("customColor", { backgroundColor: props?.color }),
+  command: (props) => {
+    if (!props) return;
+    toggleBackgroundColor(props.color, editor);
+  },
   icon: Palette,
 });
 
 export const TextAlignItem = (editor: Editor): EditorMenuItem<"text-align"> => ({
   key: "text-align",
   name: "Text align",
-  isActive: ({ alignment }) => editor.isActive({ textAlign: alignment }),
-  command: ({ alignment }) => setTextAlign(alignment, editor),
+  isActive: (props) => editor.isActive({ textAlign: props?.alignment }),
+  command: (props) => {
+    if (!props) return;
+    setTextAlign(props.alignment, editor);
+  },
   icon: AlignCenter,
 });
 
diff --git a/packages/editor/src/core/constants/common.ts b/packages/editor/src/core/constants/common.ts
index 7f4f7f66f..bae06d303 100644
--- a/packages/editor/src/core/constants/common.ts
+++ b/packages/editor/src/core/constants/common.ts
@@ -1,3 +1,185 @@
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  CaseSensitive,
+  Code2,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Heading6,
+  Image,
+  Italic,
+  List,
+  ListOrdered,
+  ListTodo,
+  LucideIcon,
+  Strikethrough,
+  Table,
+  TextQuote,
+  Underline,
+} from "lucide-react";
+import { TCommandExtraProps, TEditorCommands } from "@/types/editor";
+
+export type TEditorTypes = "lite" | "document";
+
+// 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: LucideIcon;
+  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: CaseSensitive, editors: ["document"] },
+  { itemKey: "h1", renderKey: "h1", name: "Heading 1", icon: Heading1, editors: ["document"] },
+  { itemKey: "h2", renderKey: "h2", name: "Heading 2", icon: Heading2, editors: ["document"] },
+  { itemKey: "h3", renderKey: "h3", name: "Heading 3", icon: Heading3, editors: ["document"] },
+  { itemKey: "h4", renderKey: "h4", name: "Heading 4", icon: Heading4, editors: ["document"] },
+  { itemKey: "h5", renderKey: "h5", name: "Heading 5", icon: Heading5, editors: ["document"] },
+  { itemKey: "h6", renderKey: "h6", name: "Heading 6", icon: Heading6, editors: ["document"] },
+];
+
+export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-left",
+    name: "Left align",
+    icon: AlignLeft,
+    shortcut: ["Cmd", "Shift", "L"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "left",
+    },
+  },
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-center",
+    name: "Center align",
+    icon: AlignCenter,
+    shortcut: ["Cmd", "Shift", "E"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "center",
+    },
+  },
+  {
+    itemKey: "text-align",
+    renderKey: "text-align-right",
+    name: "Right align",
+    icon: AlignRight,
+    shortcut: ["Cmd", "Shift", "R"],
+    editors: ["lite", "document"],
+    extraProps: {
+      alignment: "right",
+    },
+  },
+];
+
+const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strike">[] = [
+  {
+    itemKey: "bold",
+    renderKey: "bold",
+    name: "Bold",
+    icon: Bold,
+    shortcut: ["Cmd", "B"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "italic",
+    renderKey: "italic",
+    name: "Italic",
+    icon: Italic,
+    shortcut: ["Cmd", "I"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "underline",
+    renderKey: "underline",
+    name: "Underline",
+    icon: Underline,
+    shortcut: ["Cmd", "U"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "strike",
+    renderKey: "strikethrough",
+    name: "Strikethrough",
+    icon: Strikethrough,
+    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: List,
+    shortcut: ["Cmd", "Shift", "7"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "numbered-list",
+    renderKey: "numbered-list",
+    name: "Numbered list",
+    icon: ListOrdered,
+    shortcut: ["Cmd", "Shift", "8"],
+    editors: ["lite", "document"],
+  },
+  {
+    itemKey: "to-do-list",
+    renderKey: "to-do-list",
+    name: "To-do list",
+    icon: ListTodo,
+    shortcut: ["Cmd", "Shift", "9"],
+    editors: ["lite", "document"],
+  },
+];
+
+export const USER_ACTION_ITEMS: ToolbarMenuItem<"quote" | "code">[] = [
+  { itemKey: "quote", renderKey: "quote", name: "Quote", icon: TextQuote, editors: ["lite", "document"] },
+  { itemKey: "code", renderKey: "code", name: "Code", icon: Code2, editors: ["lite", "document"] },
+];
+
+export const COMPLEX_ITEMS: ToolbarMenuItem<"table" | "image">[] = [
+  { itemKey: "table", renderKey: "table", name: "Table", icon: Table, editors: ["document"] },
+  { itemKey: "image", renderKey: "image", name: "Image", icon: Image, editors: ["lite", "document"] },
+];
+
+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")),
+  },
+};
+
 export const COLORS_LIST: {
   key: string;
   label: string;
diff --git a/packages/editor/src/core/constants/config.ts b/packages/editor/src/core/constants/config.ts
index 5a9577044..bd4712de9 100644
--- a/packages/editor/src/core/constants/config.ts
+++ b/packages/editor/src/core/constants/config.ts
@@ -5,3 +5,6 @@ export const DEFAULT_DISPLAY_CONFIG: TDisplayConfig = {
   fontSize: "large-font",
   fontStyle: "sans-serif",
 };
+
+export const ACCEPTED_FILE_MIME_TYPES = ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif"];
+export const ACCEPTED_FILE_EXTENSIONS = ACCEPTED_FILE_MIME_TYPES.map((type) => `.${type.split("/")[1]}`);
diff --git a/packages/editor/src/core/constants/document-collaborative-events.ts b/packages/editor/src/core/constants/document-collaborative-events.ts
index 5e79efc7a..72e8b1dbd 100644
--- a/packages/editor/src/core/constants/document-collaborative-events.ts
+++ b/packages/editor/src/core/constants/document-collaborative-events.ts
@@ -3,4 +3,6 @@ export const DocumentCollaborativeEvents = {
   unlock: { client: "unlocked", server: "unlock" },
   archive: { client: "archived", server: "archive" },
   unarchive: { client: "unarchived", server: "unarchive" },
+  "make-public": { client: "made-public", server: "make-public" },
+  "make-private": { client: "made-private", server: "make-private" },
 } as const;
diff --git a/packages/editor/src/core/extensions/callout/color-selector.tsx b/packages/editor/src/core/extensions/callout/color-selector.tsx
index 489b05166..ddc3b879c 100644
--- a/packages/editor/src/core/extensions/callout/color-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/color-selector.tsx
@@ -1,8 +1,8 @@
 import { Ban, ChevronDown } from "lucide-react";
+// plane utils
+import { cn } from "@plane/utils";
 // constants
 import { COLORS_LIST } from "@/constants/common";
-// helpers
-import { cn } from "@/helpers/common";
 
 type Props = {
   disabled: boolean;
diff --git a/packages/editor/src/core/extensions/callout/logo-selector.tsx b/packages/editor/src/core/extensions/callout/logo-selector.tsx
index 4c78a2c04..8ea47d50d 100644
--- a/packages/editor/src/core/extensions/callout/logo-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/logo-selector.tsx
@@ -2,8 +2,8 @@
 import { convertHexEmojiToDecimal } from "@plane/utils";
 // plane ui
 import { EmojiIconPicker, EmojiIconPickerTypes, Logo, TEmojiLogoProps } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { TCalloutBlockAttributes } from "./types";
 // utils
diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index 8dbdb044f..a06d83990 100644
--- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx
+++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
@@ -8,8 +8,8 @@ import { common, createLowlight } from "lowlight";
 import { CopyIcon, CheckIcon } from "lucide-react";
 // ui
 import { Tooltip } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 
 // we just have ts support for now
 const lowlight = createLowlight(common);
diff --git a/packages/editor/src/core/extensions/core-without-props.ts b/packages/editor/src/core/extensions/core-without-props.ts
index 212e1c241..8864f49f7 100644
--- a/packages/editor/src/core/extensions/core-without-props.ts
+++ b/packages/editor/src/core/extensions/core-without-props.ts
@@ -13,7 +13,7 @@ import { CustomHorizontalRule } from "./horizontal-rule";
 import { ImageExtensionWithoutProps } from "./image";
 import { CustomImageComponentWithoutProps } from "./image/image-component-without-props";
 import { IssueWidgetWithoutProps } from "./issue-embed/issue-embed-without-props";
-import { CustomMentionWithoutProps } from "./mentions/mentions-without-props";
+import { CustomMentionExtensionConfig } from "./mentions/extension-config";
 import { CustomQuoteExtension } from "./quote";
 import { TableHeader, TableCell, TableRow, Table } from "./table";
 import { CustomTextAlignExtension } from "./text-align";
@@ -97,7 +97,7 @@ export const CoreEditorExtensionsWithoutProps = [
   TableHeader,
   TableCell,
   TableRow,
-  CustomMentionWithoutProps(),
+  CustomMentionExtensionConfig,
   CustomTextAlignExtension,
   CustomCalloutExtensionConfig,
   CustomColorExtension,
diff --git a/packages/editor/src/core/extensions/custom-color.ts b/packages/editor/src/core/extensions/custom-color.ts
index dc966816c..b377099fb 100644
--- a/packages/editor/src/core/extensions/custom-color.ts
+++ b/packages/editor/src/core/extensions/custom-color.ts
@@ -93,6 +93,21 @@ export const CustomColorExtension = Mark.create({
     };
   },
 
+  addStorage() {
+    return {
+      markdown: {
+        serialize: {
+          open: "",
+          close: "",
+          mixable: true,
+          expelEnclosingWhitespace: true,
+        },
+      },
+    };
+  },
+
+  // @ts-expect-error types are incorrect
+  // TODO: check this and update types
   parseHTML() {
     return [
       {
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
index b5b27e271..0cc38f5a4 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
@@ -1,9 +1,10 @@
-import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
 import { NodeSelection } from "@tiptap/pm/state";
+import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
+// plane utils
+import { cn } from "@plane/utils";
 // extensions
 import { CustoBaseImageNodeViewProps, ImageToolbarRoot } from "@/extensions/custom-image";
-// helpers
-import { cn } from "@/helpers/common";
+import { ImageUploadStatus } from "./upload-status";
 
 const MIN_SIZE = 100;
 
@@ -38,11 +39,11 @@ const ensurePixelString = <TDefault,>(value: Pixel | TDefault | number | undefin
 };
 
 type CustomImageBlockProps = CustoBaseImageNodeViewProps & {
-  imageFromFileSystem: string;
+  imageFromFileSystem: string | undefined;
   setFailedToLoadImage: (isError: boolean) => void;
   editorContainer: HTMLDivElement | null;
   setEditorContainer: (editorContainer: HTMLDivElement | null) => void;
-  src: string;
+  src: string | undefined;
 };
 
 export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
@@ -62,8 +63,8 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const { width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio, src: imgNodeSrc } = node.attrs;
   // states
   const [size, setSize] = useState<Size>({
-    width: ensurePixelString(nodeWidth, "35%"),
-    height: ensurePixelString(nodeHeight, "auto"),
+    width: ensurePixelString(nodeWidth, "35%") ?? "35%",
+    height: ensurePixelString(nodeHeight, "auto") ?? "auto",
     aspectRatio: nodeAspectRatio || null,
   });
   const [isResizing, setIsResizing] = useState(false);
@@ -144,8 +145,8 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   useLayoutEffect(() => {
     setSize((prevSize) => ({
       ...prevSize,
-      width: ensurePixelString(nodeWidth),
-      height: ensurePixelString(nodeHeight),
+      width: ensurePixelString(nodeWidth) ?? "35%",
+      height: ensurePixelString(nodeHeight) ?? "auto",
       aspectRatio: nodeAspectRatio,
     }));
   }, [nodeWidth, nodeHeight, nodeAspectRatio]);
@@ -210,6 +211,8 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   // 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 || imageFromFileSystem) || !initialResizeComplete || hasErroredOnFirstLoad;
+  // show the image upload status only when the resolvedImageSrc is not ready
+  const showUploadStatus = !resolvedImageSrc;
   // 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 showImageUtils = resolvedImageSrc && initialResizeComplete;
   // 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)
@@ -247,7 +250,16 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           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 editor?.commands.restoreImage?.(imgNodeSrc);
+            if (!imageRef.current) {
+              throw new Error("Image reference not found");
+            }
+            if (!resolvedImageSrc) {
+              throw new Error("No resolved image source available");
+            }
             imageRef.current.src = resolvedImageSrc;
           } catch {
             // if the image failed to even restore, then show the error state
@@ -270,6 +282,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
         }}
       />
+      {showUploadStatus && node.attrs.id && <ImageUploadStatus editor={editor} nodeId={node.attrs.id} />}
       {showImageUtils && (
         <ImageToolbarRoot
           containerClassName={
@@ -277,7 +290,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           }
           image={{
             src: resolvedImageSrc,
-            aspectRatio: size.aspectRatio,
+            aspectRatio: size.aspectRatio === null ? 1 : size.aspectRatio,
             height: size.height,
             width: size.width,
           }}
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-node.tsx b/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
index 58b60b306..2bd84fcb3 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useRef, useState } from "react";
 import { Editor, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { useEffect, useRef, useState } from "react";
 // extensions
 import { CustomImageBlock, CustomImageUploader, ImageAttributes } from "@/extensions/custom-image";
 
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
index 8ad99bc44..0fd0e6dd4 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
@@ -1,11 +1,13 @@
-import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
 import { ImageIcon } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common";
-// hooks
-import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload";
+import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
+// plane utils
+import { cn } from "@plane/utils";
+// constants
+import { ACCEPTED_FILE_EXTENSIONS } from "@/constants/config";
 // extensions
 import { CustoBaseImageNodeViewProps, getImageComponentImageFileMap } from "@/extensions/custom-image";
+// hooks
+import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload";
 
 type CustomImageUploaderProps = CustoBaseImageNodeViewProps & {
   maxFileSize: number;
@@ -36,6 +38,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   const onUpload = useCallback(
     (url: string) => {
       if (url) {
+        if (!imageEntityId) return;
         setIsUploaded(true);
         // Update the node view's src attribute post upload
         updateAttributes({ src: url });
@@ -66,6 +69,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   );
   // hooks
   const { uploading: isImageBeingUploaded, uploadFile } = useUploader({
+    blockId: imageEntityId ?? "",
     editor,
     loadImageFromFileSystem,
     maxFileSize,
@@ -80,7 +84,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
 
   // the meta data of the image component
   const meta = useMemo(
-    () => imageComponentImageFileMap?.get(imageEntityId),
+    () => imageComponentImageFileMap?.get(imageEntityId ?? ""),
     [imageComponentImageFileMap, imageEntityId]
   );
 
@@ -94,7 +98,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         if (meta.hasOpenedFileInputOnce) return;
         fileInputRef.current.click();
         hasTriggeredFilePickerRef.current = true;
-        imageComponentImageFileMap?.set(imageEntityId, { ...meta, hasOpenedFileInputOnce: true });
+        imageComponentImageFileMap?.set(imageEntityId ?? "", { ...meta, hasOpenedFileInputOnce: true });
       }
     }
   }, [meta, uploadFile, imageComponentImageFileMap]);
@@ -127,7 +131,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
       return "Uploading...";
     }
 
-    if (draggedInside) {
+    if (draggedInside && editor.isEditable) {
       return "Drop image here";
     }
 
@@ -137,14 +141,16 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   return (
     <div
       className={cn(
-        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 hover:text-custom-text-200 bg-custom-background-90 hover:bg-custom-background-80 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
+        "image-upload-component flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 bg-custom-background-90 border border-dashed border-custom-border-300 transition-all duration-200 ease-in-out cursor-default",
         {
-          "hover:text-custom-text-200 cursor-pointer": editor.isEditable,
-          "bg-custom-background-80 text-custom-text-200": draggedInside,
-          "text-custom-primary-200 bg-custom-primary-100/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200 border-custom-primary-200/10":
-            selected,
-          "text-red-500 cursor-default hover:text-red-500": failedToLoadImage,
-          "bg-red-500/10 hover:bg-red-500/10": failedToLoadImage && selected,
+          "hover:text-custom-text-200 hover:bg-custom-background-80 cursor-pointer": editor.isEditable,
+          "bg-custom-background-80 text-custom-text-200": draggedInside && editor.isEditable,
+          "text-custom-primary-200 bg-custom-primary-100/10 border-custom-primary-200/10 hover:bg-custom-primary-100/10 hover:text-custom-primary-200":
+            selected && editor.isEditable,
+          "text-red-500 cursor-default": failedToLoadImage,
+          "hover:text-red-500": failedToLoadImage && editor.isEditable,
+          "bg-red-500/10": failedToLoadImage && selected,
+          "hover:bg-red-500/10": failedToLoadImage && selected && editor.isEditable,
         }
       )}
       onDrop={onDrop}
@@ -164,7 +170,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         ref={fileInputRef}
         hidden
         type="file"
-        accept=".jpg,.jpeg,.png,.webp"
+        accept={ACCEPTED_FILE_EXTENSIONS.join(",")}
         onChange={onFileChange}
         multiple
       />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
index 38ea23c99..61ae307bb 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
-// helpers
-import { cn } from "@/helpers/common";
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+// plane utils
+import { cn } from "@plane/utils";
 
 type Props = {
   image: {
@@ -14,46 +14,77 @@ type Props = {
   toggleFullScreenMode: (val: boolean) => void;
 };
 
-const MAGNIFICATION_VALUES = [0.5, 0.75, 1, 1.5, 1.75, 2];
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 2;
+const ZOOM_SPEED = 0.05;
+const ZOOM_STEPS = [0.5, 1, 1.5, 2];
 
 export const ImageFullScreenAction: React.FC<Props> = (props) => {
   const { image, isOpen: isFullScreenEnabled, toggleFullScreenMode } = props;
   const { src, width, aspectRatio } = image;
-  // states
-  const [magnification, setMagnification] = useState(1);
-  // refs
+
+  const [magnification, setMagnification] = useState<number>(1);
+  const [initialMagnification, setInitialMagnification] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragStart = useRef({ x: 0, y: 0 });
+  const dragOffset = useRef({ x: 0, y: 0 });
   const modalRef = useRef<HTMLDivElement>(null);
-  // derived values
+  const imgRef = useRef<HTMLImageElement | null>(null);
+
   const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
-  // close handler
-  const handleClose = useCallback(() => {
-    toggleFullScreenMode(false);
-    setTimeout(() => {
+
+  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);
-    }, 200);
-  }, [toggleFullScreenMode]);
-  // download handler
-  const handleOpenInNewTab = () => {
-    const link = document.createElement("a");
-    link.href = src;
-    link.target = "_blank";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  };
-  // magnification decrease handler
-  const handleDecreaseMagnification = useCallback(() => {
-    const currentIndex = MAGNIFICATION_VALUES.indexOf(magnification);
-    if (currentIndex === 0) return;
-    setMagnification(MAGNIFICATION_VALUES[currentIndex - 1]);
-  }, [magnification]);
-  // magnification increase handler
-  const handleIncreaseMagnification = useCallback(() => {
-    const currentIndex = MAGNIFICATION_VALUES.indexOf(magnification);
-    if (currentIndex === MAGNIFICATION_VALUES.length - 1) return;
-    setMagnification(MAGNIFICATION_VALUES[currentIndex + 1]);
-  }, [magnification]);
-  // keydown handler
+
+      // 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 === "-") {
@@ -61,43 +92,113 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
         e.stopPropagation();
 
         if (e.key === "Escape") handleClose();
-        if (e.key === "+" || e.key === "=") handleIncreaseMagnification();
-        if (e.key === "-") handleDecreaseMagnification();
+        if (e.key === "+" || e.key === "=") handleMagnification("increase");
+        if (e.key === "-") handleMagnification("decrease");
       }
     },
-    [handleClose, handleDecreaseMagnification, handleIncreaseMagnification]
+    [handleClose, handleMagnification]
   );
-  // click outside handler
-  const handleClickOutside = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      if (modalRef.current && e.target === modalRef.current) {
-        handleClose();
-      }
-    },
-    [handleClose]
-  );
-  // register keydown listener
-  useEffect(() => {
-    if (isFullScreenEnabled) {
-      document.addEventListener("keydown", handleKeyDown);
 
-      return () => {
-        document.removeEventListener("keydown", handleKeyDown);
+  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"),
       };
     }
-  }, [handleKeyDown, isFullScreenEnabled]);
+  };
+
+  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) {
+        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, magnification]
+  );
+
+  // 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]);
 
   return (
     <>
       <div
-        className={cn(
-          "fixed inset-0 size-full z-20 bg-black/90 opacity-0 pointer-events-none cursor-default transition-opacity",
-          {
-            "opacity-100 pointer-events-auto": isFullScreenEnabled,
-          }
-        )}
+        className={cn("fixed inset-0 size-full z-20 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
+          "opacity-100 pointer-events-auto": isFullScreenEnabled,
+          "cursor-default": !isDragging,
+          "cursor-grabbing": isDragging,
+        })}
       >
-        <div ref={modalRef} onClick={handleClickOutside} className="relative size-full grid place-items-center">
+        <div
+          ref={modalRef}
+          onMouseDown={(e) => e.target === modalRef.current && handleClose()}
+          className="relative size-full grid place-items-center overflow-hidden"
+        >
           <button
             type="button"
             onClick={handleClose}
@@ -106,41 +207,49 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
             <X className="size-8 text-white/60 hover:text-white transition-colors" />
           </button>
           <img
+            ref={setImageRef}
             src={src}
-            className="read-only-image rounded-lg transition-all duration-200"
+            className="read-only-image rounded-lg"
             style={{
-              width: `${widthInNumber * magnification}px`,
+              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>
-        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
-          <div className="flex items-center">
+          <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
+            <div className="flex items-center">
+              <button
+                type="button"
+                onClick={() => handleMagnification("decrease")}
+                className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+                disabled={magnification <= MIN_ZOOM}
+              >
+                <Minus className="size-4" />
+              </button>
+              <span className="text-sm w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
+              <button
+                type="button"
+                onClick={() => handleMagnification("increase")}
+                className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+                disabled={magnification >= MAX_ZOOM}
+              >
+                <Plus className="size-4" />
+              </button>
+            </div>
             <button
               type="button"
-              onClick={handleDecreaseMagnification}
-              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
-              disabled={magnification === MAGNIFICATION_VALUES[0]}
+              onClick={() => window.open(src, "_blank")}
+              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
             >
-              <Minus className="size-4" />
-            </button>
-            <span className="text-sm w-12 text-center text-white">{(100 * magnification).toFixed(0)}%</span>
-            <button
-              type="button"
-              onClick={handleIncreaseMagnification}
-              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
-              disabled={magnification === MAGNIFICATION_VALUES[MAGNIFICATION_VALUES.length - 1]}
-            >
-              <Plus className="size-4" />
+              <ExternalLink className="size-4" />
             </button>
           </div>
-          <button
-            type="button"
-            onClick={handleOpenInNewTab}
-            className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
-          >
-            <ExternalLink className="size-4" />
-          </button>
         </div>
       </div>
       <button
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index d42d875cc..3179db0d4 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { ImageFullScreenAction } from "./full-screen";
 
diff --git a/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx b/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
new file mode 100644
index 000000000..7b23713e9
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/components/upload-status.tsx
@@ -0,0 +1,60 @@
+import { Editor } from "@tiptap/core";
+import { useEditorState } from "@tiptap/react";
+import { useEffect, useRef, useState } from "react";
+
+type Props = {
+  editor: Editor;
+  nodeId: string;
+};
+
+export const ImageUploadStatus: React.FC<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.imageComponent.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);
+      }
+    };
+  }, [uploadStatus]);
+
+  if (uploadStatus === undefined) return null;
+
+  return (
+    <div className="absolute top-1 right-1 z-20 bg-black/60 rounded text-xs font-medium w-10 text-center">
+      {displayStatus}%
+    </div>
+  );
+};
diff --git a/packages/editor/src/core/extensions/custom-image/custom-image.ts b/packages/editor/src/core/extensions/custom-image/custom-image.ts
index 3b64db8d0..a4d38ceb5 100644
--- a/packages/editor/src/core/extensions/custom-image/custom-image.ts
+++ b/packages/editor/src/core/extensions/custom-image/custom-image.ts
@@ -4,12 +4,12 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 import { v4 as uuidv4 } from "uuid";
 // extensions
 import { CustomImageNode } from "@/extensions/custom-image";
+// helpers
+import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // plugins
 import { TrackImageDeletionPlugin, TrackImageRestorationPlugin, isFileValid } from "@/plugins/image";
 // types
 import { TFileHandler } from "@/types";
-// helpers
-import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 
 export type InsertImageComponentProps = {
   file?: File;
@@ -21,7 +21,8 @@ declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     imageComponent: {
       insertImageComponent: ({ file, pos, event }: InsertImageComponentProps) => ReturnType;
-      uploadImage: (file: File) => () => Promise<string> | undefined;
+      uploadImage: (blockId: string, file: File) => () => Promise<string> | undefined;
+      updateAssetsUploadStatus: (updatedStatus: TFileHandler["assetsUploadStatus"]) => () => void;
       getImageSource?: (path: string) => () => Promise<string>;
       restoreImage: (src: string) => () => Promise<void>;
     };
@@ -32,6 +33,7 @@ export const getImageComponentImageFileMap = (editor: Editor) =>
   (editor.storage.imageComponent as UploadImageExtensionStorage | undefined)?.fileMap;
 
 export interface UploadImageExtensionStorage {
+  assetsUploadStatus: TFileHandler["assetsUploadStatus"];
   fileMap: Map<string, UploadEntity>;
 }
 
@@ -39,6 +41,7 @@ export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File })
 
 export const CustomImageExtension = (props: TFileHandler) => {
   const {
+    assetsUploadStatus,
     getAssetSrc,
     upload,
     delete: deleteImageFn,
@@ -105,7 +108,6 @@ export const CustomImageExtension = (props: TFileHandler) => {
       this.editor.state.doc.descendants((node) => {
         if (node.type.name === this.name) {
           if (!node.attrs.src?.startsWith("http")) return;
-
           imageSources.add(node.attrs.src);
         }
       });
@@ -128,13 +130,14 @@ export const CustomImageExtension = (props: TFileHandler) => {
         markdown: {
           serialize() {},
         },
+        assetsUploadStatus,
       };
     },
 
     addCommands() {
       return {
         insertImageComponent:
-          (props: { file?: File; pos?: number; event: "insert" | "drop" }) =>
+          (props) =>
           ({ commands }) => {
             // Early return if there's an invalid file being dropped
             if (
@@ -182,12 +185,15 @@ export const CustomImageExtension = (props: TFileHandler) => {
               attrs: attributes,
             });
           },
-        uploadImage: (file: File) => async () => {
-          const fileUrl = await upload(file);
+        uploadImage: (blockId, file) => async () => {
+          const fileUrl = await upload(blockId, file);
           return fileUrl;
         },
-        getImageSource: (path: string) => async () => await getAssetSrc(path),
-        restoreImage: (src: string) => async () => {
+        updateAssetsUploadStatus: (updatedStatus) => () => {
+          this.storage.assetsUploadStatus = updatedStatus;
+        },
+        getImageSource: (path) => async () => await getAssetSrc(path),
+        restoreImage: (src) => async () => {
           await restoreImageFn(src);
         },
       };
diff --git a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
index c27970d92..78237d678 100644
--- a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
+++ b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
@@ -4,9 +4,9 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 // components
 import { CustomImageNode, UploadImageExtensionStorage } from "@/extensions/custom-image";
 // types
-import { TFileHandler } from "@/types";
+import { TReadOnlyFileHandler } from "@/types";
 
-export const CustomReadOnlyImageExtension = (props: Pick<TFileHandler, "getAssetSrc">) => {
+export const CustomReadOnlyImageExtension = (props: TReadOnlyFileHandler) => {
   const { getAssetSrc } = props;
 
   return Image.extend<Record<string, unknown>, UploadImageExtensionStorage>({
@@ -56,6 +56,7 @@ export const CustomReadOnlyImageExtension = (props: Pick<TFileHandler, "getAsset
         markdown: {
           serialize() {},
         },
+        assetsUploadStatus: {},
       };
     },
 
diff --git a/packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts b/packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts
index 4730cce05..2a17838fd 100644
--- a/packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts
+++ b/packages/editor/src/core/extensions/custom-list-keymap/list-keymap.ts
@@ -51,6 +51,10 @@ export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
           } else if (this.editor.commands.liftListItem("taskItem")) {
             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 }) => {
diff --git a/packages/editor/src/core/extensions/drop.tsx b/packages/editor/src/core/extensions/drop.tsx
index 2044f03bf..0d578770a 100644
--- a/packages/editor/src/core/extensions/drop.tsx
+++ b/packages/editor/src/core/extensions/drop.tsx
@@ -2,58 +2,67 @@ import { Extension, Editor } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { EditorView } from "@tiptap/pm/view";
 
-export const DropHandlerExtension = () =>
-  Extension.create({
-    name: "dropHandler",
-    priority: 1000,
+export const DropHandlerExtension = Extension.create({
+  name: "dropHandler",
+  priority: 1000,
 
-    addProseMirrorPlugins() {
-      const editor = this.editor;
-      return [
-        new Plugin({
-          key: new PluginKey("drop-handler-plugin"),
-          props: {
-            handlePaste: (view: EditorView, event: ClipboardEvent) => {
-              if (event.clipboardData && event.clipboardData.files && event.clipboardData.files.length > 0) {
-                event.preventDefault();
-                const files = Array.from(event.clipboardData.files);
-                const imageFiles = files.filter((file) => file.type.startsWith("image"));
+  addProseMirrorPlugins() {
+    const editor = this.editor;
+    return [
+      new Plugin({
+        key: new PluginKey("drop-handler-plugin"),
+        props: {
+          handlePaste: (view: EditorView, event: ClipboardEvent) => {
+            if (
+              editor.isEditable &&
+              event.clipboardData &&
+              event.clipboardData.files &&
+              event.clipboardData.files.length > 0
+            ) {
+              event.preventDefault();
+              const files = Array.from(event.clipboardData.files);
+              const imageFiles = files.filter((file) => file.type.startsWith("image"));
 
-                if (imageFiles.length > 0) {
-                  const pos = view.state.selection.from;
+              if (imageFiles.length > 0) {
+                const pos = view.state.selection.from;
+                insertImagesSafely({ editor, files: imageFiles, initialPos: pos, event: "drop" });
+              }
+              return true;
+            }
+            return false;
+          },
+          handleDrop: (view: EditorView, event: DragEvent, _slice: any, moved: boolean) => {
+            if (
+              editor.isEditable &&
+              !moved &&
+              event.dataTransfer &&
+              event.dataTransfer.files &&
+              event.dataTransfer.files.length > 0
+            ) {
+              event.preventDefault();
+              const files = Array.from(event.dataTransfer.files);
+              const imageFiles = files.filter((file) => file.type.startsWith("image"));
+
+              if (imageFiles.length > 0) {
+                const coordinates = view.posAtCoords({
+                  left: event.clientX,
+                  top: event.clientY,
+                });
+
+                if (coordinates) {
+                  const pos = coordinates.pos;
                   insertImagesSafely({ editor, files: imageFiles, initialPos: pos, event: "drop" });
                 }
                 return true;
               }
-              return false;
-            },
-            handleDrop: (view: EditorView, event: DragEvent, _slice: any, moved: boolean) => {
-              if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length > 0) {
-                event.preventDefault();
-                const files = Array.from(event.dataTransfer.files);
-                const imageFiles = files.filter((file) => file.type.startsWith("image"));
-
-                if (imageFiles.length > 0) {
-                  const coordinates = view.posAtCoords({
-                    left: event.clientX,
-                    top: event.clientY,
-                  });
-
-                  if (coordinates) {
-                    const pos = coordinates.pos;
-                    insertImagesSafely({ editor, files: imageFiles, initialPos: pos, event: "drop" });
-                  }
-                  return true;
-                }
-              }
-              return false;
-            },
+            }
+            return false;
           },
-        }),
-      ];
-    },
-  });
-
+        },
+      }),
+    ];
+  },
+});
 export const insertImagesSafely = async ({
   editor,
   files,
diff --git a/packages/editor/src/core/extensions/extensions.tsx b/packages/editor/src/core/extensions/extensions.tsx
index 0e06f774b..f04ed756a 100644
--- a/packages/editor/src/core/extensions/extensions.tsx
+++ b/packages/editor/src/core/extensions/extensions.tsx
@@ -18,7 +18,7 @@ import {
   CustomImageExtension,
   CustomKeymap,
   CustomLinkExtension,
-  CustomMention,
+  CustomMentionExtension,
   CustomQuoteExtension,
   CustomTextAlignExtension,
   CustomTypographyExtension,
@@ -32,27 +32,26 @@ import {
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
-// types
-import { IMentionHighlight, IMentionSuggestion, TExtensions, TFileHandler } from "@/types";
 // plane editor extensions
 import { CoreEditorAdditionalExtensions } from "@/plane-editor/extensions";
+// types
+import { TExtensions, TFileHandler, TMentionHandler } from "@/types";
 
 type TArguments = {
   disabledExtensions: TExtensions[];
   enableHistory: boolean;
   fileHandler: TFileHandler;
-  mentionConfig: {
-    mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
-    mentionHighlights?: () => Promise<IMentionHighlight[]>;
-  };
+  mentionHandler: TMentionHandler;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
+  editable: boolean;
 };
 
 export const CoreEditorExtensions = (args: TArguments): Extensions => {
-  const { disabledExtensions, enableHistory, fileHandler, mentionConfig, placeholder, tabIndex } = args;
+  const { disabledExtensions, enableHistory, fileHandler, mentionHandler, placeholder, tabIndex } = args;
 
   return [
+    // @ts-expect-error tiptap types are incorrect
     StarterKit.configure({
       bulletList: {
         HTMLAttributes: {
@@ -84,12 +83,13 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
         },
       },
       dropcursor: {
-        class: "text-custom-text-300",
+        class:
+          "text-custom-text-300 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 }),
     }),
     CustomQuoteExtension,
-    DropHandlerExtension(),
+    DropHandlerExtension,
     CustomHorizontalRule.configure({
       HTMLAttributes: {
         class: "py-4 border-custom-border-400",
@@ -137,6 +137,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     CustomCodeInlineExtension,
     Markdown.configure({
       html: true,
+      transformCopiedText: true,
       transformPastedText: true,
       breaks: true,
     }),
@@ -144,13 +145,11 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     TableHeader,
     TableCell,
     TableRow,
-    CustomMention({
-      mentionSuggestions: mentionConfig.mentionSuggestions,
-      mentionHighlights: mentionConfig.mentionHighlights,
-      readonly: false,
-    }),
+    CustomMentionExtension(mentionHandler),
     Placeholder.configure({
       placeholder: ({ editor, node }) => {
+        if (!editor.isEditable) return "";
+
         if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
 
         if (editor.storage.imageComponent.uploadInProgress) return "";
diff --git a/packages/editor/src/core/extensions/image/read-only-image.tsx b/packages/editor/src/core/extensions/image/read-only-image.tsx
index ce1581a8e..a65607803 100644
--- a/packages/editor/src/core/extensions/image/read-only-image.tsx
+++ b/packages/editor/src/core/extensions/image/read-only-image.tsx
@@ -3,9 +3,9 @@ import { ReactNodeViewRenderer } from "@tiptap/react";
 // extensions
 import { CustomImageNode } from "@/extensions";
 // types
-import { TFileHandler } from "@/types";
+import { TReadOnlyFileHandler } from "@/types";
 
-export const ReadOnlyImageExtension = (props: Pick<TFileHandler, "getAssetSrc">) => {
+export const ReadOnlyImageExtension = (props: TReadOnlyFileHandler) => {
   const { getAssetSrc } = props;
 
   return Image.extend({
diff --git a/packages/editor/src/core/extensions/mentions/extension-config.ts b/packages/editor/src/core/extensions/mentions/extension-config.ts
new file mode 100644
index 000000000..827137a1d
--- /dev/null
+++ b/packages/editor/src/core/extensions/mentions/extension-config.ts
@@ -0,0 +1,48 @@
+import { mergeAttributes } from "@tiptap/core";
+import Mention, { MentionOptions } from "@tiptap/extension-mention";
+// types
+import { TMentionHandler } from "@/types";
+// local types
+import { EMentionComponentAttributeNames } from "./types";
+
+export type TMentionExtensionOptions = MentionOptions & {
+  renderComponent: TMentionHandler["renderComponent"];
+};
+
+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)];
+  },
+
+  HTMLAttributes: {
+    class: "mention",
+  },
+
+  addStorage(this) {
+    return {
+      mentionsOpen: false,
+    };
+  },
+});
diff --git a/packages/editor/src/core/extensions/mentions/extension.tsx b/packages/editor/src/core/extensions/mentions/extension.tsx
index 32ad8a720..b701bdc76 100644
--- a/packages/editor/src/core/extensions/mentions/extension.tsx
+++ b/packages/editor/src/core/extensions/mentions/extension.tsx
@@ -1,154 +1,31 @@
-import { Editor, mergeAttributes } from "@tiptap/core";
-import Mention, { MentionOptions } from "@tiptap/extension-mention";
-import { MarkdownSerializerState } from "@tiptap/pm/markdown";
-import { Node } from "@tiptap/pm/model";
-import { ReactNodeViewRenderer, ReactRenderer } from "@tiptap/react";
-import tippy from "tippy.js";
-// extensions
-import { MentionList, MentionNodeView } from "@/extensions";
+import { ReactNodeViewRenderer } from "@tiptap/react";
 // types
-import { IMentionHighlight, IMentionSuggestion } from "@/types";
+import { TMentionHandler } from "@/types";
+// extension config
+import { CustomMentionExtensionConfig } from "./extension-config";
+// node view
+import { MentionNodeView } from "./mention-node-view";
+// utils
+import { renderMentionsDropdown } from "./utils";
 
-interface CustomMentionOptions extends MentionOptions {
-  mentionHighlights: () => Promise<IMentionHighlight[]>;
-  readonly?: boolean;
-}
-
-export const CustomMention = ({
-  mentionHighlights,
-  mentionSuggestions,
-  readonly,
-}: {
-  mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
-  mentionHighlights?: () => Promise<IMentionHighlight[]>;
-  readonly: boolean;
-}) =>
-  Mention.extend<CustomMentionOptions>({
-    addStorage(this) {
+export const CustomMentionExtension = (props: TMentionHandler) => {
+  const { searchCallback, renderComponent } = props;
+  return CustomMentionExtensionConfig.extend({
+    addOptions(this) {
       return {
-        mentionsOpen: false,
-        markdown: {
-          serialize(state: MarkdownSerializerState, node: Node) {
-            const { attrs } = node;
-            const label = `@${state.esc(attrs.label)}`;
-            const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-            const safeRedirectionPath = state.esc(attrs.redirect_uri);
-            const url = `${originUrl}${safeRedirectionPath}`;
-            state.write(`[${label}](${url})`);
-          },
-        },
+        ...this.parent?.(),
+        renderComponent,
       };
     },
 
-    addAttributes() {
-      return {
-        id: {
-          default: null,
-        },
-        label: {
-          default: null,
-        },
-        target: {
-          default: null,
-        },
-        self: {
-          default: false,
-        },
-        redirect_uri: {
-          default: "/",
-        },
-        entity_identifier: {
-          default: null,
-        },
-        entity_name: {
-          default: null,
-        },
-      };
-    },
     addNodeView() {
       return ReactNodeViewRenderer(MentionNodeView);
     },
-    parseHTML() {
-      return [
-        {
-          tag: "mention-component",
-        },
-      ];
-    },
-    renderHTML({ HTMLAttributes }) {
-      return ["mention-component", mergeAttributes(HTMLAttributes)];
-    },
   }).configure({
-    HTMLAttributes: {
-      class: "mention",
-    },
-    readonly: readonly,
-    mentionHighlights,
     suggestion: {
-      // @ts-expect-error - Tiptap types are incorrect
-      render: () => {
-        if (!mentionSuggestions) return;
-        let component: ReactRenderer | null = null;
-        let popup: any | null = null;
-
-        return {
-          onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
-            if (!props.clientRect) {
-              return;
-            }
-            component = new ReactRenderer(MentionList, {
-              props: { ...props, mentionSuggestions },
-              editor: props.editor,
-            });
-            props.editor.storage.mentionsOpen = true;
-            // @ts-expect-error - Tippy types are incorrect
-            popup = tippy("body", {
-              getReferenceClientRect: props.clientRect,
-              appendTo: () =>
-                document.querySelector(".active-editor") ?? document.querySelector('[id^="editor-container"]'),
-              content: component.element,
-              showOnCreate: true,
-              interactive: true,
-              trigger: "manual",
-              placement: "bottom-start",
-            });
-          },
-          onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
-            component?.updateProps(props);
-
-            if (!props.clientRect) {
-              return;
-            }
-
-            popup &&
-              popup[0].setProps({
-                getReferenceClientRect: props.clientRect,
-              });
-          },
-
-          onKeyDown: (props: { event: KeyboardEvent }) => {
-            if (props.event.key === "Escape") {
-              popup?.[0].hide();
-
-              return true;
-            }
-
-            const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
-
-            if (navigationKeys.includes(props.event.key)) {
-              // @ts-expect-error - Tippy types are incorrect
-              component?.ref?.onKeyDown(props);
-              event?.stopPropagation();
-              return true;
-            }
-            return false;
-          },
-          onExit: (props: { editor: Editor; event: KeyboardEvent }) => {
-            props.editor.storage.mentionsOpen = false;
-            popup?.[0].destroy();
-            component?.destroy();
-          },
-        };
-      },
+      render: renderMentionsDropdown({
+        searchCallback,
+      }),
     },
   });
+};
diff --git a/packages/editor/src/core/extensions/mentions/index.ts b/packages/editor/src/core/extensions/mentions/index.ts
index c7f2317a7..02b5a53d6 100644
--- a/packages/editor/src/core/extensions/mentions/index.ts
+++ b/packages/editor/src/core/extensions/mentions/index.ts
@@ -1,4 +1,2 @@
 export * from "./extension";
-export * from "./mention-node-view";
-export * from "./mentions-list";
-export * from "./mentions-without-props";
+export * from "./extension-config";
diff --git a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
index 5121eae4a..006336fbb 100644
--- a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
+++ b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
@@ -1,49 +1,26 @@
-// TODO: fix all warnings
+import { NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+// extension config
+import { TMentionExtensionOptions } from "./extension-config";
+// extension types
+import { EMentionComponentAttributeNames, TMentionComponentAttributes } from "./types";
 
-/* eslint-disable react/display-name */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { useEffect, useState } from "react";
-import { NodeViewWrapper } from "@tiptap/react";
-// helpers
-import { cn } from "@/helpers/common";
-// types
-import { IMentionHighlight } from "@/types";
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export const MentionNodeView = (props) => {
-  // TODO: move it to web app
-  const [highlightsState, setHighlightsState] = useState<IMentionHighlight[]>();
-
-  useEffect(() => {
-    if (!props.extension.options.mentionHighlights) return;
-    const hightlights = async () => {
-      const userId = await props.extension.options.mentionHighlights?.();
-      setHighlightsState(userId);
-    };
-    hightlights();
-  }, [props.extension.options]);
-
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
-    if (!props.node.attrs.redirect_uri) {
-      event.preventDefault();
-    }
+type Props = NodeViewProps & {
+  node: NodeViewProps["node"] & {
+    attrs: TMentionComponentAttributes;
   };
+};
 
+export const MentionNodeView = (props: Props) => {
+  const {
+    extension,
+    node: { attrs },
+  } = props;
   return (
     <NodeViewWrapper className="mention-component inline w-fit">
-      <a
-        href={props.node.attrs.redirect_uri || "#"}
-        target="_blank"
-        className={cn("mention rounded bg-custom-primary-100/20 px-1 py-0.5 font-medium text-custom-primary-100", {
-          "bg-yellow-500/20 text-yellow-500": highlightsState
-            ? highlightsState.includes(props.node.attrs.entity_identifier)
-            : false,
-          "cursor-pointer": !props.extension.options.readonly,
-        })}
-      >
-        @{props.node.attrs.label}
-      </a>
+      {(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/core/extensions/mentions/mentions-list-dropdown.tsx b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
new file mode 100644
index 000000000..4f09ed2ae
--- /dev/null
+++ b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Editor } from "@tiptap/react";
+import { v4 as uuidv4 } from "uuid";
+// plane utils
+import { cn } from "@plane/utils";
+// helpers
+import { DROPDOWN_NAVIGATION_KEYS, getNextValidIndex } from "@/helpers/tippy";
+// types
+import { TMentionHandler, TMentionSection, TMentionSuggestion } from "@/types";
+
+export type MentionsListDropdownProps = {
+  command: (item: TMentionSuggestion) => void;
+  query: string;
+  editor: Editor;
+} & Pick<TMentionHandler, "searchCallback">;
+
+export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps, ref) => {
+  const { command, query, searchCallback } = props;
+  // states
+  const [sections, setSections] = useState<TMentionSection[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState({
+    section: 0,
+    item: 0,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+  // refs
+  const commandListContainer = 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;
+      event.preventDefault();
+
+      if (event.key === "Enter") {
+        selectItem(selectedIndex.section, selectedIndex.item);
+        return;
+      }
+
+      const newIndex = getNextValidIndex({
+        event,
+        sections,
+        selectedIndex,
+      });
+      setSelectedIndex(newIndex);
+    },
+  }));
+
+  // initialize the select index to 0 by default
+  useEffect(() => {
+    setSelectedIndex({
+      section: 0,
+      item: 0,
+    });
+  }, [sections]);
+
+  // fetch mention sections based on query
+  useEffect(() => {
+    const fetchSuggestions = async () => {
+      setIsLoading(true);
+      try {
+        const sectionsResponse = await searchCallback?.(query);
+        setSections(sectionsResponse);
+      } catch (error) {
+        console.error("Failed to fetch suggestions:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchSuggestions();
+  }, [query, searchCallback]);
+
+  // scroll to the dropdown item when navigating via keyboard
+  useLayoutEffect(() => {
+    const container = commandListContainer?.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]);
+
+  return (
+    <div
+      ref={commandListContainer}
+      className="z-10 max-h-[90vh] w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 shadow-custom-shadow-rg space-y-2"
+    >
+      {isLoading ? (
+        <div className="text-center text-sm text-custom-text-400">Loading...</div>
+      ) : sections.length ? (
+        sections.map((section, sectionIndex) => (
+          <div key={section.key} className="space-y-2">
+            {section.title && <h6 className="text-xs font-semibold text-custom-text-300">{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 items-center gap-2 w-full rounded px-1 py-1.5 text-xs text-left truncate text-custom-text-200",
+                    {
+                      "bg-custom-background-80": isSelected,
+                    }
+                  )}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    selectItem(sectionIndex, itemIndex);
+                  }}
+                  onMouseEnter={() =>
+                    setSelectedIndex({
+                      section: sectionIndex,
+                      item: itemIndex,
+                    })
+                  }
+                >
+                  <span className="size-5 grid place-items-center flex-shrink-0">{item.icon}</span>
+                  {item.subTitle && (
+                    <h5 className="whitespace-nowrap text-xs text-custom-text-300 flex-shrink-0">{item.subTitle}</h5>
+                  )}
+                  <p className="flex-grow truncate">{item.title}</p>
+                </button>
+              );
+            })}
+          </div>
+        ))
+      ) : (
+        <div className="text-center text-sm text-custom-text-400">No results</div>
+      )}
+    </div>
+  );
+});
+
+MentionsListDropdown.displayName = "MentionsListDropdown";
diff --git a/packages/editor/src/core/extensions/mentions/mentions-list.tsx b/packages/editor/src/core/extensions/mentions/mentions-list.tsx
deleted file mode 100644
index 279567a20..000000000
--- a/packages/editor/src/core/extensions/mentions/mentions-list.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-"use client";
-
-import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
-import { Editor } from "@tiptap/react";
-import { v4 as uuidv4 } from "uuid";
-// ui
-import { Avatar } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common";
-// types
-import { IMentionSuggestion } from "@/types";
-
-interface MentionListProps {
-  command: (item: {
-    id: string;
-    label: string;
-    entity_name: string;
-    entity_identifier: string;
-    target: string;
-    redirect_uri: string;
-  }) => void;
-  query: string;
-  editor: Editor;
-  mentionSuggestions: () => Promise<IMentionSuggestion[]>;
-}
-
-export const MentionList = forwardRef((props: MentionListProps, ref) => {
-  const { query, mentionSuggestions } = props;
-  const [items, setItems] = useState<IMentionSuggestion[]>([]);
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    const fetchSuggestions = async () => {
-      setIsLoading(true);
-      try {
-        const suggestions = await mentionSuggestions();
-        const mappedSuggestions: IMentionSuggestion[] = suggestions.map((suggestion): IMentionSuggestion => {
-          const transactionId = uuidv4();
-          return {
-            ...suggestion,
-            id: transactionId,
-          };
-        });
-
-        const filteredSuggestions = mappedSuggestions.filter((suggestion) =>
-          suggestion.title.toLowerCase().startsWith(query.toLowerCase())
-        );
-
-        setItems(filteredSuggestions);
-      } catch (error) {
-        console.error("Failed to fetch suggestions:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchSuggestions();
-  }, [query, mentionSuggestions]);
-
-  const selectItem = (index: number) => {
-    try {
-      const item = items[index];
-
-      if (item) {
-        props.command({
-          id: item.id,
-          label: item.title,
-          entity_identifier: item.entity_identifier,
-          entity_name: item.entity_name,
-          target: "users",
-          redirect_uri: item.redirect_uri,
-        });
-      }
-    } catch (error) {
-      console.error("Error selecting item:", error);
-    }
-  };
-
-  const commandListContainer = useRef<HTMLDivElement>(null);
-
-  useLayoutEffect(() => {
-    const container = commandListContainer?.current;
-
-    const item = container?.children[selectedIndex] as HTMLElement;
-
-    if (item && container) updateScrollView(container, item);
-  }, [selectedIndex]);
-
-  const updateScrollView = (container: HTMLElement, item: HTMLElement) => {
-    const containerHeight = container.offsetHeight;
-    const itemHeight = item ? item.offsetHeight : 0;
-
-    const top = item.offsetTop;
-    const bottom = top + itemHeight;
-
-    if (top < container.scrollTop) {
-      container.scrollTop -= container.scrollTop - top + 5;
-    } else if (bottom > containerHeight + container.scrollTop) {
-      container.scrollTop += bottom - containerHeight - container.scrollTop + 5;
-    }
-  };
-  const upHandler = () => {
-    setSelectedIndex((selectedIndex + items.length - 1) % items.length);
-  };
-
-  const downHandler = () => {
-    setSelectedIndex((selectedIndex + 1) % items.length);
-  };
-
-  const enterHandler = () => {
-    selectItem(selectedIndex);
-  };
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [items]);
-
-  useImperativeHandle(ref, () => ({
-    onKeyDown: ({ event }: { event: KeyboardEvent }) => {
-      if (event.key === "ArrowUp") {
-        upHandler();
-        return true;
-      }
-
-      if (event.key === "ArrowDown") {
-        downHandler();
-        return true;
-      }
-
-      if (event.key === "Enter") {
-        enterHandler();
-        return true;
-      }
-
-      return false;
-    },
-  }));
-
-  return (
-    <div
-      ref={commandListContainer}
-      className="mentions max-h-48 min-w-[12rem] rounded-md bg-custom-background-100 border-[0.5px] border-custom-border-300 px-2 py-2.5 text-xs shadow-custom-shadow-rg overflow-y-scroll"
-    >
-      {isLoading ? (
-        <div className="text-center text-custom-text-400">Loading...</div>
-      ) : items.length ? (
-        items.map((item, index) => (
-          <button
-            key={item.id}
-            type="button"
-            className={cn(
-              "w-full text-left flex cursor-pointer items-center gap-2 rounded px-1 py-1.5 hover:bg-custom-background-80 text-custom-text-200",
-              {
-                "bg-custom-background-80": index === selectedIndex,
-              }
-            )}
-            onClick={() => selectItem(index)}
-          >
-            <Avatar name={item?.title} src={item?.avatar} />
-            <span className="flex-grow truncate">{item.title}</span>
-          </button>
-        ))
-      ) : (
-        <div className="text-center text-custom-text-400">No results</div>
-      )}
-    </div>
-  );
-});
-
-MentionList.displayName = "MentionList";
diff --git a/packages/editor/src/core/extensions/mentions/mentions-without-props.tsx b/packages/editor/src/core/extensions/mentions/mentions-without-props.tsx
deleted file mode 100644
index 8fa8ef695..000000000
--- a/packages/editor/src/core/extensions/mentions/mentions-without-props.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { mergeAttributes } from "@tiptap/core";
-import Mention, { MentionOptions } from "@tiptap/extension-mention";
-// types
-import { IMentionHighlight } from "@/types";
-
-interface CustomMentionOptions extends MentionOptions {
-  mentionHighlights: () => Promise<IMentionHighlight[]>;
-  readonly?: boolean;
-}
-
-export const CustomMentionWithoutProps = () =>
-  Mention.extend<CustomMentionOptions>({
-    addAttributes() {
-      return {
-        id: {
-          default: null,
-        },
-        label: {
-          default: null,
-        },
-        target: {
-          default: null,
-        },
-        self: {
-          default: false,
-        },
-        redirect_uri: {
-          default: "/",
-        },
-        entity_identifier: {
-          default: null,
-        },
-        entity_name: {
-          default: null,
-        },
-      };
-    },
-    parseHTML() {
-      return [
-        {
-          tag: "mention-component",
-        },
-      ];
-    },
-    renderHTML({ HTMLAttributes }) {
-      return ["mention-component", mergeAttributes(HTMLAttributes)];
-    },
-    HTMLAttributes: {
-      class: "mention",
-    },
-  });
diff --git a/packages/editor/src/core/extensions/mentions/types.ts b/packages/editor/src/core/extensions/mentions/types.ts
new file mode 100644
index 000000000..5252aa8b8
--- /dev/null
+++ b/packages/editor/src/core/extensions/mentions/types.ts
@@ -0,0 +1,14 @@
+// plane types
+import { 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/core/extensions/mentions/utils.ts b/packages/editor/src/core/extensions/mentions/utils.ts
new file mode 100644
index 000000000..e8e7ed4b7
--- /dev/null
+++ b/packages/editor/src/core/extensions/mentions/utils.ts
@@ -0,0 +1,72 @@
+import { Editor } from "@tiptap/core";
+import { SuggestionOptions } from "@tiptap/suggestion";
+import { ReactRenderer } from "@tiptap/react";
+import tippy from "tippy.js";
+// helpers
+import { CommandListInstance } from "@/helpers/tippy";
+// types
+import { TMentionHandler } from "@/types";
+// local components
+import { MentionsListDropdown, MentionsListDropdownProps } from "./mentions-list-dropdown";
+
+export const renderMentionsDropdown =
+  (props: Pick<TMentionHandler, "searchCallback">): SuggestionOptions["render"] =>
+  // @ts-expect-error - Tiptap types are incorrect
+  () => {
+    const { searchCallback } = props;
+    let component: ReactRenderer<CommandListInstance, MentionsListDropdownProps> | null = null;
+    let popup: any | null = null;
+
+    return {
+      onStart: (props: { editor: Editor; clientRect: DOMRect }) => {
+        if (!searchCallback) return;
+        if (!props.clientRect) return;
+        component = new ReactRenderer<CommandListInstance, MentionsListDropdownProps>(MentionsListDropdown, {
+          props: {
+            ...props,
+            searchCallback,
+          },
+          editor: props.editor,
+        });
+        props.editor.storage.mentionsOpen = true;
+        // @ts-expect-error - Tippy types are incorrect
+        popup = tippy("body", {
+          getReferenceClientRect: props.clientRect,
+          appendTo: () =>
+            document.querySelector(".active-editor") ?? document.querySelector('[id^="editor-container"]'),
+          content: component.element,
+          showOnCreate: true,
+          interactive: true,
+          trigger: "manual",
+          placement: "bottom-start",
+        });
+      },
+      onUpdate: (props: { editor: Editor; clientRect: DOMRect }) => {
+        component?.updateProps(props);
+        popup?.[0]?.setProps({
+          getReferenceClientRect: props.clientRect,
+        });
+      },
+      onKeyDown: (props: { event: KeyboardEvent }) => {
+        if (props.event.key === "Escape") {
+          popup?.[0]?.hide();
+          return true;
+        }
+
+        const navigationKeys = ["ArrowUp", "ArrowDown", "Enter"];
+
+        if (navigationKeys.includes(props.event.key)) {
+          props.event?.stopPropagation();
+          if (component?.ref?.onKeyDown(props)) {
+            return true;
+          }
+        }
+        return false;
+      },
+      onExit: (props: { editor: Editor; event: KeyboardEvent }) => {
+        props.editor.storage.mentionsOpen = false;
+        popup?.[0]?.destroy();
+        component?.destroy();
+      },
+    };
+  };
diff --git a/packages/editor/src/core/extensions/read-only-extensions.tsx b/packages/editor/src/core/extensions/read-only-extensions.tsx
index 4debda019..8711b2cb3 100644
--- a/packages/editor/src/core/extensions/read-only-extensions.tsx
+++ b/packages/editor/src/core/extensions/read-only-extensions.tsx
@@ -19,8 +19,7 @@ import {
   TableCell,
   TableRow,
   Table,
-  CustomMention,
-  HeadingListExtension,
+  CustomMentionExtension,
   CustomReadOnlyImageExtension,
   CustomTextAlignExtension,
   CustomCalloutReadOnlyExtension,
@@ -28,23 +27,22 @@ import {
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
-// types
-import { IMentionHighlight, TExtensions, TFileHandler } from "@/types";
 // plane editor extensions
 import { CoreReadOnlyEditorAdditionalExtensions } from "@/plane-editor/extensions";
+// types
+import { TExtensions, TReadOnlyFileHandler, TReadOnlyMentionHandler } from "@/types";
 
 type Props = {
   disabledExtensions: TExtensions[];
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
-  mentionConfig: {
-    mentionHighlights?: () => Promise<IMentionHighlight[]>;
-  };
+  fileHandler: TReadOnlyFileHandler;
+  mentionHandler: TReadOnlyMentionHandler;
 };
 
 export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
-  const { disabledExtensions, fileHandler, mentionConfig } = props;
+  const { disabledExtensions, fileHandler, mentionHandler } = props;
 
   return [
+    // @ts-expect-error tiptap types are incorrect
     StarterKit.configure({
       bulletList: {
         HTMLAttributes: {
@@ -96,16 +94,12 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
       },
     }),
     CustomTypographyExtension,
-    ReadOnlyImageExtension({
-      getAssetSrc: fileHandler.getAssetSrc,
-    }).configure({
+    ReadOnlyImageExtension(fileHandler).configure({
       HTMLAttributes: {
         class: "rounded-md",
       },
     }),
-    CustomReadOnlyImageExtension({
-      getAssetSrc: fileHandler.getAssetSrc,
-    }),
+    CustomReadOnlyImageExtension(fileHandler),
     TiptapUnderline,
     TextStyle,
     TaskList.configure({
@@ -133,13 +127,9 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
     TableHeader,
     TableCell,
     TableRow,
-    CustomMention({
-      mentionHighlights: mentionConfig.mentionHighlights,
-      readonly: true,
-    }),
+    CustomMentionExtension(mentionHandler),
     CharacterCount,
     CustomColorExtension,
-    HeadingListExtension,
     CustomTextAlignExtension,
     CustomCalloutReadOnlyExtension,
     ...CoreReadOnlyEditorAdditionalExtensions({
diff --git a/packages/editor/src/core/extensions/side-menu.tsx b/packages/editor/src/core/extensions/side-menu.tsx
index 5ab6fbdf5..5f11286b5 100644
--- a/packages/editor/src/core/extensions/side-menu.tsx
+++ b/packages/editor/src/core/extensions/side-menu.tsx
@@ -42,7 +42,7 @@ export const SideMenuExtension = (props: Props) => {
             ai: aiEnabled,
             dragDrop: dragDropEnabled,
           },
-          scrollThreshold: { up: 200, down: 100 },
+          scrollThreshold: { up: 200, down: 150 },
         }),
       ];
     },
@@ -134,10 +134,6 @@ const SideMenu = (options: SideMenuPluginProps) => {
             rect.left -= 8;
           }
 
-          if (node.parentElement?.matches("td") || node.parentElement?.matches("th")) {
-            rect.left += 8;
-          }
-
           rect.width = options.dragHandleWidth;
 
           if (!editorSideMenu) return;
diff --git a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
index 1efb72901..034d3d897 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
@@ -39,11 +39,11 @@ import {
   setText,
 } from "@/helpers/editor-commands";
 // types
-import { CommandProps, ISlashCommandItem, TExtensions, TSlashCommandSectionKeys } from "@/types";
+import { CommandProps, ISlashCommandItem, TSlashCommandSectionKeys } from "@/types";
 // plane editor extensions
 import { coreEditorAdditionalSlashCommandOptions } from "@/plane-editor/extensions";
 // local types
-import { TSlashCommandAdditionalOption } from "./root";
+import { TExtensionProps } from "./root";
 
 export type TSlashCommandSection = {
   key: TSlashCommandSectionKeys;
@@ -51,13 +51,8 @@ export type TSlashCommandSection = {
   items: ISlashCommandItem[];
 };
 
-type TArgs = {
-  additionalOptions?: TSlashCommandAdditionalOption[];
-  disabledExtensions: TExtensions[];
-};
-
 export const getSlashCommandFilteredSections =
-  (args: TArgs) =>
+  (args: TExtensionProps) =>
   ({ query }: { query: string }): TSlashCommandSection[] => {
     const { additionalOptions, disabledExtensions } = args;
     const SLASH_COMMAND_SECTIONS: TSlashCommandSection[] = [
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
index 3a03c3b6a..bd8ce2aec 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx
@@ -1,5 +1,5 @@
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // types
 import { ISlashCommandItem } from "@/types";
 
diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
index 93b0ce2ea..4ecd3f8fa 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
@@ -1,14 +1,18 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { Editor } from "@tiptap/core";
+// helpers
+import { DROPDOWN_NAVIGATION_KEYS, getNextValidIndex } from "@/helpers/tippy";
 // components
 import { TSlashCommandSection } from "./command-items-list";
 import { CommandMenuItem } from "./command-menu-item";
 
 export type SlashCommandsMenuProps = {
+  editor: Editor;
   items: TSlashCommandSection[];
   command: any;
 };
 
-export const SlashCommandsMenu = (props: SlashCommandsMenuProps) => {
+export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref) => {
   const { items: sections, command } = props;
   // states
   const [selectedIndex, setSelectedIndex] = useState({
@@ -41,12 +45,12 @@ export const SlashCommandsMenu = (props: SlashCommandsMenuProps) => {
           if (nextItem < 0) {
             nextSection = currentSection - 1;
             if (nextSection < 0) nextSection = sections.length - 1;
-            nextItem = sections[nextSection]?.items.length - 1;
+            nextItem = sections[nextSection]?.items?.length - 1;
           }
         }
         if (e.key === "ArrowDown") {
           nextItem = currentItem + 1;
-          if (nextItem >= sections[currentSection].items.length) {
+          if (nextItem >= sections[currentSection]?.items?.length) {
             nextSection = currentSection + 1;
             if (nextSection >= sections.length) nextSection = 0;
             nextItem = 0;
@@ -84,7 +88,26 @@ export const SlashCommandsMenu = (props: SlashCommandsMenuProps) => {
     item?.scrollIntoView({ block: "nearest" });
   }, [sections, selectedIndex]);
 
-  const areSearchResultsEmpty = sections.map((s) => s.items.length).reduce((acc, curr) => acc + curr, 0) === 0;
+  useImperativeHandle(ref, () => ({
+    onKeyDown: ({ event }: { event: KeyboardEvent }) => {
+      if (!DROPDOWN_NAVIGATION_KEYS.includes(event.key)) return;
+      event.preventDefault();
+
+      if (event.key === "Enter") {
+        selectItem(selectedIndex.section, selectedIndex.item);
+        return;
+      }
+
+      const newIndex = getNextValidIndex({
+        event,
+        sections,
+        selectedIndex,
+      });
+      setSelectedIndex(newIndex);
+    },
+  }));
+
+  const areSearchResultsEmpty = sections.map((s) => s.items?.length).reduce((acc, curr) => acc + curr, 0) === 0;
 
   if (areSearchResultsEmpty) return null;
 
@@ -98,7 +121,7 @@ export const SlashCommandsMenu = (props: SlashCommandsMenuProps) => {
         <div key={section.key} className="space-y-2">
           {section.title && <h6 className="text-xs font-semibold text-custom-text-300">{section.title}</h6>}
           <div>
-            {section.items.map((item, itemIndex) => (
+            {section.items?.map((item, itemIndex) => (
               <CommandMenuItem
                 key={item.key}
                 isSelected={sectionIndex === selectedIndex.section && itemIndex === selectedIndex.item}
@@ -122,4 +145,6 @@ export const SlashCommandsMenu = (props: SlashCommandsMenuProps) => {
       ))}
     </div>
   );
-};
+});
+
+SlashCommandsMenu.displayName = "SlashCommandsMenu";
diff --git a/packages/editor/src/core/extensions/slash-commands/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx
index 62c353f92..c0c078a2d 100644
--- a/packages/editor/src/core/extensions/slash-commands/root.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/root.tsx
@@ -2,6 +2,8 @@ import { Editor, Range, Extension } from "@tiptap/core";
 import { ReactRenderer } from "@tiptap/react";
 import Suggestion, { SuggestionOptions } from "@tiptap/suggestion";
 import tippy from "tippy.js";
+// helpers
+import { CommandListInstance } from "@/helpers/tippy";
 // types
 import { ISlashCommandItem, TEditorCommands, TExtensions, TSlashCommandSectionKeys } from "@/types";
 // components
@@ -55,22 +57,19 @@ const Command = Extension.create<SlashCommandOptions>({
   },
 });
 
-interface CommandListInstance {
-  onKeyDown: (props: { event: KeyboardEvent }) => boolean;
-}
-
 const renderItems = () => {
   let component: ReactRenderer<CommandListInstance, SlashCommandsMenuProps> | null = null;
   let popup: any | null = null;
   return {
     onStart: (props: { editor: Editor; clientRect?: (() => DOMRect | null) | null }) => {
-      component = new ReactRenderer(SlashCommandsMenu, {
+      component = new ReactRenderer<CommandListInstance, SlashCommandsMenuProps>(SlashCommandsMenu, {
         props,
         editor: props.editor,
       });
 
       const tippyContainer =
         document.querySelector(".active-editor") ?? document.querySelector('[id^="editor-container"]');
+      // @ts-expect-error - Tippy types are incorrect
       popup = tippy("body", {
         getReferenceClientRect: props.clientRect,
         appendTo: tippyContainer,
@@ -91,10 +90,8 @@ const renderItems = () => {
     onKeyDown: (props: { event: KeyboardEvent }) => {
       if (props.event.key === "Escape") {
         popup?.[0].hide();
-
         return true;
       }
-
       if (component?.ref?.onKeyDown(props)) {
         return true;
       }
@@ -107,9 +104,9 @@ const renderItems = () => {
   };
 };
 
-type TExtensionProps = {
+export type TExtensionProps = {
   additionalOptions?: TSlashCommandAdditionalOption[];
-  disabledExtensions: TExtensions[];
+  disabledExtensions?: TExtensions[];
 };
 
 export const SlashCommands = (props: TExtensionProps) =>
diff --git a/packages/editor/src/core/extensions/table/table/table.ts b/packages/editor/src/core/extensions/table/table/table.ts
index 981788f54..fd775d211 100644
--- a/packages/editor/src/core/extensions/table/table/table.ts
+++ b/packages/editor/src/core/extensions/table/table/table.ts
@@ -39,7 +39,12 @@ export interface TableOptions {
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     table: {
-      insertTable: (options?: { rows?: number; cols?: number; withHeaderRow?: boolean }) => ReturnType;
+      insertTable: (options?: {
+        rows?: number;
+        cols?: number;
+        withHeaderRow?: boolean;
+        columnWidth?: number;
+      }) => ReturnType;
       addColumnBefore: () => ReturnType;
       addColumnAfter: () => ReturnType;
       deleteColumn: () => ReturnType;
@@ -108,9 +113,9 @@ export const Table = Node.create({
   addCommands() {
     return {
       insertTable:
-        ({ rows = 3, cols = 3, withHeaderRow = false } = {}) =>
+        ({ rows = 3, cols = 3, withHeaderRow = false, columnWidth = 150 } = {}) =>
         ({ tr, dispatch, editor }) => {
-          const node = createTable(editor.schema, rows, cols, withHeaderRow);
+          const node = createTable(editor.schema, rows, cols, withHeaderRow, undefined, columnWidth);
           if (dispatch) {
             const offset = tr.selection.anchor + 1;
 
diff --git a/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts b/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts
index 684a6d344..50fb376c0 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/create-cell.ts
@@ -2,11 +2,12 @@ import { Fragment, Node as ProsemirrorNode, NodeType } from "@tiptap/pm/model";
 
 export function createCell(
   cellType: NodeType,
-  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
+  attrs?: Record<string, any>
 ): ProsemirrorNode | null | undefined {
   if (cellContent) {
-    return cellType.createChecked(null, cellContent);
+    return cellType.createChecked(attrs, cellContent);
   }
 
-  return cellType.createAndFill();
+  return cellType.createAndFill(attrs);
 }
diff --git a/packages/editor/src/core/extensions/table/table/utilities/create-table.ts b/packages/editor/src/core/extensions/table/table/utilities/create-table.ts
index 0c05cff77..5e9c4ba24 100644
--- a/packages/editor/src/core/extensions/table/table/utilities/create-table.ts
+++ b/packages/editor/src/core/extensions/table/table/utilities/create-table.ts
@@ -8,21 +8,22 @@ export function createTable(
   rowsCount: number,
   colsCount: number,
   withHeaderRow: boolean,
-  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>
+  cellContent?: Fragment | ProsemirrorNode | Array<ProsemirrorNode>,
+  columnWidth: number = 100
 ): ProsemirrorNode {
   const types = getTableNodeTypes(schema);
   const headerCells: ProsemirrorNode[] = [];
   const cells: ProsemirrorNode[] = [];
 
   for (let index = 0; index < colsCount; index += 1) {
-    const cell = createCell(types.cell, cellContent);
+    const cell = createCell(types.cell, cellContent, { colwidth: [columnWidth] });
 
     if (cell) {
       cells.push(cell);
     }
 
     if (withHeaderRow) {
-      const headerCell = createCell(types.header_cell, cellContent);
+      const headerCell = createCell(types.header_cell, cellContent, { colwidth: [columnWidth] });
 
       if (headerCell) {
         headerCells.push(headerCell);
diff --git a/packages/editor/src/core/extensions/typography/index.ts b/packages/editor/src/core/extensions/typography/index.ts
index e9d48b415..6b736953b 100644
--- a/packages/editor/src/core/extensions/typography/index.ts
+++ b/packages/editor/src/core/extensions/typography/index.ts
@@ -1,4 +1,4 @@
-import { Extension } from "@tiptap/core";
+import { Extension, InputRule } from "@tiptap/core";
 import {
   TypographyOptions,
   emDash,
@@ -26,7 +26,7 @@ export const CustomTypographyExtension = Extension.create<TypographyOptions>({
   name: "typography",
 
   addInputRules() {
-    const rules = [];
+    const rules: InputRule[] = [];
 
     if (this.options.emDash !== false) {
       rules.push(emDash(this.options.emDash));
diff --git a/packages/editor/src/core/helpers/common.ts b/packages/editor/src/core/helpers/common.ts
index 0fb32310d..8638d2c15 100644
--- a/packages/editor/src/core/helpers/common.ts
+++ b/packages/editor/src/core/helpers/common.ts
@@ -1,6 +1,6 @@
 import { EditorState, Selection } from "@tiptap/pm/state";
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+// plane utils
+import { cn } from "@plane/utils";
 
 interface EditorClassNames {
   noBorder?: boolean;
@@ -18,10 +18,6 @@ export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassNam
     containerClassName
   );
 
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
 // Helper function to find the parent node of a specific type
 export function findParentNodeOfType(selection: Selection, typeName: string) {
   let depth = selection.$anchor.depth;
diff --git a/packages/editor/src/core/helpers/editor-commands.ts b/packages/editor/src/core/helpers/editor-commands.ts
index ec593d536..71072f097 100644
--- a/packages/editor/src/core/helpers/editor-commands.ts
+++ b/packages/editor/src/core/helpers/editor-commands.ts
@@ -13,41 +13,51 @@ export const setText = (editor: Editor, range?: Range) => {
 
 export const toggleHeadingOne = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 1 }).run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleHeading({ level: 1 }).run();
 };
 
 export const toggleHeadingTwo = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 2 }).run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleHeading({ level: 2 }).run();
 };
 
 export const toggleHeadingThree = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 3 }).run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleHeading({ level: 3 }).run();
 };
 
 export const toggleHeadingFour = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 4 }).run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleHeading({ level: 4 }).run();
 };
 
 export const toggleHeadingFive = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 5 }).run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleHeading({ level: 5 }).run();
 };
 
 export const toggleHeadingSix = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).setNode("heading", { level: 6 }).run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleHeading({ level: 6 }).run();
 };
 
 export const toggleBold = (editor: Editor, range?: Range) => {
+  // @ts-expect-error tiptap types are incorrect
   if (range) editor.chain().focus().deleteRange(range).toggleBold().run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleBold().run();
 };
 
 export const toggleItalic = (editor: Editor, range?: Range) => {
+  // @ts-expect-error tiptap types are incorrect
   if (range) editor.chain().focus().deleteRange(range).toggleItalic().run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleItalic().run();
 };
 
@@ -86,12 +96,16 @@ export const toggleCodeBlock = (editor: Editor, range?: Range) => {
 };
 
 export const toggleOrderedList = (editor: Editor, range?: Range) => {
+  // @ts-expect-error tiptap types are incorrect
   if (range) editor.chain().focus().deleteRange(range).toggleOrderedList().run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleOrderedList().run();
 };
 
 export const toggleBulletList = (editor: Editor, range?: Range) => {
+  // @ts-expect-error tiptap types are incorrect
   if (range) editor.chain().focus().deleteRange(range).toggleBulletList().run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleBulletList().run();
 };
 
@@ -101,7 +115,9 @@ export const toggleTaskList = (editor: Editor, range?: Range) => {
 };
 
 export const toggleStrike = (editor: Editor, range?: Range) => {
+  // @ts-expect-error tiptap types are incorrect
   if (range) editor.chain().focus().deleteRange(range).toggleStrike().run();
+  // @ts-expect-error tiptap types are incorrect
   else editor.chain().focus().toggleStrike().run();
 };
 
@@ -122,8 +138,9 @@ export const insertTableCommand = (editor: Editor, range?: Range) => {
       }
     }
   }
-  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();
+  if (range)
+    editor.chain().focus().deleteRange(range).clearNodes().insertTable({ rows: 3, cols: 3, columnWidth: 150 }).run();
+  else editor.chain().focus().clearNodes().insertTable({ rows: 3, cols: 3, columnWidth: 150 }).run();
 };
 
 export const insertImage = ({
diff --git a/packages/editor/src/core/helpers/insert-content-at-cursor-position.ts b/packages/editor/src/core/helpers/insert-content-at-cursor-position.ts
index eefe69e3e..fb226b23f 100644
--- a/packages/editor/src/core/helpers/insert-content-at-cursor-position.ts
+++ b/packages/editor/src/core/helpers/insert-content-at-cursor-position.ts
@@ -1,27 +1,21 @@
-import { MutableRefObject } from "react";
-import { Selection } from "@tiptap/pm/state";
 import { Editor } from "@tiptap/react";
 
-export const insertContentAtSavedSelection = (
-  editorRef: MutableRefObject<Editor | null>,
-  content: string,
-  savedSelection: Selection
-) => {
-  if (!editorRef.current || editorRef.current.isDestroyed) {
+export const insertContentAtSavedSelection = (editor: Editor, content: string) => {
+  if (!editor || editor.isDestroyed) {
     console.error("Editor reference is not available or has been destroyed.");
     return;
   }
 
-  if (!savedSelection) {
+  if (!editor.state.selection) {
     console.error("Saved selection is invalid.");
     return;
   }
 
-  const docSize = editorRef.current.state.doc.content.size;
-  const safePosition = Math.max(0, Math.min(savedSelection.anchor, docSize));
+  const docSize = editor.state.doc.content.size;
+  const safePosition = Math.max(0, Math.min(editor.state.selection.anchor, docSize));
 
   try {
-    editorRef.current.chain().focus().insertContentAt(safePosition, content).run();
+    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/core/helpers/tippy.ts b/packages/editor/src/core/helpers/tippy.ts
new file mode 100644
index 000000000..c254bd450
--- /dev/null
+++ b/packages/editor/src/core/helpers/tippy.ts
@@ -0,0 +1,58 @@
+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/core/helpers/yjs-utils.ts b/packages/editor/src/core/helpers/yjs-utils.ts
new file mode 100644
index 000000000..dce75fd1f
--- /dev/null
+++ b/packages/editor/src/core/helpers/yjs-utils.ts
@@ -0,0 +1,142 @@
+import { getSchema } from "@tiptap/core";
+import { generateHTML, generateJSON } from "@tiptap/html";
+import { prosemirrorJSONToYDoc, yXmlFragmentToProseMirrorRootNode } from "y-prosemirror";
+import * as Y from "yjs";
+// extensions
+import {
+  CoreEditorExtensionsWithoutProps,
+  DocumentEditorExtensionsWithoutProps,
+} from "@/extensions/core-without-props";
+
+// editor extension configs
+const RICH_TEXT_EDITOR_EXTENSIONS = CoreEditorExtensionsWithoutProps;
+const DOCUMENT_EDITOR_EXTENSIONS = [...CoreEditorExtensionsWithoutProps, ...DocumentEditorExtensionsWithoutProps];
+// editor schemas
+// @ts-expect-error tiptap types are incorrect
+const richTextEditorSchema = getSchema(RICH_TEXT_EDITOR_EXTENSIONS);
+// @ts-expect-error tiptap types are incorrect
+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 {ArrayBuffer}
+ */
+export const convertBase64StringToBinaryData = (document: string): 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
+  // @ts-expect-error tiptap types are incorrect
+  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;
+};
+
+/**
+ * @description this function generates the binary equivalent of html content for the document editor
+ * @param {string} descriptionHTML
+ * @returns {Uint8Array}
+ */
+export const getBinaryDataFromDocumentEditorHTMLString = (descriptionHTML: string): Uint8Array => {
+  // convert HTML to JSON
+  // @ts-expect-error tiptap types are incorrect
+  const contentJSON = generateJSON(descriptionHTML ?? "<p></p>", DOCUMENT_EDITOR_EXTENSIONS);
+  // convert JSON to Y.Doc format
+  const transformedData = prosemirrorJSONToYDoc(documentEditorSchema, contentJSON, "default");
+  // 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
+  // @ts-expect-error tiptap types are incorrect
+  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
+): {
+  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, documentEditorSchema).toJSON();
+  // convert to HTML
+  // @ts-expect-error tiptap types are incorrect
+  const contentHTML = generateHTML(contentJSON, DOCUMENT_EDITOR_EXTENSIONS);
+
+  return {
+    contentBinaryEncoded: base64Data,
+    contentJSON,
+    contentHTML,
+  };
+};
diff --git a/packages/editor/src/core/helpers/yjs.ts b/packages/editor/src/core/helpers/yjs.ts
deleted file mode 100644
index ffd936710..000000000
--- a/packages/editor/src/core/helpers/yjs.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as Y from "yjs";
-
-/**
- * @description apply updates to a doc and return the updated doc in base64(binary) format
- * @param {Uint8Array} document
- * @param {Uint8Array} updates
- * @returns {string} base64(binary) form of the updated doc
- */
-export const applyUpdates = (document: Uint8Array, updates: Uint8Array): Uint8Array => {
-  const yDoc = new Y.Doc();
-  Y.applyUpdate(yDoc, document);
-  Y.applyUpdate(yDoc, updates);
-
-  const encodedDoc = Y.encodeStateAsUpdate(yDoc);
-  return encodedDoc;
-};
diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
index b3c7d6cfc..4abf7d6d1 100644
--- a/packages/editor/src/core/hooks/use-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@@ -15,6 +15,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   const {
     onTransaction,
     disabledExtensions,
+    editable,
     editorClassName,
     editorProps = {},
     embedHandler,
@@ -75,7 +76,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   const editor = useEditor({
     disabledExtensions,
     id,
-    onTransaction,
+    editable,
     editorProps,
     editorClassName,
     enableHistory: false,
@@ -97,9 +98,10 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
       }),
     ],
     fileHandler,
-    handleEditorReady,
     forwardedRef,
+    handleEditorReady,
     mentionHandler,
+    onTransaction,
     placeholder,
     provider,
     tabIndex,
diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts
index 15fbd19d5..16df9151c 100644
--- a/packages/editor/src/core/hooks/use-editor.ts
+++ b/packages/editor/src/core/hooks/use-editor.ts
@@ -1,12 +1,11 @@
-import { useImperativeHandle, useRef, MutableRefObject, useState, useEffect } from "react";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { DOMSerializer } from "@tiptap/pm/model";
-import { Selection } from "@tiptap/pm/state";
 import { EditorProps } from "@tiptap/pm/view";
-import { useEditor as useTiptapEditor, Editor } from "@tiptap/react";
+import { useEditor as useTiptapEditor, Extensions } from "@tiptap/react";
+import { useImperativeHandle, MutableRefObject, useEffect } from "react";
 import * as Y from "yjs";
 // components
-import { EditorMenuItem, getEditorMenuItems } from "@/components/menus";
+import { getEditorMenuItems } from "@/components/menus";
 // extensions
 import { CoreEditorExtensions } from "@/extensions";
 // helpers
@@ -19,28 +18,25 @@ import { CoreEditorProps } from "@/props";
 import type {
   TDocumentEventsServer,
   EditorRefApi,
-  IMentionHighlight,
-  IMentionSuggestion,
   TEditorCommands,
   TFileHandler,
   TExtensions,
+  TMentionHandler,
 } from "@/types";
 
 export interface CustomEditorProps {
+  editable: boolean;
   editorClassName: string;
   editorProps?: EditorProps;
   enableHistory: boolean;
   disabledExtensions: TExtensions[];
-  extensions?: any;
+  extensions?: Extensions;
   fileHandler: TFileHandler;
   forwardedRef?: MutableRefObject<EditorRefApi | null>;
   handleEditorReady?: (value: boolean) => void;
   id?: string;
   initialValue?: string;
-  mentionHandler: {
-    highlights: () => Promise<IMentionHighlight[]>;
-    suggestions?: () => Promise<IMentionSuggestion[]>;
-  };
+  mentionHandler: TMentionHandler;
   onChange?: (json: object, html: string) => void;
   onTransaction?: () => void;
   autofocus?: boolean;
@@ -55,6 +51,7 @@ export interface CustomEditorProps {
 export const useEditor = (props: CustomEditorProps) => {
   const {
     disabledExtensions,
+    editable = true,
     editorClassName,
     editorProps = {},
     enableHistory,
@@ -73,61 +70,53 @@ export const useEditor = (props: CustomEditorProps) => {
     provider,
     autofocus = false,
   } = props;
-  // states
 
-  const [savedSelection, setSavedSelection] = useState<Selection | null>(null);
-  // refs
-  const editorRef: MutableRefObject<Editor | null> = useRef(null);
-  const savedSelectionRef = useRef(savedSelection);
-  const editor = useTiptapEditor({
-    autofocus,
-    editorProps: {
-      ...CoreEditorProps({
-        editorClassName,
-      }),
-      ...editorProps,
+  const editor = useTiptapEditor(
+    {
+      editable,
+      immediatelyRender: false,
+      shouldRerenderOnTransaction: false,
+      autofocus,
+      editorProps: {
+        ...CoreEditorProps({
+          editorClassName,
+        }),
+        ...editorProps,
+      },
+      extensions: [
+        ...CoreEditorExtensions({
+          editable,
+          disabledExtensions,
+          enableHistory,
+          fileHandler,
+          mentionHandler,
+          placeholder,
+          tabIndex,
+        }),
+        ...extensions,
+      ],
+      content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
+      onCreate: () => handleEditorReady?.(true),
+      onTransaction: () => {
+        onTransaction?.();
+      },
+      onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
+      onDestroy: () => handleEditorReady?.(false),
     },
-    extensions: [
-      ...CoreEditorExtensions({
-        disabledExtensions,
-        enableHistory,
-        fileHandler,
-        mentionConfig: {
-          mentionSuggestions: mentionHandler.suggestions ?? (() => Promise.resolve<IMentionSuggestion[]>([])),
-          mentionHighlights: mentionHandler.highlights,
-        },
-        placeholder,
-        tabIndex,
-      }),
-      ...extensions,
-    ],
-    content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
-    onCreate: () => handleEditorReady?.(true),
-    onTransaction: ({ editor }) => {
-      setSavedSelection(editor.state.selection);
-      onTransaction?.();
-    },
-    onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
-    onDestroy: () => handleEditorReady?.(false),
-  });
-
-  // Update the ref whenever savedSelection changes
-  useEffect(() => {
-    savedSelectionRef.current = savedSelection;
-  }, [savedSelection]);
+    [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 || value === undefined) return;
+    if (value == null) return;
     if (editor && !editor.isDestroyed && !editor.storage.imageComponent.uploadInProgress) {
       try {
         editor.commands.setContent(value, false, { preserveWhitespace: "full" });
-        const currentSavedSelection = savedSelectionRef.current;
-        if (currentSavedSelection) {
+        if (editor.state.selection) {
           const docLength = editor.state.doc.content.size;
-          const relativePosition = Math.min(currentSavedSelection.from, docLength - 1);
+          const relativePosition = Math.min(editor.state.selection.from, docLength - 1);
           editor.commands.setTextSelection(relativePosition);
         }
       } catch (error) {
@@ -136,49 +125,50 @@ export const useEditor = (props: CustomEditorProps) => {
     }
   }, [editor, value, id]);
 
+  // update assets upload status
+  useEffect(() => {
+    if (!editor) return;
+    const assetsUploadStatus = fileHandler.assetsUploadStatus;
+    editor.commands.updateAssetsUploadStatus(assetsUploadStatus);
+  }, [editor, fileHandler.assetsUploadStatus]);
+
   useImperativeHandle(
     forwardedRef,
     () => ({
-      blur: () => editorRef.current?.commands.blur(),
+      blur: () => editor?.commands.blur(),
       scrollToNodeViaDOMCoordinates(behavior?: ScrollBehavior, pos?: number) {
-        const resolvedPos = pos ?? savedSelection?.from;
-        if (!editorRef.current || !resolvedPos) return;
-        scrollToNodeViaDOMCoordinates(editorRef.current, resolvedPos, behavior);
+        const resolvedPos = pos ?? editor?.state.selection.from;
+        if (!editor || !resolvedPos) return;
+        scrollToNodeViaDOMCoordinates(editor, resolvedPos, behavior);
       },
-      getCurrentCursorPosition: () => savedSelection?.from,
+      getCurrentCursorPosition: () => editor?.state.selection.from,
       clearEditor: (emitUpdate = false) => {
-        editorRef.current?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
+        editor?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
       },
       setEditorValue: (content: string) => {
-        editorRef.current?.commands.setContent(content, false, { preserveWhitespace: "full" });
+        editor?.commands.setContent(content, false, { preserveWhitespace: "full" });
       },
       setEditorValueAtCursorPosition: (content: string) => {
-        if (savedSelection) {
-          insertContentAtSavedSelection(editorRef, content, savedSelection);
+        if (editor?.state.selection) {
+          insertContentAtSavedSelection(editor, content);
         }
       },
       executeMenuItemCommand: (props) => {
         const { itemKey } = props;
-        const editorItems = getEditorMenuItems(editorRef.current);
+        const editorItems = getEditorMenuItems(editor);
 
         const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
 
         const item = getEditorMenuItem(itemKey);
         if (item) {
-          if (item.key === "image") {
-            (item as EditorMenuItem<"image">).command({
-              savedSelection: savedSelectionRef.current,
-            });
-          } else {
-            item.command(props);
-          }
+          item.command(props);
         } else {
           console.warn(`No command found for item: ${itemKey}`);
         }
       },
       isMenuItemActive: (props) => {
         const { itemKey } = props;
-        const editorItems = getEditorMenuItems(editorRef.current);
+        const editorItems = getEditorMenuItems(editor);
 
         const getEditorMenuItem = (itemKey: TEditorCommands) => editorItems.find((item) => item.key === itemKey);
         const item = getEditorMenuItem(itemKey);
@@ -188,20 +178,20 @@ export const useEditor = (props: CustomEditorProps) => {
       },
       onHeadingChange: (callback: (headings: IMarking[]) => void) => {
         // Subscribe to update event emitted from headers extension
-        editorRef.current?.on("update", () => {
-          callback(editorRef.current?.storage.headingList.headings);
+        editor?.on("update", () => {
+          callback(editor?.storage.headingList.headings);
         });
         // Return a function to unsubscribe to the continuous transactions of
         // the editor on unmounting the component that has subscribed to this
         // method
         return () => {
-          editorRef.current?.off("update");
+          editor?.off("update");
         };
       },
-      getHeadings: () => editorRef?.current?.storage.headingList.headings,
+      getHeadings: () => editor?.storage.headingList.headings,
       onStateChange: (callback: () => void) => {
         // Subscribe to editor state changes
-        editorRef.current?.on("transaction", () => {
+        editor?.on("transaction", () => {
           callback();
         });
 
@@ -209,17 +199,17 @@ export const useEditor = (props: CustomEditorProps) => {
         // the editor on unmounting the component that has subscribed to this
         // method
         return () => {
-          editorRef.current?.off("transaction");
+          editor?.off("transaction");
         };
       },
       getMarkDown: (): string => {
-        const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
+        const markdownOutput = editor?.storage.markdown.getMarkdown();
         return markdownOutput;
       },
       getDocument: () => {
         const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
-        const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
-        const documentJSON = editorRef.current?.getJSON() ?? null;
+        const documentHTML = editor?.getHTML() ?? "<p></p>";
+        const documentJSON = editor?.getJSON() ?? null;
 
         return {
           binary: documentBinary,
@@ -228,19 +218,19 @@ export const useEditor = (props: CustomEditorProps) => {
         };
       },
       scrollSummary: (marking: IMarking): void => {
-        if (!editorRef.current) return;
-        scrollSummary(editorRef.current, marking);
+        if (!editor) return;
+        scrollSummary(editor, marking);
       },
-      isEditorReadyToDiscard: () => editorRef.current?.storage.imageComponent.uploadInProgress === false,
+      isEditorReadyToDiscard: () => editor?.storage.imageComponent.uploadInProgress === false,
       setFocusAtPosition: (position: number) => {
-        if (!editorRef.current || editorRef.current.isDestroyed) {
+        if (!editor || editor.isDestroyed) {
           console.error("Editor reference is not available or has been destroyed.");
           return;
         }
         try {
-          const docSize = editorRef.current.state.doc.content.size;
+          const docSize = editor.state.doc.content.size;
           const safePosition = Math.max(0, Math.min(position, docSize));
-          editorRef.current
+          editor
             .chain()
             .insertContentAt(safePosition, [{ type: "paragraph" }])
             .focus()
@@ -250,17 +240,17 @@ export const useEditor = (props: CustomEditorProps) => {
         }
       },
       getSelectedText: () => {
-        if (!editorRef.current) return null;
+        if (!editor) return null;
 
-        const { state } = editorRef.current;
+        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 && editorRef.current) {
-            const serializer = DOMSerializer.fromSchema(editorRef.current?.schema);
+          if (parent === state.doc && editor) {
+            const serializer = DOMSerializer.fromSchema(editor.schema);
             const dom = serializer.serializeNode(node);
             const tempDiv = document.createElement("div");
             tempDiv.appendChild(dom);
@@ -271,28 +261,21 @@ export const useEditor = (props: CustomEditorProps) => {
         return selection;
       },
       insertText: (contentHTML, insertOnNextLine) => {
-        if (!editorRef.current) return;
-        // get selection
-        const { from, to, empty } = editorRef.current.state.selection;
+        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
-          editorRef.current
-            .chain()
-            .focus()
-            .setTextSelection(to)
-            .insertContent("<br />")
-            .insertContent(contentHTML)
-            .run();
+          editor.chain().focus().setTextSelection(to).insertContent("<br />").insertContent(contentHTML).run();
         } else {
           // replace selected text with the content provided
-          editorRef.current.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
+          editor.chain().focus().deleteRange({ from, to }).insertContent(contentHTML).run();
         }
       },
       getDocumentInfo: () => ({
-        characters: editorRef?.current?.storage?.characterCount?.characters?.() ?? 0,
-        paragraphs: getParagraphCount(editorRef?.current?.state),
-        words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
+        characters: editor?.storage?.characterCount?.characters?.() ?? 0,
+        paragraphs: getParagraphCount(editor?.state),
+        words: editor?.storage?.characterCount?.words?.() ?? 0,
       }),
       setProviderDocument: (value) => {
         const document = provider?.document;
@@ -302,16 +285,12 @@ export const useEditor = (props: CustomEditorProps) => {
       emitRealTimeUpdate: (message: TDocumentEventsServer) => provider?.sendStateless(message),
       listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
     }),
-    [editorRef, savedSelection]
+    [editor]
   );
 
   if (!editor) {
     return null;
   }
 
-  // the editorRef is used to access the editor instance from outside the hook
-  // and should only be used after editor is initialized
-  editorRef.current = editor;
-
   return editor;
 };
diff --git a/packages/editor/src/core/hooks/use-file-upload.ts b/packages/editor/src/core/hooks/use-file-upload.ts
index f5f930f29..7d3dc7eae 100644
--- a/packages/editor/src/core/hooks/use-file-upload.ts
+++ b/packages/editor/src/core/hooks/use-file-upload.ts
@@ -6,6 +6,7 @@ import { insertImagesSafely } from "@/extensions/drop";
 import { isFileValid } from "@/plugins/image";
 
 type TUploaderArgs = {
+  blockId: string;
   editor: Editor;
   loadImageFromFileSystem: (file: string) => void;
   maxFileSize: number;
@@ -13,7 +14,7 @@ type TUploaderArgs = {
 };
 
 export const useUploader = (args: TUploaderArgs) => {
-  const { editor, loadImageFromFileSystem, maxFileSize, onUpload } = args;
+  const { blockId, editor, loadImageFromFileSystem, maxFileSize, onUpload } = args;
   // states
   const [uploading, setUploading] = useState(false);
 
@@ -49,7 +50,7 @@ export const useUploader = (args: TUploaderArgs) => {
         reader.readAsDataURL(fileWithTrimmedName);
         // @ts-expect-error - TODO: fix typings, and don't remove await from
         // here for now
-        const url: string = await editor?.commands.uploadImage(fileWithTrimmedName);
+        const url: string = await editor?.commands.uploadImage(blockId, fileWithTrimmedName);
 
         if (!url) {
           throw new Error("Something went wrong while uploading the image");
@@ -105,7 +106,7 @@ export const useDropZone = (args: TDropzoneArgs) => {
     async (e: DragEvent<HTMLDivElement>) => {
       e.preventDefault();
       setDraggedInside(false);
-      if (e.dataTransfer.files.length === 0) {
+      if (e.dataTransfer.files.length === 0 || !editor.isEditable) {
         return;
       }
       const filesList = e.dataTransfer.files;
diff --git a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
deleted file mode 100644
index 01ca19b81..000000000
--- a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { useEffect, useMemo, useState } from "react";
-import { HocuspocusProvider } from "@hocuspocus/provider";
-import Collaboration from "@tiptap/extension-collaboration";
-import { IndexeddbPersistence } from "y-indexeddb";
-// extensions
-import { HeadingListExtension } from "@/extensions";
-// hooks
-import { useReadOnlyEditor } from "@/hooks/use-read-only-editor";
-// types
-import { TReadOnlyCollaborativeEditorProps } from "@/types";
-
-export const useReadOnlyCollaborativeEditor = (props: TReadOnlyCollaborativeEditorProps) => {
-  const {
-    disabledExtensions,
-    editorClassName,
-    editorProps = {},
-    extensions,
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    id,
-    mentionHandler,
-    realtimeConfig,
-    serverHandler,
-    user,
-  } = props;
-  // states
-  const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
-  const [hasServerSynced, setHasServerSynced] = useState(false);
-  // initialize Hocuspocus provider
-  const provider = useMemo(
-    () =>
-      new HocuspocusProvider({
-        name: id,
-        url: realtimeConfig.url,
-        token: JSON.stringify(user),
-        parameters: realtimeConfig.queryParams,
-        onAuthenticationFailed: () => {
-          serverHandler?.onServerError?.();
-          setHasServerConnectionFailed(true);
-        },
-        onConnect: () => serverHandler?.onConnect?.(),
-        onClose: (data) => {
-          if (data.event.code === 1006) {
-            serverHandler?.onServerError?.();
-            setHasServerConnectionFailed(true);
-          }
-        },
-        onSynced: () => setHasServerSynced(true),
-      }),
-    [id, realtimeConfig, serverHandler, user]
-  );
-
-  // indexed db integration for offline support
-  const localProvider = useMemo(
-    () => (id ? new IndexeddbPersistence(id, provider.document) : undefined),
-    [id, provider]
-  );
-
-  // destroy and disconnect connection on unmount
-  useEffect(
-    () => () => {
-      provider.destroy();
-      localProvider?.destroy();
-    },
-    [provider, localProvider]
-  );
-
-  const editor = useReadOnlyEditor({
-    disabledExtensions,
-    editorProps,
-    editorClassName,
-    extensions: [
-      ...(extensions ?? []),
-      HeadingListExtension,
-      Collaboration.configure({
-        document: provider.document,
-      }),
-    ],
-    fileHandler,
-    forwardedRef,
-    handleEditorReady,
-    mentionHandler,
-    provider,
-  });
-
-  return {
-    editor,
-    hasServerConnectionFailed,
-    hasServerSynced,
-  };
-};
diff --git a/packages/editor/src/core/hooks/use-read-only-editor.ts b/packages/editor/src/core/hooks/use-read-only-editor.ts
index 5fb49be5f..6d33c0f8a 100644
--- a/packages/editor/src/core/hooks/use-read-only-editor.ts
+++ b/packages/editor/src/core/hooks/use-read-only-editor.ts
@@ -1,7 +1,7 @@
-import { useImperativeHandle, useRef, MutableRefObject, useEffect } from "react";
 import { HocuspocusProvider } from "@hocuspocus/provider";
 import { EditorProps } from "@tiptap/pm/view";
-import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
+import { useEditor as useTiptapEditor, Extensions } from "@tiptap/react";
+import { useImperativeHandle, MutableRefObject, useEffect } from "react";
 import * as Y from "yjs";
 // extensions
 import { CoreReadOnlyEditorExtensions } from "@/extensions";
@@ -11,26 +11,18 @@ import { IMarking, scrollSummary } from "@/helpers/scroll-to-node";
 // props
 import { CoreReadOnlyEditorProps } from "@/props";
 // types
-import type {
-  EditorReadOnlyRefApi,
-  IMentionHighlight,
-  TExtensions,
-  TDocumentEventsServer,
-  TFileHandler,
-} from "@/types";
+import type { EditorReadOnlyRefApi, TExtensions, TReadOnlyFileHandler, TReadOnlyMentionHandler } from "@/types";
 
 interface CustomReadOnlyEditorProps {
   disabledExtensions: TExtensions[];
   editorClassName: string;
   editorProps?: EditorProps;
-  extensions?: any;
+  extensions?: Extensions;
   forwardedRef?: MutableRefObject<EditorReadOnlyRefApi | null>;
   initialValue?: string;
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   handleEditorReady?: (value: boolean) => void;
-  mentionHandler: {
-    highlights: () => Promise<IMentionHighlight[]>;
-  };
+  mentionHandler: TReadOnlyMentionHandler;
   provider?: HocuspocusProvider;
 }
 
@@ -48,8 +40,10 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
     provider,
   } = props;
 
-  const editor = useCustomEditor({
+  const editor = useTiptapEditor({
     editable: false,
+    immediatelyRender: true,
+    shouldRerenderOnTransaction: false,
     content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",
     editorProps: {
       ...CoreReadOnlyEditorProps({
@@ -63,9 +57,7 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
     extensions: [
       ...CoreReadOnlyEditorExtensions({
         disabledExtensions,
-        mentionConfig: {
-          mentionHighlights: mentionHandler.highlights,
-        },
+        mentionHandler,
         fileHandler,
       }),
       ...extensions,
@@ -81,23 +73,21 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
     if (editor && !editor.isDestroyed) editor?.commands.setContent(initialValue, false, { preserveWhitespace: "full" });
   }, [editor, initialValue]);
 
-  const editorRef: MutableRefObject<Editor | null> = useRef(null);
-
   useImperativeHandle(forwardedRef, () => ({
     clearEditor: (emitUpdate = false) => {
-      editorRef.current?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
+      editor?.chain().setMeta("skipImageDeletion", true).clearContent(emitUpdate).run();
     },
     setEditorValue: (content: string) => {
-      editorRef.current?.commands.setContent(content, false, { preserveWhitespace: "full" });
+      editor?.commands.setContent(content, false, { preserveWhitespace: "full" });
     },
     getMarkDown: (): string => {
-      const markdownOutput = editorRef.current?.storage.markdown.getMarkdown();
+      const markdownOutput = editor?.storage.markdown.getMarkdown();
       return markdownOutput;
     },
     getDocument: () => {
       const documentBinary = provider?.document ? Y.encodeStateAsUpdate(provider?.document) : null;
-      const documentHTML = editorRef.current?.getHTML() ?? "<p></p>";
-      const documentJSON = editorRef.current?.getJSON() ?? null;
+      const documentHTML = editor?.getHTML() ?? "<p></p>";
+      const documentJSON = editor?.getJSON() ?? null;
 
       return {
         binary: documentBinary,
@@ -106,35 +96,19 @@ export const useReadOnlyEditor = (props: CustomReadOnlyEditorProps) => {
       };
     },
     scrollSummary: (marking: IMarking): void => {
-      if (!editorRef.current) return;
-      scrollSummary(editorRef.current, marking);
+      if (!editor) return;
+      scrollSummary(editor, marking);
     },
     getDocumentInfo: () => ({
-      characters: editorRef?.current?.storage?.characterCount?.characters?.() ?? 0,
-      paragraphs: getParagraphCount(editorRef?.current?.state),
-      words: editorRef?.current?.storage?.characterCount?.words?.() ?? 0,
+      characters: editor.storage?.characterCount?.characters?.() ?? 0,
+      paragraphs: getParagraphCount(editor.state),
+      words: editor.storage?.characterCount?.words?.() ?? 0,
     }),
-    onHeadingChange: (callback: (headings: IMarking[]) => void) => {
-      // Subscribe to update event emitted from headers extension
-      editorRef.current?.on("update", () => {
-        callback(editorRef.current?.storage.headingList.headings);
-      });
-      // Return a function to unsubscribe to the continuous transactions of
-      // the editor on unmounting the component that has subscribed to this
-      // method
-      return () => {
-        editorRef.current?.off("update");
-      };
-    },
-    emitRealTimeUpdate: (message: TDocumentEventsServer) => provider?.sendStateless(message),
-    listenToRealTimeUpdate: () => provider && { on: provider.on.bind(provider), off: provider.off.bind(provider) },
-    getHeadings: () => editorRef?.current?.storage.headingList.headings,
   }));
 
   if (!editor) {
     return null;
   }
 
-  editorRef.current = editor;
   return editor;
 };
diff --git a/packages/editor/src/core/plugins/drag-handle.ts b/packages/editor/src/core/plugins/drag-handle.ts
index 1c015dcb0..e71c38b30 100644
--- a/packages/editor/src/core/plugins/drag-handle.ts
+++ b/packages/editor/src/core/plugins/drag-handle.ts
@@ -1,5 +1,5 @@
-import { Fragment, Slice, Node } from "@tiptap/pm/model";
-import { NodeSelection, TextSelection } from "@tiptap/pm/state";
+import { Fragment, Slice, Node, Schema } from "@tiptap/pm/model";
+import { NodeSelection } from "@tiptap/pm/state";
 // @ts-expect-error __serializeForClipboard's is not exported
 import { __serializeForClipboard, EditorView } from "@tiptap/pm/view";
 // extensions
@@ -8,6 +8,29 @@ import { 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:not(:first-child)",
+  ".code-block",
+  "blockquote",
+  "h1, h2, h3, h4, h5, h6",
+  "[data-type=horizontalRule]",
+  ".table-wrapper",
+  ".issue-embed",
+  ".image-component",
+  ".image-upload-component",
+  ".editor-callout-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";
@@ -30,33 +53,53 @@ const createDragHandleElement = (): HTMLElement => {
   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";
+  });
+};
+
+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);
-  const generalSelectors = [
-    "li",
-    "p:not(:first-child)",
-    ".code-block",
-    "blockquote",
-    "h1, h2, h3, h4, h5, h6",
-    "[data-type=horizontalRule]",
-    ".table-wrapper",
-    ".issue-embed",
-    ".image-component",
-    ".image-upload-component",
-    ".editor-callout-component",
-  ].join(", ");
 
   for (const elem of elements) {
+    // Check for table wrapper first
+    if (elem.matches(".table-wrapper")) {
+      return elem;
+    }
+
     if (elem.matches("p:first-child") && elem.parentElement?.matches(".ProseMirror")) {
       return elem;
     }
 
-    // if the element is a <p> tag that is the first child of a td or th
-    if (
-      (elem.matches("td > p:first-child") || elem.matches("th > p:first-child")) &&
-      elem?.textContent?.trim() !== ""
-    ) {
-      return elem; // Return only if p tag is not empty in td or th
+    // Skip table cells
+    if (elem.closest(".table-wrapper")) {
+      continue;
     }
 
     // apply general selector
@@ -85,140 +128,73 @@ const nodePosAtDOMForBlockQuotes = (node: Element, view: EditorView) => {
   })?.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 DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOptions => {
   let listType = "";
-  const handleDragStart = (event: DragEvent, view: EditorView) => {
-    view.focus();
-
-    if (!event.dataTransfer) return;
-
-    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;
-    draggedNodePos = calcNodePos(draggedNodePos, view, node);
-
-    const { from, to } = view.state.selection;
-    const diff = from - to;
-
-    const fromSelectionPos = calcNodePos(from, view, node);
-    let differentNodeSelected = false;
-
-    const nodePos = view.state.doc.resolve(fromSelectionPos);
-
-    // Check if nodePos points to the top level node
-    if (nodePos.node().type.name === "doc") differentNodeSelected = true;
-    else {
-      // TODO FIX ERROR
-      const nodeSelection = NodeSelection.create(view.state.doc, nodePos.before());
-      // Check if the node where the drag event started is part of the current selection
-      differentNodeSelected = !(
-        draggedNodePos + 1 >= nodeSelection.$from.pos && draggedNodePos <= nodeSelection.$to.pos
-      );
-    }
-
-    if (!differentNodeSelected && diff !== 0 && !(view.state.selection instanceof NodeSelection)) {
-      const endSelection = NodeSelection.create(view.state.doc, to - 1);
-      const multiNodeSelection = TextSelection.create(view.state.doc, draggedNodePos, endSelection.$to.pos);
-      view.dispatch(view.state.tr.setSelection(multiNodeSelection));
-    } else {
-      // TODO FIX ERROR
-      const nodeSelection = NodeSelection.create(view.state.doc, draggedNodePos);
-      view.dispatch(view.state.tr.setSelection(nodeSelection));
-    }
-
-    // If the selected node is a list item, we need to save the type of the wrapping list e.g. OL or UL
-    if (view.state.selection instanceof NodeSelection && view.state.selection.node.type.name === "listItem") {
-      listType = node.parentElement!.tagName;
-    }
-
-    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));
-      }
-    }
-
-    const slice = view.state.selection.content();
-    const { dom, text } = __serializeForClipboard(view, slice);
-
-    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 };
-  };
+  let isDragging = false;
+  let lastClientY = 0;
+  let scrollAnimationFrame = null;
+  let isDraggedOutsideWindow: "top" | "bottom" | boolean = false;
+  let isMouseInsideWhileDragging = false;
+  let currentScrollSpeed = 0;
 
   const handleClick = (event: MouseEvent, view: EditorView) => {
-    view.focus();
+    handleNodeSelection(event, view, false, options);
+  };
 
-    const node = nodeDOMAtCoords({
-      x: event.clientX + 50 + options.dragHandleWidth,
-      y: event.clientY,
-    });
+  const handleDragStart = (event: DragEvent, view: EditorView) => {
+    const { listType: listTypeFromDragStart } = handleNodeSelection(event, view, true, options);
+    listType = listTypeFromDragStart;
+    isDragging = true;
+    lastClientY = event.clientY;
+    scroll();
+  };
 
-    if (!(node instanceof Element)) return;
+  const handleDragEnd = <TEvent extends DragEvent | FocusEvent>(event: TEvent, view?: EditorView) => {
+    event.preventDefault();
+    isDragging = false;
+    isMouseInsideWhileDragging = false;
+    if (scrollAnimationFrame) {
+      cancelAnimationFrame(scrollAnimationFrame);
+      scrollAnimationFrame = null;
+    }
 
-    if (node.matches("blockquote")) {
-      let nodePosForBlockQuotes = nodePosAtDOMForBlockQuotes(node, view);
-      if (nodePosForBlockQuotes === null || nodePosForBlockQuotes === undefined) return;
+    view?.dom.classList.remove("dragging");
+  };
 
-      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));
-      }
+  function scroll() {
+    if (!isDragging) {
+      currentScrollSpeed = 0;
       return;
     }
 
-    let nodePos = nodePosAtDOM(node, view, options);
+    const scrollableParent = getScrollParent(dragHandleElement);
+    if (!scrollableParent) return;
 
-    if (nodePos === null || nodePos === undefined) return;
+    const scrollRegionUp = options.scrollThreshold.up;
+    const scrollRegionDown = window.innerHeight - options.scrollThreshold.down;
 
-    // Adjust the nodePos to point to the start of the node, ensuring NodeSelection can be applied
-    nodePos = calcNodePos(nodePos, view, node);
+    let targetScrollAmount = 0;
 
-    // TODO FIX ERROR
-    // Use NodeSelection to select the node at the calculated position
-    const nodeSelection = NodeSelection.create(view.state.doc, nodePos);
+    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;
+    }
 
-    // Dispatch the transaction to update the selection
-    view.dispatch(view.state.tr.setSelection(nodeSelection));
-  };
+    currentScrollSpeed += (targetScrollAmount - currentScrollSpeed) * acceleration;
+
+    if (Math.abs(currentScrollSpeed) > 0.1) {
+      scrollableParent.scrollBy({ top: currentScrollSpeed });
+    }
+
+    scrollAnimationFrame = requestAnimationFrame(scroll);
+  }
 
   let dragHandleElement: HTMLElement | null = null;
   // drag handle view actions
@@ -231,51 +207,46 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp
   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 isScrollable = (node: HTMLElement | SVGElement) => {
-      if (!(node instanceof HTMLElement || node instanceof SVGElement)) {
-        return false;
+    const dragOverHandler = (e: DragEvent) => {
+      e.preventDefault();
+      if (isDragging) {
+        lastClientY = e.clientY;
       }
-      const style = getComputedStyle(node);
-      return ["overflow", "overflow-y"].some((propertyName) => {
-        const value = style.getPropertyValue(propertyName);
-        return value === "auto" || value === "scroll";
-      });
     };
 
-    const getScrollParent = (node: HTMLElement | SVGElement) => {
-      let currentParent = node.parentElement;
-      while (currentParent) {
-        if (isScrollable(currentParent)) {
-          return currentParent;
+    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";
         }
-        currentParent = currentParent.parentElement;
       }
-      return document.scrollingElement || document.documentElement;
     };
 
-    const maxScrollSpeed = 100;
+    const dragEnterHandler = () => {
+      isDraggedOutsideWindow = false;
+    };
 
-    dragHandleElement.addEventListener("drag", (e) => {
-      hideDragHandle();
-      const scrollableParent = getScrollParent(dragHandleElement);
-      if (!scrollableParent) return;
-      const scrollThreshold = options.scrollThreshold;
+    window.addEventListener("dragleave", dragLeaveHandler);
+    window.addEventListener("dragenter", dragEnterHandler);
 
-      if (e.clientY < scrollThreshold.up) {
-        const overflow = scrollThreshold.up - e.clientY;
-        const ratio = Math.min(overflow / scrollThreshold.up, 1);
-        const scrollAmount = -maxScrollSpeed * ratio;
-        scrollableParent.scrollBy({ top: scrollAmount });
-      } else if (window.innerHeight - e.clientY < scrollThreshold.down) {
-        const overflow = e.clientY - (window.innerHeight - scrollThreshold.down);
-        const ratio = Math.min(overflow / scrollThreshold.down, 1);
-        const scrollAmount = maxScrollSpeed * ratio;
-        scrollableParent.scrollBy({ top: scrollAmount });
-      }
-    });
+    document.addEventListener("dragover", dragOverHandler);
+    document.addEventListener("mousemove", mouseMoveHandler);
 
     hideDragHandle();
 
@@ -285,6 +256,15 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp
       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);
       },
     };
   };
@@ -313,29 +293,36 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp
 
       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 === "listItem") {
           isDroppedInsideList = true;
+          dropDepth = i;
           break;
         }
       }
 
-      // If the selected node is a list item and is not dropped inside a list, we need to wrap it inside <ol> tag otherwise ol list items will be transformed into ul list item when dropped
-      if (
-        view.state.selection instanceof NodeSelection &&
-        view.state.selection.node.type.name === "listItem" &&
-        !isDroppedInsideList &&
-        listType == "OL"
-      ) {
-        const text = droppedNode.textContent;
-        if (!text) return;
-        const paragraph = view.state.schema.nodes.paragraph?.createAndFill({}, view.state.schema.text(text));
-        const listItem = view.state.schema.nodes.listItem?.createAndFill({}, paragraph);
+      // Handle nested list items and task items
+      if (droppedNode.type.name === "listItem") {
+        let slice = view.state.selection.content();
+        let newFragment = slice.content;
 
-        const newList = view.state.schema.nodes.orderedList?.createAndFill(null, listItem);
-        const slice = new Slice(Fragment.from(newList), 0, 0);
+        // 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 };
       }
     },
@@ -349,3 +336,90 @@ export const DragHandlePlugin = (options: SideMenuPluginProps): SideMenuHandleOp
     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;
+
+  // Handle blockquotes separately
+  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 (($pos.parent.type.name === "listItem" || $pos.parent.type.name === "taskItem") && $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 (nodeSelection.node.type.name === "listItem" || nodeSelection.node.type.name === "taskItem") {
+      listType = node.closest("ol, ul")?.tagName || "";
+    }
+
+    const slice = view.state.selection.content();
+    const { dom, text } = __serializeForClipboard(view, slice);
+
+    if (event instanceof DragEvent) {
+      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/core/plugins/image/utils/validate-file.ts b/packages/editor/src/core/plugins/image/utils/validate-file.ts
index db88f3f73..703bb2bf0 100644
--- a/packages/editor/src/core/plugins/image/utils/validate-file.ts
+++ b/packages/editor/src/core/plugins/image/utils/validate-file.ts
@@ -1,3 +1,6 @@
+// constants
+import { ACCEPTED_FILE_MIME_TYPES } from "@/constants/config";
+
 type TArgs = {
   file: File;
   maxFileSize: number;
@@ -11,9 +14,8 @@ export const isFileValid = (args: TArgs): boolean => {
     return false;
   }
 
-  const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/webp"];
-  if (!allowedTypes.includes(file.type)) {
-    alert("Invalid file type. Please select a JPEG, JPG, PNG, or WEBP image file.");
+  if (!ACCEPTED_FILE_MIME_TYPES.includes(file.type)) {
+    alert("Invalid file type. Please select a JPEG, JPG, PNG, WEBP or GIF file.");
     return false;
   }
 
diff --git a/packages/editor/src/core/props/props.tsx b/packages/editor/src/core/props/props.tsx
index 4bda3e51a..ee0b9e500 100644
--- a/packages/editor/src/core/props/props.tsx
+++ b/packages/editor/src/core/props/props.tsx
@@ -1,6 +1,6 @@
 import { EditorProps } from "@tiptap/pm/view";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 
 export type TCoreEditorProps = {
   editorClassName: string;
diff --git a/packages/editor/src/core/props/read-only.tsx b/packages/editor/src/core/props/read-only.tsx
index aaa635a50..ea5bf09f3 100644
--- a/packages/editor/src/core/props/read-only.tsx
+++ b/packages/editor/src/core/props/read-only.tsx
@@ -1,6 +1,6 @@
 import { EditorProps } from "@tiptap/pm/view";
-// helpers
-import { cn } from "@/helpers/common";
+// plane utils
+import { cn } from "@plane/utils";
 // props
 import { TCoreEditorProps } from "@/props";
 
diff --git a/packages/editor/src/core/types/collaboration.ts b/packages/editor/src/core/types/collaboration.ts
index 35fbdb996..82e2f81f9 100644
--- a/packages/editor/src/core/types/collaboration.ts
+++ b/packages/editor/src/core/types/collaboration.ts
@@ -6,10 +6,11 @@ import { TEmbedConfig } from "@/plane-editor/types";
 import {
   EditorReadOnlyRefApi,
   EditorRefApi,
-  IMentionHighlight,
-  IMentionSuggestion,
   TExtensions,
   TFileHandler,
+  TMentionHandler,
+  TReadOnlyFileHandler,
+  TReadOnlyMentionHandler,
   TRealtimeConfig,
   TUserDetails,
 } from "@/types";
@@ -21,15 +22,12 @@ export type TServerHandler = {
 
 type TCollaborativeEditorHookProps = {
   disabledExtensions: TExtensions[];
+  editable?: boolean;
   editorClassName: string;
   editorProps?: EditorProps;
   extensions?: Extensions;
   handleEditorReady?: (value: boolean) => void;
   id: string;
-  mentionHandler: {
-    highlights: () => Promise<IMentionHighlight[]>;
-    suggestions?: () => Promise<IMentionSuggestion[]>;
-  };
   realtimeConfig: TRealtimeConfig;
   serverHandler?: TServerHandler;
   user: TUserDetails;
@@ -40,11 +38,13 @@ export type TCollaborativeEditorProps = TCollaborativeEditorHookProps & {
   embedHandler?: TEmbedConfig;
   fileHandler: TFileHandler;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
+  mentionHandler: TMentionHandler;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
   tabIndex?: number;
 };
 
 export type TReadOnlyCollaborativeEditorProps = TCollaborativeEditorHookProps & {
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
+  mentionHandler: TReadOnlyMentionHandler;
 };
diff --git a/packages/editor/src/core/types/config.ts b/packages/editor/src/core/types/config.ts
index 3bb4d1af2..d4d8ca901 100644
--- a/packages/editor/src/core/types/config.ts
+++ b/packages/editor/src/core/types/config.ts
@@ -1,11 +1,15 @@
 import { DeleteImage, RestoreImage, UploadImage } from "@/types";
 
-export type TFileHandler = {
+export type TReadOnlyFileHandler = {
   getAssetSrc: (path: string) => Promise<string>;
+  restore: RestoreImage;
+};
+
+export type TFileHandler = TReadOnlyFileHandler & {
+  assetsUploadStatus: Record<string, number>; // blockId => progress percentage
   cancel: () => void;
   delete: DeleteImage;
   upload: UploadImage;
-  restore: RestoreImage;
   validation: {
     /**
      * @description max file size in bytes
diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts
index e91af8e49..edf696ab8 100644
--- a/packages/editor/src/core/types/editor.ts
+++ b/packages/editor/src/core/types/editor.ts
@@ -1,11 +1,13 @@
-import { JSONContent } from "@tiptap/core";
+import { Extensions, JSONContent } from "@tiptap/core";
 import { Selection } from "@tiptap/pm/state";
+// plane types
+import { TWebhookConnectionQueryParams } from "@plane/types";
+// extension types
+import { TTextAlign } from "@/extensions";
 // helpers
 import { IMarking } from "@/helpers/scroll-to-node";
 // types
 import {
-  IMentionHighlight,
-  IMentionSuggestion,
   TAIHandler,
   TDisplayConfig,
   TDocumentEventEmitter,
@@ -13,9 +15,11 @@ import {
   TEmbedConfig,
   TExtensions,
   TFileHandler,
+  TMentionHandler,
+  TReadOnlyFileHandler,
+  TReadOnlyMentionHandler,
   TServerHandler,
 } from "@/types";
-import { TTextAlign } from "@/extensions";
 
 export type TEditorCommands =
   | "text"
@@ -28,7 +32,7 @@ export type TEditorCommands =
   | "bold"
   | "italic"
   | "underline"
-  | "strikethrough"
+  | "strike"
   | "bulleted-list"
   | "numbered-list"
   | "to-do-list"
@@ -41,12 +45,16 @@ export type TEditorCommands =
   | "text-color"
   | "background-color"
   | "text-align"
-  | "callout";
+  | "callout"
+  | "attachment";
 
 export type TCommandExtraProps = {
   image: {
     savedSelection: Selection | null;
   };
+  attachment: {
+    savedSelection: Selection | null;
+  };
   "text-color": {
     color: string | undefined;
   };
@@ -83,10 +91,6 @@ export type EditorReadOnlyRefApi = {
     paragraphs: number;
     words: number;
   };
-  onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
-  getHeadings: () => IMarking[];
-  emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
-  listenToRealTimeUpdate: () => TDocumentEventEmitter | undefined;
 };
 
 export interface EditorRefApi extends EditorReadOnlyRefApi {
@@ -102,6 +106,10 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
   getSelectedText: () => string | null;
   insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
   setProviderDocument: (value: Uint8Array) => void;
+  onHeadingChange: (callback: (headings: IMarking[]) => void) => () => void;
+  getHeadings: () => IMarking[];
+  emitRealTimeUpdate: (action: TDocumentEventsServer) => void;
+  listenToRealTimeUpdate: () => TDocumentEventEmitter | undefined;
 }
 
 // editor props
@@ -114,10 +122,7 @@ export interface IEditorProps {
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
   id: string;
   initialValue: string;
-  mentionHandler: {
-    highlights: () => Promise<IMentionHighlight[]>;
-    suggestions?: () => Promise<IMentionSuggestion[]>;
-  };
+  mentionHandler: TMentionHandler;
   onChange?: (json: object, html: string) => void;
   onTransaction?: () => void;
   handleEditorReady?: (value: boolean) => void;
@@ -128,10 +133,10 @@ export interface IEditorProps {
   value?: string | null;
 }
 export interface ILiteTextEditor extends IEditorProps {
-  extensions?: any[];
+  extensions?: Extensions;
 }
 export interface IRichTextEditor extends IEditorProps {
-  extensions?: any[];
+  extensions?: Extensions;
   bubbleMenuEnabled?: boolean;
   dragDropEnabled?: boolean;
 }
@@ -139,6 +144,8 @@ export interface IRichTextEditor extends IEditorProps {
 export interface ICollaborativeDocumentEditor
   extends Omit<IEditorProps, "initialValue" | "onChange" | "onEnterKeyPress" | "value"> {
   aiHandler?: TAIHandler;
+  bubbleMenuEnabled?: boolean;
+  editable: boolean;
   embedHandler: TEmbedConfig;
   handleEditorReady?: (value: boolean) => void;
   id: string;
@@ -153,13 +160,11 @@ export interface IReadOnlyEditorProps {
   disabledExtensions: TExtensions[];
   displayConfig?: TDisplayConfig;
   editorClassName?: string;
-  fileHandler: Pick<TFileHandler, "getAssetSrc">;
+  fileHandler: TReadOnlyFileHandler;
   forwardedRef?: React.MutableRefObject<EditorReadOnlyRefApi | null>;
   id: string;
   initialValue: string;
-  mentionHandler: {
-    highlights: () => Promise<IMentionHighlight[]>;
-  };
+  mentionHandler: TReadOnlyMentionHandler;
 }
 
 export type ILiteTextReadOnlyEditor = IReadOnlyEditorProps;
@@ -189,7 +194,5 @@ export type TUserDetails = {
 
 export type TRealtimeConfig = {
   url: string;
-  queryParams: {
-    [key: string]: string;
-  };
+  queryParams: TWebhookConnectionQueryParams;
 };
diff --git a/packages/editor/src/core/types/image.ts b/packages/editor/src/core/types/image.ts
index 5c707bf33..ca6f76fb1 100644
--- a/packages/editor/src/core/types/image.ts
+++ b/packages/editor/src/core/types/image.ts
@@ -2,4 +2,4 @@ export type DeleteImage = (assetUrlWithWorkspaceId: string) => Promise<void>;
 
 export type RestoreImage = (assetUrlWithWorkspaceId: string) => Promise<void>;
 
-export type UploadImage = (file: File) => Promise<string>;
+export type UploadImage = (blockId: string, file: File) => Promise<string>;
diff --git a/packages/editor/src/core/types/index.ts b/packages/editor/src/core/types/index.ts
index 527264d39..e99a74b28 100644
--- a/packages/editor/src/core/types/index.ts
+++ b/packages/editor/src/core/types/index.ts
@@ -5,7 +5,7 @@ export * from "./editor";
 export * from "./embed";
 export * from "./extensions";
 export * from "./image";
-export * from "./mention-suggestion";
+export * from "./mention";
 export * from "./slash-commands-suggestion";
 export * from "@/plane-editor/types";
 export * from "./document-collaborative-events";
diff --git a/packages/editor/src/core/types/mention-suggestion.ts b/packages/editor/src/core/types/mention-suggestion.ts
deleted file mode 100644
index a51bed704..000000000
--- a/packages/editor/src/core/types/mention-suggestion.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type IMentionSuggestion = {
-  id: string;
-  type: string;
-  entity_name: string;
-  entity_identifier: string;
-  avatar: string;
-  title: string;
-  subtitle: string;
-  redirect_uri: string;
-};
-
-export type IMentionHighlight = string;
diff --git a/packages/editor/src/core/types/mention.ts b/packages/editor/src/core/types/mention.ts
new file mode 100644
index 000000000..20f1ec0dc
--- /dev/null
+++ b/packages/editor/src/core/types/mention.ts
@@ -0,0 +1,27 @@
+// plane types
+import { 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 TMentionComponentProps = Pick<TMentionSuggestion, "entity_identifier" | "entity_name">;
+
+export type TReadOnlyMentionHandler = {
+  renderComponent: (props: TMentionComponentProps) => React.ReactNode;
+};
+
+export type TMentionHandler = TReadOnlyMentionHandler & {
+  searchCallback?: (query: string) => Promise<TMentionSection[]>;
+};
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index ed7d91346..a2a9afaf9 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -9,7 +9,6 @@ import "./styles/drag-drop.css";
 // editors
 export {
   CollaborativeDocumentEditorWithRef,
-  CollaborativeDocumentReadOnlyEditorWithRef,
   DocumentReadOnlyEditorWithRef,
   LiteTextEditorWithRef,
   LiteTextReadOnlyEditorWithRef,
@@ -25,7 +24,7 @@ export * from "@/constants/common";
 // helpers
 export * from "@/helpers/common";
 export * from "@/helpers/editor-commands";
-export * from "@/helpers/yjs";
+export * from "@/helpers/yjs-utils";
 export * from "@/extensions/table/table";
 
 // components
diff --git a/packages/editor/src/lib.ts b/packages/editor/src/lib.ts
index e32fa0785..44388a00e 100644
--- a/packages/editor/src/lib.ts
+++ b/packages/editor/src/lib.ts
@@ -1,4 +1,5 @@
 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/styles/editor.css b/packages/editor/src/styles/editor.css
index db60c7cf5..69bb61961 100644
--- a/packages/editor/src/styles/editor.css
+++ b/packages/editor/src/styles/editor.css
@@ -25,7 +25,7 @@
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
-  color: rgb(var(--color-text-400));
+  color: var(--color-placeholder);
   pointer-events: none;
   height: 0;
 }
@@ -34,7 +34,7 @@
 .ProseMirror p.is-empty::before {
   content: attr(data-placeholder);
   float: left;
-  color: rgb(var(--color-text-400));
+  color: var(--color-placeholder);
   pointer-events: none;
   height: 0;
 }
@@ -105,23 +105,27 @@ ul[data-type="taskList"] li > div {
 }
 
 ul[data-type="taskList"] li > label input[type="checkbox"] {
-  border: 1px solid rgba(var(--color-border-300)) !important;
+  border: 1px solid rgba(var(--color-text-100), 0.2) !important;
   outline: none;
   border-radius: 2px;
   transform: scale(1.05);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
-  background-color: rgba(var(--color-background-80)) !important;
+.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
+  background-color: rgba(var(--color-text-100), 0.1);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"][checked] {
+.ProseMirror[contenteditable="false"] input[type="checkbox"] {
+  pointer-events: none;
+}
+
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked {
   background-color: rgba(var(--color-primary-100)) !important;
   border-color: rgba(var(--color-primary-100)) !important;
   color: white !important;
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"][checked]:hover {
+ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
   background-color: rgba(var(--color-primary-300)) !important;
   border-color: rgba(var(--color-primary-300)) !important;
 }
@@ -141,7 +145,7 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   position: relative;
   -webkit-appearance: none;
   appearance: none;
-  background-color: rgb(var(--color-background-100));
+  background-color: transparent;
   margin: 0;
   cursor: pointer;
   width: 0.8rem;
@@ -151,10 +155,6 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   margin-right: 0.2rem;
   margin-top: 0.15rem;
 
-  &:hover {
-    background-color: rgb(var(--color-background-80));
-  }
-
   &:active {
     background-color: rgb(var(--color-background-90));
   }
@@ -174,7 +174,7 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
     clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
   }
 
-  &[checked]::before {
+  &:checked::before {
     transform: scale(1) translate(-50%, -50%);
   }
 }
@@ -192,7 +192,7 @@ ul[data-type="taskList"] li > div {
 
 ul[data-type="taskList"] li[data-checked="true"] {
   & > div > p.editor-paragraph-block {
-    color: rgb(var(--color-text-400));
+    color: var(--color-placeholder);
   }
 
   [data-text-color] {
@@ -408,12 +408,14 @@ p.editor-paragraph-block {
     padding-top: 4px;
   }
 
-  &:last-child {
-    padding-bottom: 4px;
-  }
+  &:not(td p.editor-paragraph-block, th p.editor-paragraph-block) {
+    &:last-child {
+      padding-bottom: 4px;
+    }
 
-  &:not(:last-child) {
-    padding-bottom: 8px;
+    &:not(:last-child) {
+      padding-bottom: 8px;
+    }
   }
 
   font-size: var(--font-size-regular);
diff --git a/packages/editor/src/styles/table.css b/packages/editor/src/styles/table.css
index a0fbbe38f..b4a1ab820 100644
--- a/packages/editor/src/styles/table.css
+++ b/packages/editor/src/styles/table.css
@@ -16,7 +16,7 @@
 .table-wrapper table th {
   min-width: 1em;
   border: 1px solid rgba(var(--color-border-200));
-  padding: 10px 20px;
+  padding: 7px 10px;
   vertical-align: top;
   box-sizing: border-box;
   position: relative;
@@ -48,7 +48,7 @@
 /* table dropdown */
 .table-wrapper table .column-resize-handle {
   position: absolute;
-  right: -2px;
+  right: 0;
   top: 0;
   width: 2px;
   height: 100%;
diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css
index d25500692..66880f156 100644
--- a/packages/editor/src/styles/variables.css
+++ b/packages/editor/src/styles/variables.css
@@ -1,42 +1,6 @@
-: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 */
-}
-
-/* text background colors */
-[data-theme="light"],
-[data-theme="light-contrast"] {
-  --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"],
-[data-theme="dark-contrast"] {
-  --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 */
-
 .editor-container {
+  --color-placeholder: rgba(var(--color-text-100), 0.5);
+
   /* font sizes and line heights */
   &.large-font {
     --font-size-h1: 1.75rem;
diff --git a/packages/editor/tailwind.config.js b/packages/editor/tailwind.config.js
index f32063158..de93a571f 100644
--- a/packages/editor/tailwind.config.js
+++ b/packages/editor/tailwind.config.js
@@ -1,4 +1,4 @@
-const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+const sharedConfig = require("@plane/tailwind-config/tailwind.config.js");
 
 module.exports = {
   // prefix ui lib classes to avoid conflicting with the app
diff --git a/packages/editor/tsconfig.json b/packages/editor/tsconfig.json
index 8edd9106f..58b8640e6 100644
--- a/packages/editor/tsconfig.json
+++ b/packages/editor/tsconfig.json
@@ -12,6 +12,7 @@
       "@/styles/*": ["src/styles/*"],
       "@/plane-editor/*": ["src/ce/*"]
     },
+    "strictNullChecks": true,
     "allowSyntheticDefaultImports": true
   },
   "include": ["src/**/*", "index.d.ts"],
diff --git a/packages/eslint-config/library.js b/packages/eslint-config/library.js
index 283590693..790364230 100644
--- a/packages/eslint-config/library.js
+++ b/packages/eslint-config/library.js
@@ -44,6 +44,30 @@ module.exports = {
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-useless-empty-export": "error",
     "@typescript-eslint/prefer-ts-expect-error": "warn",
+    "import/order": [
+      "warn",
+      {
+        groups: ["builtin", "external", "internal", "parent", "sibling"],
+        pathGroups: [
+          {
+            pattern: "@plane/**",
+            group: "external",
+            position: "after",
+          },
+          {
+            pattern: "@/**",
+            group: "internal",
+            position: "before",
+          },
+        ],
+        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
   },
+
   ignorePatterns: [".*.js", "node_modules/", "dist/"],
 };
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index c07642907..11c33cfa4 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -1,2 +1,3 @@
 export * from "./use-local-storage";
 export * from "./use-outside-click-detector";
+export * from "./use-platform-os";
diff --git a/packages/hooks/src/use-outside-click-detector.tsx b/packages/hooks/src/use-outside-click-detector.tsx
index 9436b51bf..54979f96a 100644
--- a/packages/hooks/src/use-outside-click-detector.tsx
+++ b/packages/hooks/src/use-outside-click-detector.tsx
@@ -8,9 +8,9 @@ export const useOutsideClickDetector = (
   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]");
+      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;
diff --git a/packages/hooks/src/use-platform-os.tsx b/packages/hooks/src/use-platform-os.tsx
new file mode 100644
index 000000000..3f62e1499
--- /dev/null
+++ b/packages/hooks/src/use-platform-os.tsx
@@ -0,0 +1,34 @@
+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/i18n/.eslintignore b/packages/i18n/.eslintignore
new file mode 100644
index 000000000..6019047c3
--- /dev/null
+++ b/packages/i18n/.eslintignore
@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*
\ No newline at end of file
diff --git a/packages/i18n/.eslintrc.js b/packages/i18n/.eslintrc.js
new file mode 100644
index 000000000..558b8f76e
--- /dev/null
+++ b/packages/i18n/.eslintrc.js
@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};
diff --git a/packages/i18n/.prettierignore b/packages/i18n/.prettierignore
new file mode 100644
index 000000000..d5be669c5
--- /dev/null
+++ b/packages/i18n/.prettierignore
@@ -0,0 +1,4 @@
+.turbo
+out/
+dist/
+build/
\ No newline at end of file
diff --git a/packages/i18n/.prettierrc b/packages/i18n/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/packages/i18n/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
new file mode 100644
index 000000000..96b488024
--- /dev/null
+++ b/packages/i18n/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@plane/i18n",
+  "version": "0.24.1",
+  "description": "I18n shared across multiple apps internally",
+  "private": true,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:errors": "eslint src --ext .ts,.tsx --quiet"
+  },
+  "dependencies": {
+    "@plane/utils": "*",
+    "intl-messageformat": "^10.7.11"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@types/node": "^22.5.4",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/packages/i18n/src/constants/index.ts b/packages/i18n/src/constants/index.ts
new file mode 100644
index 000000000..1f0daf2fc
--- /dev/null
+++ b/packages/i18n/src/constants/index.ts
@@ -0,0 +1 @@
+export * from "./language";
diff --git a/packages/i18n/src/constants/language.ts b/packages/i18n/src/constants/language.ts
new file mode 100644
index 000000000..67b8e9d3f
--- /dev/null
+++ b/packages/i18n/src/constants/language.ts
@@ -0,0 +1,13 @@
+import { 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" },
+];
+
+export const STORAGE_KEY = "userLanguage";
diff --git a/packages/i18n/src/context/index.tsx b/packages/i18n/src/context/index.tsx
new file mode 100644
index 000000000..cf8a960fe
--- /dev/null
+++ b/packages/i18n/src/context/index.tsx
@@ -0,0 +1,19 @@
+import { observer } from "mobx-react";
+import React, { createContext } from "react";
+// store
+import { TranslationStore } from "../store";
+
+export const TranslationContext = createContext<TranslationStore | null>(null);
+
+interface TranslationProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * Provides the translation store to the application
+ */
+export const TranslationProvider: React.FC<TranslationProviderProps> = observer(({ children }) => {
+  const [store] = React.useState(() => new TranslationStore());
+
+  return <TranslationContext.Provider value={store}>{children}</TranslationContext.Provider>;
+});
diff --git a/packages/i18n/src/hooks/index.ts b/packages/i18n/src/hooks/index.ts
new file mode 100644
index 000000000..fb4e297e2
--- /dev/null
+++ b/packages/i18n/src/hooks/index.ts
@@ -0,0 +1 @@
+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 000000000..485c437c1
--- /dev/null
+++ b/packages/i18n/src/hooks/use-translation.ts
@@ -0,0 +1,35 @@
+import { useContext } from 'react';
+// context
+import { TranslationContext } from '../context';
+// types
+import { ILanguageOption, TLanguage } from '../types';
+
+export type TTranslationStore = {
+  t: (key: string, params?: Record<string, any>) => string;
+  currentLocale: TLanguage;
+  changeLanguage: (lng: TLanguage) => void;
+  languages: ILanguageOption[];
+};
+
+/**
+ * Provides the translation store to the application
+ * @returns {TTranslationStore}
+ * @returns {(key: string, params?: Record<string, any>) => string} t: method to translate the key with params
+ * @returns {TLanguage} currentLocale - current locale language
+ * @returns {(lng: TLanguage) => void} changeLanguage - method to change the language
+ * @returns {ILanguageOption[]} languages - available languages
+ * @throws {Error} if the TranslationProvider is not used
+ */
+export function useTranslation(): TTranslationStore {
+  const store = useContext(TranslationContext);
+  if (!store) {
+    throw new Error('useTranslation must be used within a TranslationProvider');
+  }
+
+  return {
+    t: store.t.bind(store),
+    currentLocale: store.currentLocale,
+    changeLanguage: (lng: TLanguage) => store.setLanguage(lng),
+    languages: store.availableLanguages,
+  };
+}
diff --git a/packages/i18n/src/index.ts b/packages/i18n/src/index.ts
new file mode 100644
index 000000000..a93747a89
--- /dev/null
+++ b/packages/i18n/src/index.ts
@@ -0,0 +1,4 @@
+export * from "./constants";
+export * from "./context";
+export * from "./hooks";
+export * from "./types";
diff --git a/packages/i18n/src/locales/en/core.json b/packages/i18n/src/locales/en/core.json
new file mode 100644
index 000000000..14207c5a8
--- /dev/null
+++ b/packages/i18n/src/locales/en/core.json
@@ -0,0 +1,171 @@
+{
+  "sidebar": {
+    "projects": "Projects",
+    "pages": "Pages",
+    "new_work_item": "New work item",
+    "home": "Home",
+    "your_work": "Your work",
+    "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"
+  },
+
+  "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": "gets-sets-flys",
+        "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?"
+    },
+    "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."
+        }
+      }
+    }
+  }
+}
diff --git a/packages/i18n/src/locales/en/translations.json b/packages/i18n/src/locales/en/translations.json
new file mode 100644
index 000000000..7c74ff2ee
--- /dev/null
+++ b/packages/i18n/src/locales/en/translations.json
@@ -0,0 +1,2194 @@
+{
+  "submit": "Submit",
+  "cancel": "Cancel",
+  "loading": "Loading",
+  "error": "Error",
+  "success": "Success",
+  "warning": "Warning",
+  "info": "Info",
+  "close": "Close",
+  "yes": "Yes",
+  "no": "No",
+  "ok": "OK",
+  "name": "Name",
+  "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",
+  "appearance": "Appearance",
+  "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.",
+  "theme": "Theme",
+  "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",
+  "workspace": "Workspace",
+  "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_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 5 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 5 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_settings": "Publish settings",
+  "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",
+  "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 as you see fit per project and change frequency from one period to the next.",
+  "modules_description": "Group work into sub-project-like set-ups with their own leads and assignees.",
+  "views_description": "Save sorts, filters, and display options for later or share them.",
+  "pages_description": "Write anything like you write anything.",
+  "intake_description": "Stay in the loop on Work items you are subscribed to. Enable this to get notified.",
+  "time_tracking_description": "Track 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",
+  "discord": "Discord",
+  "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",
+  "priority": "Priority",
+  "none": "None",
+  "urgent": "Urgent",
+  "high": "High",
+  "medium": "Medium",
+  "low": "Low",
+  "members": "Members",
+  "assignee": "Assignee",
+  "assignees": "Assignees",
+  "you": "You",
+  "labels": "Labels",
+  "create_new_label": "Create new label",
+  "start_date": "Start date",
+  "end_date": "End date",
+  "due_date": "Due 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}}",
+
+  "project_view": {
+    "sort_by": {
+      "created_at": "Created at",
+      "updated_at": "Updated at",
+      "name": "Name"
+    }
+  },
+
+  "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"
+      }
+    }
+  },
+
+  "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 items",
+        "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"
+  },
+
+  "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",
+    "states": "States",
+    "state": "State",
+    "state_groups": "State groups",
+    "priority": "Priority",
+    "team_project": "Team project",
+    "project": "Project",
+    "cycle": "Cycle",
+    "cycles": "Cycles",
+    "module": "Module",
+    "modules": "Modules",
+    "labels": "Labels",
+    "assignees": "Assignees",
+    "assignee": "Assignee",
+    "created_by": "Created by",
+    "none": "None",
+    "link": "Link",
+    "estimate": "Estimate",
+    "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",
+    "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",
+    "update_project": "Update project",
+    "identifier_already_exists": "Identifier already exists",
+    "add_more": "Add more",
+    "defaults": "Defaults",
+    "add_label": "Add label",
+    "estimates": "Estimates",
+    "customize_time_range": "Customize time range",
+    "loading": "Loading",
+    "attachments": "Attachments",
+    "property": "Property",
+    "properties": "Properties",
+    "parent": "Parent",
+    "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",
+    "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",
+    "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",
+    "errors": {
+      "default": {
+        "title": "Error!",
+        "message": "Something went wrong. Please try again."
+      },
+      "required": "This field is required",
+      "entity_required": "{entity} is required"
+    },
+    "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",
+    "search": {
+      "label": "Search",
+      "placeholder": "Type to search",
+      "no_matches_found": "No matches found",
+      "no_matching_results": "No matching results"
+    },
+    "actions": {
+      "edit": "Edit",
+      "make_a_copy": "Make a copy",
+      "open_in_new_tab": "Open in new tab",
+      "copy_link": "Copy link",
+      "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"
+    },
+    "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",
+    "yes": "Yes",
+    "no": "No",
+    "please_wait": "Please wait",
+    "enabling": "Enabling",
+    "disabling": "Disabling",
+    "beta": "Beta",
+    "or": "or",
+    "next": "Next",
+    "back": "Back",
+    "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",
+    "label": "Label",
+    "priorities": "Priorities",
+    "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",
+    "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"
+  },
+
+  "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}"
+    }
+  },
+
+  "epic": {
+    "all": "All Epics",
+    "label": "{count, plural, one {Epic} other {Epics}}",
+    "new": "New Epic",
+    "adding": "Adding epic",
+    "create": {
+      "success": "Epic created successfully"
+    },
+    "add": {
+      "press_enter": "Press 'Enter' to add another epic",
+      "label": "Add Epic"
+    },
+    "title": {
+      "label": "Epic Title",
+      "required": "Epic title is required."
+    }
+  },
+
+  "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",
+      "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"
+      },
+      "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."
+      }
+    },
+    "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\nwork 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."
+      }
+    },
+    "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"
+    },
+    "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"
+    },
+    "open_in_full_screen": "Open work item in full screen"
+  },
+
+  "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": "Select label",
+    "create": {
+      "success": "Label created successfully",
+      "failed": "Label creation failed",
+      "already_exists": "Label already exists",
+      "type": "Type to add a new label"
+    }
+  },
+
+  "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"
+    }
+  },
+
+  "view": {
+    "label": "{count, plural, one {View} other {Views}}",
+    "create": {
+      "label": "Create View"
+    },
+    "update": {
+      "label": "Update View"
+    }
+  },
+
+  "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."
+      }
+    }
+  },
+
+  "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"
+    },
+    "empty_state": {
+      "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 work items into Cycles and, if you can, group work items that span more than a cycle into Modules. Check out both on the left nav."
+          }
+        }
+      }
+    }
+  },
+
+  "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}}"
+    },
+    "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."
+      }
+    }
+  },
+
+  "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",
+        "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"
+          }
+        }
+      },
+      "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": {
+        "title": "Billing & Plans",
+        "current_plan": "Current plan",
+        "free_plan": "You are currently using the free plan",
+        "view_plans": "View plans"
+      },
+      "exports": {
+        "title": "Exports",
+        "exporting": "Exporting",
+        "previous_exports": "Previous exports",
+        "export_separate_files": "Export the data into separate files",
+        "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": {
+        "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": {
+        "title": "API Tokens",
+        "add_token": "Add API token",
+        "create_token": "Create token",
+        "never_expires": "Never expires",
+        "generate_token": "Generate token",
+        "generating": "Generating",
+        "delete": {
+          "title": "Delete API 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 API token has been successfully deleted"
+          },
+          "error": {
+            "title": "Error!",
+            "message": "The API token could not be deleted"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "No API 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."
+      }
+    }
+  },
+
+  "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",
+      "appearance": "Appearance",
+      "notifications": "Notifications"
+    },
+    "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."
+      }
+    }
+  },
+
+  "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",
+      "default_assignee": "Default assignee",
+      "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": {
+      "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": {
+      "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": {
+      "title": "Enable estimates for my project",
+      "description": "They help you in communicating complexity and workload of the team."
+    },
+    "automations": {
+      "label": "Automations",
+      "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"
+      }
+    },
+
+    "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"
+      }
+    }
+  },
+
+  "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",
+    "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"
+    },
+    "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_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_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."
+      }
+    }
+  },
+
+  "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."
+      }
+    }
+  },
+
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "No results found"
+      }
+    }
+  },
+
+  "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"
+      }
+    }
+  },
+
+  "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"
+    }
+  },
+
+  "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."
+      }
+    }
+  },
+
+  "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"
+        }
+      }
+    }
+  },
+  "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"
+      }
+    }
+  },
+
+  "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"
+      }
+    }
+  },
+
+  "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"
+  },
+
+  "importer": {
+    "github": {
+      "title": "Github",
+      "description": "Import work items from GitHub repositories and sync them."
+    },
+    "jira": {
+      "title": "Jira",
+      "description": "Import work items and epics from Jira projects and epics."
+    }
+  },
+
+  "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"
+    }
+  },
+  "default_global_view": {
+    "all_issues": "All work items",
+    "assigned": "Assigned",
+    "created": "Created",
+    "subscribed": "Subscribed"
+  },
+
+  "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"
+      }
+    }
+  },
+  "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"
+    }
+  },
+
+  "cycle": {
+    "label": "{count, plural, one {Cycle} other {Cycles}}",
+    "no_cycle": "No cycle"
+  },
+
+  "module": {
+    "label": "{count, plural, one {Module} other {Modules}}",
+    "no_module": "No module"
+  }
+}
diff --git a/packages/i18n/src/locales/es/translations.json b/packages/i18n/src/locales/es/translations.json
new file mode 100644
index 000000000..bc57dba1d
--- /dev/null
+++ b/packages/i18n/src/locales/es/translations.json
@@ -0,0 +1,2364 @@
+{
+  "sidebar": {
+    "projects": "Proyectos",
+    "pages": "Páginas",
+    "new_work_item": "Nuevo elemento de trabajo",
+    "home": "Inicio",
+    "your_work": "Tu trabajo",
+    "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"
+  },
+
+  "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?"
+    },
+    "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."
+        }
+      }
+    }
+  },
+
+  "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",
+  "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",
+  "appearance": "Apariencia",
+  "notifications": "Notificaciones",
+  "connections": "Conexiones",
+  "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 colores de tu interfaz.",
+  "theme": "Tema",
+  "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",
+  "workspace_dashboards": "Paneles de control",
+  "drafts": "Borradores",
+  "projects": "Proyectos",
+  "views": "Vistas",
+  "workspace": "Espacio de trabajo",
+  "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_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 5 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 5 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_settings": "Configuración de publicación",
+  "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",
+  "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 en períodos de tiempo según lo consideres conveniente por proyecto y cambia la frecuencia de un período a otro.",
+  "modules_description": "Agrupa el trabajo en configuraciones similares a subproyectos con sus propios líderes y asignados.",
+  "views_description": "Guarda ordenamientos, filtros y opciones de visualización para más tarde o compártelos.",
+  "pages_description": "Escribe cualquier cosa como escribirías cualquier cosa.",
+  "intake_description": "Mantente al tanto de los elementos de trabajo a los que estás suscrito. Activa esto para recibir notificaciones.",
+  "time_tracking_description": "Rastrea 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",
+  "discord": "Discord",
+  "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",
+  "priority": "Prioridad",
+  "none": "Ninguno",
+  "urgent": "Urgente",
+  "high": "Alta",
+  "medium": "Media",
+  "low": "Baja",
+  "members": "Miembros",
+  "assignee": "Asignado",
+  "assignees": "Asignados",
+  "you": "Tú",
+  "labels": "Etiquetas",
+  "create_new_label": "Crear nueva etiqueta",
+  "start_date": "Fecha de inicio",
+  "end_date": "Fecha de fin",
+  "due_date": "Fecha de vencimiento",
+  "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}}",
+
+  "project_view": {
+    "sort_by": {
+      "created_at": "Creado el",
+      "updated_at": "Actualizado el",
+      "name": "Nombre"
+    }
+  },
+
+  "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"
+      }
+    }
+  },
+
+  "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 los elementos",
+        "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"
+  },
+
+  "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",
+    "states": "Estados",
+    "state": "Estado",
+    "state_groups": "Grupos de estados",
+    "priority": "Prioridad",
+    "team_project": "Proyecto de equipo",
+    "project": "Proyecto",
+    "cycle": "Ciclo",
+    "cycles": "Ciclos",
+    "module": "Módulo",
+    "modules": "Módulos",
+    "labels": "Etiquetas",
+    "assignees": "Asignados",
+    "assignee": "Asignado",
+    "created_by": "Creado por",
+    "none": "Ninguno",
+    "link": "Enlace",
+    "estimate": "Estimación",
+    "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",
+    "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",
+    "update_project": "Actualizar proyecto",
+    "identifier_already_exists": "El identificador ya existe",
+    "add_more": "Agregar más",
+    "defaults": "Valores predeterminados",
+    "add_label": "Agregar etiqueta",
+    "estimates": "Estimaciones",
+    "customize_time_range": "Personalizar rango de tiempo",
+    "loading": "Cargando",
+    "attachments": "Archivos adjuntos",
+    "property": "Propiedad",
+    "properties": "Propiedades",
+    "parent": "Padre",
+    "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",
+      "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",
+    "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",
+    "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",
+    "errors": {
+      "default": {
+        "title": "¡Error!",
+        "message": "Algo salió mal. Por favor, inténtalo de nuevo."
+      },
+      "required": "Este campo es obligatorio",
+      "entity_required": "{entity} es obligatorio"
+    },
+    "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",
+    "search": {
+      "label": "Buscar",
+      "placeholder": "Escribe para buscar",
+      "no_matches_found": "No se encontraron coincidencias",
+      "no_matching_results": "No hay resultados coincidentes"
+    },
+    "actions": {
+      "edit": "Editar",
+      "make_a_copy": "Hacer una copia",
+      "open_in_new_tab": "Abrir en nueva pestaña",
+      "copy_link": "Copiar enlace",
+      "archive": "Archivar",
+      "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"
+    },
+    "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",
+    "yes": "Sí",
+    "no": "No",
+    "please_wait": "Por favor espera",
+    "enabling": "Habilitando",
+    "disabling": "Deshabilitando",
+    "beta": "Beta",
+    "or": "o",
+    "next": "Siguiente",
+    "back": "Atrás",
+    "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",
+    "label": "Etiqueta",
+    "priorities": "Prioridades",
+    "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",
+    "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"
+  },
+
+  "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}"
+    }
+  },
+
+  "epic": {
+    "all": "Todos los Epics",
+    "label": "{count, plural, one {Epic} other {Epics}}",
+    "new": "Nuevo Epic",
+    "adding": "Agregando epic",
+    "create": {
+      "success": "Epic creado correctamente"
+    },
+    "add": {
+      "press_enter": "Presiona 'Enter' para agregar otro epic",
+      "label": "Agregar Epic"
+    },
+    "title": {
+      "label": "Título del Epic",
+      "required": "El título del epic es obligatorio."
+    }
+  },
+
+  "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",
+      "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"
+      },
+      "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."
+      }
+    },
+    "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."
+      }
+    },
+    "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"
+    },
+    "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"
+    },
+    "open_in_full_screen": "Abrir elemento de trabajo en pantalla completa"
+  },
+
+  "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"
+    }
+  },
+
+  "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"
+    }
+  },
+
+  "view": {
+    "label": "{count, plural, one {Vista} other {Vistas}}",
+    "create": {
+      "label": "Crear vista"
+    },
+    "update": {
+      "label": "Actualizar vista"
+    }
+  },
+
+  "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."
+      }
+    }
+  },
+
+  "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"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Rastrea el progreso, cargas de trabajo y asignaciones. Identifica tendencias, elimina bloqueos y mueve el trabajo más rápido",
+        "description": "Observa el alcance versus la demanda, estimaciones y el aumento del alcance. Obtén el 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": "El análisis funciona mejor con Ciclos + Módulos",
+            "description": "Primero, organiza tus elementos de trabajo en Ciclos y, si puedes, agrupa los elementos de trabajo que abarcan más de un ciclo en Módulos. Revisa ambos en la navegación izquierda."
+          }
+        }
+      }
+    }
+  },
+
+  "workspace_projects": {
+    "label": "{count, plural, one {Proyecto} other {Proyectos}}",
+    "create": {
+      "label": "Agregar Proyecto"
+    },
+    "network": {
+      "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}}"
+    },
+    "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í."
+      }
+    }
+  },
+
+  "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",
+        "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"
+          }
+        }
+      },
+      "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": {
+        "title": "Facturación y Planes",
+        "current_plan": "Plan actual",
+        "free_plan": "Actualmente estás usando el plan gratuito",
+        "view_plans": "Ver planes"
+      },
+      "exports": {
+        "title": "Exportaciones",
+        "exporting": "Exportando",
+        "previous_exports": "Exportaciones anteriores",
+        "export_separate_files": "Exportar los datos en archivos separados",
+        "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": {
+        "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": {
+        "title": "Tokens de API",
+        "add_token": "Agregar token de API",
+        "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"
+          }
+        }
+      }
+    },
+    "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."
+      }
+    }
+  },
+
+  "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",
+      "appearance": "Apariencia",
+      "notifications": "Notificaciones"
+    },
+    "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í."
+      }
+    }
+  },
+
+  "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",
+      "default_assignee": "Asignado por defecto",
+      "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": {
+      "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": {
+      "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": {
+      "title": "Habilitar estimaciones para mi proyecto",
+      "description": "Ayudan a comunicar la complejidad y la carga de trabajo del equipo."
+    },
+    "automations": {
+      "label": "Automatizaciones",
+      "auto-archive": {
+        "title": "Auto-archivar elementos de trabajo cerrados",
+        "description": "Plane archivará automáticamente los elementos de trabajo que se hayan completado o cancelado.",
+        "duration": "Auto-archivar elementos de trabajo que están cerrados por"
+      },
+      "auto-close": {
+        "title": "Auto-cerrar elementos de trabajo",
+        "description": "Plane cerrará automáticamente los elementos de trabajo que no se hayan completado o cancelado.",
+        "duration": "Auto-cerrar elementos de trabajo que están inactivos por",
+        "auto_close_status": "Estado de auto-cierre"
+      }
+    },
+
+    "empty_state": {
+      "labels": {
+        "title": "Aún no hay etiquetas",
+        "description": "Crea etiquetas para ayudar a 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 la cantidad de trabajo por elemento de trabajo.",
+        "primary_button": "Agregar sistema de estimación"
+      }
+    }
+  },
+
+  "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",
+    "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"
+    },
+    "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_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_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."
+      }
+    }
+  },
+
+  "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."
+      }
+    }
+  },
+
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "No se encontraron resultados"
+      }
+    }
+  },
+
+  "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"
+      }
+    }
+  },
+
+  "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"
+    }
+  },
+
+  "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."
+      }
+    }
+  },
+
+  "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"
+        }
+      }
+    }
+  },
+  "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"
+      }
+    }
+  },
+
+  "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"
+      }
+    }
+  },
+
+  "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"
+  },
+
+  "importer": {
+    "github": {
+      "title": "GitHub",
+      "description": "Importa elementos de trabajo desde repositorios de GitHub y sincronízalos."
+    },
+    "jira": {
+      "title": "Jira",
+      "description": "Importa elementos de trabajo y epics desde proyectos y epics de Jira."
+    }
+  },
+
+  "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"
+    }
+  },
+  "default_global_view": {
+    "all_issues": "Todos los elementos de trabajo",
+    "assigned": "Asignados",
+    "created": "Creados",
+    "subscribed": "Suscritos"
+  },
+
+  "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"
+      }
+    }
+  },
+  "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"
+    }
+  },
+
+  "cycle": {
+    "label": "{count, plural, one {Ciclo} other {Ciclos}}",
+    "no_cycle": "Sin ciclo"
+  },
+
+  "module": {
+    "label": "{count, plural, one {Módulo} other {Módulos}}",
+    "no_module": "Sin módulo"
+  }
+}
diff --git a/packages/i18n/src/locales/fr/translations.json b/packages/i18n/src/locales/fr/translations.json
new file mode 100644
index 000000000..f258d5381
--- /dev/null
+++ b/packages/i18n/src/locales/fr/translations.json
@@ -0,0 +1,2362 @@
+{
+  "sidebar": {
+    "projects": "Projets",
+    "pages": "Pages",
+    "new_work_item": "Nouvel élément de travail",
+    "home": "Accueil",
+    "your_work": "Votre travail",
+    "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"
+  },
+
+  "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": "obtient-définit-vole",
+        "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é ?"
+    },
+    "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é SMTP, nous ne pourrons pas envoyer de lien de réinitialisation du mot de passe"
+      },
+      "toast": {
+        "success": {
+          "title": "E-mail envoyé",
+          "message": "Vérifiez votre boîte de réception pour 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."
+        }
+      }
+    }
+  },
+
+  "submit": "Soumettre",
+  "cancel": "Annuler",
+  "loading": "Chargement",
+  "error": "Erreur",
+  "success": "Succès",
+  "warning": "Avertissement",
+  "info": "Info",
+  "close": "Fermer",
+  "yes": "Oui",
+  "no": "Non",
+  "ok": "OK",
+  "name": "Nom",
+  "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é",
+  "appearance": "Apparence",
+  "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 plus",
+  "select_or_customize_your_interface_color_scheme": "Sélectionnez ou personnalisez votre schéma de couleurs d'interface.",
+  "theme": "Thème",
+  "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 assignés, 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 de l'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, voyez leur état d'avancement et obtenez une idée de la portée 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": "Voyez 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. Voyez-les tous par cycle en un clic.",
+  "zoom_into_cycles_that_need_attention": "Zoomez sur les cycles qui nécessitent de l'attention.",
+  "zoom_into_cycles_that_need_attention_description": "Examinez l'état de tout cycle qui ne correspond 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 voyez 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",
+  "workspace": "Espace de travail",
+  "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_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 uniquement les éléments de travail dans le projet. Maximum 5 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 5 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 sauf les invités peut rejoindre",
+  "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_settings": "Paramètres de publication",
+  "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",
+  "time_tracking": "Suivi du temps",
+  "work_management": "Gestion 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": "Planifiez le travail comme vous le souhaitez par projet et changez la fréquence d'une période à l'autre.",
+  "modules_description": "Regroupez le travail en configurations de type sous-projet avec leurs propres responsables et assignés.",
+  "views_description": "Enregistrez les tris, filtres et options d'affichage pour plus tard ou partagez-les.",
+  "pages_description": "Écrivez n'importe quoi comme vous écrivez n'importe quoi.",
+  "intake_description": "Restez informé des éléments de travail auxquels vous êtes abonné. Activez ceci pour être notifié.",
+  "time_tracking_description": "Suivez 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",
+  "discord": "Discord",
+  "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 désactivé, vous ne pourrez plus être assigné à 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",
+  "priority": "Priorité",
+  "none": "Aucun",
+  "urgent": "Urgent",
+  "high": "Élevé",
+  "medium": "Moyen",
+  "low": "Faible",
+  "members": "Membres",
+  "assignee": "Assigné",
+  "assignees": "Assignés",
+  "you": "Vous",
+  "labels": "Étiquettes",
+  "create_new_label": "Créer une nouvelle étiquette",
+  "start_date": "Date de début",
+  "end_date": "Date de fin",
+  "due_date": "Date d'échéance",
+  "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 les commandes",
+  "create_work_item": "Créer un élément de travail",
+  "attachments": "Pièces jointes",
+  "declining": "Refus",
+  "declined": "Refusé",
+  "decline": "Refuser",
+  "unassigned": "Non assigné",
+  "work_items": "Éléments de travail",
+  "add_link": "Ajouter un lien",
+  "points": "Points",
+  "no_assignee": "Pas d'assigné",
+  "no_assignees_yet": "Pas encore d'assigné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}}",
+
+  "project_view": {
+    "sort_by": {
+      "created_at": "Créé le",
+      "updated_at": "Mis à jour le",
+      "name": "Nom"
+    }
+  },
+
+  "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é"
+      }
+    }
+  },
+
+  "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 gérez 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 les éléments",
+        "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"
+  },
+
+  "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 souhaitez-vous voir ce lien"
+      }
+    }
+  },
+
+  "common": {
+    "all": "Tout",
+    "states": "États",
+    "state": "État",
+    "state_groups": "Groupes d'états",
+    "priority": "Priorité",
+    "team_project": "Projet d'équipe",
+    "project": "Projet",
+    "cycle": "Cycle",
+    "cycles": "Cycles",
+    "module": "Module",
+    "modules": "Modules",
+    "labels": "Étiquettes",
+    "assignees": "Assignés",
+    "assignee": "Assigné",
+    "created_by": "Créé par",
+    "none": "Aucun",
+    "link": "Lien",
+    "estimate": "Estimation",
+    "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",
+    "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",
+    "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",
+    "estimates": "Estimations",
+    "customize_time_range": "Personnaliser la plage de temps",
+    "loading": "Chargement",
+    "attachments": "Pièces jointes",
+    "property": "Propriété",
+    "properties": "Propriétés",
+    "parent": "Parent",
+    "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",
+      "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",
+    "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",
+    "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",
+    "errors": {
+      "default": {
+        "title": "Erreur !",
+        "message": "Quelque chose s'est mal passé. Veuillez réessayer."
+      },
+      "required": "Ce champ est obligatoire",
+      "entity_required": "{entity} est requis"
+    },
+    "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 souhaitez-vous voir ce lien",
+    "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",
+    "search": {
+      "label": "Rechercher",
+      "placeholder": "Tapez pour rechercher",
+      "no_matches_found": "Aucune correspondance trouvée",
+      "no_matching_results": "Aucun résultat correspondant"
+    },
+    "actions": {
+      "edit": "Modifier",
+      "make_a_copy": "Faire une copie",
+      "open_in_new_tab": "Ouvrir dans un nouvel onglet",
+      "copy_link": "Copier le lien",
+      "archive": "Archiver",
+      "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"
+    },
+    "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",
+    "yes": "Oui",
+    "no": "Non",
+    "please_wait": "Veuillez patienter",
+    "enabling": "Activation",
+    "disabling": "Désactivation",
+    "beta": "Bêta",
+    "or": "ou",
+    "next": "Suivant",
+    "back": "Retour",
+    "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",
+    "label": "Étiquette",
+    "priorities": "Priorités",
+    "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",
+    "members": "Membres",
+    "you": "Vous",
+    "upgrade_cta": {
+      "higher_subscription": "Passer à une abonnement plus élevé",
+      "talk_to_sales": "Parler à la vente"
+    },
+    "category": "Catégorie",
+    "categories": "Catégories",
+    "saving": "Enregistrement",
+    "save_changes": "Enregistrer les modifications",
+    "delete": "Supprimer",
+    "deleting": "Suppression",
+    "pending": "En attente",
+    "invite": "Inviter"
+  },
+
+  "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}"
+    }
+  },
+
+  "epic": {
+    "all": "Tous les Epics",
+    "label": "{count, plural, one {Epic} other {Epics}}",
+    "new": "Nouvel Epic",
+    "adding": "Ajout d'un epic",
+    "create": {
+      "success": "Epic créé avec succès"
+    },
+    "add": {
+      "press_enter": "Appuyez sur 'Entrée' pour ajouter un autre epic",
+      "label": "Ajouter un Epic"
+    },
+    "title": {
+      "label": "Titre de l'Epic",
+      "required": "Le titre de l'Epic est requis."
+    }
+  },
+
+  "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",
+      "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"
+      },
+      "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."
+      }
+    },
+    "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."
+      }
+    },
+    "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"
+    },
+    "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"
+    },
+    "open_in_full_screen": "Ouvrir l'élément de travail en plein écran"
+  },
+
+  "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 télécharger",
+    "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"
+    }
+  },
+
+  "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"
+    }
+  },
+
+  "view": {
+    "label": "{count, plural, one {Vue} other {Vues}}",
+    "create": {
+      "label": "Créer une vue"
+    },
+    "update": {
+      "label": "Mettre à jour la vue"
+    }
+  },
+
+  "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."
+      }
+    }
+  },
+
+  "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 collègues 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 collègues 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 collègues et le nombre d'éléments de travail fermés par eux apparaissent ici."
+    },
+    "tabs": {
+      "scope_and_demand": "Portée et Demande",
+      "custom": "Analytique Personnalisée"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Suivez les progrès, les charges de travail et les allocations. Repérez les tendances, supprimez les blocages et accélérez le travail",
+        "description": "Visualisez la portée par rapport à la demande, les estimations et l'augmentation de la portée. Obtenez les performances par membres de l'équipe et équipes, et assurez-vous que votre projet se déroule dans les délais.",
+        "primary_button": {
+          "text": "Commencez votre premier projet",
+          "comic": {
+            "title": "L'analytique fonctionne mieux avec les Cycles + Modules",
+            "description": "D'abord, planifiez vos éléments de travail dans des Cycles et, si possible, regroupez les éléments de travail qui s'étendent sur plus d'un cycle dans des Modules. Consultez les deux dans la navigation de gauche."
+          }
+        }
+      }
+    }
+  },
+
+  "workspace_projects": {
+    "label": "{count, plural, one {Projet} other {Projets}}",
+    "create": {
+      "label": "Ajouter un Projet"
+    },
+    "network": {
+      "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}}"
+    },
+    "empty_state": {
+      "general": {
+        "title": "Aucun projet actif",
+        "description": "Considérez chaque projet comme le parent d'un travail orienté objectif. Les projets sont l'endroit où vivent les Tâches, les Cycles et les Modules et, avec vos collègues, vous aident à atteindre cet objectif. 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 morceaux traçables avec des éléments de travail. Allons-y !",
+        "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."
+      }
+    }
+  },
+
+  "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",
+        "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"
+          }
+        }
+      },
+      "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": {
+        "title": "Facturation & Plans",
+        "current_plan": "Plan actuel",
+        "free_plan": "Vous utilisez actuellement le plan gratuit",
+        "view_plans": "Voir les plans"
+      },
+      "exports": {
+        "title": "Exportations",
+        "exporting": "Exportation",
+        "previous_exports": "Exportations précédentes",
+        "export_separate_files": "Exporter les données dans des fichiers séparés",
+        "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": {
+        "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": {
+        "title": "Jetons API",
+        "add_token": "Ajouter un jeton API",
+        "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é"
+          }
+        }
+      }
+    },
+    "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."
+      }
+    }
+  },
+
+  "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é",
+      "appearance": "Apparence",
+      "notifications": "Notifications"
+    },
+    "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."
+      }
+    }
+  },
+
+  "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",
+      "default_assignee": "Assigné par défaut",
+      "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 collaborateur"
+      }
+    },
+    "states": {
+      "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": {
+      "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": {
+      "title": "Activer les estimations pour mon projet",
+      "description": "Elles vous aident à communiquer la complexité et la charge de travail de l'équipe."
+    },
+    "automations": {
+      "label": "Automatisations",
+      "auto-archive": {
+        "title": "Archiver automatiquement les éléments de travail fermés",
+        "description": "Plane archivera automatiquement les éléments de travail qui ont été terminés ou annulés.",
+        "duration": "Archiver automatiquement les éléments de travail qui sont 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é terminés ou annulés.",
+        "duration": "Fermer automatiquement les éléments de travail inactifs depuis",
+        "auto_close_status": "Statut de fermeture automatique"
+      }
+    },
+
+    "empty_state": {
+      "labels": {
+        "title": "Aucune étiquette pour le moment",
+        "description": "Créez des étiquettes pour aider à organiser et filtrer les éléments de travail dans votre projet."
+      },
+      "estimates": {
+        "title": "Aucun système d'estimation pour le moment",
+        "description": "Créez un ensemble d'estimations pour communiquer la quantité de travail par élément de travail.",
+        "primary_button": "Ajouter un système d'estimation"
+      }
+    }
+  },
+
+  "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",
+    "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"
+    },
+    "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_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 jalons de projet. Ils ont leurs propres périodes et délais ainsi que des analyses pour vous aider à voir à quel point vous êtes proche ou loin d'un jalon.",
+        "primary_button": {
+          "text": "Construisez votre premier module",
+          "comic": {
+            "title": "Les modules aident à regrouper le travail par hiérarchie.",
+            "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_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 vos collègues dans 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 vous le jugez approprié."
+          }
+        }
+      },
+      "filter": {
+        "title": "Aucune vue correspondante",
+        "description": "Aucune vue ne correspond aux critères de recherche. \n Créez plutôt une nouvelle vue."
+      }
+    }
+  },
+
+  "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": "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 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."
+      }
+    }
+  },
+
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "Aucun résultat trouvé"
+      }
+    }
+  },
+
+  "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"
+      }
+    }
+  },
+
+  "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é"
+    }
+  },
+
+  "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": "Observez en un coup d'œil les éléments de travail prioritaires traités dans le cycle."
+      },
+      "assignee": {
+        "title": "Ajoutez des assignés aux éléments de travail pour voir une répartition du travail par assigné."
+      },
+      "label": {
+        "title": "Ajoutez des étiquettes aux éléments de travail pour voir la répartition du travail par étiquette."
+      }
+    }
+  },
+
+  "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 limite de votre projet pour définir les dates, 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"
+        }
+      }
+    }
+  },
+  "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 cela, 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é"
+      }
+    }
+  },
+
+  "stickies": {
+    "title": "Vos notes adhésives",
+    "placeholder": "cliquez pour écrire ici",
+    "all": "Toutes les notes adhésives",
+    "no-data": "Notez une idée, capturez une révélation ou enregistrez une inspiration. Ajoutez une note adhésive pour commencer.",
+    "add": "Ajouter une note adhésive",
+    "search_placeholder": "Rechercher par titre",
+    "delete": "Supprimer la note adhésive",
+    "delete_confirmation": "Êtes-vous sûr de vouloir supprimer cette note adhésive ?",
+    "empty_state": {
+      "simple": "Notez une idée, capturez une révélation ou enregistrez une inspiration. Ajoutez une note adhésive pour commencer.",
+      "general": {
+        "title": "Les notes adhésives 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 notes adhésives que vous pouvez consulter à tout moment et de n'importe où.",
+        "primary_button": {
+          "text": "Ajouter une note adhésive"
+        }
+      },
+      "search": {
+        "title": "Cela ne correspond à aucune de vos notes adhésives.",
+        "description": "Essayez un terme différent ou faites-nous savoir\nsi vous êtes sûr que votre recherche est correcte.",
+        "primary_button": {
+          "text": "Ajouter une note adhésive"
+        }
+      }
+    },
+    "toasts": {
+      "errors": {
+        "wrong_name": "Le nom de la note adhésive ne peut pas dépasser 100 caractères.",
+        "already_exists": "Il existe déjà une note adhésive sans description"
+      },
+      "created": {
+        "title": "Note adhésive créée",
+        "message": "La note adhésive a été créée avec succès"
+      },
+      "not_created": {
+        "title": "Note adhésive non créée",
+        "message": "La note adhésive n'a pas pu être créée"
+      },
+      "updated": {
+        "title": "Note adhésive mise à jour",
+        "message": "La note adhésive a été mise à jour avec succès"
+      },
+      "not_updated": {
+        "title": "Note adhésive non mise à jour",
+        "message": "La note adhésive n'a pas pu être mise à jour"
+      },
+      "removed": {
+        "title": "Note adhésive supprimée",
+        "message": "La note adhésive a été supprimée avec succès"
+      },
+      "not_removed": {
+        "title": "Note adhésive non supprimée",
+        "message": "La note adhésive n'a pas pu être supprimée"
+      }
+    }
+  },
+
+  "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"
+  },
+
+  "importer": {
+    "github": {
+      "title": "GitHub",
+      "description": "Importez des éléments de travail depuis les dépôts GitHub et synchronisez-les."
+    },
+    "jira": {
+      "title": "Jira",
+      "description": "Importez des éléments de travail et des epics depuis les projets et epics Jira."
+    }
+  },
+
+  "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"
+    }
+  },
+  "default_global_view": {
+    "all_issues": "Tous les éléments de travail",
+    "assigned": "Assignés",
+    "created": "Créés",
+    "subscribed": "Suivis"
+  },
+
+  "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é"
+      }
+    }
+  },
+  "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"
+    }
+  },
+
+  "cycle": {
+    "label": "{count, plural, one {Cycle} other {Cycles}}",
+    "no_cycle": "Pas de cycle"
+  },
+
+  "module": {
+    "label": "{count, plural, one {Module} other {Modules}}",
+    "no_module": "Pas de module"
+  }
+}
diff --git a/packages/i18n/src/locales/ja/translations.json b/packages/i18n/src/locales/ja/translations.json
new file mode 100644
index 000000000..eec78decc
--- /dev/null
+++ b/packages/i18n/src/locales/ja/translations.json
@@ -0,0 +1,2362 @@
+{
+  "sidebar": {
+    "projects": "プロジェクト",
+    "pages": "ページ",
+    "new_work_item": "新規作業項目",
+    "home": "ホーム",
+    "your_work": "あなたの作業",
+    "inbox": "受信トレイ",
+    "workspace": "ワークスペース",
+    "views": "ビュー",
+    "analytics": "アナリティクス",
+    "work_items": "作業項目",
+    "cycles": "サイクル",
+    "modules": "モジュール",
+    "intake": "インテーク",
+    "drafts": "下書き",
+    "favorites": "お気に入り",
+    "pro": "プロ",
+    "upgrade": "アップグレード"
+  },
+
+  "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": "パスワードをお忘れですか？"
+    },
+    "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": "サインアウトに失敗しました。もう一度お試しください。"
+        }
+      }
+    }
+  },
+
+  "submit": "送信",
+  "cancel": "キャンセル",
+  "loading": "読み込み中",
+  "error": "エラー",
+  "success": "成功",
+  "warning": "警告",
+  "info": "情報",
+  "close": "閉じる",
+  "yes": "はい",
+  "no": "いいえ",
+  "ok": "OK",
+  "name": "名前",
+  "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": "アクティビティ",
+  "appearance": "外観",
+  "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": "インターフェースの配色を選択またはカスタマイズしてください。",
+  "theme": "テーマ",
+  "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": "ビュー",
+  "workspace": "ワークスペース",
+  "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_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は最大5文字までです",
+  "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_settings": "公開設定",
+  "publish": "公開",
+  "copy_link": "リンクをコピー",
+  "leave_project": "プロジェクトを退出",
+  "join_the_project_to_rearrange": "並び替えるにはプロジェクトに参加してください",
+  "drag_to_rearrange": "ドラッグして並び替え",
+  "congrats": "おめでとうございます！",
+  "open_project": "プロジェクトを開く",
+  "issues": "作業項目",
+  "cycles": "Cycles",
+  "modules": "Modules",
+  "pages": "Pages",
+  "intake": "Intake",
+  "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": "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": "サポート",
+  "discord": "Discord",
+  "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": "状態",
+  "priority": "優先度",
+  "none": "なし",
+  "urgent": "緊急",
+  "high": "高",
+  "medium": "中",
+  "low": "低",
+  "members": "メンバー",
+  "assignee": "担当者",
+  "assignees": "担当者",
+  "you": "あなた",
+  "labels": "ラベル",
+  "create_new_label": "新規ラベルを作成",
+  "start_date": "開始日",
+  "end_date": "終了日",
+  "due_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{# メンバー}}",
+
+  "project_view": {
+    "sort_by": {
+      "created_at": "作成日時",
+      "updated_at": "更新日時",
+      "name": "名前"
+    }
+  },
+
+  "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": "リンクを削除できませんでした"
+      }
+    }
+  },
+
+  "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でスターをつける"
+  },
+
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URLが無効です",
+        "placeholder": "URLを入力または貼り付け"
+      },
+      "title": {
+        "text": "表示タイトル",
+        "placeholder": "このリンクをどのように表示したいか"
+      }
+    }
+  },
+
+  "common": {
+    "all": "すべて",
+    "states": "ステータス",
+    "state": "ステータス",
+    "state_groups": "ステータスグループ",
+    "priority": "優先度",
+    "team_project": "チームプロジェクト",
+    "project": "プロジェクト",
+    "cycle": "サイクル",
+    "cycles": "サイクル",
+    "module": "モジュール",
+    "modules": "モジュール",
+    "labels": "ラベル",
+    "assignees": "担当者",
+    "assignee": "担当者",
+    "created_by": "作成者",
+    "none": "なし",
+    "link": "リンク",
+    "estimate": "見積もり",
+    "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": "サブ作業項目",
+    "add": "追加",
+    "warning": "警告",
+    "updating": "更新中",
+    "adding": "追加中",
+    "update": "更新",
+    "creating": "作成中",
+    "create": "作成",
+    "cancel": "キャンセル",
+    "description": "説明",
+    "title": "タイトル",
+    "attachment": "添付ファイル",
+    "general": "一般",
+    "features": "機能",
+    "automation": "自動化",
+    "project_name": "プロジェクト名",
+    "project_id": "プロジェクトID",
+    "project_timezone": "プロジェクトのタイムゾーン",
+    "created_on": "作成日",
+    "update_project": "プロジェクトを更新",
+    "identifier_already_exists": "識別子は既に存在します",
+    "add_more": "さらに追加",
+    "defaults": "デフォルト",
+    "add_label": "ラベルを追加",
+    "estimates": "見積もり",
+    "customize_time_range": "期間をカスタマイズ",
+    "loading": "読み込み中",
+    "attachments": "添付ファイル",
+    "property": "プロパティ",
+    "properties": "プロパティ",
+    "parent": "親",
+    "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": "更新",
+    "clear_all": "すべてクリア",
+    "copied": "コピーしました！",
+    "link_copied": "リンクをコピーしました！",
+    "link_copied_to_clipboard": "リンクをクリップボードにコピーしました",
+    "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": "関連",
+    "errors": {
+      "default": {
+        "title": "エラー！",
+        "message": "問題が発生しました。もう一度お試しください。"
+      },
+      "required": "この項目は必須です",
+      "entity_required": "{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": "クリックして説明を追加",
+    "search": {
+      "label": "検索",
+      "placeholder": "検索するキーワードを入力",
+      "no_matches_found": "一致する結果が見つかりません",
+      "no_matching_results": "一致する結果がありません"
+    },
+    "actions": {
+      "edit": "編集",
+      "make_a_copy": "コピーを作成",
+      "open_in_new_tab": "新しいタブで開く",
+      "copy_link": "リンクをコピー",
+      "archive": "アーカイブ",
+      "delete": "削除",
+      "remove_relation": "関連を削除",
+      "subscribe": "購読",
+      "unsubscribe": "購読解除",
+      "clear_sorting": "並び替えをクリア",
+      "show_weekends": "週末を表示",
+      "enable": "有効化",
+      "disable": "無効化"
+    },
+    "name": "名前",
+    "discard": "破棄",
+    "confirm": "確認",
+    "confirming": "確認中",
+    "read_the_docs": "ドキュメントを読む",
+    "default": "デフォルト",
+    "active": "アクティブ",
+    "enabled": "有効",
+    "disabled": "無効",
+    "mandate": "必須",
+    "mandatory": "必須",
+    "yes": "はい",
+    "no": "いいえ",
+    "please_wait": "お待ちください",
+    "enabling": "有効化中",
+    "disabling": "無効化中",
+    "beta": "ベータ",
+    "or": "または",
+    "next": "次へ",
+    "back": "戻る",
+    "cancelling": "キャンセル中",
+    "configuring": "設定中",
+    "clear": "クリア",
+    "import": "インポート",
+    "connect": "接続",
+    "authorizing": "認証中",
+    "processing": "処理中",
+    "no_data_available": "データがありません",
+    "from": "{name}から",
+    "authenticated": "認証済み",
+    "select": "選択",
+    "upgrade": "アップグレード",
+    "add_seats": "シートを追加",
+    "label": "ラベル",
+    "priorities": "優先度",
+    "projects": "プロジェクト",
+    "workspace": "ワークスペース",
+    "workspaces": "ワークスペース",
+    "team": "チーム",
+    "teams": "チーム",
+    "entity": "エンティティ",
+    "entities": "エンティティ",
+    "task": "タスク",
+    "tasks": "タスク",
+    "section": "セクション",
+    "sections": "セクション",
+    "edit": "編集",
+    "connecting": "接続中",
+    "connected": "接続済み",
+    "disconnect": "切断",
+    "disconnecting": "切断中",
+    "installing": "インストール中",
+    "install": "インストール",
+    "reset": "リセット",
+    "live": "ライブ",
+    "change_history": "変更履歴",
+    "coming_soon": "近日公開",
+    "members": "メンバー",
+    "you": "あなた",
+    "upgrade_cta": {
+      "higher_subscription": "高いサブスクリプションにアップグレード",
+      "talk_to_sales": "セールスに連絡"
+    },
+    "category": "カテゴリー",
+    "categories": "カテゴリーズ",
+    "saving": "セービング",
+    "save_changes": "セーブ チェンジズ",
+    "delete": "デリート",
+    "deleting": "デリーティング",
+    "pending": "保留中",
+    "invite": "招待"
+  },
+
+  "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}の追加中にエラーが発生しました"
+    }
+  },
+
+  "epic": {
+    "all": "すべてのエピック",
+    "label": "{count, plural, one {エピック} other {エピック}}",
+    "new": "新規エピック",
+    "adding": "エピックを追加中",
+    "create": {
+      "success": "エピックを作成しました"
+    },
+    "add": {
+      "press_enter": "Enterを押して別のエピックを追加",
+      "label": "エピックを追加"
+    },
+    "title": {
+      "label": "エピックのタイトル",
+      "required": "エピックのタイトルは必須です。"
+    }
+  },
+
+  "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": "サブ作業項目を追加",
+      "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": "サブ作業項目"
+      },
+      "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": "アセットのアップロードに失敗しました。後でもう一度お試しください。"
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "作業項目が存在しません",
+        "description": "お探しの作業項目は存在しないか、アーカイブされているか、削除されています。",
+        "primary_button": {
+          "text": "他の作業項目を表示"
+        }
+      }
+    },
+    "sibling": {
+      "label": "兄弟作業項目"
+    },
+    "archive": {
+      "description": "完了またはキャンセルされた\n作業項目のみアーカイブできます",
+      "label": "作業項目をアーカイブ",
+      "confirm_message": "作業項目をアーカイブしてもよろしいですか？アーカイブされた作業項目は後で復元できます。",
+      "success": {
+        "label": "アーカイブ成功",
+        "message": "アーカイブはプロジェクトのアーカイブで確認できます。"
+      },
+      "failed": {
+        "message": "作業項目をアーカイブできませんでした。もう一度お試しください。"
+      }
+    },
+    "restore": {
+      "success": {
+        "title": "復元成功",
+        "message": "作業項目はプロジェクトの作業項目で確認できます。"
+      },
+      "failed": {
+        "message": "作業項目を復元できませんでした。もう一度お試しください。"
+      }
+    },
+    "relation": {
+      "relates_to": "関連する",
+      "duplicate": "重複する",
+      "blocked_by": "ブロックされている",
+      "blocking": "ブロックしている"
+    },
+    "copy_link": "作業項目のリンクをコピー",
+    "delete": {
+      "label": "作業項目を削除",
+      "error": "作業項目の削除中にエラーが発生しました"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "作業項目を購読しました",
+        "unsubscribed": "作業項目の購読を解除しました"
+      }
+    },
+    "select": {
+      "error": "少なくとも1つの作業項目を選択してください",
+      "empty": "作業項目が選択されていません",
+      "add_selected": "選択した作業項目を追加"
+    },
+    "open_in_full_screen": "作業項目をフルスクリーンで開く"
+  },
+
+  "attachment": {
+    "error": "ファイルを添付できませんでした。もう一度アップロードしてください。",
+    "only_one_file_allowed": "一度にアップロードできるファイルは1つだけです。",
+    "file_size_limit": "ファイルサイズは{size}MB以下である必要があります。",
+    "drag_and_drop": "どこにでもドラッグ＆ドロップでアップロード",
+    "delete": "添付ファイルを削除"
+  },
+
+  "label": {
+    "select": "ラベルを選択",
+    "create": {
+      "success": "ラベルを作成しました",
+      "failed": "ラベルの作成に失敗しました",
+      "already_exists": "ラベルは既に存在します",
+      "type": "新しいラベルを追加するには入力してください"
+    }
+  },
+
+  "sub_work_item": {
+    "update": {
+      "success": "サブ作業項目を更新しました",
+      "error": "サブ作業項目の更新中にエラーが発生しました"
+    },
+    "remove": {
+      "success": "サブ作業項目を削除しました",
+      "error": "サブ作業項目の削除中にエラーが発生しました"
+    }
+  },
+
+  "view": {
+    "label": "{count, plural, one {ビュー} other {ビュー}}",
+    "create": {
+      "label": "ビューを作成"
+    },
+    "update": {
+      "label": "ビューを更新"
+    }
+  },
+
+  "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": "詳細を表示する作業項目を選択してください。"
+      }
+    }
+  },
+
+  "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": "カスタムアナリティクス"
+    },
+    "empty_state": {
+      "general": {
+        "title": "進捗、ワークロード、割り当てを追跡。傾向を把握し、ブロッカーを解消して、作業をより速く進めましょう",
+        "description": "スコープと需要、見積もり、スコープクリープを確認できます。チームメンバーとチームのパフォーマンスを把握し、プロジェクトが予定通りに進むようにします。",
+        "primary_button": {
+          "text": "最初のプロジェクトを開始",
+          "comic": {
+            "title": "アナリティクスはサイクル + モジュールで最も効果を発揮",
+            "description": "まず、作業項目をサイクルでタイムボックス化し、可能であれば、複数のサイクルにまたがる作業項目をモジュールにグループ化します。左のナビゲーションで両方を確認してください。"
+          }
+        }
+      }
+    }
+  },
+
+  "workspace_projects": {
+    "label": "{count, plural, one {プロジェクト} other {プロジェクト}}",
+    "create": {
+      "label": "プロジェクトを追加"
+    },
+    "network": {
+      "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{# ヶ月}}"
+    },
+    "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": "フィルターに該当する作業項目をここで追跡できます。"
+      }
+    }
+  },
+
+  "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",
+        "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": "会社の規模は必須です"
+          }
+        }
+      },
+      "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": {
+        "title": "請求とプラン",
+        "current_plan": "現在のプラン",
+        "free_plan": "現在フリープランを使用中です",
+        "view_plans": "プランを表示"
+      },
+      "exports": {
+        "title": "エクスポート",
+        "exporting": "エクスポート中",
+        "previous_exports": "過去のエクスポート",
+        "export_separate_files": "データを個別のファイルにエクスポート",
+        "modal": {
+          "title": "エクスポート先",
+          "toasts": {
+            "success": {
+              "title": "エクスポート成功",
+              "message": "エクスポートした{entity}は過去のエクスポートからダウンロードできます。"
+            },
+            "error": {
+              "title": "エクスポート失敗",
+              "message": "エクスポートに失敗しました。もう一度お試しください。"
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "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": {
+        "title": "APIトークン",
+        "add_token": "APIトークンを追加",
+        "create_token": "トークンを作成",
+        "never_expires": "無期限",
+        "generate_token": "トークンを生成",
+        "generating": "生成中",
+        "delete": {
+          "title": "APIトークンを削除",
+          "description": "このトークンを使用しているアプリケーションはPlaneのデータにアクセスできなくなります。この操作は取り消せません。",
+          "success": {
+            "title": "成功！",
+            "message": "APIトークンが正常に削除されました"
+          },
+          "error": {
+            "title": "エラー！",
+            "message": "APIトークンを削除できませんでした"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "APIトークンがまだ作成されていません",
+        "description": "PlaneのAPIを使用して、Planeのデータを外部システムと統合できます。トークンを作成して始めましょう。"
+      },
+      "webhooks": {
+        "title": "Webhookが追加されていません",
+        "description": "Webhookを作成してリアルタイムの更新を受け取り、アクションを自動化します。"
+      },
+      "exports": {
+        "title": "エクスポートがまだありません",
+        "description": "エクスポートすると、参照用のコピーがここに保存されます。"
+      },
+      "imports": {
+        "title": "インポートがまだありません",
+        "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": "アクティビティ",
+      "appearance": "外観",
+      "notifications": "通知"
+    },
+    "tabs": {
+      "summary": "サマリー",
+      "assigned": "割り当て済み",
+      "created": "作成済み",
+      "subscribed": "購読中",
+      "activity": "アクティビティ"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "アクティビティがまだありません",
+        "description": "新しい作業項目を作成して始めましょう！詳細とプロパティを追加してください。Planeをさらに探索してアクティビティを確認しましょう。"
+      },
+      "assigned": {
+        "title": "割り当てられた作業項目がありません",
+        "description": "あなたに割り当てられた作業項目をここで追跡できます。"
+      },
+      "created": {
+        "title": "作業項目がまだありません",
+        "description": "あなたが作成したすべての作業項目がここに表示され、直接追跡できます。"
+      },
+      "subscribed": {
+        "title": "作業項目がまだありません",
+        "description": "興味のある作業項目を購読して、ここですべてを追跡できます。"
+      }
+    }
+  },
+
+  "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": "プロジェクトリーダー",
+      "default_assignee": "デフォルトの担当者",
+      "guest_super_permissions": {
+        "title": "ゲストユーザーにすべての作業項目の閲覧権限を付与:",
+        "sub_heading": "これにより、ゲストはプロジェクトのすべての作業項目を閲覧できるようになります。"
+      },
+      "invite_members": {
+        "title": "メンバーを招待",
+        "sub_heading": "プロジェクトに参加するメンバーを招待します。",
+        "select_co_worker": "共同作業者を選択"
+      }
+    },
+    "states": {
+      "describe_this_state_for_your_members": "このステータスについてメンバーに説明してください。",
+      "empty_state": {
+        "title": "{groupKey}グループのステータスがありません",
+        "description": "新しいステータスを作成してください"
+      }
+    },
+    "labels": {
+      "label_title": "ラベルタイトル",
+      "label_title_is_required": "ラベルタイトルは必須です",
+      "label_max_char": "ラベル名は255文字を超えることはできません",
+      "toast": {
+        "error": "ラベルの更新中にエラーが発生しました"
+      }
+    },
+    "estimates": {
+      "title": "プロジェクトの見積もりを有効にする",
+      "description": "チームの複雑さと作業負荷を伝えるのに役立ちます。"
+    },
+    "automations": {
+      "label": "自動化",
+      "auto-archive": {
+        "title": "完了した作業項目を自動アーカイブ",
+        "description": "Planeは完了またはキャンセルされた作業項目を自動的にアーカイブします。",
+        "duration": "次の期間完了している作業項目を自動アーカイブ"
+      },
+      "auto-close": {
+        "title": "作業項目を自動クローズ",
+        "description": "Planeは完了またはキャンセルされていない作業項目を自動的にクローズします。",
+        "duration": "次の期間非アクティブな作業項目を自動クローズ",
+        "auto_close_status": "自動クローズステータス"
+      }
+    },
+
+    "empty_state": {
+      "labels": {
+        "title": "ラベルがまだありません",
+        "description": "プロジェクトの作業項目を整理してフィルタリングするためのラベルを作成します。"
+      },
+      "estimates": {
+        "title": "見積もりシステムがまだありません",
+        "description": "作業項目ごとの作業量を伝えるための見積もりセットを作成します。",
+        "primary_button": "見積もりシステムを追加"
+      }
+    }
+  },
+
+  "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": "完了したサイクルのみアーカイブできます",
+    "active_cycle": {
+      "label": "アクティブなサイクル",
+      "progress": "進捗",
+      "chart": "バーンダウンチャート",
+      "priority_issue": "優先作業項目",
+      "assignees": "担当者",
+      "issue_burndown": "作業項目バーンダウン",
+      "ideal": "理想",
+      "current": "現在",
+      "labels": "ラベル"
+    },
+    "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_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_views": {
+    "empty_state": {
+      "general": {
+        "title": "プロジェクトのフィルター付きビューを保存します。必要な数だけ作成できます",
+        "description": "ビューは、頻繁に使用するフィルターや簡単にアクセスしたいフィルターの集合です。プロジェクト内のすべての同僚が全員のビューを確認でき、自分のニーズに最も合うものを選択できます。",
+        "primary_button": {
+          "text": "最初のビューを作成",
+          "comic": {
+            "title": "ビューは作業項目のプロパティの上で機能します。",
+            "description": "ここから、必要に応じて多くのプロパティやフィルターを使用してビューを作成できます。"
+          }
+        }
+      },
+      "filter": {
+        "title": "一致するビューがありません",
+        "description": "検索条件に一致するビューがありません。\n代わりに新しいビューを作成してください。"
+      }
+    }
+  },
+
+  "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": "注目していないページをアーカイブします。必要な時にここでアクセスできます。"
+      }
+    }
+  },
+
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "結果が見つかりません"
+      }
+    }
+  },
+
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "一致する作業項目が見つかりません"
+      },
+      "no_issues": {
+        "title": "作業項目が見つかりません"
+      }
+    }
+  },
+
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "コメントがまだありません",
+        "description": "コメントは作業項目のディスカッションとフォローアップのスペースとして使用できます"
+      }
+    }
+  },
+
+  "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": "カスタム"
+    }
+  },
+
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "サイクルの進捗を表示するには作業項目を追加してください"
+      },
+      "chart": {
+        "title": "バーンダウンチャートを表示するには作業項目を追加してください。"
+      },
+      "priority_issue": {
+        "title": "サイクルで取り組まれている優先度の高い作業項目を一目で確認できます。"
+      },
+      "assignee": {
+        "title": "担当者別の作業の内訳を確認するには、作業項目に担当者を追加してください。"
+      },
+      "label": {
+        "title": "ラベル別の作業の内訳を確認するには、作業項目にラベルを追加してください。"
+      }
+    }
+  },
+
+  "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": "機能を管理"
+        }
+      }
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "作業項目の下書き",
+    "empty_state": {
+      "title": "書きかけの作業項目、そしてまもなくコメントがここに表示されます。",
+      "description": "試してみるには、作業項目の追加を開始して途中で中断するか、以下で最初の下書きを作成してください。😉",
+      "primary_button": {
+        "text": "最初の下書きを作成"
+      }
+    },
+    "delete_modal": {
+      "title": "下書きを削除",
+      "description": "この下書きを削除してもよろしいですか？この操作は取り消せません。"
+    },
+    "toasts": {
+      "created": {
+        "success": "下書きを作成しました",
+        "error": "作業項目を作成できませんでした。もう一度お試しください。"
+      },
+      "deleted": {
+        "success": "下書きを削除しました"
+      }
+    }
+  },
+
+  "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": "付箋を削除できませんでした"
+      }
+    }
+  },
+
+  "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": "その他"
+  },
+
+  "importer": {
+    "github": {
+      "title": "GitHub",
+      "description": "GitHubリポジトリから作業項目をインポートして同期します。"
+    },
+    "jira": {
+      "title": "Jira",
+      "description": "Jiraプロジェクトとエピックから作業項目とエピックをインポートします。"
+    }
+  },
+
+  "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としてエクスポート"
+    }
+  },
+  "default_global_view": {
+    "all_issues": "すべての作業項目",
+    "assigned": "割り当て済み",
+    "created": "作成済み",
+    "subscribed": "購読中"
+  },
+
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "システム設定"
+      },
+      "light": {
+        "label": "ライト"
+      },
+      "dark": {
+        "label": "ダーク"
+      },
+      "light_contrast": {
+        "label": "ライトハイコントラスト"
+      },
+      "dark_contrast": {
+        "label": "ダークハイコントラスト"
+      },
+      "custom": {
+        "label": "カスタムテーマ"
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "バックログ",
+      "planned": "計画済み",
+      "in_progress": "進行中",
+      "paused": "一時停止",
+      "completed": "完了",
+      "cancelled": "キャンセル"
+    },
+    "layout": {
+      "list": "リスト表示",
+      "board": "ギャラリー表示",
+      "timeline": "タイムライン表示"
+    },
+    "order_by": {
+      "name": "名前",
+      "progress": "進捗",
+      "issues": "作業項目数",
+      "due_date": "期限",
+      "created_at": "作成日",
+      "manual": "手動"
+    }
+  },
+
+  "cycle": {
+    "label": "{count, plural, one {サイクル} other {サイクル}}",
+    "no_cycle": "サイクルなし"
+  },
+
+  "module": {
+    "label": "{count, plural, one {モジュール} other {モジュール}}",
+    "no_module": "モジュールなし"
+  }
+}
diff --git a/packages/i18n/src/locales/zh-CN/translations.json b/packages/i18n/src/locales/zh-CN/translations.json
new file mode 100644
index 000000000..aca47f21a
--- /dev/null
+++ b/packages/i18n/src/locales/zh-CN/translations.json
@@ -0,0 +1,2362 @@
+{
+  "sidebar": {
+    "projects": "项目",
+    "pages": "页面",
+    "new_work_item": "新工作项",
+    "home": "主页",
+    "your_work": "我的工作",
+    "inbox": "收件箱",
+    "workspace": "工作区",
+    "views": "视图",
+    "analytics": "分析",
+    "work_items": "工作项",
+    "cycles": "周期",
+    "modules": "模块",
+    "intake": "收集",
+    "drafts": "草稿",
+    "favorites": "收藏",
+    "pro": "专业版",
+    "upgrade": "升级"
+  },
+
+  "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": "忘记密码？"
+    },
+    "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": "登出失败。请重试。"
+        }
+      }
+    }
+  },
+
+  "submit": "提交",
+  "cancel": "取消",
+  "loading": "加载中",
+  "error": "错误",
+  "success": "成功",
+  "warning": "警告",
+  "info": "信息",
+  "close": "关闭",
+  "yes": "是",
+  "no": "否",
+  "ok": "确定",
+  "name": "名称",
+  "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": "活动",
+  "appearance": "外观",
+  "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": "选择或自定义您的界面配色方案。",
+  "theme": "主题",
+  "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": "视图",
+  "workspace": "工作区",
+  "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_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最多只能有5个字符",
+  "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_settings": "发布设置",
+  "publish": "发布",
+  "copy_link": "复制链接",
+  "leave_project": "离开项目",
+  "join_the_project_to_rearrange": "加入项目以重新排列",
+  "drag_to_rearrange": "拖动以重新排列",
+  "congrats": "恭喜！",
+  "open_project": "打开项目",
+  "issues": "工作项",
+  "cycles": "周期",
+  "modules": "模块",
+  "pages": "页面",
+  "intake": "收集",
+  "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": "支持",
+  "discord": "Discord",
+  "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": "状态",
+  "priority": "优先级",
+  "none": "无",
+  "urgent": "紧急",
+  "high": "高",
+  "medium": "中",
+  "low": "低",
+  "members": "成员",
+  "assignee": "负责人",
+  "assignees": "负责人",
+  "you": "您",
+  "labels": "标签",
+  "create_new_label": "创建新标签",
+  "start_date": "开始日期",
+  "end_date": "结束日期",
+  "due_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{# 成员}}",
+
+  "project_view": {
+    "sort_by": {
+      "created_at": "创建时间",
+      "updated_at": "更新时间",
+      "name": "名称"
+    }
+  },
+
+  "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": "无法移除链接"
+      }
+    }
+  },
+
+  "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上为我们加星"
+  },
+
+  "link": {
+    "modal": {
+      "url": {
+        "text": "URL",
+        "required": "URL无效",
+        "placeholder": "输入或粘贴URL"
+      },
+      "title": {
+        "text": "显示标题",
+        "placeholder": "您希望如何显示此链接"
+      }
+    }
+  },
+
+  "common": {
+    "all": "全部",
+    "states": "状态",
+    "state": "状态",
+    "state_groups": "状态组",
+    "priority": "优先级",
+    "team_project": "团队项目",
+    "project": "项目",
+    "cycle": "周期",
+    "cycles": "周期",
+    "module": "模块",
+    "modules": "模块",
+    "labels": "标签",
+    "assignees": "负责人",
+    "assignee": "负责人",
+    "created_by": "创建者",
+    "none": "无",
+    "link": "链接",
+    "estimate": "估算",
+    "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": "子工作项",
+    "add": "添加",
+    "warning": "警告",
+    "updating": "更新中",
+    "adding": "添加中",
+    "update": "更新",
+    "creating": "创建中",
+    "create": "创建",
+    "cancel": "取消",
+    "description": "描述",
+    "title": "标题",
+    "attachment": "附件",
+    "general": "常规",
+    "features": "功能",
+    "automation": "自动化",
+    "project_name": "项目名称",
+    "project_id": "项目ID",
+    "project_timezone": "项目时区",
+    "created_on": "创建于",
+    "update_project": "更新项目",
+    "identifier_already_exists": "标识符已存在",
+    "add_more": "添加更多",
+    "defaults": "默认值",
+    "add_label": "添加标签",
+    "estimates": "估算",
+    "customize_time_range": "自定义时间范围",
+    "loading": "加载中",
+    "attachments": "附件",
+    "property": "属性",
+    "properties": "属性",
+    "parent": "父项",
+    "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": "更新",
+    "clear_all": "清除全部",
+    "copied": "已复制！",
+    "link_copied": "链接已复制！",
+    "link_copied_to_clipboard": "链接已复制到剪贴板",
+    "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": "关系",
+    "errors": {
+      "default": {
+        "title": "错误！",
+        "message": "发生错误。请重试。"
+      },
+      "required": "此字段为必填项",
+      "entity_required": "{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": "点击添加描述",
+    "search": {
+      "label": "搜索",
+      "placeholder": "输入搜索内容",
+      "no_matches_found": "未找到匹配项",
+      "no_matching_results": "没有匹配的结果"
+    },
+    "actions": {
+      "edit": "编辑",
+      "make_a_copy": "创建副本",
+      "open_in_new_tab": "在新标签页中打开",
+      "copy_link": "复制链接",
+      "archive": "归档",
+      "delete": "删除",
+      "remove_relation": "移除关系",
+      "subscribe": "订阅",
+      "unsubscribe": "取消订阅",
+      "clear_sorting": "清除排序",
+      "show_weekends": "显示周末",
+      "enable": "启用",
+      "disable": "禁用"
+    },
+    "name": "名称",
+    "discard": "放弃",
+    "confirm": "确认",
+    "confirming": "确认中",
+    "read_the_docs": "阅读文档",
+    "default": "默认",
+    "active": "活动",
+    "enabled": "已启用",
+    "disabled": "已禁用",
+    "mandate": "授权",
+    "mandatory": "必需的",
+    "yes": "是",
+    "no": "否",
+    "please_wait": "请稍候",
+    "enabling": "正在启用",
+    "disabling": "正在禁用",
+    "beta": "测试版",
+    "or": "或",
+    "next": "下一步",
+    "back": "返回",
+    "cancelling": "正在取消",
+    "configuring": "正在配置",
+    "clear": "清除",
+    "import": "导入",
+    "connect": "连接",
+    "authorizing": "正在授权",
+    "processing": "正在处理",
+    "no_data_available": "暂无数据",
+    "from": "来自 {name}",
+    "authenticated": "已认证",
+    "select": "选择",
+    "upgrade": "升级",
+    "add_seats": "添加席位",
+    "label": "标签",
+    "priorities": "优先级",
+    "projects": "项目",
+    "workspace": "工作区",
+    "workspaces": "工作区",
+    "team": "团队",
+    "teams": "团队",
+    "entity": "实体",
+    "entities": "实体",
+    "task": "任务",
+    "tasks": "任务",
+    "section": "部分",
+    "sections": "部分",
+    "edit": "编辑",
+    "connecting": "正在连接",
+    "connected": "已连接",
+    "disconnect": "断开连接",
+    "disconnecting": "正在断开连接",
+    "installing": "正在安装",
+    "install": "安装",
+    "reset": "重置",
+    "live": "实时",
+    "change_history": "变更历史",
+    "coming_soon": "即将推出",
+    "members": "成员",
+    "you": "你",
+    "upgrade_cta": {
+      "higher_subscription": "升级到更高订阅",
+      "talk_to_sales": "联系销售"
+    },
+    "category": "类别",
+    "categories": "类别",
+    "saving": "保存中",
+    "save_changes": "保存更改",
+    "delete": "删除",
+    "deleting": "删除中",
+    "pending": "待处理",
+    "invite": "邀请"
+  },
+
+  "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}时出错"
+    }
+  },
+
+  "epic": {
+    "all": "所有史诗",
+    "label": "{count, plural, one {史诗} other {史诗}}",
+    "new": "新建史诗",
+    "adding": "正在添加史诗",
+    "create": {
+      "success": "史诗创建成功"
+    },
+    "add": {
+      "press_enter": "按'Enter'添加另一个史诗",
+      "label": "添加史诗"
+    },
+    "title": {
+      "label": "史诗标题",
+      "required": "史诗标题为必填项"
+    }
+  },
+
+  "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": "添加子工作项",
+      "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": "子工作项"
+      },
+      "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": "资源上传失败。请稍后重试。"
+      }
+    },
+    "empty_state": {
+      "issue_detail": {
+        "title": "工作项不存在",
+        "description": "您查找的工作项不存在、已归档或已删除。",
+        "primary_button": {
+          "text": "查看其他工作项"
+        }
+      }
+    },
+    "sibling": {
+      "label": "同级工作项"
+    },
+    "archive": {
+      "description": "只有已完成或已取消的\n工作项可以归档",
+      "label": "归档工作项",
+      "confirm_message": "您确定要归档此工作项吗？所有已归档的工作项稍后可以恢复。",
+      "success": {
+        "label": "归档成功",
+        "message": "您的归档可以在项目归档中找到。"
+      },
+      "failed": {
+        "message": "无法归档工作项。请重试。"
+      }
+    },
+    "restore": {
+      "success": {
+        "title": "恢复成功",
+        "message": "您的工作项可以在项目工作项中找到。"
+      },
+      "failed": {
+        "message": "无法恢复工作项。请重试。"
+      }
+    },
+    "relation": {
+      "relates_to": "关联到",
+      "duplicate": "重复于",
+      "blocked_by": "被阻止于",
+      "blocking": "阻止"
+    },
+    "copy_link": "复制工作项链接",
+    "delete": {
+      "label": "删除工作项",
+      "error": "删除工作项时出错"
+    },
+    "subscription": {
+      "actions": {
+        "subscribed": "工作项订阅成功",
+        "unsubscribed": "工作项取消订阅成功"
+      }
+    },
+    "select": {
+      "error": "请至少选择一个工作项",
+      "empty": "未选择工作项",
+      "add_selected": "添加所选工作项"
+    },
+    "open_in_full_screen": "在全屏中打开工作项"
+  },
+
+  "attachment": {
+    "error": "无法附加文件。请重新上传。",
+    "only_one_file_allowed": "一次只能上传一个文件。",
+    "file_size_limit": "文件大小必须小于或等于 {size}MB。",
+    "drag_and_drop": "拖放到任意位置以上传",
+    "delete": "删除附件"
+  },
+
+  "label": {
+    "select": "选择标签",
+    "create": {
+      "success": "标签创建成功",
+      "failed": "标签创建失败",
+      "already_exists": "标签已存在",
+      "type": "输入以添加新标签"
+    }
+  },
+
+  "sub_work_item": {
+    "update": {
+      "success": "子工作项更新成功",
+      "error": "更新子工作项时出错"
+    },
+    "remove": {
+      "success": "子工作项移除成功",
+      "error": "移除子工作项时出错"
+    }
+  },
+
+  "view": {
+    "label": "{count, plural, one {视图} other {视图}}",
+    "create": {
+      "label": "创建视图"
+    },
+    "update": {
+      "label": "更新视图"
+    }
+  },
+
+  "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": "选择一个工作项以查看其详细信息。"
+      }
+    }
+  },
+
+  "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": "自定义分析"
+    },
+    "empty_state": {
+      "general": {
+        "title": "跟踪进度、工作量和分配。发现趋势、消除障碍并加快工作进度",
+        "description": "查看范围与需求、估算和范围蔓延。获取团队成员和团队的表现，确保您的项目按时运行。",
+        "primary_button": {
+          "text": "开始您的第一个项目",
+          "comic": {
+            "title": "分析在周期 + 模块中效果最佳",
+            "description": "首先，将您的工作项限定在周期中，如果可能的话，将跨越多个周期的工作项分组到模块中。在左侧导航栏中查看这两项。"
+          }
+        }
+      }
+    }
+  },
+
+  "workspace_projects": {
+    "label": "{count, plural, one {项目} other {项目}}",
+    "create": {
+      "label": "添加项目"
+    },
+    "network": {
+      "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{# 个月}}"
+    },
+    "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": "符合筛选条件的工作项，在这里跟踪所有这些工作项。"
+      }
+    }
+  },
+
+  "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": "工作区网址",
+        "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": "公司规模为必填项"
+          }
+        }
+      },
+      "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": {
+        "title": "账单与计划",
+        "current_plan": "当前计划",
+        "free_plan": "您目前使用的是免费计划",
+        "view_plans": "查看计划"
+      },
+      "exports": {
+        "title": "导出",
+        "exporting": "导出中",
+        "previous_exports": "以前的导出",
+        "export_separate_files": "将数据导出为单独的文件",
+        "modal": {
+          "title": "导出到",
+          "toasts": {
+            "success": {
+              "title": "导出成功",
+              "message": "您可以从之前的导出中下载导出的{entity}"
+            },
+            "error": {
+              "title": "导出失败",
+              "message": "导出未成功。请重试。"
+            }
+          }
+        }
+      },
+      "webhooks": {
+        "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": {
+        "title": "API 令牌",
+        "add_token": "添加 API 令牌",
+        "create_token": "创建令牌",
+        "never_expires": "永不过期",
+        "generate_token": "生成令牌",
+        "generating": "生成中",
+        "delete": {
+          "title": "删除 API 令牌",
+          "description": "使用此令牌的任何应用程序将无法再访问 Plane 数据。此操作无法撤消。",
+          "success": {
+            "title": "成功！",
+            "message": "API 令牌已成功删除"
+          },
+          "error": {
+            "title": "错误！",
+            "message": "无法删除 API 令牌"
+          }
+        }
+      }
+    },
+    "empty_state": {
+      "api_tokens": {
+        "title": "尚未创建 API 令牌",
+        "description": "Plane API 可用于将您在 Plane 中的数据与任何外部系统集成。创建令牌以开始使用。"
+      },
+      "webhooks": {
+        "title": "尚未添加 webhook",
+        "description": "创建 webhook 以接收实时更新并自动执行操作。"
+      },
+      "exports": {
+        "title": "尚无导出",
+        "description": "每次导出时，您都会在这里有一个副本以供参考。"
+      },
+      "imports": {
+        "title": "尚无导入",
+        "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": "活动",
+      "appearance": "外观",
+      "notifications": "通知"
+    },
+    "tabs": {
+      "summary": "摘要",
+      "assigned": "已分配",
+      "created": "已创建",
+      "subscribed": "已订阅",
+      "activity": "活动"
+    },
+    "empty_state": {
+      "activity": {
+        "title": "尚无活动",
+        "description": "通过创建新工作项开始！为其添加详细信息和属性。在 Plane 中探索更多内容以查看您的活动。"
+      },
+      "assigned": {
+        "title": "没有分配给您的工作项",
+        "description": "可以从这里跟踪分配给您的工作项。"
+      },
+      "created": {
+        "title": "尚无工作项",
+        "description": "您创建的所有工作项都会出现在这里，直接在这里跟踪它们。"
+      },
+      "subscribed": {
+        "title": "尚无工作项",
+        "description": "订阅您感兴趣的工作项，在这里跟踪所有这些工作项。"
+      }
+    }
+  },
+
+  "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": "项目负责人",
+      "default_assignee": "默认受理人",
+      "guest_super_permissions": {
+        "title": "为访客用户授予查看所有工作项的权限：",
+        "sub_heading": "这将允许访客查看所有项目工作项。"
+      },
+      "invite_members": {
+        "title": "邀请成员",
+        "sub_heading": "邀请成员参与您的项目。",
+        "select_co_worker": "选择同事"
+      }
+    },
+    "states": {
+      "describe_this_state_for_your_members": "为您的成员描述此状态。",
+      "empty_state": {
+        "title": "{groupKey} 组中没有状态",
+        "description": "请创建一个新状态"
+      }
+    },
+    "labels": {
+      "label_title": "标签标题",
+      "label_title_is_required": "标签标题为必填项",
+      "label_max_char": "标签名称不应超过255个字符",
+      "toast": {
+        "error": "更新标签时出错"
+      }
+    },
+    "estimates": {
+      "title": "为我的项目启用估算",
+      "description": "它们有助于您传达团队的复杂性和工作量。"
+    },
+    "automations": {
+      "label": "自动化",
+      "auto-archive": {
+        "title": "自动归档已关闭的工作项",
+        "description": "Plane 将自动归档已完成或已取消的工作项。",
+        "duration": "自动归档已关闭"
+      },
+      "auto-close": {
+        "title": "自动关闭工作项",
+        "description": "Plane 将自动关闭尚未完成或取消的工作项。",
+        "duration": "自动关闭不活跃",
+        "auto_close_status": "自动关闭状态"
+      }
+    },
+
+    "empty_state": {
+      "labels": {
+        "title": "尚无标签",
+        "description": "创建标签以帮助组织和筛选项目中的工作项。"
+      },
+      "estimates": {
+        "title": "尚无估算系统",
+        "description": "创建一组估算以传达每个工作项的工作量。",
+        "primary_button": "添加估算系统"
+      }
+    }
+  },
+
+  "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": "只能归档已完成的周期",
+    "active_cycle": {
+      "label": "活动周期",
+      "progress": "进度",
+      "chart": "燃尽图",
+      "priority_issue": "优先工作项",
+      "assignees": "受理人",
+      "issue_burndown": "工作项燃尽",
+      "ideal": "理想",
+      "current": "当前",
+      "labels": "标签"
+    },
+    "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_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_views": {
+    "empty_state": {
+      "general": {
+        "title": "为您的项目保存筛选视图。根据需要创建任意数量",
+        "description": "视图是您经常使用或想要轻松访问的一组已保存的筛选条件。项目中的所有同事都可以看到每个人的视图，并选择最适合他们需求的视图。",
+        "primary_button": {
+          "text": "创建您的第一个视图",
+          "comic": {
+            "title": "视图基于工作项属性运作。",
+            "description": "您可以在此处创建一个视图，根据需要使用任意数量的属性作为筛选条件。"
+          }
+        }
+      },
+      "filter": {
+        "title": "没有匹配的视图",
+        "description": "没有符合搜索条件的视图。\n创建一个新视图。"
+      }
+    }
+  },
+
+  "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": "归档不在您关注范围内的页面。需要时可以在这里访问它们。"
+      }
+    }
+  },
+
+  "command_k": {
+    "empty_state": {
+      "search": {
+        "title": "未找到结果"
+      }
+    }
+  },
+
+  "issue_relation": {
+    "empty_state": {
+      "search": {
+        "title": "未找到匹配的工作项"
+      },
+      "no_issues": {
+        "title": "未找到工作项"
+      }
+    }
+  },
+
+  "issue_comment": {
+    "empty_state": {
+      "general": {
+        "title": "尚无评论",
+        "description": "评论可用作工作项的讨论和跟进空间"
+      }
+    }
+  },
+
+  "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": "自定义"
+    }
+  },
+
+  "active_cycle": {
+    "empty_state": {
+      "progress": {
+        "title": "向周期添加工作项以查看其进度"
+      },
+      "chart": {
+        "title": "向周期添加工作项以查看燃尽图。"
+      },
+      "priority_issue": {
+        "title": "一目了然地观察周期中处理的高优先级工作项。"
+      },
+      "assignee": {
+        "title": "为工作项添加负责人以查看按负责人划分的工作明细。"
+      },
+      "label": {
+        "title": "为工作项添加标签以查看按标签划分的工作明细。"
+      }
+    }
+  },
+
+  "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": "管理功能"
+        }
+      }
+    }
+  },
+  "workspace_draft_issues": {
+    "draft_an_issue": "起草工作项",
+    "empty_state": {
+      "title": "半写的工作项，以及即将推出的评论将在这里显示。",
+      "description": "要试用此功能，请开始添加工作项并中途离开，或在下方创建您的第一个草稿。😉",
+      "primary_button": {
+        "text": "创建您的第一个草稿"
+      }
+    },
+    "delete_modal": {
+      "title": "删除草稿",
+      "description": "您确定要删除此草稿吗？此操作无法撤消。"
+    },
+    "toasts": {
+      "created": {
+        "success": "草稿已创建",
+        "error": "无法创建工作项。请重试。"
+      },
+      "deleted": {
+        "success": "草稿已删除"
+      }
+    }
+  },
+
+  "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": "无法移除便签"
+      }
+    }
+  },
+
+  "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": "其他"
+  },
+
+  "importer": {
+    "github": {
+      "title": "GitHub",
+      "description": "从 GitHub 仓库导入工作项并同步。"
+    },
+    "jira": {
+      "title": "Jira",
+      "description": "从 Jira 项目和史诗导入工作项和史诗。"
+    }
+  },
+
+  "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"
+    }
+  },
+  "default_global_view": {
+    "all_issues": "所有工作项",
+    "assigned": "已分配",
+    "created": "已创建",
+    "subscribed": "已订阅"
+  },
+
+  "themes": {
+    "theme_options": {
+      "system_preference": {
+        "label": "系统偏好"
+      },
+      "light": {
+        "label": "浅色"
+      },
+      "dark": {
+        "label": "深色"
+      },
+      "light_contrast": {
+        "label": "浅色高对比度"
+      },
+      "dark_contrast": {
+        "label": "深色高对比度"
+      },
+      "custom": {
+        "label": "自定义主题"
+      }
+    }
+  },
+  "project_modules": {
+    "status": {
+      "backlog": "待办",
+      "planned": "已计划",
+      "in_progress": "进行中",
+      "paused": "已暂停",
+      "completed": "已完成",
+      "cancelled": "已取消"
+    },
+    "layout": {
+      "list": "列表布局",
+      "board": "画廊布局",
+      "timeline": "时间线布局"
+    },
+    "order_by": {
+      "name": "名称",
+      "progress": "进度",
+      "issues": "工作项数量",
+      "due_date": "截止日期",
+      "created_at": "创建日期",
+      "manual": "手动"
+    }
+  },
+
+  "cycle": {
+    "label": "{count, plural, one {周期} other {周期}}",
+    "no_cycle": "无周期"
+  },
+
+  "module": {
+    "label": "{count, plural, one {模块} other {模块}}",
+    "no_module": "无模块"
+  }
+}
diff --git a/packages/i18n/src/store/index.ts b/packages/i18n/src/store/index.ts
new file mode 100644
index 000000000..78e1311ad
--- /dev/null
+++ b/packages/i18n/src/store/index.ts
@@ -0,0 +1,298 @@
+import IntlMessageFormat from "intl-messageformat";
+import get from "lodash/get";
+import merge from "lodash/merge";
+import { makeAutoObservable, runInAction } from "mobx";
+// constants
+import { FALLBACK_LANGUAGE, SUPPORTED_LANGUAGES, STORAGE_KEY } from "../constants";
+// core translations imports
+import coreEn from "../locales/en/core.json";
+// types
+import { TLanguage, ILanguageOption, ITranslations } from "../types";
+
+/**
+ * Mobx store class for handling translations and language changes in the application
+ * Provides methods to translate keys with params and change the language
+ * Uses IntlMessageFormat to format the translations
+ */
+export class TranslationStore {
+  // Core translations that are always loaded
+  private coreTranslations: ITranslations = {
+    en: coreEn,
+  };
+  // List of translations for each language
+  private translations: ITranslations = {};
+  // Cache for IntlMessageFormat instances
+  private messageCache: Map<string, IntlMessageFormat> = new Map();
+  // Current language
+  currentLocale: TLanguage = FALLBACK_LANGUAGE;
+  // Loading state
+  isLoading: boolean = true;
+  isInitialized: boolean = false;
+  // Set of loaded languages
+  private loadedLanguages: Set<TLanguage> = new Set();
+
+  /**
+   * Constructor for the TranslationStore class
+   */
+  constructor() {
+    makeAutoObservable(this);
+    // Initialize with core translations immediately
+    this.translations = this.coreTranslations;
+    // Initialize language
+    this.initializeLanguage();
+    // Load all the translations
+    this.loadTranslations();
+  }
+
+  /** Initializes the language based on the local storage or browser language */
+  private initializeLanguage() {
+    if (typeof window === "undefined") return;
+
+    const savedLocale = localStorage.getItem(STORAGE_KEY) as TLanguage;
+    if (this.isValidLanguage(savedLocale)) {
+      this.setLanguage(savedLocale);
+      return;
+    }
+
+    const browserLang = this.getBrowserLanguage();
+    this.setLanguage(browserLang);
+  }
+
+  /** Loads the translations for the current language */
+  private async loadTranslations(): Promise<void> {
+    try {
+      // Set initialized to true (Core translations are already loaded)
+      runInAction(() => {
+        this.isInitialized = true;
+      });
+      // Load current and fallback languages in parallel
+      await this.loadPrimaryLanguages();
+      // Load all remaining languages in parallel
+      this.loadRemainingLanguages();
+    } catch (error) {
+      console.error("Failed in translation initialization:", error);
+      runInAction(() => {
+        this.isLoading = false;
+      });
+    }
+  }
+
+  private async loadPrimaryLanguages(): Promise<void> {
+    try {
+      // Load current and fallback languages in parallel
+      const languagesToLoad = new Set<TLanguage>([this.currentLocale]);
+      // Add fallback language only if different from current
+      if (this.currentLocale !== FALLBACK_LANGUAGE) {
+        languagesToLoad.add(FALLBACK_LANGUAGE);
+      }
+      // Load all primary languages in parallel
+      const loadPromises = Array.from(languagesToLoad).map((lang) => this.loadLanguageTranslations(lang));
+      await Promise.all(loadPromises);
+      // Update loading state
+      runInAction(() => {
+        this.isLoading = false;
+      });
+    } catch (error) {
+      console.error("Failed to load primary languages:", error);
+      runInAction(() => {
+        this.isLoading = false;
+      });
+    }
+  }
+
+  private loadRemainingLanguages(): void {
+    const remainingLanguages = SUPPORTED_LANGUAGES.map((lang) => lang.value).filter(
+      (lang) =>
+        !this.loadedLanguages.has(lang as TLanguage) && lang !== this.currentLocale && lang !== FALLBACK_LANGUAGE
+    );
+    // Load all remaining languages in parallel
+    Promise.all(remainingLanguages.map((lang) => this.loadLanguageTranslations(lang as TLanguage))).catch((error) => {
+      console.error("Failed to load some remaining languages:", error);
+    });
+  }
+
+  private async loadLanguageTranslations(language: TLanguage): Promise<void> {
+    // Skip if already loaded
+    if (this.loadedLanguages.has(language)) return;
+
+    try {
+      const translations = await this.importLanguageFile(language);
+      runInAction(() => {
+        // Use lodash merge for deep merging
+        this.translations[language] = merge({}, this.coreTranslations[language] || {}, translations.default);
+        // Add to loaded languages
+        this.loadedLanguages.add(language);
+        // Clear cache
+        this.messageCache.clear();
+      });
+    } catch (error) {
+      console.error(`Failed to load translations for ${language}:`, error);
+    }
+  }
+
+  /**
+   * Imports the translations for the given language
+   * @param language - The language to import the translations for
+   * @returns {Promise<any>}
+   */
+  private importLanguageFile(language: TLanguage): Promise<any> {
+    switch (language) {
+      case "en":
+        return import("../locales/en/translations.json");
+      case "fr":
+        return import("../locales/fr/translations.json");
+      case "es":
+        return import("../locales/es/translations.json");
+      case "ja":
+        return import("../locales/ja/translations.json");
+      case "zh-CN":
+        return import("../locales/zh-CN/translations.json");
+      default:
+        throw new Error(`Unsupported language: ${language}`);
+    }
+  }
+
+  /** Checks if the language is valid based on the supported languages */
+  private isValidLanguage(lang: string | null): lang is TLanguage {
+    return lang !== null && this.availableLanguages.some((l) => l.value === lang);
+  }
+
+  /** Checks if a language code is similar to any supported language */
+  private findSimilarLanguage(lang: string): TLanguage | null {
+    // Convert to lowercase for case-insensitive comparison
+    const normalizedLang = lang.toLowerCase();
+
+    // Find a supported language that includes or is included in the browser language
+    const similarLang = this.availableLanguages.find(
+      (l) => normalizedLang.includes(l.value.toLowerCase()) || l.value.toLowerCase().includes(normalizedLang)
+    );
+
+    return similarLang ? similarLang.value : null;
+  }
+
+  /** Gets the browser language based on the navigator.language */
+  private getBrowserLanguage(): TLanguage {
+    const browserLang = navigator.language;
+
+    // Check exact match first
+    if (this.isValidLanguage(browserLang)) {
+      return browserLang;
+    }
+
+    // Check base language without region code
+    const baseLang = browserLang.split("-")[0];
+    if (this.isValidLanguage(baseLang)) {
+      return baseLang as TLanguage;
+    }
+
+    // Try to find a similar language
+    const similarLang = this.findSimilarLanguage(browserLang) || this.findSimilarLanguage(baseLang);
+
+    return similarLang || FALLBACK_LANGUAGE;
+  }
+
+  /**
+   * Gets the cache key for the given key and locale
+   * @param key - the key to get the cache key for
+   * @param locale - the locale to get the cache key for
+   * @returns the cache key for the given key and locale
+   */
+  private getCacheKey(key: string, locale: TLanguage): string {
+    return `${locale}:${key}`;
+  }
+
+  /**
+   * Gets the IntlMessageFormat instance for the given key and locale
+   * Returns cached instance if available
+   * Throws an error if the key is not found in the translations
+   */
+  private getMessageInstance(key: string, locale: TLanguage): IntlMessageFormat | null {
+    const cacheKey = this.getCacheKey(key, locale);
+
+    // Check if the cache already has the key
+    if (this.messageCache.has(cacheKey)) {
+      return this.messageCache.get(cacheKey) || null;
+    }
+
+    // Get the message from the translations
+    const message = get(this.translations[locale], key);
+    if (!message) return null;
+
+    try {
+      const formatter = new IntlMessageFormat(message as any, locale);
+      this.messageCache.set(cacheKey, formatter);
+      return formatter;
+    } catch (error) {
+      console.error(`Failed to create message formatter for key "${key}":`, error);
+      return null;
+    }
+  }
+
+  /**
+   * Translates a key with params using the current locale
+   * Falls back to the default language if the translation is not found
+   * Returns the key itself if the translation is not found
+   * @param key - The key to translate
+   * @param params - The params to format the translation with
+   * @returns The translated string
+   */
+  t(key: string, params?: Record<string, any>): string {
+    try {
+      // Try current locale
+      let formatter = this.getMessageInstance(key, this.currentLocale);
+
+      // Fallback to default language if necessary
+      if (!formatter && this.currentLocale !== FALLBACK_LANGUAGE) {
+        formatter = this.getMessageInstance(key, FALLBACK_LANGUAGE);
+      }
+
+      // If we have a formatter, use it
+      if (formatter) {
+        return formatter.format(params || {}) as string;
+      }
+
+      // Last resort: return the key itself
+      return key;
+    } catch (error) {
+      console.error(`Translation error for key "${key}":`, error);
+      return key;
+    }
+  }
+
+  /**
+   * Sets the current language and updates the translations
+   * @param lng - The new language
+   */
+  async setLanguage(lng: TLanguage): Promise<void> {
+    try {
+      if (!this.isValidLanguage(lng)) {
+        throw new Error(`Invalid language: ${lng}`);
+      }
+
+      // Safeguard in case background loading failed
+      if (!this.loadedLanguages.has(lng)) {
+        await this.loadLanguageTranslations(lng);
+      }
+
+      if (typeof window !== "undefined") {
+        localStorage.setItem(STORAGE_KEY, lng);
+        document.documentElement.lang = lng;
+      }
+
+      runInAction(() => {
+        this.currentLocale = lng;
+        this.messageCache.clear(); // Clear cache when language changes
+      });
+    } catch (error) {
+      console.error("Failed to set language:", error);
+    }
+  }
+
+  /**
+   * Gets the available language options for the dropdown
+   * @returns An array of language options
+   */
+  get availableLanguages(): ILanguageOption[] {
+    return SUPPORTED_LANGUAGES;
+  }
+}
diff --git a/packages/i18n/src/types/index.ts b/packages/i18n/src/types/index.ts
new file mode 100644
index 000000000..d56ad1e16
--- /dev/null
+++ b/packages/i18n/src/types/index.ts
@@ -0,0 +1,2 @@
+export * from "./language";
+export * from "./translation";
diff --git a/packages/i18n/src/types/language.ts b/packages/i18n/src/types/language.ts
new file mode 100644
index 000000000..86e141ff5
--- /dev/null
+++ b/packages/i18n/src/types/language.ts
@@ -0,0 +1,6 @@
+export type TLanguage = "en" | "fr" | "es" | "ja" | "zh-CN";
+
+export interface ILanguageOption {
+  label: string;
+  value: TLanguage;
+}
diff --git a/packages/i18n/src/types/translation.ts b/packages/i18n/src/types/translation.ts
new file mode 100644
index 000000000..b75705552
--- /dev/null
+++ b/packages/i18n/src/types/translation.ts
@@ -0,0 +1,7 @@
+export interface ITranslation {
+  [key: string]: string | ITranslation;
+}
+
+export interface ITranslations {
+  [locale: string]: ITranslation;
+}
diff --git a/packages/i18n/tsconfig.json b/packages/i18n/tsconfig.json
new file mode 100644
index 000000000..6599e6e82
--- /dev/null
+++ b/packages/i18n/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "lib": ["esnext", "dom"],
+    "resolveJsonModule": true
+  },
+  "include": ["./src"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/logger/.eslintignore b/packages/logger/.eslintignore
new file mode 100644
index 000000000..6019047c3
--- /dev/null
+++ b/packages/logger/.eslintignore
@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*
\ No newline at end of file
diff --git a/packages/logger/.eslintrc.js b/packages/logger/.eslintrc.js
new file mode 100644
index 000000000..558b8f76e
--- /dev/null
+++ b/packages/logger/.eslintrc.js
@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};
diff --git a/packages/logger/.prettierrc b/packages/logger/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/packages/logger/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/packages/logger/README.md b/packages/logger/README.md
new file mode 100644
index 000000000..6b83eb52b
--- /dev/null
+++ b/packages/logger/README.md
@@ -0,0 +1,59 @@
+# 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.
\ No newline at end of file
diff --git a/packages/logger/package.json b/packages/logger/package.json
new file mode 100644
index 000000000..7a374004f
--- /dev/null
+++ b/packages/logger/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "@plane/logger",
+  "version": "0.24.1",
+  "description": "Logger shared across multiple apps internally",
+  "private": true,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:errors": "eslint src --ext .ts,.tsx --quiet"
+  },
+  "dependencies": {
+    "winston": "^3.17.0",
+    "winston-daily-rotate-file": "^5.0.0"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@types/node": "^22.5.4",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/packages/logger/src/config.ts b/packages/logger/src/config.ts
new file mode 100644
index 000000000..fd918e59e
--- /dev/null
+++ b/packages/logger/src/config.ts
@@ -0,0 +1,66 @@
+import winston from "winston";
+import DailyRotateFile from "winston-daily-rotate-file";
+import path from "path";
+
+// Define log levels
+const levels = {
+  error: 0,
+  warn: 1,
+  info: 2,
+  http: 3,
+  debug: 4,
+};
+
+// Define colors for each level
+const colors = {
+  error: "red",
+  warn: "yellow",
+  info: "green",
+  http: "magenta",
+  debug: "white",
+};
+
+// Tell winston about our colors
+winston.addColors(colors);
+
+// Custom format for logging
+const format = winston.format.combine(
+  winston.format.timestamp({ format: "YYYY-MM-DD HH:mm:ss:ms" }),
+  winston.format.colorize({ all: true }),
+  winston.format.printf(
+    (info: winston.Logform.TransformableInfo) => `[${info?.timestamp}] ${info.level}: ${info.message}`
+  )
+);
+
+// Define which transports to use
+const transports = [
+  // Console transport
+  new winston.transports.Console(),
+
+  // Rotating file transport for errors
+  new DailyRotateFile({
+    filename: path.join(process.cwd(), "logs", "error-%DATE%.log"),
+    datePattern: "YYYY-MM-DD",
+    zippedArchive: true,
+    maxSize: process.env.LOG_MAX_SIZE || "20m",
+    maxFiles: process.env.LOG_RETENTION || "7d",
+    level: "error",
+  }),
+
+  // Rotating file transport for all logs
+  new DailyRotateFile({
+    filename: path.join(process.cwd(), "logs", "combined-%DATE%.log"),
+    datePattern: "YYYY-MM-DD",
+    zippedArchive: true,
+    maxSize: process.env.LOG_MAX_SIZE || "20m",
+    maxFiles: process.env.LOG_RETENTION || "7d",
+  }),
+];
+
+// Create the logger
+export const logger = winston.createLogger({
+  level: process.env.LOG_LEVEL || "info",
+  levels,
+  format,
+  transports,
+});
diff --git a/packages/logger/src/index.ts b/packages/logger/src/index.ts
new file mode 100644
index 000000000..715301ad3
--- /dev/null
+++ b/packages/logger/src/index.ts
@@ -0,0 +1,2 @@
+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 000000000..e251a5837
--- /dev/null
+++ b/packages/logger/src/middleware.ts
@@ -0,0 +1,23 @@
+import { Request, Response, NextFunction } from "express";
+import { logger } from "./config";
+
+export const requestLogger = (req: Request, res: Response, next: NextFunction) => {
+  // Log when the request starts
+  const startTime = Date.now();
+
+  // Log request details
+  logger.http(`Incoming ${req.method} request to ${req.url} from ${req.ip}`);
+
+  // Log request body if present
+  if (Object.keys(req.body).length > 0) {
+    logger.debug("Request body:", req.body);
+  }
+
+  // Capture response
+  res.on("finish", () => {
+    const duration = Date.now() - startTime;
+    logger.http(`Completed ${req.method} ${req.url} with status ${res.statusCode} in ${duration}ms`);
+  });
+
+  next();
+};
diff --git a/packages/logger/tsconfig.json b/packages/logger/tsconfig.json
new file mode 100644
index 000000000..2ba1c9799
--- /dev/null
+++ b/packages/logger/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@plane/typescript-config/base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "experimentalDecorators": true,
+    "sourceMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/propel/.eslintignore b/packages/propel/.eslintignore
new file mode 100644
index 000000000..6019047c3
--- /dev/null
+++ b/packages/propel/.eslintignore
@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*
\ No newline at end of file
diff --git a/packages/propel/.eslintrc.js b/packages/propel/.eslintrc.js
new file mode 100644
index 000000000..b11b7bb6d
--- /dev/null
+++ b/packages/propel/.eslintrc.js
@@ -0,0 +1,6 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+};
diff --git a/packages/propel/.prettierignore b/packages/propel/.prettierignore
new file mode 100644
index 000000000..e841c6b32
--- /dev/null
+++ b/packages/propel/.prettierignore
@@ -0,0 +1,5 @@
+.next
+.turbo
+out/
+dist/
+build/
\ No newline at end of file
diff --git a/packages/propel/.prettierrc b/packages/propel/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/packages/propel/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/packages/propel/package.json b/packages/propel/package.json
new file mode 100644
index 000000000..1f2ebbeea
--- /dev/null
+++ b/packages/propel/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@plane/propel",
+  "version": "0.24.1",
+  "private": true,
+  "scripts": {
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:errors": "eslint src --ext .ts,.tsx --quiet"
+  },
+  "exports": {
+    "./ui/*": "./src/ui/*.tsx",
+    "./charts/*": "./src/charts/*/index.ts"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.1",
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^0.469.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^2.15.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@plane/tailwind-config": "*",
+    "@plane/typescript-config": "*",
+    "@types/react": "18.3.1",
+    "@types/react-dom": "18.3.0",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/packages/propel/postcss.config.js b/packages/propel/postcss.config.js
new file mode 100644
index 000000000..12a703d90
--- /dev/null
+++ b/packages/propel/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
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 000000000..1efe34c51
--- /dev/null
+++ b/packages/propel/src/charts/area-chart/index.ts
@@ -0,0 +1 @@
+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 000000000..710c5f70d
--- /dev/null
+++ b/packages/propel/src/charts/area-chart/root.tsx
@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import React, { useMemo } from "react";
+import { AreaChart as CoreAreaChart, Area, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+// plane imports
+import { AXIS_LINE_CLASSNAME, LABEL_CLASSNAME } from "@plane/constants";
+import { TAreaChartProps } from "@plane/types";
+// local components
+import { CustomXAxisTick, CustomYAxisTick } from "../tick";
+import { CustomTooltip } from "../tooltip";
+
+export const AreaChart = React.memo(<K extends string, T extends string>(props: TAreaChartProps<K, T>) => {
+  const {
+    data,
+    areas,
+    xAxis,
+    yAxis,
+    className = "w-full h-96",
+    tickCount = {
+      x: undefined,
+      y: 10,
+    },
+    showTooltip = true,
+  } = props;
+  // derived values
+  const itemKeys = useMemo(() => areas.map((area) => area.key), [areas]);
+  const itemDotClassNames = useMemo(
+    () => areas.reduce((acc, area) => ({ ...acc, [area.key]: area.dotClassName }), {}),
+    [areas]
+  );
+
+  const renderAreas = useMemo(
+    () =>
+      areas.map((area) => (
+        <Area
+          key={area.key}
+          type="monotone"
+          dataKey={area.key}
+          stackId={area.stackId}
+          className={area.className}
+          stroke="inherit"
+          fill="inherit"
+        />
+      )),
+    [areas]
+  );
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CoreAreaChart
+          width={500}
+          height={300}
+          data={data}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+          reverseStackOrder
+        >
+          <XAxis
+            dataKey={xAxis.key}
+            tick={(props) => <CustomXAxisTick {...props} />}
+            tickLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            axisLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            label={{
+              value: xAxis.label,
+              dy: 28,
+              className: LABEL_CLASSNAME,
+            }}
+            tickCount={tickCount.x}
+          />
+          <YAxis
+            domain={yAxis.domain}
+            tickLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            axisLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            label={{
+              value: yAxis.label,
+              angle: -90,
+              position: "bottom",
+              offset: -24,
+              dx: -16,
+              className: LABEL_CLASSNAME,
+            }}
+            tick={(props) => <CustomYAxisTick {...props} />}
+            tickCount={tickCount.y}
+            allowDecimals={!!yAxis.allowDecimals}
+          />
+          {showTooltip && (
+            <Tooltip
+              cursor={{ fill: "currentColor", className: "text-custom-background-90/80 cursor-pointer" }}
+              content={({ active, label, payload }) => (
+                <CustomTooltip
+                  active={active}
+                  label={label}
+                  payload={payload}
+                  itemKeys={itemKeys}
+                  itemDotClassNames={itemDotClassNames}
+                />
+              )}
+            />
+          )}
+          {renderAreas}
+        </CoreAreaChart>
+      </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 000000000..339be704d
--- /dev/null
+++ b/packages/propel/src/charts/bar-chart/bar.tsx
@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+// plane imports
+import { TChartData } from "@plane/types";
+import { cn } from "@plane/utils";
+
+// Helper to calculate percentage
+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 MIN_BAR_HEIGHT_FOR_INTERNAL_TEXT = 14; // Minimum height needed to show text inside
+const BAR_BORDER_RADIUS = 2; // Border radius for each bar
+
+export const CustomBar = React.memo((props: any) => {
+  const { fill, x, y, width, height, dataKey, stackKeys, payload, textClassName, showPercentage } = props;
+  // Calculate text position
+  const TEXT_PADDING_Y = Math.min(6, Math.abs(MIN_BAR_HEIGHT_FOR_INTERNAL_TEXT - height / 2));
+  const textY = y + height - TEXT_PADDING_Y; // Position inside bar if tall enough
+  // derived values
+  const currentBarPercentage = calculatePercentage(payload, stackKeys, dataKey);
+  const showText =
+    // from props
+    showPercentage &&
+    // height of the bar is greater than or equal to the minimum height required to show the text
+    height >= MIN_BAR_HEIGHT_FOR_INTERNAL_TEXT &&
+    // bar percentage text has some value
+    currentBarPercentage !== undefined &&
+    // bar percentage is a number
+    !Number.isNaN(currentBarPercentage);
+
+  if (!height) return null;
+  return (
+    <g>
+      <path
+        d={`
+          M${x + BAR_BORDER_RADIUS},${y + height}
+          L${x + BAR_BORDER_RADIUS},${y}
+          Q${x},${y} ${x},${y + BAR_BORDER_RADIUS}
+          L${x},${y + height - BAR_BORDER_RADIUS}
+          Q${x},${y + height} ${x + BAR_BORDER_RADIUS},${y + height}
+          L${x + width - BAR_BORDER_RADIUS},${y + height}
+          Q${x + width},${y + height} ${x + width},${y + height - BAR_BORDER_RADIUS}
+          L${x + width},${y + BAR_BORDER_RADIUS}
+          Q${x + width},${y} ${x + width - BAR_BORDER_RADIUS},${y}
+          L${x + BAR_BORDER_RADIUS},${y}
+        `}
+        className={cn("transition-colors duration-200", fill)}
+        fill="currentColor"
+      />
+      {showText && (
+        <text
+          x={x + width / 2}
+          y={textY}
+          textAnchor="middle"
+          className={cn("text-xs font-medium", textClassName)}
+          fill="currentColor"
+        >
+          {currentBarPercentage}%
+        </text>
+      )}
+    </g>
+  );
+});
+CustomBar.displayName = "CustomBar";
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 000000000..1efe34c51
--- /dev/null
+++ b/packages/propel/src/charts/bar-chart/index.ts
@@ -0,0 +1 @@
+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 000000000..883a0621c
--- /dev/null
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -0,0 +1,125 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import React, { useMemo } from "react";
+import { BarChart as CoreBarChart, Bar, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+// plane imports
+import { AXIS_LINE_CLASSNAME, LABEL_CLASSNAME } from "@plane/constants";
+import { TBarChartProps } from "@plane/types";
+// local components
+import { CustomXAxisTick, CustomYAxisTick } from "../tick";
+import { CustomTooltip } from "../tooltip";
+import { CustomBar } from "./bar";
+
+export const BarChart = React.memo(<K extends string, T extends string>(props: TBarChartProps<K, T>) => {
+  const {
+    data,
+    bars,
+    xAxis,
+    yAxis,
+    barSize = 40,
+    className = "w-full h-96",
+    tickCount = {
+      x: undefined,
+      y: 10,
+    },
+    showTooltip = true,
+  } = props;
+  // derived values
+  const stackKeys = useMemo(() => bars.map((bar) => bar.key), [bars]);
+  const stackDotClassNames = useMemo(
+    () => bars.reduce((acc, bar) => ({ ...acc, [bar.key]: bar.dotClassName }), {}),
+    [bars]
+  );
+
+  const renderBars = useMemo(
+    () =>
+      bars.map((bar) => (
+        <Bar
+          key={bar.key}
+          dataKey={bar.key}
+          stackId={bar.stackId}
+          fill={bar.fillClassName}
+          shape={(shapeProps: any) => (
+            <CustomBar
+              {...shapeProps}
+              stackKeys={stackKeys}
+              textClassName={bar.textClassName}
+              showPercentage={bar.showPercentage}
+            />
+          )}
+        />
+      )),
+    [stackKeys, bars]
+  );
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CoreBarChart
+          data={data}
+          margin={{ top: 10, right: 10, left: 10, bottom: 40 }}
+          barSize={barSize}
+          className="recharts-wrapper"
+        >
+          <XAxis
+            dataKey={xAxis.key}
+            tick={(props) => <CustomXAxisTick {...props} />}
+            tickLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            axisLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            label={{
+              value: xAxis.label,
+              dy: 28,
+              className: LABEL_CLASSNAME,
+            }}
+            tickCount={tickCount.x}
+          />
+          <YAxis
+            domain={yAxis.domain}
+            tickLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            axisLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            label={{
+              value: yAxis.label,
+              angle: -90,
+              position: "bottom",
+              offset: -24,
+              dx: -16,
+              className: LABEL_CLASSNAME,
+            }}
+            tick={(props) => <CustomYAxisTick {...props} />}
+            tickCount={tickCount.y}
+            allowDecimals={!!yAxis.allowDecimals}
+          />
+          {showTooltip && (
+            <Tooltip
+              cursor={{ fill: "currentColor", className: "text-custom-background-90/80 cursor-pointer" }}
+              content={({ active, label, payload }) => (
+                <CustomTooltip
+                  active={active}
+                  label={label}
+                  payload={payload}
+                  itemKeys={stackKeys}
+                  itemDotClassNames={stackDotClassNames}
+                />
+              )}
+            />
+          )}
+          {renderBars}
+        </CoreBarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+BarChart.displayName = "BarChart";
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 000000000..1efe34c51
--- /dev/null
+++ b/packages/propel/src/charts/line-chart/index.ts
@@ -0,0 +1 @@
+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 000000000..c689fe9ba
--- /dev/null
+++ b/packages/propel/src/charts/line-chart/root.tsx
@@ -0,0 +1,115 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import React, { useMemo } from "react";
+import { LineChart as CoreLineChart, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+// plane imports
+import { AXIS_LINE_CLASSNAME, LABEL_CLASSNAME } from "@plane/constants";
+import { TLineChartProps } from "@plane/types";
+// local components
+import { CustomXAxisTick, CustomYAxisTick } from "../tick";
+import { CustomTooltip } from "../tooltip";
+
+export const LineChart = React.memo(<K extends string, T extends string>(props: TLineChartProps<K, T>) => {
+  const {
+    data,
+    lines,
+    xAxis,
+    yAxis,
+    className = "w-full h-96",
+    tickCount = {
+      x: undefined,
+      y: 10,
+    },
+    showTooltip = true,
+  } = props;
+  // derived values
+  const itemKeys = useMemo(() => lines.map((line) => line.key), [lines]);
+  const itemDotClassNames = useMemo(
+    () => lines.reduce((acc, line) => ({ ...acc, [line.key]: line.dotClassName }), {}),
+    [lines]
+  );
+
+  const renderLines = useMemo(
+    () =>
+      lines.map((line) => (
+        <Line key={line.key} dataKey={line.key} type="monotone" className={line.className} stroke="inherit" />
+      )),
+    [lines]
+  );
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CoreLineChart
+          width={500}
+          height={300}
+          data={data}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <XAxis
+            dataKey={xAxis.key}
+            tick={(props) => <CustomXAxisTick {...props} />}
+            tickLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            axisLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            label={{
+              value: xAxis.label,
+              dy: 28,
+              className: LABEL_CLASSNAME,
+            }}
+            tickCount={tickCount.x}
+          />
+          <YAxis
+            domain={yAxis.domain}
+            tickLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            axisLine={{
+              stroke: "currentColor",
+              className: AXIS_LINE_CLASSNAME,
+            }}
+            label={{
+              value: yAxis.label,
+              angle: -90,
+              position: "bottom",
+              offset: -24,
+              dx: -16,
+              className: LABEL_CLASSNAME,
+            }}
+            tick={(props) => <CustomYAxisTick {...props} />}
+            tickCount={tickCount.y}
+            allowDecimals={!!yAxis.allowDecimals}
+          />
+          {showTooltip && (
+            <Tooltip
+              cursor={{ fill: "currentColor", className: "text-custom-background-90/80 cursor-pointer" }}
+              content={({ active, label, payload }) => (
+                <CustomTooltip
+                  active={active}
+                  label={label}
+                  payload={payload}
+                  itemKeys={itemKeys}
+                  itemDotClassNames={itemDotClassNames}
+                />
+              )}
+            />
+          )}
+          {renderLines}
+        </CoreLineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+});
+LineChart.displayName = "LineChart";
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 000000000..1efe34c51
--- /dev/null
+++ b/packages/propel/src/charts/pie-chart/index.ts
@@ -0,0 +1 @@
+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 000000000..d9e2558ed
--- /dev/null
+++ b/packages/propel/src/charts/pie-chart/root.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { Cell, PieChart as CorePieChart, Pie, ResponsiveContainer, Tooltip } from "recharts";
+// plane imports
+import { TPieChartProps } from "@plane/types";
+// local components
+import { CustomPieChartTooltip } from "./tooltip";
+
+export const PieChart = React.memo(<K extends string, T extends string>(props: TPieChartProps<K, T>) => {
+  const { data, dataKey, cells, className = "w-full h-96", innerRadius, outerRadius, showTooltip = true } = props;
+
+  const renderCells = useMemo(
+    () => cells.map((cell) => <Cell key={cell.key} className={cell.className} style={cell.style} />),
+    [cells]
+  );
+
+  return (
+    <div className={className}>
+      <ResponsiveContainer width="100%" height="100%">
+        <CorePieChart
+          width={500}
+          height={300}
+          data={data}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5,
+          }}
+        >
+          <Pie data={data} dataKey={dataKey} cx="50%" cy="50%" innerRadius={innerRadius} outerRadius={outerRadius}>
+            {renderCells}
+          </Pie>
+          {showTooltip && (
+            <Tooltip
+              cursor={{ fill: "currentColor", className: "text-custom-background-90/80 cursor-pointer" }}
+              content={({ active, payload }) => {
+                if (!active || !payload || !payload.length) return null;
+                const cellData = cells.find((c) => c.key === payload[0].name);
+                if (!cellData) return null;
+                return <CustomPieChartTooltip dotClassName={cellData.dotClassName} label={dataKey} 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 000000000..56c7fa34c
--- /dev/null
+++ b/packages/propel/src/charts/pie-chart/tooltip.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+// plane imports
+import { Card, ECardSpacing } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+type Props = {
+  dotClassName?: string;
+  label: string;
+  payload: Payload<ValueType, NameType>[];
+};
+
+export const CustomPieChartTooltip = React.memo((props: Props) => {
+  const { dotClassName, label, payload } = props;
+
+  return (
+    <Card className="flex flex-col" spacing={ECardSpacing.SM}>
+      <p className="text-xs text-custom-text-100 font-medium border-b border-custom-border-200 pb-2 capitalize">
+        {label}
+      </p>
+      {payload?.map((item) => (
+        <div key={item?.dataKey} className="flex items-center gap-2 text-xs capitalize">
+          <div className={cn("size-2 rounded-full", dotClassName)} />
+          <span className="text-custom-text-300">{item?.name}:</span>
+          <span className="font-medium text-custom-text-200">{item?.value}</span>
+        </div>
+      ))}
+    </Card>
+  );
+});
+CustomPieChartTooltip.displayName = "CustomPieChartTooltip";
diff --git a/packages/propel/src/charts/tick.tsx b/packages/propel/src/charts/tick.tsx
new file mode 100644
index 000000000..c631d7d6e
--- /dev/null
+++ b/packages/propel/src/charts/tick.tsx
@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+// Common classnames
+const AXIS_TICK_CLASSNAME = "fill-custom-text-400 text-sm capitalize";
+
+export const CustomXAxisTick = React.memo<any>(({ x, y, payload }: any) => (
+  <g transform={`translate(${x},${y})`}>
+    <text y={0} dy={16} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
+      {payload.value}
+    </text>
+  </g>
+));
+CustomXAxisTick.displayName = "CustomXAxisTick";
+
+export const CustomYAxisTick = React.memo<any>(({ x, y, payload }: any) => (
+  <g transform={`translate(${x},${y})`}>
+    <text dx={-10} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
+      {payload.value}
+    </text>
+  </g>
+));
+CustomYAxisTick.displayName = "CustomYAxisTick";
diff --git a/packages/propel/src/charts/tooltip.tsx b/packages/propel/src/charts/tooltip.tsx
new file mode 100644
index 000000000..e7f92a9cb
--- /dev/null
+++ b/packages/propel/src/charts/tooltip.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent";
+// plane imports
+import { Card, ECardSpacing } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+type Props = {
+  active: boolean | undefined;
+  label: string | undefined;
+  payload: Payload<ValueType, NameType>[] | undefined;
+  itemKeys: string[];
+  itemDotClassNames: Record<string, string>;
+};
+
+export const CustomTooltip = React.memo((props: Props) => {
+  const { active, label, payload, itemKeys, itemDotClassNames } = props;
+  // derived values
+  const filteredPayload = payload?.filter((item) => item.dataKey && itemKeys.includes(`${item.dataKey}`));
+
+  if (!active || !filteredPayload || !filteredPayload.length) return null;
+  return (
+    <Card className="flex flex-col" spacing={ECardSpacing.SM}>
+      <p className="text-xs text-custom-text-100 font-medium border-b border-custom-border-200 pb-2 capitalize">
+        {label}
+      </p>
+      {filteredPayload.map((item) => {
+        if (!item.dataKey) return null;
+        return (
+          <div key={item?.dataKey} className="flex items-center gap-2 text-xs capitalize">
+            {itemDotClassNames[item?.dataKey] && (
+              <div className={cn("size-2 rounded-full", itemDotClassNames[item?.dataKey])} />
+            )}
+            <span className="text-custom-text-300">{item?.name}:</span>
+            <span className="font-medium text-custom-text-200">{item?.value}</span>
+          </div>
+        );
+      })}
+    </Card>
+  );
+});
+CustomTooltip.displayName = "CustomTooltip";
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 000000000..1efe34c51
--- /dev/null
+++ b/packages/propel/src/charts/tree-map/index.ts
@@ -0,0 +1 @@
+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 000000000..f3b062cb0
--- /dev/null
+++ b/packages/propel/src/charts/tree-map/map-content.tsx
@@ -0,0 +1,276 @@
+import React, { useMemo } from "react";
+// plane imports
+import { TBottomSectionConfig, TContentVisibility, TTopSectionConfig } from "@plane/types";
+import { cn } from "@plane/utils";
+
+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 const CustomTreeMapContent: React.FC<any> = ({
+  x,
+  y,
+  width,
+  height,
+  name,
+  value,
+  label,
+  fillColor,
+  fillClassName,
+  textClassName,
+  icon,
+}) => {
+  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-custom-text-300"}
+            >
+              {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(
+                "text-sm font-extralight tracking-wider select-none",
+                textClassName || "text-custom-text-300"
+              )}
+              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(
+                  "text-sm font-extralight tracking-wider select-none",
+                  textClassName || "text-custom-text-300"
+                )}
+                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 000000000..47ea21d72
--- /dev/null
+++ b/packages/propel/src/charts/tree-map/root.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Treemap, ResponsiveContainer, Tooltip } from "recharts";
+// plane imports
+import { TreeMapChartProps } from "@plane/types";
+import { cn } from "@plane/utils";
+// local imports
+import { CustomTreeMapContent } from "./map-content";
+import { TreeMapTooltip } from "./tooltip";
+
+export const TreeMapChart = React.memo((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="currentColor"
+          className="text-custom-background-100 bg-custom-background-100"
+          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: "text-custom-background-90/80 cursor-pointer",
+              }}
+            />
+          )}
+        </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 000000000..55c6e687e
--- /dev/null
+++ b/packages/propel/src/charts/tree-map/tooltip.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+// plane imports
+import { Card, ECardSpacing } from "@plane/ui";
+
+interface TreeMapTooltipProps {
+  active: boolean | undefined;
+  payload: any[] | undefined;
+}
+
+export const TreeMapTooltip = React.memo(({ 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-custom-border-200 pb-2.5">
+        {data?.icon}
+        <p className="text-xs text-custom-text-100 font-medium capitalize">{data?.name}</p>
+      </div>
+      <span className="text-xs font-medium text-custom-text-200">
+        {data?.value.toLocaleString()}
+        {data.label && ` ${data.label}`}
+      </span>
+    </Card>
+  );
+});
+
+TreeMapTooltip.displayName = "TreeMapTooltip";
diff --git a/packages/propel/src/globals.css b/packages/propel/src/globals.css
new file mode 100644
index 000000000..ee2896808
--- /dev/null
+++ b/packages/propel/src/globals.css
@@ -0,0 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply font-sans antialiased bg-background text-foreground;
+  }
+}
diff --git a/packages/propel/src/index.ts b/packages/propel/src/index.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/propel/tailwind.config.ts b/packages/propel/tailwind.config.ts
new file mode 100644
index 000000000..859971bab
--- /dev/null
+++ b/packages/propel/tailwind.config.ts
@@ -0,0 +1,7 @@
+import type { Config } from "tailwindcss";
+import sharedConfig from "@plane/tailwind-config/tailwind.config";
+
+export default {
+  ...sharedConfig,
+  content: ["./src/**/*.{ts,tsx}"],
+} satisfies Config;
diff --git a/packages/propel/tsconfig.json b/packages/propel/tsconfig.json
new file mode 100644
index 000000000..1f695a242
--- /dev/null
+++ b/packages/propel/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/services/.eslintignore b/packages/services/.eslintignore
new file mode 100644
index 000000000..6019047c3
--- /dev/null
+++ b/packages/services/.eslintignore
@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*
\ No newline at end of file
diff --git a/packages/services/.eslintrc.js b/packages/services/.eslintrc.js
new file mode 100644
index 000000000..558b8f76e
--- /dev/null
+++ b/packages/services/.eslintrc.js
@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};
diff --git a/packages/services/.prettierrc b/packages/services/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/packages/services/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/packages/services/package.json b/packages/services/package.json
new file mode 100644
index 000000000..792186de7
--- /dev/null
+++ b/packages/services/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@plane/services",
+  "version": "0.24.1",
+  "private": true,
+  "main": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:errors": "eslint src --ext .ts,.tsx --quiet"
+  },
+  "dependencies": {
+    "@plane/constants": "*",
+    "axios": "^1.7.9"
+  }
+}
diff --git a/packages/services/src/ai/ai.service.ts b/packages/services/src/ai/ai.service.ts
new file mode 100644
index 000000000..261cf9df5
--- /dev/null
+++ b/packages/services/src/ai/ai.service.ts
@@ -0,0 +1,67 @@
+// plane web constants
+import { AI_EDITOR_TASKS, 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 000000000..bce346aa6
--- /dev/null
+++ b/packages/services/src/ai/index.ts
@@ -0,0 +1 @@
+export * from "./ai.service";
diff --git a/packages/services/src/analytics/analytics.service.ts b/packages/services/src/analytics/analytics.service.ts
new file mode 100644
index 000000000..c012fd26f
--- /dev/null
+++ b/packages/services/src/analytics/analytics.service.ts
@@ -0,0 +1,93 @@
+// constants
+import { API_BASE_URL } from "@plane/constants";
+// types
+import {
+  IAnalyticsParams,
+  IAnalyticsResponse,
+  IDefaultAnalyticsResponse,
+  IExportAnalyticsFormData,
+  ISaveAnalyticsFormData,
+} from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+export class AnalyticsService extends APIService {
+  constructor(BASE_URL?: string) {
+    super(BASE_URL || API_BASE_URL);
+  }
+
+  /**
+   * Retrieves analytics data for a specific workspace
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {IAnalyticsParams} params - Parameters for filtering analytics data
+   * @param {string|number} [params.project] - Optional project identifier that will be converted to string
+   * @returns {Promise<IAnalyticsResponse>} The analytics data for the workspace
+   * @throws {Error} Throws response data if the request fails
+   */
+  async getAnalytics(workspaceSlug: string, params: IAnalyticsParams): Promise<IAnalyticsResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/analytics/`, {
+      params: {
+        ...params,
+        project: params?.project ? params.project.toString() : null,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves default analytics data for a workspace
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {Partial<IAnalyticsParams>} [params] - Optional parameters for filtering default analytics
+   * @param {string|number} [params.project] - Optional project identifier that will be converted to string
+   * @returns {Promise<IDefaultAnalyticsResponse>} The default analytics data
+   * @throws {Error} Throws response data if the request fails
+   */
+  async getDefaultAnalytics(
+    workspaceSlug: string,
+    params?: Partial<IAnalyticsParams>
+  ): Promise<IDefaultAnalyticsResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/default-analytics/`, {
+      params: {
+        ...params,
+        project: params?.project ? params.project.toString() : null,
+      },
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Saves analytics view configuration for a workspace
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {ISaveAnalyticsFormData} data - The analytics configuration data to save
+   * @returns {Promise<any>} The response from saving the analytics view
+   * @throws {Error} Throws response data if the request fails
+   */
+  async save(workspaceSlug: string, data: ISaveAnalyticsFormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/analytic-view/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Exports analytics data for a workspace
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @param {IExportAnalyticsFormData} data - Configuration for the analytics export
+   * @returns {Promise<any>} The exported analytics data
+   * @throws {Error} Throws response data if the request fails
+   */
+  async export(workspaceSlug: string, data: IExportAnalyticsFormData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/export-analytics/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/packages/services/src/analytics/index.ts b/packages/services/src/analytics/index.ts
new file mode 100644
index 000000000..7655bd442
--- /dev/null
+++ b/packages/services/src/analytics/index.ts
@@ -0,0 +1 @@
+export * from "./analytics.service";
diff --git a/packages/services/src/api.service.ts b/packages/services/src/api.service.ts
new file mode 100644
index 000000000..619a0d4ec
--- /dev/null
+++ b/packages/services/src/api.service.ts
@@ -0,0 +1,123 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
+import { IndexedDBService } from "./indexedDB.service";
+
+/**
+ * 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 = axios.create({
+      baseURL,
+      withCredentials: true,
+    });
+
+    this.setupInterceptors();
+  }
+
+  /**
+   * Sets up axios interceptors for handling responses
+   * Currently handles 401 unauthorized responses by redirecting to login
+   * @private
+   */
+  private setupInterceptors() {
+    this.axiosInstance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response && error.response.status === 401) {
+          const currentPath = window.location.pathname;
+          let prefix = "/";
+          let updatedPath = currentPath;
+
+          // Check for special path prefixes
+          if (currentPath.startsWith("/god-mode")) {
+            prefix = "/god-mode";
+            updatedPath = currentPath.replace("/god-mode", "");
+          } else if (currentPath.startsWith("/spaces")) {
+            prefix = "/spaces";
+            updatedPath = currentPath.replace("/spaces", "");
+          }
+
+          window.location.replace(`${prefix}${updatedPath ? `?next_path=${updatedPath}` : ""}`);
+        }
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  /**
+   * 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 000000000..1890533d2
--- /dev/null
+++ b/packages/services/src/auth/auth.service.ts
@@ -0,0 +1,125 @@
+import { API_BASE_URL } from "@plane/constants";
+// types
+import { 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 000000000..340b36856
--- /dev/null
+++ b/packages/services/src/auth/index.ts
@@ -0,0 +1,2 @@
+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 000000000..638a7b6f2
--- /dev/null
+++ b/packages/services/src/auth/sites-auth.service.ts
@@ -0,0 +1,49 @@
+import { API_BASE_URL } from "@plane/constants";
+// types
+import { 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 000000000..c9e14441e
--- /dev/null
+++ b/packages/services/src/cycle/cycle-analytics.service.ts
@@ -0,0 +1,78 @@
+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 000000000..784fd32e7
--- /dev/null
+++ b/packages/services/src/cycle/cycle-archive.service.ts
@@ -0,0 +1,83 @@
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..43c01396c
--- /dev/null
+++ b/packages/services/src/cycle/cycle-operations.service.ts
@@ -0,0 +1,70 @@
+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 000000000..961e5588a
--- /dev/null
+++ b/packages/services/src/cycle/cycle.service.ts
@@ -0,0 +1,184 @@
+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 000000000..6f5dbc679
--- /dev/null
+++ b/packages/services/src/cycle/index.ts
@@ -0,0 +1,5 @@
+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 000000000..99cf361a7
--- /dev/null
+++ b/packages/services/src/cycle/sites-cycle.service.ts
@@ -0,0 +1,31 @@
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..6a4a6bcca
--- /dev/null
+++ b/packages/services/src/dashboard/dashboard.service.ts
@@ -0,0 +1,79 @@
+import { API_BASE_URL } from "@plane/constants";
+import { 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;
+      });
+  }
+}
diff --git a/packages/services/src/dashboard/index.ts b/packages/services/src/dashboard/index.ts
new file mode 100644
index 000000000..79e3f0400
--- /dev/null
+++ b/packages/services/src/dashboard/index.ts
@@ -0,0 +1 @@
+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 000000000..74dc9135d
--- /dev/null
+++ b/packages/services/src/developer/api-token.service.ts
@@ -0,0 +1,68 @@
+import { API_BASE_URL } from "@plane/constants";
+import { 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
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @returns {Promise<IApiToken[]>} Array of API tokens associated with the workspace
+   * @throws {Error} Throws response data if the request fails
+   */
+  async list(workspaceSlug: string): Promise<IApiToken[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/api-tokens/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Retrieves a specific API token by its ID
+   * @param {string} workspaceSlug - The unique identifier for the workspace
+   * @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(workspaceSlug: string, tokenId: string): Promise<IApiToken> {
+    return this.get(`/api/workspaces/${workspaceSlug}/api-tokens/${tokenId}`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Creates a new API token for a workspace
+   * @param {string} workspaceSlug - The unique identifier for the 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(workspaceSlug: string, data: Partial<IApiToken>): Promise<IApiToken> {
+    return this.post(`/api/workspaces/${workspaceSlug}/api-tokens/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  /**
+   * Deletes a specific API token from the workspace
+   * @param {string} workspaceSlug - The unique identifier for 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(workspaceSlug: string, tokenId: string): Promise<IApiToken> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/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 000000000..a78a7b092
--- /dev/null
+++ b/packages/services/src/developer/index.ts
@@ -0,0 +1,2 @@
+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 000000000..e48da3430
--- /dev/null
+++ b/packages/services/src/developer/webhook.service.ts
@@ -0,0 +1,104 @@
+import { API_BASE_URL } from "@plane/constants";
+import { 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;
+      });
+  }
+}
diff --git a/space/core/services/file-upload.service.ts b/packages/services/src/file/file-upload.service.ts
similarity index 55%
rename from space/core/services/file-upload.service.ts
rename to packages/services/src/file/file-upload.service.ts
index 09e95f3c0..a2e5ce5e6 100644
--- a/space/core/services/file-upload.service.ts
+++ b/packages/services/src/file/file-upload.service.ts
@@ -1,7 +1,12 @@
 import axios from "axios";
-// services
-import { APIService } from "@/services/api.service";
+// 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;
 
@@ -9,7 +14,17 @@ export class FileUploadService extends APIService {
     super("");
   }
 
-  async uploadFile(url: string, data: FormData): Promise<void> {
+  /**
+   * 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: {
@@ -28,7 +43,10 @@ export class FileUploadService extends APIService {
       });
   }
 
+  /**
+   * Cancels the upload
+   */
   cancelUpload() {
     this.cancelSource.cancel("Upload canceled");
   }
-}
+}
\ No newline at end of file
diff --git a/packages/services/src/file/file.service.ts b/packages/services/src/file/file.service.ts
new file mode 100644
index 000000000..59c054faf
--- /dev/null
+++ b/packages/services/src/file/file.service.ts
@@ -0,0 +1,67 @@
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+// api service
+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;
+      });
+  }
+}
diff --git a/packages/services/src/file/helper.ts b/packages/services/src/file/helper.ts
new file mode 100644
index 000000000..f2361290c
--- /dev/null
+++ b/packages/services/src/file/helper.ts
@@ -0,0 +1,36 @@
+import { TFileMetaDataLite, TFileSignedURLResponse } from "@plane/types";
+
+/**
+ * @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 returns the necessary file meta data to upload a file
+ * @param {File} file
+ * @returns {TFileMetaDataLite} payload with file info
+ */
+export const getFileMetaDataForUpload = (file: File): TFileMetaDataLite => ({
+  name: file.name,
+  size: file.size,
+  type: file.type,
+});
+
+/**
+ * @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 000000000..439db5ac7
--- /dev/null
+++ b/packages/services/src/file/index.ts
@@ -0,0 +1,3 @@
+export * from "./file-upload.service";
+export * from "./sites-file.service";
+export * from "./file.service";
diff --git a/space/core/services/file.service.ts b/packages/services/src/file/sites-file.service.ts
similarity index 54%
rename from space/core/services/file.service.ts
rename to packages/services/src/file/sites-file.service.ts
index 0b4807aff..2d606a09e 100644
--- a/space/core/services/file.service.ts
+++ b/packages/services/src/file/sites-file.service.ts
@@ -1,22 +1,40 @@
+// plane imports
 import { API_BASE_URL } from "@plane/constants";
+// local services
 import { TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
+import { FileUploadService } from "./file-upload.service";
 // helpers
-import { generateFileUploadPayload, getAssetIdFromUrl, getFileMetaDataForUpload } from "@/helpers/file.helper";
-// services
-import { APIService } from "@/services/api.service";
-import { FileUploadService } from "@/services/file-upload.service";
+import { FileService } from "./file.service";
+import { generateFileUploadPayload, getAssetIdFromUrl, getFileMetaDataForUpload } from "./helper";
 
-export class FileService extends APIService {
+/**
+ * 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;
 
-  constructor() {
-    super(API_BASE_URL);
+  /**
+   * 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)
@@ -25,6 +43,14 @@ export class FileService extends APIService {
       });
   }
 
+  /**
+   * 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,
@@ -39,6 +65,14 @@ export class FileService extends APIService {
       });
   }
 
+  /**
+   * 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 = getFileMetaDataForUpload(file);
     return this.post(`/api/public/assets/v2/anchor/${anchor}/`, {
@@ -57,23 +91,13 @@ export class FileService extends APIService {
       });
   }
 
-  async deleteNewAsset(assetPath: string): Promise<void> {
-    return this.delete(assetPath)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  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 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(workspaceSlug: string, src: string): Promise<void> {
     // remove the last slash and get the asset id
     const assetId = getAssetIdFromUrl(src);
@@ -84,16 +108,10 @@ export class FileService extends APIService {
       });
   }
 
-  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;
-      });
-  }
-
+  /**
+   * Cancels the upload
+   */
   cancelUpload() {
-    this.cancelSource.cancel("Upload cancelled");
+    this.cancelSource.cancelUpload();
   }
 }
diff --git a/packages/services/src/index.ts b/packages/services/src/index.ts
new file mode 100644
index 000000000..3c4908462
--- /dev/null
+++ b/packages/services/src/index.ts
@@ -0,0 +1,16 @@
+export * from "./ai";
+export * from "./analytics";
+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";
diff --git a/packages/services/src/indexedDB.service.ts b/packages/services/src/indexedDB.service.ts
new file mode 100644
index 000000000..1b568f2ae
--- /dev/null
+++ b/packages/services/src/indexedDB.service.ts
@@ -0,0 +1,62 @@
+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 000000000..dd3d4a663
--- /dev/null
+++ b/packages/services/src/instance/index.ts
@@ -0,0 +1 @@
+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 000000000..637c81cad
--- /dev/null
+++ b/packages/services/src/instance/instance.service.ts
@@ -0,0 +1,125 @@
+// 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;
+      });
+  }
+}
diff --git a/packages/services/src/intake/index.ts b/packages/services/src/intake/index.ts
new file mode 100644
index 000000000..cde9ddbd3
--- /dev/null
+++ b/packages/services/src/intake/index.ts
@@ -0,0 +1,2 @@
+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 000000000..1c4a93c18
--- /dev/null
+++ b/packages/services/src/intake/intake.service.ts
@@ -0,0 +1,8 @@
+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);
+  }
+}
diff --git a/packages/services/src/intake/issue.service.ts b/packages/services/src/intake/issue.service.ts
new file mode 100644
index 000000000..b48328df4
--- /dev/null
+++ b/packages/services/src/intake/issue.service.ts
@@ -0,0 +1,18 @@
+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;
+      });
+  }
+}
diff --git a/packages/services/src/issue/index.ts b/packages/services/src/issue/index.ts
new file mode 100644
index 000000000..79d4537cd
--- /dev/null
+++ b/packages/services/src/issue/index.ts
@@ -0,0 +1 @@
+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 000000000..9b6aa772e
--- /dev/null
+++ b/packages/services/src/issue/sites-issue.service.ts
@@ -0,0 +1,244 @@
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..5bf89fa96
--- /dev/null
+++ b/packages/services/src/label/index.ts
@@ -0,0 +1 @@
+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 000000000..60ad96271
--- /dev/null
+++ b/packages/services/src/label/sites-label.service.ts
@@ -0,0 +1,31 @@
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..ae4b80864
--- /dev/null
+++ b/packages/services/src/live.service.ts
@@ -0,0 +1,8 @@
+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 000000000..ad4921228
--- /dev/null
+++ b/packages/services/src/module/index.ts
@@ -0,0 +1,4 @@
+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 000000000..8c8ec3f47
--- /dev/null
+++ b/packages/services/src/module/link.service.ts
@@ -0,0 +1,86 @@
+// 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
+   */
+  constructor(baseURL: string) {
+    super(baseURL);
+  }
+
+  /**
+   * 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 000000000..21321b36e
--- /dev/null
+++ b/packages/services/src/module/module.service.ts
@@ -0,0 +1,212 @@
+// types
+import type { IModule, ILinkDetails, ModuleLink, TIssuesResponse } from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+export class ModuleService extends APIService {
+  constructor(baseURL: string) {
+    super(baseURL);
+  }
+
+  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 000000000..9185873da
--- /dev/null
+++ b/packages/services/src/module/operations.service.ts
@@ -0,0 +1,146 @@
+// types
+// import type { IModule, ILinkDetails, ModuleLink, TIssuesResponse } from "@plane/types";
+// services
+import { APIService } from "../api.service";
+
+export class ModuleOperationService extends APIService {
+  constructor(baseURL: string) {
+    super(baseURL);
+  }
+
+  /**
+   * 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 000000000..333535ac3
--- /dev/null
+++ b/packages/services/src/module/sites-module.service.ts
@@ -0,0 +1,31 @@
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+// api service
+import { 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 000000000..4cc54d2c2
--- /dev/null
+++ b/packages/services/src/project/index.ts
@@ -0,0 +1,2 @@
+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 000000000..52d42f5ee
--- /dev/null
+++ b/packages/services/src/project/sites-publish.service.ts
@@ -0,0 +1,46 @@
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..7eef71911
--- /dev/null
+++ b/packages/services/src/project/view.service.ts
@@ -0,0 +1,14 @@
+// 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 000000000..5b49aad0e
--- /dev/null
+++ b/packages/services/src/state/index.ts
@@ -0,0 +1 @@
+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 000000000..98ff466d0
--- /dev/null
+++ b/packages/services/src/state/sites-state.service.ts
@@ -0,0 +1,31 @@
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..0c6e0497f
--- /dev/null
+++ b/packages/services/src/user/favorite.service.ts
@@ -0,0 +1,94 @@
+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 000000000..f01a1a47b
--- /dev/null
+++ b/packages/services/src/user/index.ts
@@ -0,0 +1,3 @@
+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 000000000..45cb80626
--- /dev/null
+++ b/packages/services/src/user/sites-member.service.ts
@@ -0,0 +1,31 @@
+// plane imports
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..c302b1d4f
--- /dev/null
+++ b/packages/services/src/user/user.service.ts
@@ -0,0 +1,88 @@
+// 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\
+   * @remarks This method uses the validateStatus: null option to bypass interceptors for unauthorized errors.
+   */
+  async me(): Promise<IUser> {
+    return this.get("/api/users/me/", { validateStatus: null })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  /**
+   * 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
+   * @remarks This method uses the validateStatus: null option to bypass interceptors for unauthorized errors.
+   */
+  async adminDetails(): Promise<IUser> {
+    return this.get("/api/instances/admins/me/", { validateStatus: null })
+      .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 000000000..a48efdee2
--- /dev/null
+++ b/packages/services/src/workspace/index.ts
@@ -0,0 +1,6 @@
+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 000000000..7ac3d4ce4
--- /dev/null
+++ b/packages/services/src/workspace/instance-workspace.service.ts
@@ -0,0 +1,65 @@
+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 000000000..46088371f
--- /dev/null
+++ b/packages/services/src/workspace/invitation.service.ts
@@ -0,0 +1,117 @@
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..e92225af3
--- /dev/null
+++ b/packages/services/src/workspace/member.service.ts
@@ -0,0 +1,92 @@
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..a21f63222
--- /dev/null
+++ b/packages/services/src/workspace/notification.service.ts
@@ -0,0 +1,137 @@
+import { API_BASE_URL } from "@plane/constants";
+import {
+  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 000000000..0ea21f742
--- /dev/null
+++ b/packages/services/src/workspace/view.service.ts
@@ -0,0 +1,67 @@
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..72ef9fcef
--- /dev/null
+++ b/packages/services/src/workspace/workspace.service.ts
@@ -0,0 +1,141 @@
+import { API_BASE_URL } from "@plane/constants";
+import { 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 000000000..efce2a9fe
--- /dev/null
+++ b/packages/services/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "lib": ["esnext", "dom"],
+  },
+  "include": ["./src"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/shared-state/.eslintignore b/packages/shared-state/.eslintignore
new file mode 100644
index 000000000..6019047c3
--- /dev/null
+++ b/packages/shared-state/.eslintignore
@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*
\ No newline at end of file
diff --git a/packages/shared-state/.eslintrc.js b/packages/shared-state/.eslintrc.js
new file mode 100644
index 000000000..558b8f76e
--- /dev/null
+++ b/packages/shared-state/.eslintrc.js
@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};
diff --git a/packages/shared-state/.prettierrc b/packages/shared-state/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/packages/shared-state/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/packages/shared-state/package.json b/packages/shared-state/package.json
new file mode 100644
index 000000000..10e802c67
--- /dev/null
+++ b/packages/shared-state/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@plane/shared-state",
+  "version": "0.24.1",
+  "description": "Shared state shared across multiple apps internally",
+  "private": true,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:errors": "eslint src --ext .ts,.tsx --quiet"
+  },
+  "dependencies": {
+    "zod": "^3.22.2"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@types/node": "^22.5.4",
+    "typescript": "^5.3.3"
+  }
+}
diff --git a/packages/shared-state/src/index.ts b/packages/shared-state/src/index.ts
new file mode 100644
index 000000000..e69de29bb
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 000000000..f7f30f5ba
--- /dev/null
+++ b/packages/shared-state/src/store/user.store.ts
@@ -0,0 +1,136 @@
+import { makeObservable, observable } from "mobx";
+import { 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/workspace.store.ts b/packages/shared-state/src/store/workspace.store.ts
new file mode 100644
index 000000000..18af2840a
--- /dev/null
+++ b/packages/shared-state/src/store/workspace.store.ts
@@ -0,0 +1,28 @@
+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/tsconfig.json b/packages/shared-state/tsconfig.json
new file mode 100644
index 000000000..0c2f64d1a
--- /dev/null
+++ b/packages/shared-state/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "lib": ["esnext", "dom"],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["./src"],
+  "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/packages/tailwind-config-custom/package.json b/packages/tailwind-config/package.json
similarity index 77%
rename from packages/tailwind-config-custom/package.json
rename to packages/tailwind-config/package.json
index a7fac6401..a2f081a43 100644
--- a/packages/tailwind-config-custom/package.json
+++ b/packages/tailwind-config/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "tailwind-config-custom",
+  "name": "@plane/tailwind-config",
   "version": "0.24.1",
   "description": "common tailwind configuration across monorepo",
-  "main": "index.js",
+  "main": "tailwind.config.js",
   "private": true,
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
@@ -10,7 +10,7 @@
     "postcss": "^8.4.38",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
-    "tailwindcss": "^3.2.7",
+    "tailwindcss": "^3.4.17",
     "tailwindcss-animate": "^1.0.6"
   }
 }
diff --git a/packages/tailwind-config-custom/postcss.config.js b/packages/tailwind-config/postcss.config.js
similarity index 100%
rename from packages/tailwind-config-custom/postcss.config.js
rename to packages/tailwind-config/postcss.config.js
diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config/tailwind.config.js
similarity index 98%
rename from packages/tailwind-config-custom/tailwind.config.js
rename to packages/tailwind-config/tailwind.config.js
index 4c8563f5f..3e34ca1f0 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config/tailwind.config.js
@@ -19,6 +19,7 @@ module.exports = {
       "./app/**/*.tsx",
       "./ui/**/*.tsx",
       "../packages/ui/src/**/*.{js,ts,jsx,tsx}",
+      "../packages/propel/src/**/*.{js,ts,jsx,tsx}",
       "../packages/editor/src/**/*.{js,ts,jsx,tsx}",
       "!../packages/ui/**/*.stories{js,ts,jsx,tsx}",
     ],
@@ -202,6 +203,11 @@ module.exports = {
             },
           },
           backdrop: "rgba(0, 0, 0, 0.25)",
+          scrollbar: {
+            neutral: "rgba(96, 100, 108, 0.1)",
+            hover: "rgba(96, 100, 108, 0.25)",
+            active: "rgba(96, 100, 108, 0.7)",
+          },
         },
         onboarding: {
           background: {
diff --git a/packages/types/.prettierrc b/packages/types/.prettierrc
new file mode 100644
index 000000000..87d988f1b
--- /dev/null
+++ b/packages/types/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/packages/types/src/activity.d.ts b/packages/types/src/activity.d.ts
new file mode 100644
index 000000000..98d54dabc
--- /dev/null
+++ b/packages/types/src/activity.d.ts
@@ -0,0 +1,36 @@
+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/auth.d.ts b/packages/types/src/auth.d.ts
index 576ac45b6..65000c503 100644
--- a/packages/types/src/auth.d.ts
+++ b/packages/types/src/auth.d.ts
@@ -7,6 +7,7 @@ export interface IEmailCheckData {
 export interface IEmailCheckResponse {
   status: "MAGIC_CODE" | "CREDENTIAL";
   existing: boolean;
+  is_password_autoset: boolean;
 }
 
 export interface ILoginTokenResponse {
diff --git a/packages/types/src/charts.d.ts b/packages/types/src/charts.d.ts
new file mode 100644
index 000000000..473c1077e
--- /dev/null
+++ b/packages/types/src/charts.d.ts
@@ -0,0 +1,118 @@
+export type TChartData<K extends string, T extends string> = {
+  // required key
+  [key in K]: string | number;
+} & Record<T, any>;
+
+type TChartProps<K extends string, T extends string> = {
+  data: TChartData<K, T>[];
+  xAxis: {
+    key: keyof TChartData<K, T>;
+    label: string;
+  };
+  yAxis: {
+    key: keyof TChartData<K, T>;
+    label: string;
+    domain?: [number, number];
+    allowDecimals?: boolean;
+  };
+  className?: string;
+  tickCount?: {
+    x?: number;
+    y?: number;
+  };
+  showTooltip?: boolean;
+};
+
+export type TBarItem<T extends string> = {
+  key: T;
+  fillClassName: string;
+  textClassName: string;
+  dotClassName?: string;
+  showPercentage?: boolean;
+  stackId: string;
+};
+
+export type TBarChartProps<K extends string, T extends string> = TChartProps<K, T> & {
+  bars: TBarItem<T>[];
+  barSize?: number;
+};
+
+export type TLineItem<T extends string> = {
+  key: T;
+  className?: string;
+  style?: Record<string, string | number>;
+  dotClassName?: string;
+};
+
+export type TLineChartProps<K extends string, T extends string> = TChartProps<K, T> & {
+  lines: TLineItem<T>[];
+};
+
+export type TAreaItem<T extends string> = {
+  key: T;
+  stackId: string;
+  className?: string;
+  style?: Record<string, string | number>;
+  dotClassName?: string;
+};
+
+export type TAreaChartProps<K extends string, T extends string> = TChartProps<K, T> & {
+  areas: TAreaItem<T>[];
+};
+
+export type TCellItem<T extends string> = {
+  key: T;
+  className?: string;
+  style?: Record<string, string | number>;
+  dotClassName?: string;
+};
+
+export type TPieChartProps<K extends string, T extends string> = Pick<
+  TChartProps<K, T>,
+  "className" | "data" | "showTooltip"
+> & {
+  dataKey: T;
+  cells: TCellItem<T>[];
+  innerRadius?: number;
+  outerRadius?: number;
+};
+
+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;
+};
diff --git a/packages/types/src/command-palette.d.ts b/packages/types/src/command-palette.d.ts
new file mode 100644
index 000000000..6e072ab8f
--- /dev/null
+++ b/packages/types/src/command-palette.d.ts
@@ -0,0 +1,15 @@
+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.d.ts b/packages/types/src/common.d.ts
index 5fe31ad00..c45236a9f 100644
--- a/packages/types/src/common.d.ts
+++ b/packages/types/src/common.d.ts
@@ -22,3 +22,7 @@ export type TLogoProps = {
     background_color?: string;
   };
 };
+
+export type TNameDescriptionLoader = "submitting" | "submitted" | "saved";
+
+export type TFetchStatus = "partial" | "complete" | undefined;
diff --git a/packages/types/src/cycle/cycle.d.ts b/packages/types/src/cycle/cycle.d.ts
index 1c2fa273a..638d974e6 100644
--- a/packages/types/src/cycle/cycle.d.ts
+++ b/packages/types/src/cycle/cycle.d.ts
@@ -120,9 +120,7 @@ export interface CycleIssueResponse {
   sub_issues_count: number;
 }
 
-export type SelectCycleType =
-  | (ICycle & { actionType: "edit" | "delete" | "create-issue" })
-  | undefined;
+export type SelectCycleType = (ICycle & { actionType: "edit" | "delete" | "create-issue" }) | undefined;
 
 export type CycleDateCheckData = {
   start_date: string;
@@ -132,3 +130,9 @@ export type CycleDateCheckData = {
 
 export type TCycleEstimateType = "issues" | "points";
 export type TCyclePlotType = "burndown" | "burnup";
+
+export type TPublicCycle = {
+  id: string;
+  name: string;
+  status: string;
+};
diff --git a/packages/types/src/enums.ts b/packages/types/src/enums.ts
index df6a462b0..854c0c614 100644
--- a/packages/types/src/enums.ts
+++ b/packages/types/src/enums.ts
@@ -4,10 +4,7 @@ export enum EUserPermissions {
   GUEST = 5,
 }
 
-export type TUserPermissions =
-  | EUserPermissions.ADMIN
-  | EUserPermissions.MEMBER
-  | EUserPermissions.GUEST;
+export type TUserPermissions = EUserPermissions.ADMIN | EUserPermissions.MEMBER | EUserPermissions.GUEST;
 
 // project pages
 export enum EPageAccess {
@@ -59,4 +56,8 @@ export enum EFileAssetType {
   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",
 }
diff --git a/packages/types/src/epics.d.ts b/packages/types/src/epics.d.ts
new file mode 100644
index 000000000..1ba50e2f2
--- /dev/null
+++ b/packages/types/src/epics.d.ts
@@ -0,0 +1,16 @@
+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/home.d.ts b/packages/types/src/home.d.ts
new file mode 100644
index 000000000..56089bf46
--- /dev/null
+++ b/packages/types/src/home.d.ts
@@ -0,0 +1,76 @@
+import { TLogoProps } from "./common";
+import { 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;
+};
+
+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/inbox.d.ts b/packages/types/src/inbox.d.ts
index 5ae6c160e..30ad0120c 100644
--- a/packages/types/src/inbox.d.ts
+++ b/packages/types/src/inbox.d.ts
@@ -2,23 +2,6 @@ import { TPaginationInfo } from "./common";
 import { TIssuePriorities } from "./issues";
 import { TIssue } from "./issues/base";
 
-enum EInboxIssueCurrentTab {
-  OPEN = "open",
-  CLOSED = "closed",
-}
-
-enum EInboxIssueStatus {
-  PENDING = -2,
-  DECLINED = -1,
-  SNOOZED = 0,
-  ACCEPTED = 1,
-  DUPLICATE = 2,
-}
-
-export type TInboxIssueCurrentTab = EInboxIssueCurrentTab;
-
-export type TInboxIssueStatus = EInboxIssueStatus;
-
 // filters
 export type TInboxIssueFilterMemberKeys = "assignees" | "created_by";
 
@@ -38,10 +21,7 @@ export type TInboxIssueFilter = {
 // sorting filters
 export type TInboxIssueSortingKeys = "order_by" | "sort_by";
 
-export type TInboxIssueSortingOrderByKeys =
-  | "issue__created_at"
-  | "issue__updated_at"
-  | "issue__sequence_id";
+export type TInboxIssueSortingOrderByKeys = "issue__created_at" | "issue__updated_at" | "issue__sequence_id";
 
 export type TInboxIssueSortingSortByKeys = "asc" | "desc";
 
@@ -78,17 +58,6 @@ export type TInboxDuplicateIssueDetails = {
   name: string;
 };
 
-export type TInboxIssue = {
-  id: string;
-  status: TInboxIssueStatus;
-  snoozed_till: Date | null;
-  duplicate_to: string | undefined;
-  source: string;
-  issue: TIssue;
-  created_by: string;
-  duplicate_issue_detail: TInboxDuplicateIssueDetails | undefined;
-};
-
 export type TInboxIssuePaginationInfo = TPaginationInfo & {
   total_results: number;
 };
diff --git a/packages/types/src/index.d.ts b/packages/types/src/index.d.ts
index 10e519700..9ec3846b7 100644
--- a/packages/types/src/index.d.ts
+++ b/packages/types/src/index.d.ts
@@ -28,7 +28,15 @@ export * from "./workspace-views";
 export * from "./common";
 export * from "./pragmatic";
 export * from "./publish";
+export * from "./search";
 export * from "./workspace-notifications";
 export * from "./favorite";
 export * from "./file";
 export * from "./workspace-draft-issues/base";
+export * from "./command-palette";
+export * from "./timezone";
+export * from "./activity";
+export * from "./epics";
+export * from "./charts";
+export * from "./home";
+export * from "./stickies";
diff --git a/packages/types/src/issues.d.ts b/packages/types/src/issues.d.ts
index eff81f857..a630d0ba2 100644
--- a/packages/types/src/issues.d.ts
+++ b/packages/types/src/issues.d.ts
@@ -10,6 +10,12 @@ import type {
   Properties,
   IIssueDisplayFilterOptions,
   TIssue,
+  IIssueFilterOptions,
+  IIssueDisplayProperties,
+  TIssueGroupByOptions,
+  TIssueOrderByOptions,
+  TIssueGroupingFilters,
+  TIssueExtraOptions,
 } from "@plane/types";
 
 export interface IIssueCycle {
@@ -211,12 +217,13 @@ export type GroupByColumnTypes =
   | "priority"
   | "labels"
   | "assignees"
-  | "created_by";
+  | "created_by"
+  | "team_project";
 
 export interface IGroupByColumn {
   id: string;
   name: string;
-  icon: ReactElement | undefined;
+  icon?: ReactElement | undefined;
   payload: Partial<TIssue>;
   isDropDisabled?: boolean;
   dropErrorMessage?: string;
@@ -234,3 +241,18 @@ export interface IIssueListRow {
   icon?: ReactElement | undefined;
   payload?: Partial<TIssue>;
 }
+
+export interface ILayoutDisplayFiltersOptions {
+  filters: (keyof IIssueFilterOptions)[];
+  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.d.ts b/packages/types/src/issues/activity/base.d.ts
index 63f365d89..7b5653aed 100644
--- a/packages/types/src/issues/activity/base.d.ts
+++ b/packages/types/src/issues/activity/base.d.ts
@@ -26,7 +26,7 @@ export type TIssueActivityProjectDetail = {
 
 export type TIssueActivityIssueDetail = {
   id: string;
-  sequence_id: boolean;
+  sequence_id: number;
   sort_order: boolean;
   name: string;
   description_html: string;
diff --git a/packages/types/src/issues/activity/issue_comment.d.ts b/packages/types/src/issues/activity/issue_comment.d.ts
index f361ea720..aef5134c6 100644
--- a/packages/types/src/issues/activity/issue_comment.d.ts
+++ b/packages/types/src/issues/activity/issue_comment.d.ts
@@ -37,3 +37,30 @@ export type TIssueCommentMap = {
 export type TIssueCommentIdMap = {
   [issue_id: string]: 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/issue.d.ts b/packages/types/src/issues/issue.d.ts
index b9366cccb..e38810004 100644
--- a/packages/types/src/issues/issue.d.ts
+++ b/packages/types/src/issues/issue.d.ts
@@ -1,8 +1,9 @@
+import { EIssueServiceType } from "@plane/constants";
 import { TIssuePriorities } from "../issues";
 import { TIssueAttachment } from "./issue_attachment";
 import { TIssueLink } from "./issue_link";
-import { TIssueReaction } from "./issue_reaction";
-import { TIssueRelationTypes } from "@/plane-web/types";
+import { TIssueReaction, IIssuePublicReaction, IPublicVote } from "./issue_reaction";
+import { TIssueRelationTypes, TIssuePublicComment } from "@/plane-web/types";
 
 // new issue structure types
 
@@ -39,6 +40,7 @@ export type TBaseIssue = {
   updated_by: string;
 
   is_draft: boolean;
+  is_epic?: boolean;
 };
 
 export type IssueRelation = {
@@ -116,8 +118,65 @@ export type TBulkOperationsPayload = {
   properties: Partial<TBulkIssueProperties>;
 };
 
-export type TIssueDetailWidget =
-  | "sub-issues"
-  | "relations"
-  | "links"
-  | "attachments";
+export type TIssueDetailWidget = "sub-issues" | "relations" | "links" | "attachments";
+
+export type TIssueServiceType = EIssueServiceType.ISSUES | EIssueServiceType.EPICS;
+
+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;
+};
diff --git a/packages/types/src/issues/issue_attachment.d.ts b/packages/types/src/issues/issue_attachment.d.ts
index 2238fa4c7..f7503b9d2 100644
--- a/packages/types/src/issues/issue_attachment.d.ts
+++ b/packages/types/src/issues/issue_attachment.d.ts
@@ -11,6 +11,7 @@ export type TIssueAttachment = {
   // required
   updated_at: string;
   updated_by: string;
+  created_by: string;
 };
 
 export type TIssueAttachmentUploadResponse = TFileSignedURLResponse & {
diff --git a/packages/types/src/issues/issue_reaction.d.ts b/packages/types/src/issues/issue_reaction.d.ts
index 7fba8cd9c..49c971f4a 100644
--- a/packages/types/src/issues/issue_reaction.d.ts
+++ b/packages/types/src/issues/issue_reaction.d.ts
@@ -1,3 +1,5 @@
+import { IUserLite } from "../users";
+
 export type TIssueReaction = {
   actor: string;
   id: string;
@@ -5,6 +7,11 @@ export type TIssueReaction = {
   reaction: string;
 };
 
+export interface IIssuePublicReaction {
+  actor_details: IUserLite;
+  reaction: string;
+}
+
 export type TIssueReactionMap = {
   [reaction_id: string]: TIssueReaction;
 };
@@ -12,3 +19,8 @@ export type TIssueReactionMap = {
 export type TIssueReactionIdMap = {
   [issue_id: string]: { [reaction: string]: string[] };
 };
+
+export interface IPublicVote {
+  vote: -1 | 1;
+  actor_details: IUserLite;
+}
diff --git a/packages/types/src/module/modules.d.ts b/packages/types/src/module/modules.d.ts
index fa77a6a41..ce845e60d 100644
--- a/packages/types/src/module/modules.d.ts
+++ b/packages/types/src/module/modules.d.ts
@@ -117,3 +117,8 @@ export type SelectModuleType =
   | undefined;
 
 export type TModulePlotType = "burndown" | "points";
+
+export type TPublicModule = {
+  id: string;
+  name: string;
+};
diff --git a/packages/types/src/pages.d.ts b/packages/types/src/pages.d.ts
index 011f92d69..183d015bf 100644
--- a/packages/types/src/pages.d.ts
+++ b/packages/types/src/pages.d.ts
@@ -15,7 +15,8 @@ export type TPage = {
   label_ids: string[] | undefined;
   name: string | undefined;
   owned_by: string | undefined;
-  project_ids: string[] | undefined;
+  project_ids?: string[] | undefined;
+  team: string | null | undefined;
   updated_at: Date | undefined;
   updated_by: string | undefined;
   workspace: string | undefined;
@@ -25,11 +26,7 @@ export type TPage = {
 // page filters
 export type TPageNavigationTabs = "public" | "private" | "archived";
 
-export type TPageFiltersSortKey =
-  | "name"
-  | "created_at"
-  | "updated_at"
-  | "opened_at";
+export type TPageFiltersSortKey = "name" | "created_at" | "updated_at" | "opened_at";
 
 export type TPageFiltersSortBy = "asc" | "desc";
 
@@ -63,10 +60,17 @@ export type TPageVersion = {
   updated_at: string;
   updated_by: string;
   workspace: string;
-}
+};
 
 export type TDocumentPayload = {
   description_binary: string;
   description_html: string;
   description: object;
-}
\ No newline at end of file
+};
+
+export type TWebhookConnectionQueryParams = {
+  documentType: "project_page" | "team_page" | "workspace_page";
+  projectId?: string;
+  teamId?: string;
+  workspaceSlug: string;
+};
diff --git a/packages/types/src/project/index.ts b/packages/types/src/project/index.ts
index ef7308bf7..f5478051e 100644
--- a/packages/types/src/project/index.ts
+++ b/packages/types/src/project/index.ts
@@ -1,2 +1,3 @@
 export * from "./project_filters";
 export * from "./projects";
+export * from "./project_link";
diff --git a/packages/types/src/project/project_link.d.ts b/packages/types/src/project/project_link.d.ts
new file mode 100644
index 000000000..45b9dfc6a
--- /dev/null
+++ b/packages/types/src/project/project_link.d.ts
@@ -0,0 +1,22 @@
+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.d.ts b/packages/types/src/project/projects.d.ts
index d48342ceb..b04b98284 100644
--- a/packages/types/src/project/projects.d.ts
+++ b/packages/types/src/project/projects.d.ts
@@ -1,3 +1,4 @@
+import { EUserProjectRoles } from "@plane/constants";
 import type {
   IProjectViewProps,
   IUser,
@@ -10,57 +11,64 @@ import type {
 } from "..";
 import { TUserPermissions } from "../enums";
 
-export interface IProject {
-  archive_in: number;
+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;
-  archived_issues: number;
-  archived_sub_issues: number;
-  close_in: number;
-  created_at: Date;
-  created_by: string;
-  // only for uploading the cover image
-  cover_image_asset?: null;
-  cover_image?: string;
-  // only for rendering the cover image
-  cover_image_url: readonly string;
+  workspace: IWorkspace | string;
   cycle_view: boolean;
   issue_views_view: boolean;
   module_view: boolean;
   page_view: boolean;
   inbox_view: boolean;
-  default_assignee: IUser | string | null;
-  default_state: string | null;
-  description: string;
-  draft_issues: number;
-  draft_sub_issues: number;
-  estimate: string | null;
-  guest_view_all_features: boolean;
-  id: string;
-  identifier: string;
-  anchor: string | null;
-  is_favorite: boolean;
-  is_issue_type_enabled: boolean;
-  is_member: boolean;
-  is_time_tracking_enabled: boolean;
-  logo_props: TLogoProps;
-  member_role: TUserPermissions | null;
-  members: IProjectMemberLite[];
-  name: string;
-  network: number;
-  project_lead: IUserLite | string | null;
-  sort_order: number | null;
-  sub_issues: number;
-  total_cycles: number;
-  total_issues: number;
-  total_members: number;
-  total_modules: number;
-  updated_at: Date;
-  updated_by: string;
-  workspace: IWorkspace | string;
-  workspace_detail: IWorkspaceLite;
-  timezone: string;
+  project_lead?: IUserLite | string | null;
+  // Timestamps
+  created_at?: Date;
+  updated_at?: Date;
+  // actor
+  created_by?: string;
+  updated_by?: string;
 }
 
+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;
+  guest_view_all_features?: boolean;
+  anchor?: string | null;
+  is_favorite?: boolean;
+  is_issue_type_enabled?: boolean;
+  is_time_tracking_enabled?: boolean;
+  members?: string[];
+  network?: number;
+  timezone?: string;
+}
+
+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;
@@ -111,7 +119,7 @@ export interface IProjectMembership {
 }
 
 export interface IProjectBulkAddFormData {
-  members: { role: TUserPermissions; member_id: string }[];
+  members: { role: TUserPermissions | EUserProjectRoles; member_id: string }[];
 }
 
 export interface IGithubRepository {
@@ -136,6 +144,7 @@ export type TProjectIssuesSearchParams = {
   issue_id?: string;
   workspace_search: boolean;
   target_date?: string;
+  epic?: boolean;
 };
 
 export interface ISearchIssueResponse {
diff --git a/packages/types/src/search.d.ts b/packages/types/src/search.d.ts
new file mode 100644
index 000000000..41138a46e
--- /dev/null
+++ b/packages/types/src/search.d.ts
@@ -0,0 +1,78 @@
+import { ICycle } from "./cycle";
+import { TIssue } from "./issues/issue";
+import { IModule } from "./module";
+import { TPage } from "./pages";
+import { IProject } from "./project";
+import { IUser } from "./users";
+import { 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/state.d.ts b/packages/types/src/state.d.ts
index 7df658a88..120b216da 100644
--- a/packages/types/src/state.d.ts
+++ b/packages/types/src/state.d.ts
@@ -1,11 +1,6 @@
 import { IProject, IProjectLite, IWorkspaceLite } from "@plane/types";
 
-export type TStateGroups =
-  | "backlog"
-  | "unstarted"
-  | "started"
-  | "completed"
-  | "cancelled";
+export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
 
 export interface IState {
   readonly id: string;
diff --git a/packages/types/src/stickies.d copy.ts b/packages/types/src/stickies.d copy.ts
new file mode 100644
index 000000000..55f8b23c5
--- /dev/null
+++ b/packages/types/src/stickies.d copy.ts	
@@ -0,0 +1,8 @@
+export type TSticky = {
+  id: string;
+  name?: string;
+  description_html?: string;
+  color?: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+};
diff --git a/packages/types/src/stickies.d.ts b/packages/types/src/stickies.d.ts
new file mode 100644
index 000000000..ffa19e84f
--- /dev/null
+++ b/packages/types/src/stickies.d.ts
@@ -0,0 +1,16 @@
+import { 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.d.ts b/packages/types/src/timezone.d.ts
new file mode 100644
index 000000000..b4df123a3
--- /dev/null
+++ b/packages/types/src/timezone.d.ts
@@ -0,0 +1,8 @@
+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.d.ts b/packages/types/src/users.d.ts
index 452bc23c2..e5140fdef 100644
--- a/packages/types/src/users.d.ts
+++ b/packages/types/src/users.d.ts
@@ -25,7 +25,6 @@ export interface IUser extends IUserLite {
   is_password_autoset: boolean;
   is_tour_completed: boolean;
   mobile_number: string | null;
-  role: string | null;
   last_workspace_id: string;
   user_timezone: string;
   username: string;
@@ -62,6 +61,7 @@ export type TUserProfile = {
   billing_address_country: string | undefined;
   billing_address: string | undefined;
   has_billing_address: boolean;
+  language: string;
   created_at: Date | string;
   updated_at: Date | string;
 };
@@ -182,6 +182,17 @@ export interface IUserEmailNotificationSettings {
 
 export type TProfileViews = "assigned" | "created" | "subscribed";
 
+export type TPublicMember = {
+  id: string;
+  member: string;
+  member__avatar: string;
+  member__first_name: string;
+  member__last_name: string;
+  member__display_name: string;
+  project: string;
+  workspace: string;
+};
+
 // export interface ICurrentUser {
 //   id: readonly string;
 //   avatar: string;
diff --git a/packages/types/src/view-props.d.ts b/packages/types/src/view-props.d.ts
index 57baa4cfd..dca1a652c 100644
--- a/packages/types/src/view-props.d.ts
+++ b/packages/types/src/view-props.d.ts
@@ -1,5 +1,3 @@
-import { EIssueLayoutTypes } from "constants/issue";
-
 export type TIssueLayouts =
   | "list"
   | "kanban"
@@ -18,6 +16,7 @@ export type TIssueGroupByOptions =
   | "cycle"
   | "module"
   | "target_date"
+  | "team_project"
   | null;
 
 export type TIssueOrderByOptions =
@@ -69,6 +68,7 @@ export type TIssueParams =
   | "start_date"
   | "target_date"
   | "project"
+  | "team_project"
   | "group_by"
   | "sub_group_by"
   | "order_by"
@@ -92,6 +92,7 @@ export interface IIssueFilterOptions {
   cycle?: string[] | null;
   module?: string[] | null;
   project?: string[] | null;
+  team_project?: string[] | null;
   start_date?: string[] | null;
   state?: string[] | null;
   state_group?: string[] | null;
@@ -107,7 +108,7 @@ export interface IIssueDisplayFilterOptions {
   };
   group_by?: TIssueGroupByOptions;
   sub_group_by?: TIssueGroupByOptions;
-  layout?: EIssueLayoutTypes;
+  layout?: any; // TODO: Need to fix this and set it to enum EIssueLayoutTypes
   order_by?: TIssueOrderByOptions;
   show_empty_groups?: boolean;
   sub_issue?: boolean;
diff --git a/packages/types/src/views.d.ts b/packages/types/src/views.d.ts
index 54e1a395c..32b5889ca 100644
--- a/packages/types/src/views.d.ts
+++ b/packages/types/src/views.d.ts
@@ -1,4 +1,4 @@
-import { EViewAccess } from "@/constants/views";
+import { EViewAccess } from "@plane/constants";
 import { TLogoProps } from "./common";
 import {
   IIssueDisplayFilterOptions,
diff --git a/packages/types/src/workspace-notifications.d.ts b/packages/types/src/workspace-notifications.d.ts
index 7d960015b..0e0e15af1 100644
--- a/packages/types/src/workspace-notifications.d.ts
+++ b/packages/types/src/workspace-notifications.d.ts
@@ -35,7 +35,7 @@ export type TNotificationData = {
 };
 
 export type TNotification = {
-  id: string | undefined;
+  id: string;
   title: string | undefined;
   data: TNotificationData | undefined;
   entity_identifier: string | undefined;
diff --git a/packages/types/src/workspace-views.d.ts b/packages/types/src/workspace-views.d.ts
index 5bc900767..eb207128d 100644
--- a/packages/types/src/workspace-views.d.ts
+++ b/packages/types/src/workspace-views.d.ts
@@ -1,4 +1,4 @@
-import { EViewAccess } from "@/constants/views";
+import { EViewAccess } from "@plane/constants";
 import {
   IWorkspaceViewProps,
   IIssueDisplayFilterOptions,
diff --git a/packages/types/src/workspace.d.ts b/packages/types/src/workspace.d.ts
index 500eaa7b5..4393a911f 100644
--- a/packages/types/src/workspace.d.ts
+++ b/packages/types/src/workspace.d.ts
@@ -1,10 +1,5 @@
-import type {
-  ICycle,
-  IProjectMember,
-  IUser,
-  IUserLite,
-  IWorkspaceViewProps,
-} from "@plane/types";
+import type { ICycle, IProjectMember, IUser, IUserLite, IWorkspaceViewProps, TPaginationInfo } from "@plane/types";
+import { EUserWorkspaceRoles } from "@plane/constants"; // TODO: check if importing this over here causes circular dependency
 import { TUserPermissions } from "./enums";
 
 export interface IWorkspace {
@@ -20,8 +15,8 @@ export interface IWorkspace {
   readonly created_by: string;
   readonly updated_by: string;
   organization_size: string;
-  total_issues: number;
   total_projects?: number;
+  role: number;
 }
 
 export interface IWorkspaceLite {
@@ -38,9 +33,10 @@ export interface IWorkspaceMemberInvitation {
   responded_at: Date;
   role: TUserPermissions;
   token: string;
+  invite_link: string;
   workspace: {
     id: string;
-    logo: string;
+    logo_url: string;
     name: string;
     slug: string;
   };
@@ -69,7 +65,7 @@ export type Properties = {
 export interface IWorkspaceMember {
   id: string;
   member: IUserLite;
-  role: TUserPermissions;
+  role: TUserPermissions | EUserWorkspaceRoles;
   created_at?: string;
   avatar_url?: string;
   email?: string;
@@ -87,7 +83,7 @@ export interface IWorkspaceMemberMe {
   default_props: IWorkspaceViewProps;
   id: string;
   member: string;
-  role: TUserPermissions;
+  role: TUserPermissions | EUserWorkspaceRoles;
   updated_at: Date;
   updated_by: string;
   view_props: IWorkspaceViewProps;
@@ -227,3 +223,13 @@ export interface IWorkspaceAnalyticsResponse {
 export type TWorkspacePaginationInfo = TPaginationInfo & {
   results: IWorkspace[];
 };
+
+export interface IWorkspaceSidebarNavigationItem {
+  key?: string;
+  is_pinned: boolean;
+  sort_order: number;
+}
+
+export interface IWorkspaceSidebarNavigation {
+  [key: string]: IWorkspaceSidebarNavigationItem;
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2cfcc3643..dee65e02e 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -34,11 +34,13 @@
     "@plane/hooks": "*",
     "@plane/utils": "*",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-scroll-area": "^1.2.3",
     "clsx": "^2.0.0",
     "emoji-picker-react": "^4.5.16",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.379.0",
+    "lucide-react": "^0.469.0",
     "react-color": "^2.19.3",
+    "react-day-picker": "9.5.0",
     "react-popper": "^2.3.0",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.0.0",
@@ -47,6 +49,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
     "@plane/eslint-config": "*",
+    "@plane/tailwind-config": "*",
     "@plane/typescript-config": "*",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-interactions": "^8.1.1",
@@ -68,8 +71,6 @@
     "postcss-cli": "^11.0.0",
     "postcss-nested": "^6.0.1",
     "storybook": "^8.1.1",
-    "tailwind-config-custom": "*",
-    "tailwindcss": "^3.4.3",
     "tsup": "^7.2.0",
     "typescript": "5.3.3"
   },
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
index 129aa7f59..9b1e55fc4 100644
--- a/packages/ui/postcss.config.js
+++ b/packages/ui/postcss.config.js
@@ -1 +1,2 @@
-module.exports = require("tailwind-config-custom/postcss.config");
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+module.exports = require("@plane/tailwind-config/postcss.config.js");
diff --git a/packages/ui/src/breadcrumbs/index.ts b/packages/ui/src/breadcrumbs/index.ts
index 669f55757..05a8bdbf1 100644
--- a/packages/ui/src/breadcrumbs/index.ts
+++ b/packages/ui/src/breadcrumbs/index.ts
@@ -1 +1,2 @@
 export * from "./breadcrumbs";
+export * from "./navigation-dropdown";
diff --git a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
new file mode 100644
index 000000000..a716ca65e
--- /dev/null
+++ b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
+// ui
+import { CustomMenu, TContextMenuItem } from "../dropdowns";
+// helpers
+import { cn } from "../../helpers";
+
+type TBreadcrumbNavigationDropdownProps = {
+  selectedItemKey: string;
+  navigationItems: TContextMenuItem[];
+  navigationDisabled?: boolean;
+};
+
+export const BreadcrumbNavigationDropdown = (props: TBreadcrumbNavigationDropdownProps) => {
+  const { selectedItemKey, navigationItems, navigationDisabled = false } = props;
+  // derived values
+  const selectedItem = navigationItems.find((item) => item.key === selectedItemKey);
+  const selectedItemIcon = selectedItem?.icon ? (
+    <selectedItem.icon className={cn("size-3.5", selectedItem.iconClassName)} />
+  ) : undefined;
+
+  // if no selected item, return null
+  if (!selectedItem) return null;
+
+  const NavigationButton = ({ className }: { className?: string }) => (
+    <li
+      className={cn(
+        "flex items-center justify-center cursor-default text-sm font-medium text-custom-text-200 group-hover:text-custom-text-100 outline-none",
+        className
+      )}
+      tabIndex={-1}
+    >
+      {selectedItemIcon && (
+        <div className="flex h-5 w-5 items-center justify-start overflow-hidden">{selectedItemIcon}</div>
+      )}
+      <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{selectedItem.title}</div>
+    </li>
+  );
+
+  if (navigationDisabled) {
+    return <NavigationButton />;
+  }
+
+  return (
+    <CustomMenu
+      customButton={
+        <div className="group flex items-center gap-1.5">
+          <NavigationButton className="cursor-pointer" />
+          <ChevronDownIcon className="size-4 text-custom-text-200 group-hover:text-custom-text-100" />
+        </div>
+      }
+      placement="bottom-start"
+      closeOnSelect
+    >
+      {navigationItems.map((item) => {
+        if (item.shouldRender === false) return null;
+        return (
+          <CustomMenu.MenuItem
+            key={item.key}
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              if (item.key === selectedItemKey) return;
+              item.action();
+            }}
+            className={cn(
+              "flex items-center gap-2",
+              {
+                "text-custom-text-400": item.disabled,
+              },
+              item.className
+            )}
+            disabled={item.disabled}
+          >
+            {item.icon && <item.icon className={cn("size-3.5", item.iconClassName)} />}
+            <div className="w-full">
+              <h5>{item.title}</h5>
+              {item.description && (
+                <p
+                  className={cn("text-custom-text-300 whitespace-pre-line", {
+                    "text-custom-text-400": item.disabled,
+                  })}
+                >
+                  {item.description}
+                </p>
+              )}
+            </div>
+            {item.key === selectedItemKey && <CheckIcon className="flex-shrink-0 size-3.5" />}
+          </CustomMenu.MenuItem>
+        );
+      })}
+    </CustomMenu>
+  );
+};
diff --git a/packages/ui/src/calendar.tsx b/packages/ui/src/calendar.tsx
new file mode 100644
index 000000000..87a7859f7
--- /dev/null
+++ b/packages/ui/src/calendar.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { ChevronLeft } from "lucide-react";
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../helpers";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+export const Calendar = ({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) => (
+  <DayPicker
+    showOutsideDays={showOutsideDays}
+    className={cn("p-3", className)}
+    // classNames={{
+    //   months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+    //   month: "space-y-4",
+    //   // caption: "flex justify-center pt-1 relative items-center",
+    //   // caption_label: "hidden",
+    //   nav: "box-border absolute top-[1.2rem] right-[1rem] flex items-center",
+    //   button_next:
+    //     "size-[1.25rem] border-none bg-none p-[0.25rem] m-0 cursor-pointer inline-flex items-center justify-center relative appearance-none rounded-sm hover:bg-custom-background-80 focus-visible:bg-custom-background-80",
+    //   button_previous:
+    //     "size-[1.25rem] border-none bg-none p-[0.25rem] m-0 cursor-pointer inline-flex items-center justify-center relative appearance-none rounded-sm hover:bg-custom-background-80 focus-visible:bg-custom-background-80",
+    //   chevron: "m-0 ml-1 size-[0.75rem]",
+    //   // nav_button: cn("h-10 bg-transparent p-0 opacity-50 hover:opacity-100"),
+    //   // nav_button_previous: "absolute left-1",
+    //   // nav_button_next: "absolute right-1",
+    //   table: "w-full border-collapse space-y-1",
+    //   head_row: "flex w-full items-center",
+    //   head_cell: "rounded-md w-10 text-[10px] text-center m-auto font-semibold uppercase",
+    //   row: "flex w-full mt-2",
+    //   cell: cn(
+    //     "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-custom-primary-100/50 [&:has([aria-selected].day-range-end)]:rounded-r-full",
+    //     props.mode === "range"
+    //       ? "[&:has(>.day-range-end)]:rounded-r-full [&:has(>.day-range-start)]:rounded-l-full first:[&:has([aria-selected])]:rounded-l-full last:[&:has([aria-selected])]:rounded-r-full"
+    //       : "[&:has([aria-selected])]:rounded-full [&:has([aria-selected])]:bg-custom-primary-100 [&:has([aria-selected])]:text-white"
+    //   ),
+    //   // day_button:
+    //   //   "size-10 flex items-center justify-center overflow-hidden box-border m-0 border-2 border-transparent rounded-full",
+    //   day: "size-10 p-0 font-normal aria-selected:opacity-100 rounded-full hover:bg-custom-primary-100/60",
+    //   day_range_start: "day-range-start bg-custom-primary-100 text-white",
+    //   day_range_end: "day-range-end bg-custom-primary-100 text-white",
+    //   day_selected: "",
+    //   day_today:
+    //     "relative after:content-[''] after:absolute after:m-auto after:left-1/3  after:bottom-[6px] after:w-[6px] after:h-[6px] after:bg-custom-primary-100/50 after:rounded-full after:translate-x-1/2 after:translate-y-1/2",
+    //   day_outside: "day-outside",
+    //   day_disabled: "opacity-50 hover:!bg-transparent",
+    //   day_range_middle: "text-black",
+    //   day_hidden: "invisible",
+    //   caption_dropdowns: "inline-flex bg-transparent",
+    //   dropdown_root: "m-0 relative inline-flex items-center",
+    //   dropdowns: "relative inline-flex items-center",
+    //   dropdown:
+    //     "appearance-none absolute z-[2] top-0 bottom-0 left-0 w-full m-0 p-0 opacity-0 border-none text-[1rem] cursor-pointer bg-transparent hover:bg-custom-background-80",
+    //   months_dropdown: "capitalize",
+    //   caption_label:
+    //     "z-[1] inline-flex items-center gap-[0.25rem] m-0 py-0 px-[0.25rem] whitespace-nowrap border-2 border-transparent font-semibold bg-transparent rounded",
+    //   ...classNames,
+    // }}
+    components={{
+      Chevron: ({ className, ...props }) => (
+        <ChevronLeft
+          className={cn(
+            "size-4",
+            {
+              "rotate-180": props.orientation === "right",
+              "-rotate-90": props.orientation === "down",
+            },
+            className
+          )}
+          {...props}
+        />
+      ),
+    }}
+    {...props}
+  />
+);
diff --git a/packages/ui/src/dropdown/single-select.tsx b/packages/ui/src/dropdown/single-select.tsx
index 123c9e698..bcdff40c1 100644
--- a/packages/ui/src/dropdown/single-select.tsx
+++ b/packages/ui/src/dropdown/single-select.tsx
@@ -110,7 +110,7 @@ export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
   // hooks
   const handleKeyDown = useDropdownKeyPressed(toggleDropdown, handleClose);
 
-  useOutsideClickDetector(dropdownRef, handleClose);
+  useOutsideClickDetector(dropdownRef, handleClose, true);
 
   return (
     <Combobox
diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx
index 99ef790e3..831243920 100644
--- a/packages/ui/src/dropdowns/context-menu/item.tsx
+++ b/packages/ui/src/dropdowns/context-menu/item.tsx
@@ -36,19 +36,23 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
       onMouseEnter={handleActiveItem}
       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("text-custom-text-300 whitespace-pre-line", {
-              "text-custom-text-400": item.disabled,
-            })}
-          >
-            {item.description}
-          </p>
-        )}
-      </div>
+      {item.customContent ?? (
+        <>
+          {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
+          <div>
+            <h5>{item.title}</h5>
+            {item.description && (
+              <p
+                className={cn("text-custom-text-300 whitespace-pre-line", {
+                  "text-custom-text-400": item.disabled,
+                })}
+              >
+                {item.description}
+              </p>
+            )}
+          </div>
+        </>
+      )}
     </button>
   );
 };
diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/ui/src/dropdowns/context-menu/root.tsx
index f251696d2..e4265f100 100644
--- a/packages/ui/src/dropdowns/context-menu/root.tsx
+++ b/packages/ui/src/dropdowns/context-menu/root.tsx
@@ -11,7 +11,8 @@ import { usePlatformOS } from "../../hooks/use-platform-os";
 
 export type TContextMenuItem = {
   key: string;
-  title: string;
+  customContent?: React.ReactNode;
+  title?: string;
   description?: string;
   icon?: React.FC<any>;
   action: () => void;
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index 39f01d1ed..f21da4381 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -54,7 +54,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     if (referenceElement) referenceElement.focus();
   };
   const closeDropdown = () => {
-    isOpen && onMenuClose && onMenuClose();
+    if (isOpen) onMenuClose?.();
     setIsOpen(false);
   };
 
@@ -216,7 +216,7 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
           )}
           onClick={(e) => {
             close();
-            onClick && onClick(e);
+            onClick?.(e);
           }}
           disabled={disabled}
         >
diff --git a/packages/ui/src/icons/activity-icon.tsx b/packages/ui/src/icons/activity-icon.tsx
new file mode 100644
index 000000000..2ac482836
--- /dev/null
+++ b/packages/ui/src/icons/activity-icon.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const ActivityIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="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="#8591AD"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_15681_9387">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/at-risk-icon.tsx b/packages/ui/src/icons/at-risk-icon.tsx
new file mode 100644
index 000000000..bb4437e6d
--- /dev/null
+++ b/packages/ui/src/icons/at-risk-icon.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const AtRiskIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
+      fill="#CC7700"
+    />
+    <path
+      d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
+      stroke="#F3F4F7"
+      stroke-width="2"
+    />
+    <g clip-path="url(#clip0_21157_25600)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.0369 15.3346H10.667C11.0352 15.3346 11.3337 15.6331 11.3337 16.0013C11.3337 16.3695 11.0352 16.668 10.667 16.668H10.0369C10.3686 19.6679 12.912 22.0013 16.0003 22.0013C19.0887 22.0013 21.6321 19.6679 21.9637 16.668H21.3337C20.9655 16.668 20.667 16.3695 20.667 16.0013C20.667 15.6331 20.9655 15.3346 21.3337 15.3346H21.9637C21.6321 12.3347 19.0887 10.0013 16.0003 10.0013C12.912 10.0013 10.3686 12.3347 10.0369 15.3346ZM8.66699 16.0013C8.66699 11.9512 11.9502 8.66797 16.0003 8.66797C20.0504 8.66797 23.3337 11.9512 23.3337 16.0013C23.3337 20.0514 20.0504 23.3346 16.0003 23.3346C11.9502 23.3346 8.66699 20.0514 8.66699 16.0013ZM16.0003 12.668C16.3685 12.668 16.667 12.9664 16.667 13.3346V16.0013C16.667 16.3695 16.3685 16.668 16.0003 16.668C15.6321 16.668 15.3337 16.3695 15.3337 16.0013V13.3346C15.3337 12.9664 15.6321 12.668 16.0003 12.668ZM15.3337 18.668C15.3337 18.2998 15.6321 18.0013 16.0003 18.0013H16.007C16.3752 18.0013 16.6737 18.2998 16.6737 18.668C16.6737 19.0362 16.3752 19.3346 16.007 19.3346H16.0003C15.6321 19.3346 15.3337 19.0362 15.3337 18.668Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_21157_25600">
+        <rect width="16" height="16" fill="white" transform="translate(8 8)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/bar-icon.tsx b/packages/ui/src/icons/bar-icon.tsx
new file mode 100644
index 000000000..b20d5ebea
--- /dev/null
+++ b/packages/ui/src/icons/bar-icon.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const BarIcon: React.FC<ISvgIcons> = ({ className = "", ...rest }) => (
+  <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/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
index f8a2b1c84..f274a3414 100644
--- a/packages/ui/src/icons/index.ts
+++ b/packages/ui/src/icons/index.ts
@@ -16,6 +16,7 @@ export * from "./epic-icon";
 export * from "./full-screen-panel-icon";
 export * from "./github-icon";
 export * from "./gitlab-icon";
+export * from "./info-fill-icon";
 export * from "./info-icon";
 export * from "./layer-stack";
 export * from "./layers-icon";
@@ -38,3 +39,15 @@ export * from "./done-icon";
 export * from "./pending-icon";
 export * from "./pi-chat";
 export * from "./workspace-icon";
+export * from "./teams";
+export * from "./lead-icon";
+export * from "./activity-icon";
+export * from "./updates-icon";
+export * from "./overview-icon";
+export * from "./on-track-icon";
+export * from "./off-track-icon";
+export * from "./at-risk-icon";
+export * from "./multiple-sticky";
+export * from "./sticky-note-icon";
+export * from "./bar-icon";
+export * from "./tree-map-icon";
diff --git a/packages/ui/src/icons/lead-icon.tsx b/packages/ui/src/icons/lead-icon.tsx
new file mode 100644
index 000000000..75575d35e
--- /dev/null
+++ b/packages/ui/src/icons/lead-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const LeadIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <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 clip-path="url(#clip0_8992_2377)">
+      <circle cx="9.57153" cy="6.5" r="2.5" fill="#F5F5FF" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="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/ui/src/icons/multiple-sticky.tsx b/packages/ui/src/icons/multiple-sticky.tsx
new file mode 100644
index 000000000..9c33205e9
--- /dev/null
+++ b/packages/ui/src/icons/multiple-sticky.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const RecentStickyIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    {...rest}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="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
+      fill-rule="evenodd"
+      clip-rule="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/ui/src/icons/off-track-icon.tsx b/packages/ui/src/icons/off-track-icon.tsx
new file mode 100644
index 000000000..0d93d1b60
--- /dev/null
+++ b/packages/ui/src/icons/off-track-icon.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
+      fill="#CC0000"
+    />
+    <path
+      d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
+      stroke="#F3F4F7"
+      stroke-width="2"
+    />
+    <g clip-path="url(#clip0_21157_78200)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.0369 15.3346H10.667C11.0352 15.3346 11.3337 15.6331 11.3337 16.0013C11.3337 16.3695 11.0352 16.668 10.667 16.668H10.0369C10.3686 19.6679 12.912 22.0013 16.0003 22.0013C19.0887 22.0013 21.6321 19.6679 21.9637 16.668H21.3337C20.9655 16.668 20.667 16.3695 20.667 16.0013C20.667 15.6331 20.9655 15.3346 21.3337 15.3346H21.9637C21.6321 12.3347 19.0887 10.0013 16.0003 10.0013C12.912 10.0013 10.3686 12.3347 10.0369 15.3346ZM8.66699 16.0013C8.66699 11.9512 11.9502 8.66797 16.0003 8.66797C20.0504 8.66797 23.3337 11.9512 23.3337 16.0013C23.3337 20.0514 20.0504 23.3346 16.0003 23.3346C11.9502 23.3346 8.66699 20.0514 8.66699 16.0013ZM14.667 12.668C15.0352 12.668 15.3337 12.9664 15.3337 13.3346V16.0013C15.3337 16.3695 15.0352 16.668 14.667 16.668C14.2988 16.668 14.0003 16.3695 14.0003 16.0013V13.3346C14.0003 12.9664 14.2988 12.668 14.667 12.668ZM17.3337 12.668C17.7018 12.668 18.0003 12.9664 18.0003 13.3346V16.0013C18.0003 16.3695 17.7018 16.668 17.3337 16.668C16.9655 16.668 16.667 16.3695 16.667 16.0013V13.3346C16.667 12.9664 16.9655 12.668 17.3337 12.668ZM14.0003 18.668C14.0003 18.2998 14.2988 18.0013 14.667 18.0013H14.6737C15.0418 18.0013 15.3403 18.2998 15.3403 18.668C15.3403 19.0362 15.0418 19.3346 14.6737 19.3346H14.667C14.2988 19.3346 14.0003 19.0362 14.0003 18.668ZM16.667 18.668C16.667 18.2998 16.9655 18.0013 17.3337 18.0013H17.3403C17.7085 18.0013 18.007 18.2998 18.007 18.668C18.007 19.0362 17.7085 19.3346 17.3403 19.3346H17.3337C16.9655 19.3346 16.667 19.0362 16.667 18.668Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_21157_78200">
+        <rect width="16" height="16" fill="white" transform="translate(8 8)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/on-track-icon.tsx b/packages/ui/src/icons/on-track-icon.tsx
new file mode 100644
index 000000000..c384d4c8d
--- /dev/null
+++ b/packages/ui/src/icons/on-track-icon.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const OnTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
+  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
+      fill="#1FAD40"
+    />
+    <path
+      d="M16 1C7.71573 1 1 7.71573 1 16C1 24.2843 7.71573 31 16 31C24.2843 31 31 24.2843 31 16C31 7.71573 24.2843 1 16 1Z"
+      stroke="#F3F4F7"
+      stroke-width="2"
+    />
+    <g clip-path="url(#clip0_21157_107468)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.0005 10.8004C17.8118 10.1146 16.4238 9.85693 15.0681 10.0705C13.7124 10.2841 12.4709 10.956 11.5507 11.9741C10.6304 12.9923 10.087 14.2952 10.0111 15.6655C9.93516 17.0358 10.3313 18.3907 11.1334 19.5043C11.9356 20.6179 13.0953 21.4228 14.4191 21.7849C15.7429 22.1469 17.1508 22.0442 18.408 21.4938C19.6652 20.9435 20.6958 19.9787 21.3278 18.7605C21.9598 17.5423 22.1551 16.1442 21.8811 14.7994C21.8076 14.4387 22.0404 14.0866 22.4012 14.0131C22.762 13.9396 23.1141 14.1725 23.1876 14.5332C23.5225 16.1768 23.2838 17.8856 22.5113 19.3745C21.7389 20.8635 20.4793 22.0426 18.9427 22.7153C17.4061 23.3879 15.6853 23.5135 14.0673 23.071C12.4493 22.6285 11.032 21.6447 10.0516 20.2836C9.07117 18.9226 8.58699 17.2665 8.67979 15.5917C8.77259 13.9169 9.43675 12.3245 10.5615 11.0801C11.6863 9.83568 13.2037 9.01448 14.8606 8.75343C16.5176 8.49238 18.2139 8.80726 19.6668 9.64556C19.9857 9.82957 20.0951 10.2373 19.9111 10.5562C19.7271 10.8751 19.3194 10.9845 19.0005 10.8004ZM23.1384 10.1949C23.3987 10.4553 23.3987 10.8774 23.1384 11.1377L16.4717 17.8044C16.2114 18.0648 15.7893 18.0648 15.5289 17.8044L13.5289 15.8044C13.2686 15.5441 13.2686 15.1219 13.5289 14.8616C13.7893 14.6012 14.2114 14.6012 14.4717 14.8616L16.0003 16.3902L22.1956 10.1949C22.4559 9.93458 22.878 9.93458 23.1384 10.1949Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.0003 23.333C15.6321 23.333 15.3337 23.0345 15.3337 22.6663V21.333C15.3337 20.9648 15.6321 20.6663 16.0003 20.6663C16.3685 20.6663 16.667 20.9648 16.667 21.333V22.6663C16.667 23.0345 16.3685 23.333 16.0003 23.333Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.0003 11.333C15.6321 11.333 15.3337 11.0345 15.3337 10.6663V9.333C15.3337 8.96481 15.6321 8.66634 16.0003 8.66634C16.3685 8.66634 16.667 8.96481 16.667 9.333V10.6663C16.667 11.0345 16.3685 11.333 16.0003 11.333Z"
+        fill="white"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M11.3337 15.9997C11.3337 16.3679 11.0352 16.6663 10.667 16.6663H9.33366C8.96547 16.6663 8.66699 16.3679 8.66699 15.9997C8.66699 15.6315 8.96547 15.333 9.33366 15.333H10.667C11.0352 15.333 11.3337 15.6315 11.3337 15.9997Z"
+        fill="white"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_21157_107468">
+        <rect width="16" height="16" fill="white" transform="translate(8 8)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/packages/ui/src/icons/overview-icon.tsx b/packages/ui/src/icons/overview-icon.tsx
new file mode 100644
index 000000000..bcf371244
--- /dev/null
+++ b/packages/ui/src/icons/overview-icon.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const OverviewIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <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/ui/src/icons/sticky-note-icon.tsx b/packages/ui/src/icons/sticky-note-icon.tsx
new file mode 100644
index 000000000..871950289
--- /dev/null
+++ b/packages/ui/src/icons/sticky-note-icon.tsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const StickyNoteIcon: React.FC<ISvgIcons> = ({ width = "17", height = "17", className, color }) => (
+  <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
+      fill-rule="evenodd"
+      clip-rule="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/ui/src/icons/teams.tsx b/packages/ui/src/icons/teams.tsx
new file mode 100644
index 000000000..b73055598
--- /dev/null
+++ b/packages/ui/src/icons/teams.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const TeamsIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <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/ui/src/icons/transfer-icon.tsx b/packages/ui/src/icons/transfer-icon.tsx
index 9a5286f94..f762f9611 100644
--- a/packages/ui/src/icons/transfer-icon.tsx
+++ b/packages/ui/src/icons/transfer-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { ISvgIcons } from "./type";
 
 export const TransferIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+  <svg viewBox="0 0 24 20" className={`${className} `} fill="none" 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/ui/src/icons/tree-map-icon.tsx b/packages/ui/src/icons/tree-map-icon.tsx
new file mode 100644
index 000000000..b8de01069
--- /dev/null
+++ b/packages/ui/src/icons/tree-map-icon.tsx
@@ -0,0 +1,16 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const TreeMapIcon: React.FC<ISvgIcons> = ({ className = "", ...rest }) => (
+  <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/ui/src/icons/updates-icon.tsx b/packages/ui/src/icons/updates-icon.tsx
new file mode 100644
index 000000000..978eb5f05
--- /dev/null
+++ b/packages/ui/src/icons/updates-icon.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { ISvgIcons } from "./type";
+
+export const UpdatesIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
+  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      fill-rule="evenodd"
+      clip-rule="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="#8591AD"
+    />
+    <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="#8591AD"
+    />
+  </svg>
+);
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 279e19a3e..19edba780 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -25,7 +25,9 @@ export * from "./popovers";
 export * from "./tables";
 export * from "./header";
 export * from "./row";
+export * from "./scroll-area";
 export * from "./content-wrapper";
 export * from "./card";
 export * from "./tag";
 export * from "./tabs";
+export * from "./calendar";
diff --git a/packages/ui/src/modals/constants.ts b/packages/ui/src/modals/constants.ts
index fe72ef7ae..e1eccd941 100644
--- a/packages/ui/src/modals/constants.ts
+++ b/packages/ui/src/modals/constants.ts
@@ -13,4 +13,5 @@ export enum EModalWidth {
   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/scroll-area.tsx b/packages/ui/src/scroll-area.tsx
new file mode 100644
index 000000000..0f6cc33c6
--- /dev/null
+++ b/packages/ui/src/scroll-area.tsx
@@ -0,0 +1,66 @@
+"use client";
+import * as RadixScrollArea from "@radix-ui/react-scroll-area";
+import React, { FC } from "react";
+import { cn } from "../helpers";
+
+type TScrollAreaProps = {
+  type?: "auto" | "always" | "scroll" | "hover";
+  className?: string;
+  scrollHideDelay?: number;
+  size?: "sm" | "md" | "lg";
+  children: React.ReactNode;
+};
+
+const sizeStyles = {
+  sm: "p-[0.112rem] data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:h-2.5",
+  md: "p-[0.152rem] data-[orientation=vertical]:w-3 data-[orientation=horizontal]:h-3",
+  lg: "p-[0.225rem] data-[orientation=vertical]:w-4 data-[orientation=horizontal]:h-4",
+};
+
+const thumbSizeStyles = {
+  sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-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:min-w-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:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2",
+};
+
+export const ScrollArea: FC<TScrollAreaProps> = (props) => {
+  const { type = "always", className = "", scrollHideDelay = 600, size = "md", children } = props;
+
+  return (
+    <RadixScrollArea.Root
+      type={type}
+      className={cn("group overflow-hidden", className)}
+      scrollHideDelay={scrollHideDelay}
+    >
+      <RadixScrollArea.Viewport className="size-full">{children}</RadixScrollArea.Viewport>
+      <RadixScrollArea.Scrollbar
+        className={cn(
+          "group/track flex touch-none select-none bg-transparent transition-colors duration-[160ms] ease-out",
+          sizeStyles[size]
+        )}
+        orientation="vertical"
+      >
+        <RadixScrollArea.Thumb
+          className={cn(
+            "relative flex-1 rounded-[10px]  bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
+            thumbSizeStyles[size]
+          )}
+        />
+      </RadixScrollArea.Scrollbar>
+      <RadixScrollArea.Scrollbar
+        className={cn(
+          "group/track flex touch-none select-none bg-transparent transition-colors duration-[160ms] ease-out",
+          sizeStyles[size]
+        )}
+        orientation="horizontal"
+      >
+        <RadixScrollArea.Thumb
+          className={cn(
+            "relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active",
+            thumbSizeStyles[size]
+          )}
+        />
+      </RadixScrollArea.Scrollbar>
+    </RadixScrollArea.Root>
+  );
+};
diff --git a/packages/ui/src/tabs/index.ts b/packages/ui/src/tabs/index.ts
index 811d3d4a7..c232b43ab 100644
--- a/packages/ui/src/tabs/index.ts
+++ b/packages/ui/src/tabs/index.ts
@@ -1 +1,2 @@
 export * from "./tabs";
+export * from "./tab-list";
diff --git a/packages/ui/src/tabs/tab-list.tsx b/packages/ui/src/tabs/tab-list.tsx
new file mode 100644
index 000000000..0e9eb2dbd
--- /dev/null
+++ b/packages/ui/src/tabs/tab-list.tsx
@@ -0,0 +1,71 @@
+import { Tab } from "@headlessui/react";
+import { LucideProps } from "lucide-react";
+import React, { FC } from "react";
+// helpers
+import { cn } from "../../helpers";
+
+export type TabListItem = {
+  key: string;
+  icon?: FC<LucideProps>;
+  label?: React.ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+};
+
+type TTabListProps = {
+  tabs: TabListItem[];
+  tabListClassName?: string;
+  tabClassName?: string;
+  size?: "sm" | "md" | "lg";
+  selectedTab?: string;
+  onTabChange?: (key: string) => void;
+};
+
+export const TabList: FC<TTabListProps> = ({
+  tabs,
+  tabListClassName,
+  tabClassName,
+  size = "md",
+  selectedTab,
+  onTabChange,
+}) => (
+  <Tab.List
+    as="div"
+    className={cn(
+      "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60",
+      tabListClassName
+    )}
+  >
+    {tabs.map((tab) => (
+      <Tab
+        className={({ selected }) =>
+          cn(
+            "flex items-center justify-center p-1 min-w-fit w-full font-medium text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all rounded",
+            (selectedTab ? selectedTab === tab.key : selected)
+              ? "bg-custom-background-100 text-custom-text-100 shadow-sm"
+              : tab.disabled
+                ? "text-custom-text-400 cursor-not-allowed"
+                : "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60",
+            {
+              "text-xs": size === "sm",
+              "text-sm": size === "md",
+              "text-base": size === "lg",
+            },
+            tabClassName
+          )
+        }
+        key={tab.key}
+        onClick={() => {
+          if (!tab.disabled) {
+            onTabChange?.(tab.key);
+            tab.onClick?.();
+          }
+        }}
+        disabled={tab.disabled}
+      >
+        {tab.icon && <tab.icon className="size-4" />}
+        {tab.label}
+      </Tab>
+    ))}
+  </Tab.List>
+);
diff --git a/packages/ui/src/tabs/tabs.tsx b/packages/ui/src/tabs/tabs.tsx
index a323d9721..b2791c0b8 100644
--- a/packages/ui/src/tabs/tabs.tsx
+++ b/packages/ui/src/tabs/tabs.tsx
@@ -1,21 +1,20 @@
-import React, { FC, Fragment } from "react";
 import { Tab } from "@headlessui/react";
-import { LucideProps } from "lucide-react";
+import React, { FC, Fragment, useEffect, useState } from "react";
 // helpers
 import { useLocalStorage } from "@plane/hooks";
 import { cn } from "../../helpers";
+// types
+import { TabList, TabListItem } from "./tab-list";
 
-type TabItem = {
-  key: string;
-  icon?: FC<LucideProps>;
-  label?: React.ReactNode;
+export type TabContent = {
   content: React.ReactNode;
-  disabled?: boolean;
 };
 
+export type TabItem = TabListItem & TabContent;
+
 type TTabsProps = {
   tabs: TabItem[];
-  storageKey: string;
+  storageKey?: string;
   actions?: React.ReactNode;
   defaultTab?: string;
   containerClassName?: string;
@@ -23,6 +22,8 @@ type TTabsProps = {
   tabListClassName?: string;
   tabClassName?: string;
   tabPanelClassName?: string;
+  size?: "sm" | "md" | "lg";
+  storeInLocalStorage?: boolean;
 };
 
 export const Tabs: FC<TTabsProps> = (props: TTabsProps) => {
@@ -36,48 +37,41 @@ export const Tabs: FC<TTabsProps> = (props: TTabsProps) => {
     tabListClassName = "",
     tabClassName = "",
     tabPanelClassName = "",
+    size = "md",
+    storeInLocalStorage = true,
   } = props;
   // local storage
-  const { storedValue, setValue } = useLocalStorage(`tab-${storageKey}`, defaultTab);
+  const { storedValue, setValue } = useLocalStorage(
+    storeInLocalStorage && storageKey ? `tab-${storageKey}` : `tab-${tabs[0]?.key}`,
+    defaultTab
+  );
+  // state
+  const [selectedTab, setSelectedTab] = useState(storedValue ?? defaultTab);
+
+  useEffect(() => {
+    if (storeInLocalStorage) {
+      setValue(selectedTab);
+    }
+  }, [selectedTab, setValue, storeInLocalStorage, storageKey]);
 
   const currentTabIndex = (tabKey: string): number => tabs.findIndex((tab) => tab.key === tabKey);
 
+  const handleTabChange = (key: string) => {
+    setSelectedTab(key);
+  };
+
   return (
     <div className="flex flex-col w-full h-full">
-      <Tab.Group defaultIndex={currentTabIndex(storedValue ?? defaultTab)}>
+      <Tab.Group defaultIndex={currentTabIndex(selectedTab)}>
         <div className={cn("flex flex-col w-full h-full gap-2", containerClassName)}>
           <div className={cn("flex w-full items-center gap-4", tabListContainerClassName)}>
-            <Tab.List
-              as="div"
-              className={cn(
-                "flex w-full min-w-fit items-center justify-between gap-1.5 rounded-md text-sm p-0.5 bg-custom-background-80/60",
-                tabListClassName
-              )}
-            >
-              {tabs.map((tab) => (
-                <Tab
-                  className={({ selected }) =>
-                    cn(
-                      `flex items-center justify-center p-1 min-w-fit w-full font-medium text-custom-text-100 outline-none focus:outline-none cursor-pointer transition-all rounded`,
-                      selected
-                        ? "bg-custom-background-100 text-custom-text-100 shadow-sm"
-                        : tab.disabled
-                          ? "text-custom-text-400 cursor-not-allowed"
-                          : "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60",
-                      tabClassName
-                    )
-                  }
-                  key={tab.key}
-                  onClick={() => {
-                    if (!tab.disabled) setValue(tab.key);
-                  }}
-                  disabled={tab.disabled}
-                >
-                  {tab.icon && <tab.icon className="size-4" />}
-                  {tab.label}
-                </Tab>
-              ))}
-            </Tab.List>
+            <TabList
+              tabs={tabs}
+              tabListClassName={tabListClassName}
+              tabClassName={tabClassName}
+              size={size}
+              onTabChange={handleTabChange}
+            />
             {actions && <div className="flex-grow">{actions}</div>}
           </div>
           <Tab.Panels as={Fragment}>
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
index e485166eb..d013414cd 100644
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
 import { Tooltip2 } from "@blueprintjs/popover2";
+import React, { useEffect, useRef, useState } from "react";
 // helpers
 import { cn } from "../../helpers";
 
@@ -23,7 +23,6 @@ export type TPosition =
 interface ITooltipProps {
   tooltipHeading?: string;
   tooltipContent: string | React.ReactNode;
-  jsxContent?: string | React.ReactNode;
   position?: TPosition;
   children: JSX.Element;
   disabled?: boolean;
@@ -39,14 +38,13 @@ export const Tooltip: React.FC<ITooltipProps> = ({
   tooltipContent,
   position = "top",
   children,
-  jsxContent,
   disabled = false,
   className = "",
   openDelay = 200,
   closeDelay,
   isMobile = false,
   renderByDefault = true, //FIXME: tooltip should always render on hover and not by default, this is a temporary fix
-}: ITooltipProps) => {
+}) => {
   const toolTipRef = useRef<HTMLDivElement | null>(null);
 
   const [shouldRender, setShouldRender] = useState(renderByDefault);
@@ -81,22 +79,18 @@ export const Tooltip: React.FC<ITooltipProps> = ({
       hoverOpenDelay={openDelay}
       hoverCloseDelay={closeDelay}
       content={
-        jsxContent ? (
-          <>{jsxContent}</>
-        ) : (
-          <div
-            className={cn(
-              "relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md",
-              {
-                hidden: isMobile,
-              },
-              className
-            )}
-          >
-            {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
-            {tooltipContent}
-          </div>
-        )
+        <div
+          className={cn(
+            "relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md",
+            {
+              hidden: isMobile,
+            },
+            className
+          )}
+        >
+          {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
+          {tooltipContent}
+        </div>
       }
       position={position}
       renderTarget={({
diff --git a/packages/ui/tailwind.config.js b/packages/ui/tailwind.config.js
index 79a219c22..5970ea08e 100644
--- a/packages/ui/tailwind.config.js
+++ b/packages/ui/tailwind.config.js
@@ -1,4 +1,5 @@
-const config = require("tailwind-config-custom/tailwind.config");
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const config = require("@plane/tailwind-config/tailwind.config.js");
 
 config.content.files = ["./src/**/*.{js,ts,jsx,tsx}"];
 
diff --git a/packages/utils/package.json b/packages/utils/package.json
index a0e0ecca1..f1c2cdd9b 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -15,13 +15,19 @@
     "lint:errors": "eslint src --ext .ts,.tsx --quiet"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "isomorphic-dompurify": "^2.16.0",
-    "react": "^18.3.1"
+    "lodash": "^4.17.21",
+    "react": "^18.3.1",
+    "tailwind-merge": "^2.5.5",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@plane/eslint-config": "*",
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.11",
+    "@types/zxcvbn": "^4.4.5",
     "tsup": "^7.2.0",
     "typescript": "^5.3.3"
   }
diff --git a/packages/utils/src/array.ts b/packages/utils/src/array.ts
new file mode 100644
index 000000000..12727d3a0
--- /dev/null
+++ b/packages/utils/src/array.ts
@@ -0,0 +1,197 @@
+import isEmpty from "lodash/isEmpty";
+import { 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;
+};
diff --git a/packages/utils/src/auth.ts b/packages/utils/src/auth.ts
new file mode 100644
index 000000000..297b4c9ed
--- /dev/null
+++ b/packages/utils/src/auth.ts
@@ -0,0 +1,387 @@
+import { ReactNode } from "react";
+import zxcvbn from "zxcvbn";
+import {
+  E_PASSWORD_STRENGTH,
+  SPACE_PASSWORD_CRITERIA,
+  PASSWORD_MIN_LENGTH,
+  EErrorAlertType,
+  EAuthErrorCodes,
+} from "@plane/constants";
+
+/**
+ * @description Password strength levels
+ */
+export enum PasswordStrength {
+  EMPTY = "empty",
+  WEAK = "weak",
+  FAIR = "fair",
+  GOOD = "good",
+  STRONG = "strong",
+}
+
+/**
+ * @description Password strength criteria type
+ */
+export type PasswordCriterion = {
+  regex: RegExp;
+  description: string;
+};
+
+/**
+ * @description Password strength criteria
+ */
+export const PASSWORD_CRITERIA: PasswordCriterion[] = [
+  { regex: /[a-z]/, description: "lowercase" },
+  { regex: /[A-Z]/, description: "uppercase" },
+  { regex: /[0-9]/, description: "number" },
+  { regex: /[^a-zA-Z0-9]/, description: "special character" },
+];
+
+/**
+ * @description Checks if password meets all criteria
+ * @param {string} password - Password to check
+ * @returns {boolean} Whether password meets all criteria
+ */
+export const checkPasswordCriteria = (password: string): boolean =>
+  PASSWORD_CRITERIA.every((criterion) => criterion.regex.test(password));
+
+/**
+ * @description Checks password strength against criteria
+ * @param {string} password - Password to check
+ * @returns {PasswordStrength} Password strength level
+ * @example
+ * checkPasswordStrength("abc") // returns PasswordStrength.WEAK
+ * checkPasswordStrength("Abc123!@#") // returns PasswordStrength.STRONG
+ */
+export const checkPasswordStrength = (password: string): PasswordStrength => {
+  if (!password || password.length === 0) return PasswordStrength.EMPTY;
+  if (password.length < PASSWORD_MIN_LENGTH) return PasswordStrength.WEAK;
+
+  const criteriaCount = PASSWORD_CRITERIA.filter((criterion) => criterion.regex.test(password)).length;
+
+  const zxcvbnScore = zxcvbn(password).score;
+
+  if (criteriaCount <= 1 || zxcvbnScore <= 1) return PasswordStrength.WEAK;
+  if (criteriaCount === 2 || zxcvbnScore === 2) return PasswordStrength.FAIR;
+  if (criteriaCount === 3 || zxcvbnScore === 3) return PasswordStrength.GOOD;
+  return PasswordStrength.STRONG;
+};
+
+export type TAuthErrorInfo = {
+  type: EErrorAlertType;
+  code: EAuthErrorCodes;
+  title: string;
+  message: ReactNode;
+};
+
+// Password strength check
+export const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => {
+  let passwordStrength: E_PASSWORD_STRENGTH = E_PASSWORD_STRENGTH.EMPTY;
+
+  if (!password || password === "" || password.length <= 0) {
+    return passwordStrength;
+  }
+
+  if (password.length >= PASSWORD_MIN_LENGTH) {
+    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
+  } else {
+    passwordStrength = E_PASSWORD_STRENGTH.LENGTH_NOT_VALID;
+    return passwordStrength;
+  }
+
+  const passwordCriteriaValidation = SPACE_PASSWORD_CRITERIA.map((criteria) =>
+    criteria.isCriteriaValid(password)
+  ).every((criterion) => criterion);
+  const passwordStrengthScore = zxcvbn(password).score;
+
+  if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) {
+    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID;
+    return passwordStrength;
+  }
+
+  if (passwordCriteriaValidation === true && passwordStrengthScore >= 3) {
+    passwordStrength = E_PASSWORD_STRENGTH.STRENGTH_VALID;
+  }
+
+  return passwordStrength;
+};
+
+// Error code messages
+const errorCodeMessages: {
+  [key in EAuthErrorCodes]: { title: string; message: (email?: string | undefined) => 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.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.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 | undefined
+): 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.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/color.ts b/packages/utils/src/color.ts
index 702719c79..f97910efa 100644
--- a/packages/utils/src/color.ts
+++ b/packages/utils/src/color.ts
@@ -7,10 +7,16 @@
  */
 export type RGB = { r: number; g: number; b: number };
 
+export type HSL = { h: number; s: number; l: number };
+
 /**
- * Validates and clamps color values to RGB range (0-255)
+ * @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;
@@ -58,3 +64,81 @@ export const hexToRgb = (hex: string): RGB => {
  * rgbToHex({ r: 0, g: 0, b: 255 }) // returns "#0000ff"
  */
 export const rgbToHex = ({ r, g, b }: RGB): 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): HSL => {
+  // 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 }: HSL): 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)}`;
+};
diff --git a/packages/utils/src/common.ts b/packages/utils/src/common.ts
new file mode 100644
index 000000000..fb47656d3
--- /dev/null
+++ b/packages/utils/src/common.ts
@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+// Support email can be configured by the application
+export const getSupportEmail = (defaultEmail: string = ""): string => defaultEmail;
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
diff --git a/packages/utils/src/datetime.ts b/packages/utils/src/datetime.ts
new file mode 100644
index 000000000..0a12a2270
--- /dev/null
+++ b/packages/utils/src/datetime.ts
@@ -0,0 +1,335 @@
+import { differenceInDays, format, formatDistanceToNow, isAfter, isEqual, isValid, parseISO } from "date-fns";
+
+/**
+ * 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);
+    // Using Number.isInteger instead of lodash's isNumber for better specificity and no external dependency
+    if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) return;
+
+    return new Date(year, month - 1, day);
+  } catch (e) {
+    return undefined;
+  }
+};
+
+/**
+ * @returns {string | null} formatted date in the format of MMM dd, yyyy
+ * @description Returns date in the formatted format
+ * @param {Date | string} date
+ * @example renderFormattedDate("2024-01-01") // Jan 01, 2024
+ */
+/**
+ * @description Returns date in the formatted format
+ * @param {Date | string} date Date to format
+ * @param {string} formatToken Format token (optional, default: MMM dd, yyyy)
+ * @returns {string | undefined} Formatted date in the desired format
+ * @example
+ * renderFormattedDate("2024-01-01") // returns "Jan 01, 2024"
+ * renderFormattedDate("2024-01-01", "MM-DD-YYYY") // returns "01-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 undefined 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;
+};
+
+/**
+ * @description Returns total number of days in range
+ * @param {string | Date} startDate - Start date
+ * @param {string | Date} endDate - End date
+ * @param {boolean} inclusive - Include start and end dates (optional, default: true)
+ * @returns {number | undefined} Total number of days
+ * @example
+ * findTotalDaysInRange("2024-01-01", "2024-01-08") // returns 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;
+};
+
+/**
+ * @description Add number of days to the provided date
+ * @param {string | Date} startDate - Start date
+ * @param {number} numberOfDays - Number of days to add
+ * @returns {Date | undefined} Resulting date
+ * @example
+ * addDaysToDate("2024-01-01", 7) // returns Date(2024-01-08)
+ */
+export const addDaysToDate = (startDate: Date | string | undefined | null, numberOfDays: number): Date | undefined => {
+  // 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;
+};
+
+/**
+ * @description Returns number of days left from today
+ * @param {string | Date} date - Target date
+ * @param {boolean} inclusive - Include today (optional, default: true)
+ * @returns {number | undefined} Number of days left
+ * @example
+ * findHowManyDaysLeft("2024-01-08") // returns days between today and Jan 8, 2024
+ */
+export const findHowManyDaysLeft = (
+  date: Date | string | undefined | null,
+  inclusive: boolean = true
+): number | undefined => {
+  if (!date) return undefined;
+  return findTotalDaysInRange(new Date(), date, inclusive);
+};
+
+/**
+ * @description Returns time passed since the event happened
+ * @param {string | number | Date} time - Time to calculate from
+ * @returns {string} Formatted time ago string
+ * @example
+ * calculateTimeAgo("2023-01-01") // returns "1 year ago"
+ */
+export const calculateTimeAgo = (time: string | number | Date | null): string => {
+  if (!time) return "";
+  const parsedTime = typeof time === "string" || typeof time === "number" ? parseISO(String(time)) : time;
+  if (!parsedTime) return "";
+  const distance = formatDistanceToNow(parsedTime, { addSuffix: true });
+  return distance;
+};
+
+/**
+ * @description Returns short form of time passed (e.g., 1y, 2mo, 3d)
+ * @param {string | number | Date} date - Date to calculate from
+ * @returns {string} Short form time ago
+ * @example
+ * calculateTimeAgoShort("2023-01-01") // returns "1y"
+ */
+export const 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`;
+};
+
+/**
+ * @description Checks if a date is greater than today
+ * @param {string} dateStr - Date string to check
+ * @returns {boolean} True if date is greater than today
+ * @example
+ * isDateGreaterThanToday("2024-12-31") // returns true
+ */
+export const isDateGreaterThanToday = (dateStr: string): boolean => {
+  if (!dateStr) return false;
+  const date = parseISO(dateStr);
+  const today = new Date();
+  if (!isValid(date)) return false;
+  return isAfter(date, today);
+};
+
+/**
+ * @description Returns week number of date
+ * @param {Date} date - Date to get week number from
+ * @returns {number} Week number (1-52)
+ * @example
+ * getWeekNumberOfDate(new Date("2023-09-01")) // returns 35
+ */
+export const getWeekNumberOfDate = (date: Date): number => {
+  const currentDate = date;
+  const startDate = new Date(currentDate.getFullYear(), 0, 1);
+  const days = Math.floor((currentDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000));
+  const weekNumber = Math.ceil((days + 1) / 7);
+  return weekNumber;
+};
+
+/**
+ * @description Checks if two dates are equal
+ * @param {Date | string} date1 - First date
+ * @param {Date | string} date2 - Second date
+ * @returns {boolean} True if dates are equal
+ * @example
+ * checkIfDatesAreEqual("2024-01-01", "2024-01-01") // returns true
+ */
+export const checkIfDatesAreEqual = (
+  date1: Date | string | null | undefined,
+  date2: Date | string | null | undefined
+): boolean => {
+  const parsedDate1 = getDate(date1);
+  const parsedDate2 = getDate(date2);
+  if (!parsedDate1 && !parsedDate2) return true;
+  if (!parsedDate1 || !parsedDate2) return false;
+  return isEqual(parsedDate1, parsedDate2);
+};
+
+/**
+ * @description Checks if a string matches date format YYYY-MM-DD
+ * @param {string} date - Date string to check
+ * @returns {boolean} True if string matches date format
+ * @example
+ * isInDateFormat("2024-01-01") // returns true
+ */
+export const isInDateFormat = (date: string): boolean => {
+  const datePattern = /^\d{4}-\d{2}-\d{2}$/;
+  return datePattern.test(date);
+};
+
+/**
+ * @description Converts date string to ISO format
+ * @param {string} dateString - Date string to convert
+ * @returns {string | undefined} ISO date string
+ * @example
+ * convertToISODateString("2024-01-01") // returns "2024-01-01T00:00:00.000Z"
+ */
+export const convertToISODateString = (dateString: string | undefined): string | undefined => {
+  if (!dateString) return dateString;
+  const date = new Date(dateString);
+  return date.toISOString();
+};
+
+/**
+ * @description Converts date string to epoch timestamp
+ * @param {string} dateString - Date string to convert
+ * @returns {number | undefined} Epoch timestamp
+ * @example
+ * convertToEpoch("2024-01-01") // returns 1704067200000
+ */
+export const convertToEpoch = (dateString: string | undefined): number | undefined => {
+  if (!dateString) return undefined;
+  const date = new Date(dateString);
+  return date.getTime();
+};
+
+/**
+ * @description Gets current date time in ISO format
+ * @returns {string} Current date time in ISO format
+ * @example
+ * getCurrentDateTimeInISO() // returns "2024-01-01T12:00:00.000Z"
+ */
+export const getCurrentDateTimeInISO = (): string => {
+  const date = new Date();
+  return date.toISOString();
+};
+
+/**
+ * @description Converts hours and minutes to total minutes
+ * @param {number} hours - Number of hours
+ * @param {number} minutes - Number of minutes
+ * @returns {number} Total minutes
+ * @example
+ * convertHoursMinutesToMinutes(2, 30) // returns 150
+ */
+export const convertHoursMinutesToMinutes = (hours: number, minutes: number): number => hours * 60 + minutes;
+
+/**
+ * @description Converts total minutes to hours and minutes
+ * @param {number} mins - Total minutes
+ * @returns {{ hours: number; minutes: number }} Hours and minutes
+ * @example
+ * convertMinutesToHoursAndMinutes(150) // returns { 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, minutes };
+};
+
+/**
+ * @description Converts minutes to hours and minutes string
+ * @param {number} totalMinutes - Total minutes
+ * @returns {string} Formatted string (e.g., "2h 30m")
+ * @example
+ * convertMinutesToHoursMinutesString(150) // returns "2h 30m"
+ */
+export const convertMinutesToHoursMinutesString = (totalMinutes: number): string => {
+  const { hours, minutes } = convertMinutesToHoursAndMinutes(totalMinutes);
+  return `${hours ? `${hours}h ` : ``}${minutes ? `${minutes}m ` : ``}`;
+};
+
+/**
+ * @description Calculates read time in seconds from word count
+ * @param {number} wordsCount - Number of words
+ * @returns {number} Read time in seconds
+ * @example
+ * getReadTimeFromWordsCount(400) // returns 120
+ */
+export const getReadTimeFromWordsCount = (wordsCount: number): number => {
+  const wordsPerMinute = 200;
+  const minutes = wordsCount / wordsPerMinute;
+  return minutes * 60;
+};
+
+/**
+ * @description Generates array of dates between start and end dates
+ * @param {string | Date} startDate - Start date
+ * @param {string | Date} endDate - End date
+ * @returns {Array<{ date: string }>} Array of dates
+ * @example
+ * generateDateArray("2024-01-01", "2024-01-03")
+ * // returns [{ date: "2024-01-02" }, { date: "2024-01-03" }]
+ */
+export const generateDateArray = (startDate: string | Date, endDate: string | Date): Array<{ date: string }> => {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  end.setDate(end.getDate() + 1);
+
+  const dateArray = [];
+  while (start <= end) {
+    start.setDate(start.getDate() + 1);
+    dateArray.push({
+      date: new Date(start).toISOString().split("T")[0],
+    });
+  }
+  return dateArray;
+};
diff --git a/packages/utils/src/emoji.ts b/packages/utils/src/emoji.ts
index 306d4afef..9b796575a 100644
--- a/packages/utils/src/emoji.ts
+++ b/packages/utils/src/emoji.ts
@@ -38,3 +38,27 @@ export const emojiCodeToUnicode = (emoji: string): string => {
 
   return uniCodeEmoji;
 };
+
+/**
+ * Groups reactions by a specified key
+ * @param {T[]} reactions - Array of reaction objects
+ * @param {string} key - Key to group reactions by
+ * @returns {Object} Object with reactions grouped by the specified key
+ * @example
+ * const reactions = [{ reaction: "👍", id: 1 }, { reaction: "👍", id: 2 }, { reaction: "❤️", id: 3 }];
+ * groupReactions(reactions, "reaction") // returns { "👍": [{ reaction: "👍", id: 1 }, { reaction: "👍", id: 2 }], "❤️": [{ reaction: "❤️", id: 3 }] }
+ */
+export const groupReactions = <T extends { reaction: string }>(reactions: T[], key: string): { [key: string]: T[] } => {
+  const groupedReactions = reactions.reduce(
+    (acc: { [key: string]: T[] }, reaction: T) => {
+      if (!acc[reaction[key as keyof T] as string]) {
+        acc[reaction[key as keyof T] as string] = [];
+      }
+      acc[reaction[key as keyof T] as string].push(reaction);
+      return acc;
+    },
+    {} as { [key: string]: T[] }
+  );
+
+  return groupedReactions;
+};
diff --git a/packages/utils/src/file.ts b/packages/utils/src/file.ts
new file mode 100644
index 000000000..42b52bf48
--- /dev/null
+++ b/packages/utils/src/file.ts
@@ -0,0 +1,49 @@
+import { API_BASE_URL } from "@plane/constants";
+import { TFileMetaDataLite, TFileSignedURLResponse } from "@plane/types";
+
+/**
+ * @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 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 returns the necessary file meta data to upload a file
+ * @param {File} file
+ * @returns {TFileMetaDataLite} payload with file info
+ */
+export const getFileMetaDataForUpload = (file: File): TFileMetaDataLite => ({
+  name: file.name,
+  size: file.size,
+  type: file.type,
+});
+
+/**
+ * @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/utils/src/index.ts b/packages/utils/src/index.ts
index 7e63eed79..7ae269318 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,3 +1,13 @@
+export * from "./array";
+export * from "./auth";
+export * from "./datetime";
 export * from "./color";
+export * from "./common";
+export * from "./datetime";
 export * from "./emoji";
+export * from "./file";
+export * from "./issue";
+export * from "./state";
 export * from "./string";
+export * from "./theme";
+export * from "./workspace";
diff --git a/packages/utils/src/issue.ts b/packages/utils/src/issue.ts
new file mode 100644
index 000000000..0fc5d5261
--- /dev/null
+++ b/packages/utils/src/issue.ts
@@ -0,0 +1,37 @@
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { ISSUE_PRIORITY_FILTERS, STATE_GROUPS, TIssuePriorities, TIssueFilterPriorityObject } from "@plane/constants";
+import { TStateGroups } from "@plane/types";
+import { getDate } from "./datetime";
+
+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;
+};
+
+/**
+ * @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;
+};
diff --git a/packages/utils/src/state.ts b/packages/utils/src/state.ts
new file mode 100644
index 000000000..8d97c39f6
--- /dev/null
+++ b/packages/utils/src/state.ts
@@ -0,0 +1,13 @@
+import { STATE_GROUPS } from "@plane/constants";
+import { IState } from "@plane/types";
+
+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);
+  });
+};
diff --git a/packages/utils/src/string.ts b/packages/utils/src/string.ts
index c3c8b1541..2fc52a254 100644
--- a/packages/utils/src/string.ts
+++ b/packages/utils/src/string.ts
@@ -1,5 +1,184 @@
 import DOMPurify from "isomorphic-dompurify";
 
+/**
+ * @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"
+ */
+/**
+ * @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 (typeof navigator === "undefined") return;
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (err) {
+    console.error("Failed to copy text: ", err);
+  }
+};
+
+/**
+ * @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) => {
+  const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+  await copyTextToClipboard(`${originUrl}/${path}`);
+};
+
+/**
+ * @description Generates a deterministic HSL color based on input string
+ * @param {string} string - Input string to generate color from
+ * @returns {string} HSL color string
+ * @example
+ * generateRandomColor("hello") // returns consistent HSL color for "hello"
+ * generateRandomColor("") // returns "rgb(var(--color-primary-100))"
+ */
+export const generateRandomColor = (string: string): string => {
+  if (!string) return "rgb(var(--color-primary-100))";
+
+  string = `${string}`;
+
+  const uniqueId = string.length.toString() + string;
+  const combinedString = uniqueId + string;
+
+  const hash = Array.from(combinedString).reduce((acc, char) => {
+    const charCode = char.charCodeAt(0);
+    return (acc << 5) - acc + charCode;
+  }, 0);
+
+  const hue = hash % 360;
+  const saturation = 70;
+  const lightness = 60;
+
+  const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+
+  return randomColor;
+};
+
+/**
+ * @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 Converts object to URL query parameters string
+ * @param {Object} obj - Object to convert
+ * @returns {string} URL query parameters string
+ * @example
+ * objToQueryParams({ page: 1, search: "test" }) // returns "page=1&search=test"
+ * objToQueryParams({ a: null, b: "test" }) // returns "b=test"
+ */
+export const objToQueryParams = (obj: any) => {
+  const params = new URLSearchParams();
+
+  if (!obj) return params.toString();
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (value !== undefined && value !== null) params.append(key, value as string);
+  }
+
+  return params.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} html
@@ -9,7 +188,134 @@ import DOMPurify from "isomorphic-dompurify";
  * const text = stripHTML(html);
  * console.log(text); // Some text
  */
+/**
+ * @description Sanitizes HTML string by removing tags and properly escaping entities
+ * @param {string} htmlString - HTML string to sanitize
+ * @returns {string} Sanitized string with escaped HTML entities
+ * @example
+ * sanitizeHTML("<p>Hello & 'world'</p>") // returns "Hello &amp; &apos;world&apos;"
+ */
 export const sanitizeHTML = (htmlString: string) => {
-  const sanitizedText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: [] }); // sanitize the string to remove all HTML tags
-  return sanitizedText.trim(); // trim the string to remove leading and trailing whitespaces
+  if (!htmlString) return "";
+
+  // First use DOMPurify to remove all HTML tags while preserving text content
+  const sanitizedText = DOMPurify.sanitize(htmlString, {
+    ALLOWED_TAGS: [],
+    ALLOWED_ATTR: [],
+    USE_PROFILES: {
+      html: false,
+      svg: false,
+      svgFilters: false,
+      mathMl: false,
+    },
+  });
+
+  // Additional escaping for quotes and apostrophes
+  return sanitizedText.trim().replace(/'/g, "&apos;").replace(/"/g, "&quot;");
 };
+
+/**
+ * @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 DOMPurify
+  const cleanText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: allowedHTMLTags });
+  // Trim the string and check if it's empty
+  return cleanText.trim() === "";
+};
+
+/**
+ * @description this function returns whether a comment is empty or not by checking for the following conditions-
+ * 1. If comment is undefined
+ * 2. If comment is an empty string
+ * 3. If comment is "<p></p>"
+ * @param {string | undefined} comment
+ * @returns {boolean}
+ */
+export const isCommentEmpty = (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"])
+  );
+};
+
+/**
+ * @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);
+};
+
+// Browser-only clipboard functions
+// let copyTextToClipboard: (text: string) => Promise<void>;
+
+// if (typeof window !== "undefined") {
+//   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) {}
+
+//     document.body.removeChild(textArea);
+//   };
+
+//   copyTextToClipboard = async (text: string) => {
+//     if (!navigator.clipboard) {
+//       fallbackCopyTextToClipboard(text);
+//       return;
+//     }
+//     await navigator.clipboard.writeText(text);
+//   };
+// } else {
+//   copyTextToClipboard = async () => {
+//     throw new Error("copyTextToClipboard is only available in browser environments");
+//   };
+// }
+
+// export { copyTextToClipboard };
diff --git a/packages/utils/src/theme.ts b/packages/utils/src/theme.ts
new file mode 100644
index 000000000..1f2c22b02
--- /dev/null
+++ b/packages/utils/src/theme.ts
@@ -0,0 +1,2 @@
+export const resolveGeneralTheme = (resolvedTheme: string | undefined) =>
+  resolvedTheme?.includes("light") ? "light" : resolvedTheme?.includes("dark") ? "dark" : "system";
diff --git a/packages/utils/src/workspace.ts b/packages/utils/src/workspace.ts
new file mode 100644
index 000000000..1fb74e89c
--- /dev/null
+++ b/packages/utils/src/workspace.ts
@@ -0,0 +1,5 @@
+// plane imports
+import { IWorkspace } from "@plane/types";
+
+export const orderWorkspacesList = (workspaces: IWorkspace[]): IWorkspace[] =>
+  workspaces.sort((a, b) => a.name.localeCompare(b.name));
diff --git a/space/.eslintrc.js b/space/.eslintrc.js
index 58822f90b..5a6f06067 100644
--- a/space/.eslintrc.js
+++ b/space/.eslintrc.js
@@ -3,8 +3,4 @@ module.exports = {
   root: true,
   extends: ["@plane/eslint-config/next.js"],
   parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
-  rules: {},
 };
diff --git a/space/Dockerfile.dev b/space/Dockerfile.dev
index 213f3fb3c..b7e42dab8 100644
--- a/space/Dockerfile.dev
+++ b/space/Dockerfile.dev
@@ -1,4 +1,4 @@
-FROM node:18-alpine
+FROM node:20-alpine
 RUN apk add --no-cache libc6-compat
 # Set working directory
 WORKDIR /app
diff --git a/space/Dockerfile.space b/space/Dockerfile.space
index 4e53cfc8a..ecb3fbec7 100644
--- a/space/Dockerfile.space
+++ b/space/Dockerfile.space
@@ -1,7 +1,8 @@
+FROM node:20-alpine as base
 # *****************************************************************************
 # STAGE 1: Build the project
 # *****************************************************************************
-FROM node:18-alpine AS builder
+FROM base AS builder
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
@@ -13,7 +14,7 @@ RUN turbo prune --scope=space --docker
 # *****************************************************************************
 # STAGE 2: Install dependencies & build the project
 # *****************************************************************************
-FROM node:18-alpine AS installer
+FROM base AS installer
 
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -49,7 +50,7 @@ RUN yarn turbo run build --filter=space
 # *****************************************************************************
 # STAGE 3: Copy the project and start it
 # *****************************************************************************
-FROM node:18-alpine AS runner
+FROM base AS runner
 WORKDIR /app
 
 COPY --from=installer /app/space/next.config.js .
diff --git a/space/app/[workspaceSlug]/[projectId]/page.ts b/space/app/[workspaceSlug]/[projectId]/page.ts
index 1f8b8345d..5fbb835dc 100644
--- a/space/app/[workspaceSlug]/[projectId]/page.ts
+++ b/space/app/[workspaceSlug]/[projectId]/page.ts
@@ -1,10 +1,9 @@
 import { notFound, redirect } from "next/navigation";
-// types
+// plane imports
+import { SitesProjectPublishService } from "@plane/services";
 import { TProjectPublishSettings } from "@plane/types";
-// services
-import PublishService from "@/services/publish.service";
 
-const publishService = new PublishService();
+const publishService = new SitesProjectPublishService();
 
 type Props = {
   params: {
@@ -22,7 +21,7 @@ export default async function IssuesPage(props: Props) {
 
   let response: TProjectPublishSettings | undefined = undefined;
   try {
-    response = await publishService.fetchAnchorFromProjectDetails(workspaceSlug, projectId);
+    response = await publishService.retrieveSettingsByProjectId(workspaceSlug, projectId);
   } catch (error) {
     // redirect to 404 page on error
     notFound();
diff --git a/space/app/layout.tsx b/space/app/layout.tsx
index e457ae5d1..60a7287eb 100644
--- a/space/app/layout.tsx
+++ b/space/app/layout.tsx
@@ -15,7 +15,7 @@ export const metadata: Metadata = {
     url: "https://sites.plane.so/",
   },
   keywords:
-    "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
+    "software development, customer feedback, software, accelerate, code management, release management, project management, work item tracking, agile, scrum, kanban, collaboration",
   twitter: {
     site: "@planepowers",
   },
@@ -32,7 +32,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="shortcut icon" href={`${SPACE_BASE_PATH}/favicon/favicon.ico`} />
       </head>
       <body>
-        <AppProvider>{children}</AppProvider>
+        <AppProvider>
+          <>{children}</>
+        </AppProvider>
       </body>
     </html>
   );
diff --git a/space/app/provider.tsx b/space/app/provider.tsx
index c3ab6673f..e8566bc9d 100644
--- a/space/app/provider.tsx
+++ b/space/app/provider.tsx
@@ -2,6 +2,7 @@
 
 import { FC, ReactNode } from "react";
 // components
+import { TranslationProvider } from "@plane/i18n";
 import { InstanceProvider } from "@/lib/instance-provider";
 import { StoreProvider } from "@/lib/store-provider";
 import { ToastProvider } from "@/lib/toast-provider";
@@ -15,9 +16,11 @@ export const AppProvider: FC<IAppProvider> = (props) => {
 
   return (
     <StoreProvider>
-      <ToastProvider>
-        <InstanceProvider>{children}</InstanceProvider>
-      </ToastProvider>
+      <TranslationProvider>
+        <ToastProvider>
+          <InstanceProvider>{children}</InstanceProvider>
+        </ToastProvider>
+      </TranslationProvider>
     </StoreProvider>
   );
 };
diff --git a/space/ce/components/editor/embeds/index.ts b/space/ce/components/editor/embeds/index.ts
new file mode 100644
index 000000000..8146e94d9
--- /dev/null
+++ b/space/ce/components/editor/embeds/index.ts
@@ -0,0 +1 @@
+export * from "./mentions";
diff --git a/space/ce/components/editor/embeds/mentions/index.ts b/space/ce/components/editor/embeds/mentions/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/space/ce/components/editor/embeds/mentions/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/space/ce/components/editor/embeds/mentions/root.tsx b/space/ce/components/editor/embeds/mentions/root.tsx
new file mode 100644
index 000000000..16e21f848
--- /dev/null
+++ b/space/ce/components/editor/embeds/mentions/root.tsx
@@ -0,0 +1,4 @@
+// plane editor
+import { TMentionComponentProps } from "@plane/editor";
+
+export const EditorAdditionalMentionsRoot: React.FC<TMentionComponentProps> = () => null;
diff --git a/space/ce/components/editor/index.ts b/space/ce/components/editor/index.ts
new file mode 100644
index 000000000..cf8352ae4
--- /dev/null
+++ b/space/ce/components/editor/index.ts
@@ -0,0 +1 @@
+export * from "./embeds";
diff --git a/space/core/components/account/auth-forms/auth-header.tsx b/space/core/components/account/auth-forms/auth-header.tsx
index 8921c70b8..95a539ddf 100644
--- a/space/core/components/account/auth-forms/auth-header.tsx
+++ b/space/core/components/account/auth-forms/auth-header.tsx
@@ -25,7 +25,7 @@ const Titles: TAuthHeaderDetails = {
   },
   [EAuthModes.SIGN_UP]: {
     header: "View, comment, and do more",
-    subHeader: "Sign up or log in to work with Plane Issues and Pages.",
+    subHeader: "Sign up or log in to work with Plane work items and Pages.",
   },
 };
 
@@ -38,7 +38,7 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
     }
 
     return {
-      header: "Comment or react to issues",
+      header: "Comment or react to work itemss",
       subHeader: "Use plane to add your valuable inputs to features.",
     };
   };
diff --git a/space/core/components/account/auth-forms/auth-root.tsx b/space/core/components/account/auth-forms/auth-root.tsx
index afa3bd3a5..2ce944a25 100644
--- a/space/core/components/account/auth-forms/auth-root.tsx
+++ b/space/core/components/account/auth-forms/auth-root.tsx
@@ -3,6 +3,8 @@
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
+// plane imports
+import { SitesAuthService } from "@plane/services";
 import { IEmailCheckData } from "@plane/types";
 // components
 import {
@@ -23,12 +25,10 @@ import {
 } from "@/helpers/authentication.helper";
 // hooks
 import { useInstance } from "@/hooks/store";
-// services
-import { AuthService } from "@/services/auth.service";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
 
-const authService = new AuthService();
+const authService = new SitesAuthService();
 
 export const AuthRoot: FC = observer(() => {
   // router params
diff --git a/space/core/components/account/auth-forms/password.tsx b/space/core/components/account/auth-forms/password.tsx
index 5f0384f9b..08ff7f142 100644
--- a/space/core/components/account/auth-forms/password.tsx
+++ b/space/core/components/account/auth-forms/password.tsx
@@ -3,14 +3,14 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Eye, EyeOff, XCircle } from "lucide-react";
+// plane imports
 import { API_BASE_URL } from "@plane/constants";
+import { AuthService } from "@plane/services";
 import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { PasswordStrengthMeter } from "@/components/account";
 // helpers
 import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
-// services
-import { AuthService } from "@/services/auth.service";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
 
diff --git a/space/core/components/account/auth-forms/unique-code.tsx b/space/core/components/account/auth-forms/unique-code.tsx
index f16796d05..750b52ccd 100644
--- a/space/core/components/account/auth-forms/unique-code.tsx
+++ b/space/core/components/account/auth-forms/unique-code.tsx
@@ -2,12 +2,12 @@
 
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
+// plane imports
 import { API_BASE_URL } from "@plane/constants";
+import { AuthService } from "@plane/services";
 import { Button, Input, Spinner } from "@plane/ui";
 // hooks
 import useTimer from "@/hooks/use-timer";
-// services
-import { AuthService } from "@/services/auth.service";
 // types
 import { EAuthModes } from "@/types/auth";
 
diff --git a/space/core/components/editor/embeds/index.ts b/space/core/components/editor/embeds/index.ts
new file mode 100644
index 000000000..8146e94d9
--- /dev/null
+++ b/space/core/components/editor/embeds/index.ts
@@ -0,0 +1 @@
+export * from "./mentions";
diff --git a/space/core/components/editor/embeds/mentions/index.ts b/space/core/components/editor/embeds/mentions/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/space/core/components/editor/embeds/mentions/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/space/core/components/editor/embeds/mentions/root.tsx b/space/core/components/editor/embeds/mentions/root.tsx
new file mode 100644
index 000000000..9ea5ef6fb
--- /dev/null
+++ b/space/core/components/editor/embeds/mentions/root.tsx
@@ -0,0 +1,17 @@
+// plane editor
+import { TMentionComponentProps } from "@plane/editor";
+// plane web components
+import { EditorAdditionalMentionsRoot } from "@/plane-web/components/editor";
+// local components
+import { EditorUserMention } from "./user";
+
+export const EditorMentionsRoot: React.FC<TMentionComponentProps> = (props) => {
+  const { entity_identifier, entity_name } = props;
+
+  switch (entity_name) {
+    case "user_mention":
+      return <EditorUserMention id={entity_identifier} />;
+    default:
+      return <EditorAdditionalMentionsRoot {...props} />;
+  }
+};
diff --git a/space/core/components/editor/embeds/mentions/user.tsx b/space/core/components/editor/embeds/mentions/user.tsx
new file mode 100644
index 000000000..5a178396b
--- /dev/null
+++ b/space/core/components/editor/embeds/mentions/user.tsx
@@ -0,0 +1,39 @@
+import { observer } from "mobx-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useMember, useUser } from "@/hooks/store";
+
+type Props = {
+  id: string;
+};
+
+export const EditorUserMention: React.FC<Props> = observer((props) => {
+  const { id } = props;
+  // store hooks
+  const { data: currentUser } = useUser();
+  const { getMemberById } = useMember();
+  // derived values
+  const userDetails = getMemberById(id);
+
+  if (!userDetails) {
+    return (
+      <div className="not-prose inline px-1 py-0.5 rounded bg-custom-background-80 text-custom-text-300 no-underline">
+        @deactivated user
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "not-prose inline px-1 py-0.5 rounded bg-custom-primary-100/20 text-custom-primary-100 no-underline",
+        {
+          "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
+        }
+      )}
+    >
+      @{userDetails?.member__display_name}
+    </div>
+  );
+});
diff --git a/space/core/components/editor/index.ts b/space/core/components/editor/index.ts
index 4ec0141e2..894daf224 100644
--- a/space/core/components/editor/index.ts
+++ b/space/core/components/editor/index.ts
@@ -1,3 +1,4 @@
+export * from "./embeds";
 export * from "./lite-text-editor";
 export * from "./lite-text-read-only-editor";
 export * from "./rich-text-read-only-editor";
diff --git a/space/core/components/editor/lite-text-editor.tsx b/space/core/components/editor/lite-text-editor.tsx
index 5d5027135..9f2cda4ad 100644
--- a/space/core/components/editor/lite-text-editor.tsx
+++ b/space/core/components/editor/lite-text-editor.tsx
@@ -1,14 +1,12 @@
 import React from "react";
 // editor
-import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef } from "@plane/editor";
+import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef, TFileHandler } from "@plane/editor";
 // components
-import { IssueCommentToolbar } from "@/components/editor";
+import { EditorMentionsRoot, IssueCommentToolbar } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
 import { isCommentEmpty } from "@/helpers/string.helper";
-// hooks
-import { useMention } from "@/hooks/use-mention";
 
 interface LiteTextEditorWrapperProps
   extends Omit<ILiteTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
@@ -16,7 +14,7 @@ interface LiteTextEditorWrapperProps
   workspaceId: string;
   isSubmitting?: boolean;
   showSubmitButton?: boolean;
-  uploadFile: (file: File) => Promise<string>;
+  uploadFile: TFileHandler["upload"];
 }
 
 export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
@@ -29,8 +27,6 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     uploadFile,
     ...rest
   } = props;
-  // use-mention
-  const { mentionHighlights } = useMention();
   function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
     return !!ref && typeof ref === "object" && "current" in ref;
   }
@@ -49,8 +45,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
           workspaceId,
         })}
         mentionHandler={{
-          highlights: mentionHighlights,
-          // suggestions disabled for now
+          renderComponent: (props) => <EditorMentionsRoot {...props} />,
         }}
         {...rest}
         // overriding the containerClassName to add relative class passed
diff --git a/space/core/components/editor/lite-text-read-only-editor.tsx b/space/core/components/editor/lite-text-read-only-editor.tsx
index 014f4010c..f9889f2ab 100644
--- a/space/core/components/editor/lite-text-read-only-editor.tsx
+++ b/space/core/components/editor/lite-text-read-only-editor.tsx
@@ -1,39 +1,37 @@
 import React from "react";
 // editor
 import { EditorReadOnlyRefApi, ILiteTextReadOnlyEditor, LiteTextReadOnlyEditorWithRef } from "@plane/editor";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
-// hooks
-import { useMention } from "@/hooks/use-mention";
 
 type LiteTextReadOnlyEditorWrapperProps = Omit<
   ILiteTextReadOnlyEditor,
   "disabledExtensions" | "fileHandler" | "mentionHandler"
 > & {
   anchor: string;
+  workspaceId: string;
 };
 
 export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, LiteTextReadOnlyEditorWrapperProps>(
-  ({ anchor, ...props }, ref) => {
-    const { mentionHighlights } = useMention();
-
-    return (
-      <LiteTextReadOnlyEditorWithRef
-        ref={ref}
-        disabledExtensions={[]}
-        fileHandler={getReadOnlyEditorFileHandlers({
-          anchor,
-        })}
-        mentionHandler={{
-          highlights: mentionHighlights,
-        }}
-        {...props}
-        // overriding the customClassName to add relative class passed
-        containerClassName={cn(props.containerClassName, "relative p-2")}
-      />
-    );
-  }
+  ({ anchor, workspaceId, ...props }, ref) => (
+    <LiteTextReadOnlyEditorWithRef
+      ref={ref}
+      disabledExtensions={[]}
+      fileHandler={getReadOnlyEditorFileHandlers({
+        anchor,
+        workspaceId,
+      })}
+      mentionHandler={{
+        renderComponent: (props) => <EditorMentionsRoot {...props} />,
+      }}
+      {...props}
+      // overriding the customClassName to add relative class passed
+      containerClassName={cn(props.containerClassName, "relative p-2")}
+    />
+  )
 );
 
 LiteTextReadOnlyEditor.displayName = "LiteTextReadOnlyEditor";
diff --git a/space/core/components/editor/rich-text-editor.tsx b/space/core/components/editor/rich-text-editor.tsx
index cfe2e1b7f..c9e795d7b 100644
--- a/space/core/components/editor/rich-text-editor.tsx
+++ b/space/core/components/editor/rich-text-editor.tsx
@@ -1,36 +1,32 @@
 import React, { forwardRef } from "react";
 // editor
-import { EditorRefApi, IMentionHighlight, IRichTextEditor, RichTextEditorWithRef } from "@plane/editor";
+import { EditorRefApi, IRichTextEditor, RichTextEditorWithRef, TFileHandler } from "@plane/editor";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
 
 interface RichTextEditorWrapperProps
   extends Omit<IRichTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
-  uploadFile: (file: File) => Promise<string>;
+  anchor: string;
+  uploadFile: TFileHandler["upload"];
+  workspaceId: string;
 }
 
 export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
-  const { containerClassName, uploadFile, ...rest } = props;
-  // store hooks
-
-  // use-mention
-
-  // file size
+  const { anchor, containerClassName, uploadFile, workspaceId, ...rest } = props;
 
   return (
     <RichTextEditorWithRef
       mentionHandler={{
-        highlights: function (): Promise<IMentionHighlight[]> {
-          throw new Error("Function not implemented.");
-        },
-        suggestions: undefined,
+        renderComponent: (props) => <EditorMentionsRoot {...props} />,
       }}
       ref={ref}
       disabledExtensions={[]}
       fileHandler={getEditorFileHandlers({
+        anchor,
         uploadFile,
-        workspaceId: "",
-        anchor: "",
+        workspaceId,
       })}
       {...rest}
       containerClassName={containerClassName}
diff --git a/space/core/components/editor/rich-text-read-only-editor.tsx b/space/core/components/editor/rich-text-read-only-editor.tsx
index fca1776e2..c2d8c746f 100644
--- a/space/core/components/editor/rich-text-read-only-editor.tsx
+++ b/space/core/components/editor/rich-text-read-only-editor.tsx
@@ -1,37 +1,37 @@
 import React from "react";
 // editor
 import { EditorReadOnlyRefApi, IRichTextReadOnlyEditor, RichTextReadOnlyEditorWithRef } from "@plane/editor";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
-// hooks
-import { useMention } from "@/hooks/use-mention";
 
 type RichTextReadOnlyEditorWrapperProps = Omit<
   IRichTextReadOnlyEditor,
   "disabledExtensions" | "fileHandler" | "mentionHandler"
 > & {
   anchor: string;
+  workspaceId: string;
 };
 
 export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, RichTextReadOnlyEditorWrapperProps>(
-  ({ anchor, ...props }, ref) => {
-    const { mentionHighlights } = useMention();
-
-    return (
-      <RichTextReadOnlyEditorWithRef
-        ref={ref}
-        disabledExtensions={[]}
-        fileHandler={getReadOnlyEditorFileHandlers({
-          anchor,
-        })}
-        mentionHandler={{ highlights: mentionHighlights }}
-        {...props}
-        // overriding the customClassName to add relative class passed
-        containerClassName={cn("relative p-0 border-none", props.containerClassName)}
-      />
-    );
-  }
+  ({ anchor, workspaceId, ...props }, ref) => (
+    <RichTextReadOnlyEditorWithRef
+      ref={ref}
+      disabledExtensions={[]}
+      fileHandler={getReadOnlyEditorFileHandlers({
+        anchor,
+        workspaceId,
+      })}
+      mentionHandler={{
+        renderComponent: (props) => <EditorMentionsRoot {...props} />,
+      }}
+      {...props}
+      // overriding the customClassName to add relative class passed
+      containerClassName={cn("relative p-0 border-none", props.containerClassName)}
+    />
+  )
 );
 
 RichTextReadOnlyEditor.displayName = "RichTextReadOnlyEditor";
diff --git a/space/core/components/editor/toolbar.tsx b/space/core/components/editor/toolbar.tsx
index 4593aaf65..0d6931af5 100644
--- a/space/core/components/editor/toolbar.tsx
+++ b/space/core/components/editor/toolbar.tsx
@@ -2,11 +2,9 @@
 
 import React, { useEffect, useState, useCallback } from "react";
 // editor
-import { EditorRefApi } from "@plane/editor";
+import { TOOLBAR_ITEMS, ToolbarMenuItem, EditorRefApi } from "@plane/editor";
 // ui
 import { Button, Tooltip } from "@plane/ui";
-// constants
-import { TOOLBAR_ITEMS, ToolbarMenuItem } from "@/constants/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
diff --git a/space/core/components/instance/instance-failure-view.tsx b/space/core/components/instance/instance-failure-view.tsx
index 50f677c10..ed4c36f35 100644
--- a/space/core/components/instance/instance-failure-view.tsx
+++ b/space/core/components/instance/instance-failure-view.tsx
@@ -25,7 +25,7 @@ export const InstanceFailureView: FC = () => {
           <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
           <p className="font-medium text-base text-center">
             We were unable to fetch the details of the instance. <br />
-            Fret not, it might just be a connectivity issue.
+            Fret not, it might just be a connectivity work items.
           </p>
         </div>
         <div className="flex justify-center">
diff --git a/space/core/components/issues/filters/applied-filters/filters-list.tsx b/space/core/components/issues/filters/applied-filters/filters-list.tsx
index 4a4ed4eda..65ac29602 100644
--- a/space/core/components/issues/filters/applied-filters/filters-list.tsx
+++ b/space/core/components/issues/filters/applied-filters/filters-list.tsx
@@ -3,6 +3,7 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // types
+import { useTranslation } from "@plane/i18n";
 import { TFilters } from "@/types/issue";
 // components
 import { AppliedPriorityFilters } from "./priority";
@@ -18,6 +19,7 @@ export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, "
 
 export const AppliedFiltersList: React.FC<Props> = observer((props) => {
   const { appliedFilters = {}, handleRemoveAllFilters, handleRemoveFilter } = props;
+  const { t } = useTranslation();
 
   return (
     <div className="flex flex-wrap items-stretch gap-2">
@@ -72,7 +74,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         onClick={handleRemoveAllFilters}
         className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
       >
-        Clear all
+        {t("common.clear_all")}
         <X size={12} strokeWidth={2} />
       </button>
     </div>
diff --git a/space/core/components/issues/filters/priority.tsx b/space/core/components/issues/filters/priority.tsx
index 51c1a7519..d3b7dd67f 100644
--- a/space/core/components/issues/filters/priority.tsx
+++ b/space/core/components/issues/filters/priority.tsx
@@ -2,10 +2,11 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { ISSUE_PRIORITY_FILTERS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { PriorityIcon } from "@plane/ui";
 // components
-import { issuePriorityFilters } from "@/constants/issue";
 import { FilterHeader, FilterOption } from "./helpers";
 // constants
 
@@ -18,11 +19,14 @@ type Props = {
 export const FilterPriority: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
+  // hooks
+  const { t } = useTranslation();
+
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
 
-  const filteredOptions = issuePriorityFilters.filter((p) => p.key.includes(searchQuery.toLowerCase()));
+  const filteredOptions = ISSUE_PRIORITY_FILTERS.filter((p) => p.key.includes(searchQuery.toLowerCase()));
 
   return (
     <>
@@ -40,11 +44,11 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
                 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}
+                title={t(priority.titleTranslationKey)}
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/space/core/components/issues/filters/root.tsx b/space/core/components/issues/filters/root.tsx
index 641cf007c..ff0a13b89 100644
--- a/space/core/components/issues/filters/root.tsx
+++ b/space/core/components/issues/filters/root.tsx
@@ -4,11 +4,11 @@ import { FC, useCallback } from "react";
 import cloneDeep from "lodash/cloneDeep";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@plane/constants";
 // components
 import { FiltersDropdown } from "@/components/issues/filters/helpers/dropdown";
 import { FilterSelection } from "@/components/issues/filters/selection";
-// constants
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
@@ -32,9 +32,9 @@ export const IssueFiltersDropdown: FC<IssueFiltersDropdownProps> = observer((pro
 
   const updateRouteParams = useCallback(
     (key: keyof TIssueQueryFilters, value: string[]) => {
-      const state = key === "state" ? value : issueFilters?.filters?.state ?? [];
-      const priority = key === "priority" ? value : issueFilters?.filters?.priority ?? [];
-      const labels = key === "labels" ? value : issueFilters?.filters?.labels ?? [];
+      const state = key === "state" ? value : (issueFilters?.filters?.state ?? []);
+      const priority = key === "priority" ? value : (issueFilters?.filters?.priority ?? []);
+      const labels = key === "labels" ? value : (issueFilters?.filters?.labels ?? []);
 
       const { queryParam } = queryParamGenerator({ board: activeLayout, priority, state, labels });
       router.push(`/issues/${anchor}?${queryParam}`);
diff --git a/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
index cbb8aa551..193d7c551 100644
--- a/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
+++ b/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
@@ -26,7 +26,7 @@ export const IssueLayoutHOC = observer((props: Props) => {
   }
 
   if (getGroupIssueCount(undefined, undefined, false) === 0) {
-    return <div className="flex w-full h-full items-center justify-center">No Issues Found</div>;
+    return <div className="flex w-full h-full items-center justify-center">No work items Found</div>;
   }
 
   return <>{props.children}</>;
diff --git a/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx b/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
index 241a087e7..a7ffd38ae 100644
--- a/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
+++ b/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-//plane
-import { cn } from "@plane/editor";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { IssueEmojiReactions, IssueVotes } from "@/components/issues/reactions";
 // hooks
diff --git a/space/core/components/issues/issue-layouts/kanban/block.tsx b/space/core/components/issues/issue-layouts/kanban/block.tsx
index 7c246cc33..1975963cc 100644
--- a/space/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/space/core/components/issues/issue-layouts/kanban/block.tsx
@@ -4,10 +4,12 @@ import { MutableRefObject } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
-// plane
-import { cn } from "@plane/editor";
+// plane types
 import { IIssueDisplayProperties } from "@plane/types";
+// plane ui
 import { Tooltip } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/with-display-properties-HOC";
 // helpers
diff --git a/space/core/components/issues/issue-layouts/kanban/default.tsx b/space/core/components/issues/issue-layouts/kanban/default.tsx
index 50f7b0f71..6ad7b2e0f 100644
--- a/space/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/space/core/components/issues/issue-layouts/kanban/default.tsx
@@ -94,7 +94,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
                 <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
                   <HeaderGroupByCard
                     groupBy={groupBy}
-                    icon={subList.icon}
+                    icon={subList.icon as any}
                     title={subList.name}
                     count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
                   />
diff --git a/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
index 902dff670..48dd4047c 100644
--- a/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -131,10 +131,14 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = observer(
           const subGroupByVisibilityToggle = visibilitySubGroupByGroupCount(groupCount, showEmptyGroup);
 
           if (subGroupByVisibilityToggle === false) return <></>;
-
           return (
             <div key={`${subGroupBy}_${group.id}`} className="flex w-[350px] flex-shrink-0 flex-col">
-              <HeaderGroupByCard groupBy={groupBy} icon={group.icon} title={group.name} count={groupCount} />
+              <HeaderGroupByCard
+                groupBy={groupBy}
+                icon={group.icon}
+                title={group.name}
+                count={groupCount}
+              />
             </div>
           );
         })}
@@ -262,7 +266,7 @@ const SubGroup: React.FC<ISubGroup> = observer((props) => {
         <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
           <div className="sticky left-0 flex-shrink-0">
             <HeaderSubGroupByCard
-              icon={group.icon}
+              icon={group.icon as any}
               title={group.name || ""}
               count={issueCount}
               isExpanded={isExpanded}
diff --git a/space/core/components/issues/issue-layouts/list/block.tsx b/space/core/components/issues/issue-layouts/list/block.tsx
index 39a298448..6d4fb0983 100644
--- a/space/core/components/issues/issue-layouts/list/block.tsx
+++ b/space/core/components/issues/issue-layouts/list/block.tsx
@@ -4,10 +4,12 @@ import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
-// types
-import { cn } from "@plane/editor";
+// plane types
 import { IIssueDisplayProperties } from "@plane/types";
+// plane ui
 import { Tooltip } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
diff --git a/space/core/components/issues/issue-layouts/list/list-group.tsx b/space/core/components/issues/issue-layouts/list/list-group.tsx
index 742cfeef1..0a8c5ebb0 100644
--- a/space/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/space/core/components/issues/issue-layouts/list/list-group.tsx
@@ -2,9 +2,11 @@
 
 import { Fragment, MutableRefObject, forwardRef, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { cn } from "@plane/editor";
-// plane
+import { useTranslation } from "@plane/i18n";
+// plane types
 import { IGroupByColumn, TIssueGroupByOptions, IIssueDisplayProperties, TPaginationData, TLoader } from "@plane/types";
+// plane utils
+import { cn } from "@plane/utils";
 // hooks
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 //
@@ -61,6 +63,8 @@ export const ListGroup = observer((props: Props) => {
   } = props;
   const [isExpanded, setIsExpanded] = useState(true);
   const groupRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { t } = useTranslation();
 
   const [intersectionElement, setIntersectionElement] = useState<HTMLDivElement | null>(null);
 
@@ -84,7 +88,7 @@ export const ListGroup = observer((props: Props) => {
       }
       onClick={() => loadMoreIssues(group.id)}
     >
-      Load More &darr;
+      {t("common.load_more")} &darr;
     </div>
   );
 
diff --git a/space/core/components/issues/issue-layouts/properties/all-properties.tsx b/space/core/components/issues/issue-layouts/properties/all-properties.tsx
index 3c596cb53..813a261ce 100644
--- a/space/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/space/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -2,11 +2,12 @@
 
 import { observer } from "mobx-react";
 import { Layers, Link, Paperclip } from "lucide-react";
-// types
-import { cn } from "@plane/editor";
+// plane types
 import { IIssueDisplayProperties } from "@plane/types";
+// plane ui
 import { Tooltip } from "@plane/ui";
-// ui
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import {
   IssueBlockDate,
@@ -136,7 +137,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         displayPropertyKey="sub_issue_count"
         shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!issue.sub_issues_count}
       >
-        <Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
+        <Tooltip tooltipHeading="Sub-work items" tooltipContent={`${issue.sub_issues_count}`}>
           <div
             className={cn(
               "flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1",
diff --git a/space/core/components/issues/issue-layouts/properties/cycle.tsx b/space/core/components/issues/issue-layouts/properties/cycle.tsx
index 52c105789..1774781cd 100644
--- a/space/core/components/issues/issue-layouts/properties/cycle.tsx
+++ b/space/core/components/issues/issue-layouts/properties/cycle.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { observer } from "mobx-react";
-// ui
-import { cn } from "@plane/editor";
+// plane ui
 import { ContrastIcon, Tooltip } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 //hooks
 import { useCycle } from "@/hooks/store/use-cycle";
 
diff --git a/space/core/components/issues/issue-layouts/properties/member.tsx b/space/core/components/issues/issue-layouts/properties/member.tsx
index bac44d523..9ae3314f1 100644
--- a/space/core/components/issues/issue-layouts/properties/member.tsx
+++ b/space/core/components/issues/issue-layouts/properties/member.tsx
@@ -3,9 +3,10 @@
 import { observer } from "mobx-react";
 // icons
 import { LucideIcon, Users } from "lucide-react";
-// ui
-import { cn } from "@plane/editor";
+// plane ui
 import { Avatar, AvatarGroup } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 //
diff --git a/space/core/components/issues/issue-layouts/properties/modules.tsx b/space/core/components/issues/issue-layouts/properties/modules.tsx
index eaa30d990..465f469c0 100644
--- a/space/core/components/issues/issue-layouts/properties/modules.tsx
+++ b/space/core/components/issues/issue-layouts/properties/modules.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { observer } from "mobx-react";
-// planes
-import { cn } from "@plane/editor";
+// plane ui
 import { DiceIcon, Tooltip } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // hooks
 import { useModule } from "@/hooks/store/use-module";
 
diff --git a/space/core/components/issues/issue-layouts/properties/priority.tsx b/space/core/components/issues/issue-layouts/properties/priority.tsx
index efaa8ea36..e3bb6e178 100644
--- a/space/core/components/issues/issue-layouts/properties/priority.tsx
+++ b/space/core/components/issues/issue-layouts/properties/priority.tsx
@@ -1,10 +1,11 @@
 "use client";
 
+import { useTranslation } from "@plane/i18n";
 // types
 import { TIssuePriorities } from "@plane/types";
 import { Tooltip } from "@plane/ui";
 // constants
-import { issuePriorityFilter } from "@/constants/issue";
+import { getIssuePriorityFilters } from "@plane/utils";
 
 export const IssueBlockPriority = ({
   priority,
@@ -13,17 +14,19 @@ export const IssueBlockPriority = ({
   priority: TIssuePriorities | null;
   shouldShowName?: boolean;
 }) => {
-  const priority_detail = priority != null ? issuePriorityFilter(priority) : null;
+  // hooks
+  const { t } = useTranslation();
+  const priority_detail = priority != null ? getIssuePriorityFilters(priority) : null;
 
   if (priority_detail === null) return <></>;
 
   return (
-    <Tooltip tooltipHeading="Priority" tooltipContent={priority_detail?.title}>
+    <Tooltip tooltipHeading="Priority" tooltipContent={t(priority_detail?.titleTranslationKey || "")}>
       <div className="flex items-center relative w-full h-full">
         <div className={`grid h-5 w-5 place-items-center rounded border-[0.5px] gap-2 ${priority_detail?.className}`}>
           <span className="material-symbols-rounded text-sm">{priority_detail?.icon}</span>
         </div>
-        {shouldShowName && <span className="pl-2 text-sm">{priority_detail?.title}</span>}
+        {shouldShowName && <span className="pl-2 text-sm">{t(priority_detail?.titleTranslationKey || "")}</span>}
       </div>
     </Tooltip>
   );
diff --git a/space/core/components/issues/issue-layouts/properties/state.tsx b/space/core/components/issues/issue-layouts/properties/state.tsx
index 56a09bcd9..1d2d1c6fe 100644
--- a/space/core/components/issues/issue-layouts/properties/state.tsx
+++ b/space/core/components/issues/issue-layouts/properties/state.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { observer } from "mobx-react";
-// ui
-import { cn } from "@plane/editor";
+// plane ui
 import { StateGroupIcon, Tooltip } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 //hooks
 import { useStates } from "@/hooks/store";
 
diff --git a/space/core/components/issues/issue-layouts/utils.tsx b/space/core/components/issues/issue-layouts/utils.tsx
index 992f6367c..97021feb4 100644
--- a/space/core/components/issues/issue-layouts/utils.tsx
+++ b/space/core/components/issues/issue-layouts/utils.tsx
@@ -3,6 +3,7 @@
 import isNil from "lodash/isNil";
 import { ContrastIcon } from "lucide-react";
 // types
+import { ISSUE_PRIORITIES } from "@plane/constants";
 import {
   GroupByColumnTypes,
   IGroupByColumn,
@@ -14,7 +15,6 @@ import {
 import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
 // components
 // constants
-import { ISSUE_PRIORITIES } from "@/constants/issue";
 // stores
 import { ICycleStore } from "@/store/cycle.store";
 import { IIssueLabelStore } from "@/store/label.store";
@@ -50,7 +50,7 @@ export const getGroupByColumns = (
     case "created_by":
       return getCreatedByColumns(member) as any;
     default:
-      if (includeNone) return [{ id: `All Issues`, name: `All Issues`, payload: {}, icon: undefined }];
+      if (includeNone) return [{ id: `All Issues`, name: `All work items`, payload: {}, icon: undefined }];
   }
 };
 
diff --git a/space/core/components/issues/navbar/layout-icon.tsx b/space/core/components/issues/navbar/layout-icon.tsx
new file mode 100644
index 000000000..cf3b76093
--- /dev/null
+++ b/space/core/components/issues/navbar/layout-icon.tsx
@@ -0,0 +1,13 @@
+import { List, Kanban, LucideProps } from "lucide-react";
+import { TIssueLayout } from "@plane/constants";
+
+export const IssueLayoutIcon = ({ layout, ...props }: { layout: TIssueLayout } & LucideProps) => {
+  switch (layout) {
+    case "list":
+      return <List {...props} />;
+    case "kanban":
+      return <Kanban {...props} />;
+    default:
+      return null;
+  }
+};
diff --git a/space/core/components/issues/navbar/layout-selection.tsx b/space/core/components/issues/navbar/layout-selection.tsx
index 2d1465c78..3676f0f92 100644
--- a/space/core/components/issues/navbar/layout-selection.tsx
+++ b/space/core/components/issues/navbar/layout-selection.tsx
@@ -4,15 +4,17 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
 // ui
+import { SITES_ISSUE_LAYOUTS } from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@plane/ui";
-// constants
-import { ISSUE_LAYOUTS } from "@/constants/issue";
 // helpers
 import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
 import { useIssueFilter } from "@/hooks/store";
 // mobx
 import { TIssueLayout } from "@/types/issue";
+import { IssueLayoutIcon } from "./layout-icon";
 
 type Props = {
   anchor: string;
@@ -20,6 +22,8 @@ type Props = {
 
 export const IssuesLayoutSelection: FC<Props> = observer((props) => {
   const { anchor } = props;
+  // hooks
+  const { t } = useTranslation();
   // router
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -42,11 +46,11 @@ export const IssuesLayoutSelection: FC<Props> = observer((props) => {
 
   return (
     <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
-      {ISSUE_LAYOUTS.map((layout) => {
+      {SITES_ISSUE_LAYOUTS.map((layout) => {
         if (!layoutOptions[layout.key]) return;
 
         return (
-          <Tooltip key={layout.key} tooltipContent={layout.title}>
+          <Tooltip key={layout.key} tooltipContent={t(layout.titleTranslationKey)}>
             <button
               type="button"
               className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
@@ -54,8 +58,8 @@ export const IssuesLayoutSelection: FC<Props> = observer((props) => {
               }`}
               onClick={() => handleCurrentBoardView(layout.key)}
             >
-              <layout.icon
-                strokeWidth={2}
+              <IssueLayoutIcon
+                layout={layout.key}
                 className={`size-3.5 ${activeLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
               />
             </button>
diff --git a/space/core/components/issues/navbar/user-avatar.tsx b/space/core/components/issues/navbar/user-avatar.tsx
index 4c41677fc..0d0706478 100644
--- a/space/core/components/issues/navbar/user-avatar.tsx
+++ b/space/core/components/issues/navbar/user-avatar.tsx
@@ -7,15 +7,15 @@ import { usePathname, useSearchParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { LogOut } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
+// plane imports
 import { API_BASE_URL } from "@plane/constants";
+import { AuthService } from "@plane/services";
 import { Avatar, Button } from "@plane/ui";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 import { queryParamGenerator } from "@/helpers/query-param-generator";
 // hooks
 import { useUser } from "@/hooks/store";
-// services
-import { AuthService } from "@/services/auth.service";
 
 const authService = new AuthService();
 
diff --git a/space/core/components/issues/peek-overview/comment/add-comment.tsx b/space/core/components/issues/peek-overview/comment/add-comment.tsx
index 3623f3986..d746d7766 100644
--- a/space/core/components/issues/peek-overview/comment/add-comment.tsx
+++ b/space/core/components/issues/peek-overview/comment/add-comment.tsx
@@ -3,21 +3,19 @@
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm, Controller } from "react-hook-form";
-// editor
+// plane imports
 import { EditorRefApi } from "@plane/editor";
-// ui
+import { SitesFileService } from "@plane/services";
+import { TIssuePublicComment } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // editor components
 import { LiteTextEditor } from "@/components/editor/lite-text-editor";
 // hooks
 import { useIssueDetails, usePublish, useUser } from "@/hooks/store";
 // services
-import { FileService } from "@/services/file.service";
-const fileService = new FileService();
-// types
-import { Comment } from "@/types/issue";
+const fileService = new SitesFileService();
 
-const defaultValues: Partial<Comment> = {
+const defaultValues: Partial<TIssuePublicComment> = {
   comment_html: "",
 };
 
@@ -43,9 +41,9 @@ export const AddComment: React.FC<Props> = observer((props) => {
     watch,
     formState: { isSubmitting },
     reset,
-  } = useForm<Comment>({ defaultValues });
+  } = useForm<TIssuePublicComment>({ defaultValues });
 
-  const onSubmit = async (formData: Comment) => {
+  const onSubmit = async (formData: TIssuePublicComment) => {
     if (!anchor || !issueId || isSubmitting || !formData.comment_html) return;
 
     await addIssueComment(anchor, issueId, formData)
@@ -92,7 +90,7 @@ export const AddComment: React.FC<Props> = observer((props) => {
               onChange={(comment_json, comment_html) => onChange(comment_html)}
               isSubmitting={isSubmitting}
               placeholder="Add comment..."
-              uploadFile={async (file) => {
+              uploadFile={async (blockId, file) => {
                 const { asset_id } = await uploadCommentAsset(file, anchor);
                 setUploadAssetIds((prev) => [...prev, asset_id]);
                 return asset_id;
diff --git a/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx b/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
index 1b228dfb3..70fcedd0a 100644
--- a/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -3,8 +3,10 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Check, MessageSquare, MoreVertical, X } from "lucide-react";
 import { Menu, Transition } from "@headlessui/react";
-// components
+// plane imports
 import { EditorRefApi } from "@plane/editor";
+import { TIssuePublicComment } from "@plane/types";
+// components
 import { LiteTextEditor, LiteTextReadOnlyEditor } from "@/components/editor";
 import { CommentReactions } from "@/components/issues/peek-overview";
 // helpers
@@ -13,12 +15,10 @@ import { getFileURL } from "@/helpers/file.helper";
 // hooks
 import { useIssueDetails, usePublish, useUser } from "@/hooks/store";
 import useIsInIframe from "@/hooks/use-is-in-iframe";
-// types
-import { Comment } from "@/types/issue";
 
 type Props = {
   anchor: string;
-  comment: Comment;
+  comment: TIssuePublicComment;
 };
 
 export const CommentCard: React.FC<Props> = observer((props) => {
@@ -48,7 +48,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
     deleteIssueComment(anchor, peekId, comment.id);
   };
 
-  const handleCommentUpdate = async (formData: Comment) => {
+  const handleCommentUpdate = async (formData: TIssuePublicComment) => {
     if (!anchor || !peekId) return;
     updateIssueComment(anchor, peekId, comment.id, formData);
     setIsEditing(false);
@@ -112,7 +112,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                     onChange={(comment_json, comment_html) => onChange(comment_html)}
                     isSubmitting={isSubmitting}
                     showSubmitButton={false}
-                    uploadFile={async (file) => {
+                    uploadFile={async (blockId, file) => {
                       const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
                       return asset_id;
                     }}
@@ -140,6 +140,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           <div className={`${isEditing ? "hidden" : ""}`}>
             <LiteTextReadOnlyEditor
               anchor={anchor}
+              workspaceId={workspaceID?.toString() ?? ""}
               ref={showEditorRef}
               id={comment.id}
               initialValue={comment.comment_html}
diff --git a/space/core/components/issues/peek-overview/header.tsx b/space/core/components/issues/peek-overview/header.tsx
index 156137f60..eb49fbc4c 100644
--- a/space/core/components/issues/peek-overview/header.tsx
+++ b/space/core/components/issues/peek-overview/header.tsx
@@ -50,7 +50,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Link copied!",
-        message: "Issue link copied to clipboard.",
+        message: "Work item link copied to clipboard.",
       });
     });
   };
diff --git a/space/core/components/issues/peek-overview/issue-details.tsx b/space/core/components/issues/peek-overview/issue-details.tsx
index 36bad2fad..32bcbc9bd 100644
--- a/space/core/components/issues/peek-overview/issue-details.tsx
+++ b/space/core/components/issues/peek-overview/issue-details.tsx
@@ -13,9 +13,9 @@ type Props = {
 
 export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
   const { anchor, issueDetails } = props;
-
-  const { project_details } = usePublish(anchor);
-
+  // store hooks
+  const { project_details, workspace: workspaceID } = usePublish(anchor);
+  // derived values
   const description = issueDetails.description_html;
 
   return (
@@ -35,6 +35,7 @@ export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
               ? "<p></p>"
               : description
           }
+          workspaceId={workspaceID?.toString() ?? ""}
         />
       )}
       <IssueReactions anchor={anchor} />
diff --git a/space/core/components/issues/peek-overview/issue-properties.tsx b/space/core/components/issues/peek-overview/issue-properties.tsx
index 0749f8519..596993bc2 100644
--- a/space/core/components/issues/peek-overview/issue-properties.tsx
+++ b/space/core/components/issues/peek-overview/issue-properties.tsx
@@ -3,12 +3,12 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { CalendarCheck2, Signal } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { DoubleCircleIcon, StateGroupIcon, TOAST_TYPE, setToast } from "@plane/ui";
+import { getIssuePriorityFilters } from "@plane/utils";
 // components
 import { Icon } from "@/components/ui";
-// constants
-import { issuePriorityFilter } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
@@ -25,6 +25,8 @@ type Props = {
 };
 
 export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDetails, mode }) => {
+  // hooks
+  const { t } = useTranslation();
   const { getStateById } = useStates();
   const state = getStateById(issueDetails?.state_id ?? undefined);
 
@@ -32,7 +34,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
 
   const { project_details } = usePublish(anchor?.toString());
 
-  const priority = issueDetails.priority ? issuePriorityFilter(issueDetails.priority) : null;
+  const priority = issueDetails.priority ? getIssuePriorityFilters(issueDetails.priority) : null;
 
   const handleCopyLink = () => {
     const urlToCopy = window.location.href;
@@ -41,7 +43,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
       setToast({
         type: TOAST_TYPE.INFO,
         title: "Link copied!",
-        message: "Issue link copied to clipboard",
+        message: "Work item link copied to clipboard",
       });
     });
   };
@@ -96,7 +98,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
                   <Icon iconName={priority?.icon} />
                 </span>
               )}
-              <span>{priority?.title ?? "None"}</span>
+              <span>{t(priority?.titleTranslationKey || "common.none")}</span>
             </div>
           </div>
         </div>
diff --git a/space/core/constants/editor.ts b/space/core/constants/editor.ts
deleted file mode 100644
index 6089c5604..000000000
--- a/space/core/constants/editor.ts
+++ /dev/null
@@ -1,182 +0,0 @@
-import {
-  AlignCenter,
-  AlignLeft,
-  AlignRight,
-  Bold,
-  CaseSensitive,
-  Code2,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
-  Heading5,
-  Heading6,
-  Image,
-  Italic,
-  List,
-  ListOrdered,
-  ListTodo,
-  LucideIcon,
-  Strikethrough,
-  Table,
-  TextQuote,
-  Underline,
-} from "lucide-react";
-// editor
-import { TCommandExtraProps, TEditorCommands } from "@plane/editor";
-
-type TEditorTypes = "lite" | "document";
-
-// Utility type to enforce the necessary extra props or make extraProps optional
-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: LucideIcon;
-  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: CaseSensitive, editors: ["document"] },
-  { itemKey: "h1", renderKey: "h1", name: "Heading 1", icon: Heading1, editors: ["document"] },
-  { itemKey: "h2", renderKey: "h2", name: "Heading 2", icon: Heading2, editors: ["document"] },
-  { itemKey: "h3", renderKey: "h3", name: "Heading 3", icon: Heading3, editors: ["document"] },
-  { itemKey: "h4", renderKey: "h4", name: "Heading 4", icon: Heading4, editors: ["document"] },
-  { itemKey: "h5", renderKey: "h5", name: "Heading 5", icon: Heading5, editors: ["document"] },
-  { itemKey: "h6", renderKey: "h6", name: "Heading 6", icon: Heading6, editors: ["document"] },
-];
-
-export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
-  {
-    itemKey: "text-align",
-    renderKey: "text-align-left",
-    name: "Left align",
-    icon: AlignLeft,
-    shortcut: ["Cmd", "Shift", "L"],
-    editors: ["lite", "document"],
-    extraProps: {
-      alignment: "left",
-    },
-  },
-  {
-    itemKey: "text-align",
-    renderKey: "text-align-center",
-    name: "Center align",
-    icon: AlignCenter,
-    shortcut: ["Cmd", "Shift", "E"],
-    editors: ["lite", "document"],
-    extraProps: {
-      alignment: "center",
-    },
-  },
-  {
-    itemKey: "text-align",
-    renderKey: "text-align-right",
-    name: "Right align",
-    icon: AlignRight,
-    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: Bold,
-    shortcut: ["Cmd", "B"],
-    editors: ["lite", "document"],
-  },
-  {
-    itemKey: "italic",
-    renderKey: "italic",
-    name: "Italic",
-    icon: Italic,
-    shortcut: ["Cmd", "I"],
-    editors: ["lite", "document"],
-  },
-  {
-    itemKey: "underline",
-    renderKey: "underline",
-    name: "Underline",
-    icon: Underline,
-    shortcut: ["Cmd", "U"],
-    editors: ["lite", "document"],
-  },
-  {
-    itemKey: "strikethrough",
-    renderKey: "strikethrough",
-    name: "Strikethrough",
-    icon: Strikethrough,
-    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: List,
-    shortcut: ["Cmd", "Shift", "7"],
-    editors: ["lite", "document"],
-  },
-  {
-    itemKey: "numbered-list",
-    renderKey: "numbered-list",
-    name: "Numbered list",
-    icon: ListOrdered,
-    shortcut: ["Cmd", "Shift", "8"],
-    editors: ["lite", "document"],
-  },
-  {
-    itemKey: "to-do-list",
-    renderKey: "to-do-list",
-    name: "To-do list",
-    icon: ListTodo,
-    shortcut: ["Cmd", "Shift", "9"],
-    editors: ["lite", "document"],
-  },
-];
-
-export const USER_ACTION_ITEMS: ToolbarMenuItem<"quote" | "code">[] = [
-  { itemKey: "quote", renderKey: "quote", name: "Quote", icon: TextQuote, editors: ["lite", "document"] },
-  { itemKey: "code", renderKey: "code", name: "Code", icon: Code2, editors: ["lite", "document"] },
-];
-
-export const COMPLEX_ITEMS: ToolbarMenuItem<"table" | "image">[] = [
-  { itemKey: "table", renderKey: "table", name: "Table", icon: Table, editors: ["document"] },
-  { itemKey: "image", renderKey: "image", name: "Image", icon: Image, editors: ["lite", "document"] },
-];
-
-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")),
-  },
-};
diff --git a/space/core/constants/issue.ts b/space/core/constants/issue.ts
deleted file mode 100644
index 1d9ebbb19..000000000
--- a/space/core/constants/issue.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { Kanban, List } from "lucide-react";
-// types
-import { TIssuePriorities } from "@plane/types";
-import { TIssueLayout, TIssueFilterKeys, TIssueFilterPriorityObject } from "@/types/issue";
-
-// issue 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_LAYOUTS: {
-  key: TIssueLayout;
-  title: string;
-  icon: any;
-}[] = [
-  { key: "list", title: "List", icon: List },
-  { key: "kanban", title: "Kanban", icon: Kanban },
-  // { key: "calendar", title: "Calendar", icon: Calendar },
-  // { key: "spreadsheet", title: "Spreadsheet", icon: Sheet },
-  // { key: "gantt", title: "Gantt chart", icon: GanttChartSquare },
-];
-
-export const issuePriorityFilters: TIssueFilterPriorityObject[] = [
-  {
-    key: "urgent",
-    title: "Urgent",
-    className: "bg-red-500 border-red-500 text-white",
-    icon: "error",
-  },
-  {
-    key: "high",
-    title: "High",
-    className: "text-orange-500 border-custom-border-300",
-    icon: "signal_cellular_alt",
-  },
-  {
-    key: "medium",
-    title: "Medium",
-    className: "text-yellow-500 border-custom-border-300",
-    icon: "signal_cellular_alt_2_bar",
-  },
-  {
-    key: "low",
-    title: "Low",
-    className: "text-green-500 border-custom-border-300",
-    icon: "signal_cellular_alt_1_bar",
-  },
-  {
-    key: "none",
-    title: "None",
-    className: "text-gray-500 border-custom-border-300",
-    icon: "block",
-  },
-];
-
-export const issuePriorityFilter = (priorityKey: TIssuePriorities): TIssueFilterPriorityObject | undefined => {
-  const currentIssuePriority: TIssueFilterPriorityObject | undefined =
-    issuePriorityFilters && issuePriorityFilters.length > 0
-      ? issuePriorityFilters.find((_priority) => _priority.key === priorityKey)
-      : undefined;
-
-  if (currentIssuePriority) return currentIssuePriority;
-  return undefined;
-};
-
-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" },
-];
\ No newline at end of file
diff --git a/space/core/constants/seo.ts b/space/core/constants/seo.ts
deleted file mode 100644
index f681ab8b2..000000000
--- a/space/core/constants/seo.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const SITE_NAME = "Plane Publish | Make your Plane boards and roadmaps pubic with just one-click. ";
-export const SITE_TITLE = "Plane Publish | Make your Plane boards public with one-click";
-export const SITE_DESCRIPTION = "Plane Publish is a customer feedback management tool built on top of plane.so";
-export const SITE_KEYWORDS =
-  "software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration";
-export const SITE_URL = "https://app.plane.so/";
-export const TWITTER_USER_NAME = "planepowers";
diff --git a/space/core/constants/state.ts b/space/core/constants/state.ts
deleted file mode 100644
index b0fd622be..000000000
--- a/space/core/constants/state.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { TStateGroups } from "@plane/types";
-
-export const STATE_GROUPS: {
-  [key in TStateGroups]: {
-    key: TStateGroups;
-    label: string;
-    color: string;
-  };
-} = {
-  backlog: {
-    key: "backlog",
-    label: "Backlog",
-    color: "#d9d9d9",
-  },
-  unstarted: {
-    key: "unstarted",
-    label: "Unstarted",
-    color: "#3f76ff",
-  },
-  started: {
-    key: "started",
-    label: "Started",
-    color: "#f59e0b",
-  },
-  completed: {
-    key: "completed",
-    label: "Completed",
-    color: "#16a34a",
-  },
-  cancelled: {
-    key: "cancelled",
-    label: "Canceled",
-    color: "#dc2626",
-  },
-};
-
-export const ARCHIVABLE_STATE_GROUPS = [STATE_GROUPS.completed.key, STATE_GROUPS.cancelled.key];
diff --git a/space/core/hooks/use-mention.tsx b/space/core/hooks/use-mention.tsx
index 9e33f7d90..e3819d805 100644
--- a/space/core/hooks/use-mention.tsx
+++ b/space/core/hooks/use-mention.tsx
@@ -1,13 +1,12 @@
 import { useRef, useEffect } from "react";
 import useSWR from "swr";
-// types
+// plane imports
+import { UserService } from "@plane/services";
 import { IUser } from "@plane/types";
-// services
-import { UserService } from "@/services/user.service";
 
 export const useMention = () => {
   const userService = new UserService();
-  const { data: user, isLoading: userDataLoading } = useSWR("currentUser", async () => userService.currentUser());
+  const { data: user, isLoading: userDataLoading } = useSWR("currentUser", async () => userService.me());
 
   const userRef = useRef<IUser | undefined>();
 
diff --git a/space/core/services/api.service.ts b/space/core/services/api.service.ts
deleted file mode 100644
index ff5af7aca..000000000
--- a/space/core/services/api.service.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import axios, { AxiosInstance } from "axios";
-// store
-// import { rootStore } from "@/lib/store-context";
-
-export abstract class APIService {
-  protected baseURL: string | undefined;
-  private axiosInstance: AxiosInstance;
-
-  constructor(baseURL: string | undefined) {
-    this.baseURL = baseURL;
-    this.axiosInstance = axios.create({
-      baseURL: baseURL || "",
-      withCredentials: true,
-    });
-
-    this.setupInterceptors();
-  }
-
-  private setupInterceptors() {
-    // this.axiosInstance.interceptors.response.use(
-    //   (response) => response,
-    //   (error) => {
-    //     const store = rootStore;
-    //     if (error.response && error.response.status === 401 && store.user.data) store.user.reset();
-    //     return Promise.reject(error);
-    //   }
-    // );
-  }
-
-  get(url: string, params = {}) {
-    return this.axiosInstance.get(url, params);
-  }
-
-  post(url: string, data = {}, config = {}) {
-    return this.axiosInstance.post(url, data, config);
-  }
-
-  put(url: string, data = {}, config = {}) {
-    return this.axiosInstance.put(url, data, config);
-  }
-
-  patch(url: string, data = {}, config = {}) {
-    return this.axiosInstance.patch(url, data, config);
-  }
-
-  delete(url: string, data?: any, config = {}) {
-    return this.axiosInstance.delete(url, { data, ...config });
-  }
-
-  request(config = {}) {
-    return this.axiosInstance(config);
-  }
-}
diff --git a/space/core/services/auth.service.ts b/space/core/services/auth.service.ts
deleted file mode 100644
index 3bbfd149e..000000000
--- a/space/core/services/auth.service.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-// services
-import { APIService } from "@/services/api.service";
-// types
-import { ICsrfTokenData, IEmailCheckData, IEmailCheckResponse } from "@/types/auth";
-
-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;
-      });
-  }
-
-  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;
-      });
-  }
-
-  async generateUniqueCode(data: { email: string }): Promise<void> {
-    return this.post("/auth/spaces/magic-generate/", data, { headers: {} })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
diff --git a/space/core/services/cycle.service.ts b/space/core/services/cycle.service.ts
deleted file mode 100644
index 7d4ff9a10..000000000
--- a/space/core/services/cycle.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-// services
-import { APIService } from "@/services/api.service";
-// types
-import { TPublicCycle } from "@/types/cycle";
-
-export class CycleService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getCycles(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/space/core/services/instance.service.ts b/space/core/services/instance.service.ts
deleted file mode 100644
index 100929955..000000000
--- a/space/core/services/instance.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-import type { IInstanceInfo } from "@plane/types";
-// services
-import { APIService } from "@/services/api.service";
-
-export class InstanceService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getInstanceInfo(): Promise<IInstanceInfo> {
-    return this.get("/api/instances/")
-      .then((response) => response.data)
-      .catch((error) => {
-        throw error;
-      });
-  }
-}
diff --git a/space/core/services/issue.service.ts b/space/core/services/issue.service.ts
deleted file mode 100644
index 8ec67ee45..000000000
--- a/space/core/services/issue.service.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-// services
-import { APIService } from "@/services/api.service";
-// types
-import { Comment, TIssuesResponse, IIssue } from "@/types/issue";
-
-class IssueService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async fetchPublicIssues(anchor: string, params: any): Promise<TIssuesResponse> {
-    return this.get(`/api/public/anchor/${anchor}/issues/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async getIssueById(anchor: string, issueID: string): Promise<IIssue> {
-    return this.get(`/api/public/anchor/${anchor}/issues/${issueID}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async getIssueVotes(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;
-      });
-  }
-
-  async createIssueVote(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;
-      });
-  }
-
-  async deleteIssueVote(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;
-      });
-  }
-
-  async getIssueReactions(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;
-      });
-  }
-
-  async createIssueReaction(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;
-      });
-  }
-
-  async deleteIssueReaction(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;
-      });
-  }
-
-  async getIssueComments(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;
-      });
-  }
-
-  async createIssueComment(anchor: string, issueID: string, data: any): Promise<Comment> {
-    return this.post(`/api/public/anchor/${anchor}/issues/${issueID}/comments/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateIssueComment(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;
-      });
-  }
-
-  async deleteIssueComment(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;
-      });
-  }
-
-  async createCommentReaction(
-    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;
-      });
-  }
-
-  async deleteCommentReaction(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;
-      });
-  }
-}
-
-export default IssueService;
diff --git a/space/core/services/label.service.ts b/space/core/services/label.service.ts
deleted file mode 100644
index 3b5585578..000000000
--- a/space/core/services/label.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-import { IIssueLabel } from "@plane/types";
-// services
-import { APIService } from "./api.service";
-
-export class LabelService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getLabels(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/space/core/services/member.service.ts b/space/core/services/member.service.ts
deleted file mode 100644
index 9de19455b..000000000
--- a/space/core/services/member.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-// services
-import { APIService } from "@/services/api.service";
-// types
-import { TPublicMember } from "@/types/member";
-
-export class MemberService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getAnchorMembers(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/space/core/services/module.service.ts b/space/core/services/module.service.ts
deleted file mode 100644
index 30d6ebecf..000000000
--- a/space/core/services/module.service.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-// services
-import { APIService } from "@/services/api.service";
-// types
-import { TPublicModule } from "@/types/modules";
-
-export class ModuleService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getModules(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/space/core/services/project-member.service.ts b/space/core/services/project-member.service.ts
deleted file mode 100644
index bac52e751..000000000
--- a/space/core/services/project-member.service.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-import type { IProjectMember, IProjectMembership } from "@plane/types";
-// services
-import { APIService } from "@/services/api.service";
-
-export class ProjectMemberService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async fetchProjectMembers(anchor: string): Promise<IProjectMembership[]> {
-    return this.get(`/api/anchor/${anchor}/members/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getProjectMember(anchor: string, memberID: string): Promise<IProjectMember> {
-    return this.get(`/api/anchor/${anchor}/members/${memberID}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
diff --git a/space/core/services/publish.service.ts b/space/core/services/publish.service.ts
deleted file mode 100644
index 3da72f59a..000000000
--- a/space/core/services/publish.service.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-import { TProjectPublishSettings } from "@plane/types";
-// services
-import { APIService } from "@/services/api.service";
-
-class PublishService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async fetchPublishSettings(anchor: string): Promise<TProjectPublishSettings> {
-    return this.get(`/api/public/anchor/${anchor}/settings/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async fetchAnchorFromProjectDetails(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;
-      });
-  }
-}
-
-export default PublishService;
diff --git a/space/core/services/state.service.ts b/space/core/services/state.service.ts
deleted file mode 100644
index b877ac530..000000000
--- a/space/core/services/state.service.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-import { IState } from "@plane/types";
-// services
-import { APIService } from "./api.service";
-
-export class StateService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getStates(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/space/core/services/user.service.ts b/space/core/services/user.service.ts
deleted file mode 100644
index a00b1a350..000000000
--- a/space/core/services/user.service.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { API_BASE_URL } from "@plane/constants";
-import { IUser, TUserProfile } from "@plane/types";
-// services
-import { APIService } from "@/services/api.service";
-
-export class UserService extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async currentUser(): Promise<IUser> {
-    return this.get("/api/users/me/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateUser(data: Partial<IUser>): Promise<IUser> {
-    return this.patch("/api/users/me/", data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getCurrentUserProfile(): Promise<TUserProfile> {
-    return this.get("/api/users/me/profile/")
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-  async updateCurrentUserProfile(data: Partial<TUserProfile>): Promise<TUserProfile> {
-    return this.patch("/api/users/me/profile/", data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
diff --git a/space/core/store/cycle.store.ts b/space/core/store/cycle.store.ts
index a7310290b..57af963ae 100644
--- a/space/core/store/cycle.store.ts
+++ b/space/core/store/cycle.store.ts
@@ -1,6 +1,8 @@
 import { action, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import { SitesCycleService } from "@plane/services";
 import { TPublicCycle } from "@/types/cycle";
-import { CycleService } from "../services/cycle.service";
+// store
 import { CoreRootStore } from "./root.store";
 
 export interface ICycleStore {
@@ -14,7 +16,7 @@ export interface ICycleStore {
 
 export class CycleStore implements ICycleStore {
   cycles: TPublicCycle[] | undefined = undefined;
-  cycleService: CycleService;
+  cycleService: SitesCycleService;
   rootStore: CoreRootStore;
 
   constructor(_rootStore: CoreRootStore) {
@@ -24,14 +26,14 @@ export class CycleStore implements ICycleStore {
       // fetch action
       fetchCycles: action,
     });
-    this.cycleService = new CycleService();
+    this.cycleService = new SitesCycleService();
     this.rootStore = _rootStore;
   }
 
   getCycleById = (cycleId: string | undefined) => this.cycles?.find((cycle) => cycle.id === cycleId);
 
   fetchCycles = async (anchor: string) => {
-    const cyclesResponse = await this.cycleService.getCycles(anchor);
+    const cyclesResponse = await this.cycleService.list(anchor);
     runInAction(() => {
       this.cycles = cyclesResponse;
     });
diff --git a/space/core/store/helpers/base-issues.store.ts b/space/core/store/helpers/base-issues.store.ts
index 004aa06c6..867f2962c 100644
--- a/space/core/store/helpers/base-issues.store.ts
+++ b/space/core/store/helpers/base-issues.store.ts
@@ -5,9 +5,9 @@ import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-// plane constants
+// plane imports
 import { ALL_ISSUES } from "@plane/constants";
-// types
+import { SitesIssueService } from "@plane/services";
 import {
   TIssueGroupByOptions,
   TGroupedIssues,
@@ -19,14 +19,13 @@ import {
   TGroupedIssueCount,
   TPaginationData,
 } from "@plane/types";
-// services
-import IssueService from "@/services/issue.service";
+// types
 import { IIssue, TIssuesResponse } from "@/types/issue";
 import { CoreRootStore } from "../root.store";
 // constants
 // helpers
 
-export type TIssueDisplayFilterOptions = Exclude<TIssueGroupByOptions, null> | "target_date";
+export type TIssueDisplayFilterOptions = Exclude<TIssueGroupByOptions, null | "team_project"> | "target_date";
 
 export enum EIssueGroupedAction {
   ADD = "ADD",
@@ -98,7 +97,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
       setLoader: action.bound,
     });
     this.rootIssueStore = _rootStore;
-    this.issueService = new IssueService();
+    this.issueService = new SitesIssueService();
   }
 
   getIssueIds = (groupId?: string, subGroupId?: string) => {
diff --git a/space/core/store/instance.store.ts b/space/core/store/instance.store.ts
index 970824404..4b6c5a22e 100644
--- a/space/core/store/instance.store.ts
+++ b/space/core/store/instance.store.ts
@@ -1,9 +1,8 @@
 import set from "lodash/set";
 import { observable, action, makeObservable, runInAction } from "mobx";
-// types
+// plane imports
+import { InstanceService } from "@plane/services";
 import { IInstance, IInstanceConfig } from "@plane/types";
-// services
-import { InstanceService } from "@/services/instance.service";
 // store
 import { CoreRootStore } from "@/store/root.store";
 
@@ -59,7 +58,7 @@ export class InstanceStore implements IInstanceStore {
     try {
       this.isLoading = true;
       this.error = undefined;
-      const instanceInfo = await this.instanceService.getInstanceInfo();
+      const instanceInfo = await this.instanceService.info();
       runInAction(() => {
         this.isLoading = false;
         this.instance = instanceInfo.instance;
diff --git a/space/core/store/issue-detail.store.ts b/space/core/store/issue-detail.store.ts
index 9abed2966..715836946 100644
--- a/space/core/store/issue-detail.store.ts
+++ b/space/core/store/issue-detail.store.ts
@@ -3,16 +3,14 @@ import set from "lodash/set";
 import { makeObservable, observable, action, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 import { v4 as uuidv4 } from "uuid";
-// plane types
-import { TFileSignedURLResponse } from "@plane/types";
+// plane imports
+import { SitesFileService, SitesIssueService } from "@plane/services";
+import { TFileSignedURLResponse, TIssuePublicComment } from "@plane/types";
 import { EFileAssetType } from "@plane/types/src/enums";
-// services
-import { FileService } from "@/services/file.service";
-import IssueService from "@/services/issue.service";
 // store
 import { CoreRootStore } from "@/store/root.store";
 // types
-import { Comment, IIssue, IPeekMode, IVote } from "@/types/issue";
+import { IIssue, IPeekMode, IVote } from "@/types/issue";
 
 export interface IIssueDetailStore {
   loader: boolean;
@@ -32,7 +30,7 @@ export interface IIssueDetailStore {
   // issue actions
   fetchIssueDetails: (anchor: string, issueID: string) => void;
   // comment actions
-  addIssueComment: (anchor: string, issueID: string, data: any) => Promise<Comment>;
+  addIssueComment: (anchor: string, issueID: string, data: any) => Promise<TIssuePublicComment>;
   updateIssueComment: (anchor: string, issueID: string, commentID: string, data: any) => Promise<any>;
   deleteIssueComment: (anchor: string, issueID: string, commentID: string) => void;
   uploadCommentAsset: (file: File, anchor: string, commentID?: string) => Promise<TFileSignedURLResponse>;
@@ -59,8 +57,8 @@ export class IssueDetailStore implements IIssueDetailStore {
   // root store
   rootStore: CoreRootStore;
   // services
-  issueService: IssueService;
-  fileService: FileService;
+  issueService: SitesIssueService;
+  fileService: SitesFileService;
 
   constructor(_rootStore: CoreRootStore) {
     makeObservable(this, {
@@ -91,8 +89,8 @@ export class IssueDetailStore implements IIssueDetailStore {
       removeIssueVote: action,
     });
     this.rootStore = _rootStore;
-    this.issueService = new IssueService();
-    this.fileService = new FileService();
+    this.issueService = new SitesIssueService();
+    this.fileService = new SitesFileService();
   }
 
   setPeekId = (issueID: string | null) => {
@@ -123,7 +121,7 @@ export class IssueDetailStore implements IIssueDetailStore {
    */
   fetchIssueById = async (anchorId: string, issueId: string) => {
     try {
-      const issueDetails = await this.issueService.getIssueById(anchorId, issueId);
+      const issueDetails = await this.issueService.retrieve(anchorId, issueId);
 
       runInAction(() => {
         set(this.details, [issueId], issueDetails);
@@ -146,7 +144,7 @@ export class IssueDetailStore implements IIssueDetailStore {
       this.error = null;
 
       const issueDetails = await this.fetchIssueById(anchor, issueID);
-      const commentsResponse = await this.issueService.getIssueComments(anchor, issueID);
+      const commentsResponse = await this.issueService.listComments(anchor, issueID);
 
       if (issueDetails) {
         runInAction(() => {
@@ -168,7 +166,7 @@ export class IssueDetailStore implements IIssueDetailStore {
   addIssueComment = async (anchor: string, issueID: string, data: any) => {
     try {
       const issueDetails = this.getIssueById(issueID);
-      const issueCommentResponse = await this.issueService.createIssueComment(anchor, issueID, data);
+      const issueCommentResponse = await this.issueService.addComment(anchor, issueID, data);
       if (issueDetails) {
         runInAction(() => {
           set(this.details, [issueID, "comments"], [...(issueDetails?.comments ?? []), issueCommentResponse]);
@@ -196,9 +194,9 @@ export class IssueDetailStore implements IIssueDetailStore {
         };
       });
 
-      await this.issueService.updateIssueComment(anchor, issueID, commentID, data);
+      await this.issueService.updateComment(anchor, issueID, commentID, data);
     } catch (error) {
-      const issueComments = await this.issueService.getIssueComments(anchor, issueID);
+      const issueComments = await this.issueService.listComments(anchor, issueID);
 
       runInAction(() => {
         this.details = {
@@ -214,7 +212,7 @@ export class IssueDetailStore implements IIssueDetailStore {
 
   deleteIssueComment = async (anchor: string, issueID: string, commentID: string) => {
     try {
-      await this.issueService.deleteIssueComment(anchor, issueID, commentID);
+      await this.issueService.removeComment(anchor, issueID, commentID);
       const remainingComments = this.details[issueID].comments.filter((c) => c.id != commentID);
       runInAction(() => {
         this.details = {
@@ -288,11 +286,11 @@ export class IssueDetailStore implements IIssueDetailStore {
         };
       });
 
-      await this.issueService.createCommentReaction(anchor, commentID, {
+      await this.issueService.addCommentReaction(anchor, commentID, {
         reaction: reactionHex,
       });
     } catch (error) {
-      const issueComments = await this.issueService.getIssueComments(anchor, issueID);
+      const issueComments = await this.issueService.listComments(anchor, issueID);
 
       runInAction(() => {
         this.details = {
@@ -324,9 +322,9 @@ export class IssueDetailStore implements IIssueDetailStore {
         };
       });
 
-      await this.issueService.deleteCommentReaction(anchor, commentID, reactionHex);
+      await this.issueService.removeCommentReaction(anchor, commentID, reactionHex);
     } catch (error) {
-      const issueComments = await this.issueService.getIssueComments(anchor, issueID);
+      const issueComments = await this.issueService.listComments(anchor, issueID);
 
       runInAction(() => {
         this.details = {
@@ -356,12 +354,12 @@ export class IssueDetailStore implements IIssueDetailStore {
         );
       });
 
-      await this.issueService.createIssueReaction(anchor, issueID, {
+      await this.issueService.addReaction(anchor, issueID, {
         reaction: reactionHex,
       });
     } catch (error) {
       console.log("Failed to add issue vote");
-      const issueReactions = await this.issueService.getIssueReactions(anchor, issueID);
+      const issueReactions = await this.issueService.listReactions(anchor, issueID);
       runInAction(() => {
         set(this.details, [issueID, "reaction_items"], issueReactions);
       });
@@ -378,10 +376,10 @@ export class IssueDetailStore implements IIssueDetailStore {
         set(this.details, [issueID, "reaction_items"], newReactions);
       });
 
-      await this.issueService.deleteIssueReaction(anchor, issueID, reactionHex);
+      await this.issueService.removeReaction(anchor, issueID, reactionHex);
     } catch (error) {
       console.log("Failed to remove issue reaction");
-      const reactions = await this.issueService.getIssueReactions(anchor, issueID);
+      const reactions = await this.issueService.listReactions(anchor, issueID);
       runInAction(() => {
         set(this.details, [issueID, "reaction_items"], reactions);
       });
@@ -410,10 +408,10 @@ export class IssueDetailStore implements IIssueDetailStore {
         });
       });
 
-      await this.issueService.createIssueVote(anchor, issueID, data);
+      await this.issueService.addVote(anchor, issueID, data);
     } catch (error) {
       console.log("Failed to add issue vote");
-      const issueVotes = await this.issueService.getIssueVotes(anchor, issueID);
+      const issueVotes = await this.issueService.listVotes(anchor, issueID);
 
       runInAction(() => {
         set(this.details, [issueID, "vote_items"], issueVotes);
@@ -431,10 +429,10 @@ export class IssueDetailStore implements IIssueDetailStore {
         set(this.details, [issueID, "vote_items"], newVotes);
       });
 
-      await this.issueService.deleteIssueVote(anchor, issueID);
+      await this.issueService.removeVote(anchor, issueID);
     } catch (error) {
       console.log("Failed to remove issue vote");
-      const issueVotes = await this.issueService.getIssueVotes(anchor, issueID);
+      const issueVotes = await this.issueService.listVotes(anchor, issueID);
 
       runInAction(() => {
         set(this.details, [issueID, "vote_items"], issueVotes);
diff --git a/space/core/store/issue-filters.store.ts b/space/core/store/issue-filters.store.ts
index 0c589dc4d..be9ca438b 100644
--- a/space/core/store/issue-filters.store.ts
+++ b/space/core/store/issue-filters.store.ts
@@ -3,10 +3,9 @@ import isEqual from "lodash/isEqual";
 import set from "lodash/set";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-// plane types
+// plane internal
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@plane/constants";
 import { IssuePaginationOptions, TIssueParams } from "@plane/types";
-// constants
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 // store
 import { CoreRootStore } from "@/store/root.store";
 // types
@@ -75,14 +74,12 @@ export class IssueFilterStore implements IIssueFilterStore {
 
     Object.keys(filters).map((key) => {
       const currentFilterKey = key as TIssueFilterKeys;
+      const filterValue = filters[currentFilterKey] as any;
 
-      if (filters[currentFilterKey] != undefined && filteredParams.includes(currentFilterKey)) {
-        if (Array.isArray(filters[currentFilterKey]))
-          computedFilters[currentFilterKey] = filters[currentFilterKey]?.join(",");
-        else if (filters[currentFilterKey] && typeof filters[currentFilterKey] === "string")
-          computedFilters[currentFilterKey] = filters[currentFilterKey]?.toString();
-        else if (typeof filters[currentFilterKey] === "boolean")
-          computedFilters[currentFilterKey] = filters[currentFilterKey]?.toString();
+      if (filterValue !== undefined && filteredParams.includes(currentFilterKey)) {
+        if (Array.isArray(filterValue)) computedFilters[currentFilterKey] = filterValue.join(",");
+        else if (typeof filterValue === "string" || typeof filterValue === "boolean")
+          computedFilters[currentFilterKey] = filterValue.toString();
       }
     });
 
diff --git a/space/core/store/issue.store.ts b/space/core/store/issue.store.ts
index ca5154df7..c65e84d11 100644
--- a/space/core/store/issue.store.ts
+++ b/space/core/store/issue.store.ts
@@ -1,8 +1,7 @@
 import { action, makeObservable, runInAction } from "mobx";
-// types
+// plane imports
+import { SitesIssueService } from "@plane/services";
 import { IssuePaginationOptions, TLoader } from "@plane/types";
-// services
-import IssueService from "@/services/issue.service";
 // store
 import { CoreRootStore } from "@/store/root.store";
 // types
@@ -24,7 +23,7 @@ export class IssueStore extends BaseIssuesStore implements IIssueStore {
   // root store
   rootStore: CoreRootStore;
   // services
-  issueService: IssueService;
+  issueService: SitesIssueService;
 
   constructor(_rootStore: CoreRootStore) {
     super(_rootStore);
@@ -36,7 +35,7 @@ export class IssueStore extends BaseIssuesStore implements IIssueStore {
     });
 
     this.rootStore = _rootStore;
-    this.issueService = new IssueService();
+    this.issueService = new SitesIssueService();
   }
 
   /**
@@ -59,7 +58,7 @@ export class IssueStore extends BaseIssuesStore implements IIssueStore {
 
       const params = this.rootStore.issueFilter.getFilterParams(options, anchor, undefined, undefined, undefined);
 
-      const response = await this.issueService.fetchPublicIssues(anchor, params);
+      const response = await this.issueService.list(anchor, params);
 
       // after fetching issues, call the base method to process the response further
       this.onfetchIssues(response, options);
@@ -86,7 +85,7 @@ export class IssueStore extends BaseIssuesStore implements IIssueStore {
         subGroupId
       );
       // call the fetch issues API with the params for next page in issues
-      const response = await this.issueService.fetchPublicIssues(anchor, params);
+      const response = await this.issueService.list(anchor, params);
 
       // after the next page of issues are fetched, call the base method to process the response
       this.onfetchNexIssues(response, groupId, subGroupId);
diff --git a/space/core/store/label.store.ts b/space/core/store/label.store.ts
index e705aa4d2..e51e59f4e 100644
--- a/space/core/store/label.store.ts
+++ b/space/core/store/label.store.ts
@@ -1,7 +1,9 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import { SitesLabelService } from "@plane/services";
 import { IIssueLabel } from "@plane/types";
-import { LabelService } from "@/services/label.service";
+// store
 import { CoreRootStore } from "./root.store";
 
 export interface IIssueLabelStore {
@@ -16,7 +18,7 @@ export interface IIssueLabelStore {
 
 export class LabelStore implements IIssueLabelStore {
   labelMap: Record<string, IIssueLabel> = {};
-  labelService: LabelService;
+  labelService: SitesLabelService;
   rootStore: CoreRootStore;
 
   constructor(_rootStore: CoreRootStore) {
@@ -28,7 +30,7 @@ export class LabelStore implements IIssueLabelStore {
       // fetch action
       fetchLabels: action,
     });
-    this.labelService = new LabelService();
+    this.labelService = new SitesLabelService();
     this.rootStore = _rootStore;
   }
 
@@ -51,7 +53,7 @@ export class LabelStore implements IIssueLabelStore {
   };
 
   fetchLabels = async (anchor: string) => {
-    const labelsResponse = await this.labelService.getLabels(anchor);
+    const labelsResponse = await this.labelService.list(anchor);
     runInAction(() => {
       this.labelMap = {};
       for (const label of labelsResponse) {
diff --git a/space/core/store/members.store.ts b/space/core/store/members.store.ts
index 3de021e2c..1328f5259 100644
--- a/space/core/store/members.store.ts
+++ b/space/core/store/members.store.ts
@@ -1,7 +1,9 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import { SitesMemberService } from "@plane/services";
+
 import { TPublicMember } from "@/types/member";
-import { MemberService } from "../services/member.service";
 import { CoreRootStore } from "./root.store";
 
 export interface IIssueMemberStore {
@@ -16,7 +18,7 @@ export interface IIssueMemberStore {
 
 export class MemberStore implements IIssueMemberStore {
   memberMap: Record<string, TPublicMember> = {};
-  memberService: MemberService;
+  memberService: SitesMemberService;
   rootStore: CoreRootStore;
 
   constructor(_rootStore: CoreRootStore) {
@@ -28,7 +30,7 @@ export class MemberStore implements IIssueMemberStore {
       // fetch action
       fetchMembers: action,
     });
-    this.memberService = new MemberService();
+    this.memberService = new SitesMemberService();
     this.rootStore = _rootStore;
   }
 
@@ -52,7 +54,7 @@ export class MemberStore implements IIssueMemberStore {
 
   fetchMembers = async (anchor: string) => {
     try {
-      const membersResponse = await this.memberService.getAnchorMembers(anchor);
+      const membersResponse = await this.memberService.list(anchor);
       runInAction(() => {
         this.memberMap = {};
         for (const member of membersResponse) {
diff --git a/space/core/store/mentions.store.ts b/space/core/store/mentions.store.ts
deleted file mode 100644
index 977df4221..000000000
--- a/space/core/store/mentions.store.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { computed, makeObservable } from "mobx";
-// editor
-import { IMentionHighlight } from "@plane/editor";
-// store
-import { CoreRootStore } from "@/store/root.store";
-
-export interface IMentionsStore {
-  // mentionSuggestions: IMentionSuggestion[];
-  mentionHighlights: IMentionHighlight[];
-}
-
-export class MentionsStore implements IMentionsStore {
-  // root store
-  rootStore;
-
-  constructor(_rootStore: CoreRootStore) {
-    // rootStore
-    this.rootStore = _rootStore;
-
-    makeObservable(this, {
-      mentionHighlights: computed,
-      // mentionSuggestions: computed
-    });
-  }
-
-  // get mentionSuggestions() {
-  //     const projectMembers = this.rootStore.project.project.
-
-  //     const suggestions = projectMembers === null ? [] : projectMembers.map((member) => ({
-  //         id: member.member.id,
-  //         type: "User",
-  //         title: member.member.display_name,
-  //         subtitle: member.member.email ?? "",
-  //         avatar: member.member.avatar,
-  //         redirect_uri: `/${member.workspace.slug}/profile/${member.member.id}`,
-  //     }))
-
-  //     return suggestions
-  // }
-
-  get mentionHighlights() {
-    const user = this.rootStore.user.data;
-    return user ? [user.id] : [];
-  }
-}
diff --git a/space/core/store/module.store.ts b/space/core/store/module.store.ts
index 6da1ab1f8..c996b3a33 100644
--- a/space/core/store/module.store.ts
+++ b/space/core/store/module.store.ts
@@ -1,7 +1,10 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import { SitesModuleService } from "@plane/services";
+// types
 import { TPublicModule } from "@/types/modules";
-import { ModuleService } from "../services/module.service";
+// root store
 import { CoreRootStore } from "./root.store";
 
 export interface IIssueModuleStore {
@@ -16,7 +19,7 @@ export interface IIssueModuleStore {
 
 export class ModuleStore implements IIssueModuleStore {
   moduleMap: Record<string, TPublicModule> = {};
-  moduleService: ModuleService;
+  moduleService: SitesModuleService;
   rootStore: CoreRootStore;
 
   constructor(_rootStore: CoreRootStore) {
@@ -28,7 +31,7 @@ export class ModuleStore implements IIssueModuleStore {
       // fetch action
       fetchModules: action,
     });
-    this.moduleService = new ModuleService();
+    this.moduleService = new SitesModuleService();
     this.rootStore = _rootStore;
   }
 
@@ -52,7 +55,7 @@ export class ModuleStore implements IIssueModuleStore {
 
   fetchModules = async (anchor: string) => {
     try {
-      const modulesResponse = await this.moduleService.getModules(anchor);
+      const modulesResponse = await this.moduleService.list(anchor);
       runInAction(() => {
         this.moduleMap = {};
         for (const issueModule of modulesResponse) {
diff --git a/space/core/store/profile.store.ts b/space/core/store/profile.store.ts
index d03328058..5523e8dad 100644
--- a/space/core/store/profile.store.ts
+++ b/space/core/store/profile.store.ts
@@ -1,9 +1,8 @@
 import set from "lodash/set";
 import { action, makeObservable, observable, runInAction } from "mobx";
-// types
+// plane imports
+import { UserService } from "@plane/services";
 import { TUserProfile } from "@plane/types";
-// services
-import { UserService } from "@/services/user.service";
 // store
 import { CoreRootStore } from "@/store/root.store";
 
@@ -54,6 +53,7 @@ export class ProfileStore implements IProfileStore {
     has_billing_address: false,
     created_at: "",
     updated_at: "",
+    language: "",
   };
 
   // services
@@ -84,7 +84,7 @@ export class ProfileStore implements IProfileStore {
         this.isLoading = true;
         this.error = undefined;
       });
-      const userProfile = await this.userService.getCurrentUserProfile();
+      const userProfile = await this.userService.profile();
       runInAction(() => {
         this.isLoading = false;
         this.data = userProfile;
@@ -115,7 +115,7 @@ export class ProfileStore implements IProfileStore {
           if (this.data) set(this.data, userKey, data[userKey]);
         });
       }
-      const userProfile = await this.userService.updateCurrentUserProfile(data);
+      const userProfile = await this.userService.updateProfile(data);
       return userProfile;
     } catch (error) {
       if (currentUserProfileData) {
diff --git a/space/core/store/publish/publish_list.store.ts b/space/core/store/publish/publish_list.store.ts
index d4a59f62d..60f705b00 100644
--- a/space/core/store/publish/publish_list.store.ts
+++ b/space/core/store/publish/publish_list.store.ts
@@ -1,9 +1,8 @@
 import set from "lodash/set";
 import { makeObservable, observable, runInAction, action } from "mobx";
-// types
+// plane imports
+import { SitesProjectPublishService } from "@plane/services";
 import { TProjectPublishSettings } from "@plane/types";
-// services
-import PublishService from "@/services/publish.service";
 // store
 import { PublishStore } from "@/store/publish/publish.store";
 import { CoreRootStore } from "@/store/root.store";
@@ -29,7 +28,7 @@ export class PublishListStore implements IPublishListStore {
       fetchPublishSettings: action,
     });
     // services
-    this.publishService = new PublishService();
+    this.publishService = new SitesProjectPublishService();
   }
 
   /**
@@ -37,7 +36,7 @@ export class PublishListStore implements IPublishListStore {
    * @param {string} anchor
    */
   fetchPublishSettings = async (anchor: string) => {
-    const response = await this.publishService.fetchPublishSettings(anchor);
+    const response = await this.publishService.retrieveSettingsByAnchor(anchor);
     runInAction(() => {
       if (response.anchor) {
         set(this.publishMap, [response.anchor], new PublishStore(this.rootStore, response));
diff --git a/space/core/store/root.store.ts b/space/core/store/root.store.ts
index de43001d2..db9e26566 100644
--- a/space/core/store/root.store.ts
+++ b/space/core/store/root.store.ts
@@ -8,7 +8,6 @@ import { CycleStore, ICycleStore } from "./cycle.store";
 import { IssueFilterStore, IIssueFilterStore } from "./issue-filters.store";
 import { IIssueLabelStore, LabelStore } from "./label.store";
 import { IIssueMemberStore, MemberStore } from "./members.store";
-import { IMentionsStore, MentionsStore } from "./mentions.store";
 import { IIssueModuleStore, ModuleStore } from "./module.store";
 import { IPublishListStore, PublishListStore } from "./publish/publish_list.store";
 import { IStateStore, StateStore } from "./state.store";
@@ -20,7 +19,6 @@ export class CoreRootStore {
   user: IUserStore;
   issue: IIssueStore;
   issueDetail: IIssueDetailStore;
-  mentionStore: IMentionsStore;
   state: IStateStore;
   label: IIssueLabelStore;
   module: IIssueModuleStore;
@@ -34,7 +32,6 @@ export class CoreRootStore {
     this.user = new UserStore(this);
     this.issue = new IssueStore(this);
     this.issueDetail = new IssueDetailStore(this);
-    this.mentionStore = new MentionsStore(this);
     this.state = new StateStore(this);
     this.label = new LabelStore(this);
     this.module = new ModuleStore(this);
@@ -57,7 +54,6 @@ export class CoreRootStore {
     this.user = new UserStore(this);
     this.issue = new IssueStore(this);
     this.issueDetail = new IssueDetailStore(this);
-    this.mentionStore = new MentionsStore(this);
     this.state = new StateStore(this);
     this.label = new LabelStore(this);
     this.module = new ModuleStore(this);
diff --git a/space/core/store/state.store.ts b/space/core/store/state.store.ts
index aff22a22a..655cdee5d 100644
--- a/space/core/store/state.store.ts
+++ b/space/core/store/state.store.ts
@@ -1,8 +1,11 @@
 import clone from "lodash/clone";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// plane imports
+import { SitesStateService } from "@plane/services";
 import { IState } from "@plane/types";
+// helpers
 import { sortStates } from "@/helpers/state.helper";
-import { StateService } from "@/services/state.service";
+// store
 import { CoreRootStore } from "./root.store";
 
 export interface IStateStore {
@@ -18,7 +21,7 @@ export interface IStateStore {
 
 export class StateStore implements IStateStore {
   states: IState[] | undefined = undefined;
-  stateService: StateService;
+  stateService: SitesStateService;
   rootStore: CoreRootStore;
 
   constructor(_rootStore: CoreRootStore) {
@@ -30,7 +33,7 @@ export class StateStore implements IStateStore {
       // fetch action
       fetchStates: action,
     });
-    this.stateService = new StateService();
+    this.stateService = new SitesStateService();
     this.rootStore = _rootStore;
   }
 
@@ -42,7 +45,7 @@ export class StateStore implements IStateStore {
   getStateById = (stateId: string | undefined) => this.states?.find((state) => state.id === stateId);
 
   fetchStates = async (anchor: string) => {
-    const statesResponse = await this.stateService.getStates(anchor);
+    const statesResponse = await this.stateService.list(anchor);
     runInAction(() => {
       this.states = statesResponse;
     });
diff --git a/space/core/store/user.store.ts b/space/core/store/user.store.ts
index 6616b10b0..6765961f5 100644
--- a/space/core/store/user.store.ts
+++ b/space/core/store/user.store.ts
@@ -1,10 +1,8 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
-// types
+// plane imports
+import { UserService } from "@plane/services";
 import { IUser } from "@plane/types";
-// services
-import { AuthService } from "@/services/auth.service";
-import { UserService } from "@/services/user.service";
 // store types
 import { ProfileStore, IProfileStore } from "@/store/profile.store";
 // store
@@ -45,14 +43,12 @@ export class UserStore implements IUserStore {
   profile: IProfileStore;
   // service
   userService: UserService;
-  authService: AuthService;
 
   constructor(private store: CoreRootStore) {
     // stores
     this.profile = new ProfileStore(store);
     // service
     this.userService = new UserService();
-    this.authService = new AuthService();
     // observables
     makeObservable(this, {
       // observables
@@ -95,7 +91,7 @@ export class UserStore implements IUserStore {
         if (this.data === undefined) this.isLoading = true;
         this.error = undefined;
       });
-      const user = await this.userService.currentUser();
+      const user = await this.userService.me();
       if (user && user?.id) {
         await this.profile.fetchUserProfile();
         runInAction(() => {
@@ -137,7 +133,7 @@ export class UserStore implements IUserStore {
           if (this.data) set(this.data, userKey, data[userKey]);
         });
       }
-      const user = await this.userService.updateUser(data);
+      const user = await this.userService.update(data);
       return user;
     } catch (error) {
       if (currentUserData) {
diff --git a/space/core/types/issue.d.ts b/space/core/types/issue.d.ts
index 3041a188d..d57dd84de 100644
--- a/space/core/types/issue.d.ts
+++ b/space/core/types/issue.d.ts
@@ -1,4 +1,4 @@
-import { IWorkspaceLite, TIssue, TIssuePriorities, TStateGroups } from "@plane/types";
+import { IWorkspaceLite, TIssue, TIssuePriorities, TStateGroups, TIssuePublicComment } from "@plane/types";
 
 export type TIssueLayout = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
 export type TIssueLayoutOptions = {
@@ -58,7 +58,7 @@ export interface IIssue
     | "link_count"
     | "estimate_point"
   > {
-  comments: Comment[];
+  comments: TIssuePublicComment[];
   reaction_items: IIssueReaction[];
   vote_items: IVote[];
 }
@@ -106,33 +106,6 @@ export interface IVote {
   actor_details: ActorDetail;
 }
 
-export interface Comment {
-  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;
-}
-
 export interface IIssueReaction {
   actor_details: ActorDetail;
   reaction: string;
diff --git a/space/ee/components/editor/index.ts b/space/ee/components/editor/index.ts
new file mode 100644
index 000000000..f8506c1d6
--- /dev/null
+++ b/space/ee/components/editor/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/editor";
diff --git a/space/helpers/editor.helper.ts b/space/helpers/editor.helper.ts
index b037055af..5126b99c7 100644
--- a/space/helpers/editor.helper.ts
+++ b/space/helpers/editor.helper.ts
@@ -1,12 +1,11 @@
-// plane editor
-import { TFileHandler } from "@plane/editor";
-// constants
-import { MAX_FILE_SIZE } from "@/constants/common";
+// plane internal
+import { MAX_FILE_SIZE } from "@plane/constants";
+import { TFileHandler, TReadOnlyFileHandler } from "@plane/editor";
+import { SitesFileService } from "@plane/services";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // services
-import { FileService } from "@/services/file.service";
-const fileService = new FileService();
+const sitesFileService = new SitesFileService();
 
 /**
  * @description generate the file source using assetId
@@ -19,10 +18,35 @@ export const getEditorAssetSrc = (anchor: string, assetId: string): string | und
 
 type TArgs = {
   anchor: string;
-  uploadFile: (file: File) => Promise<string>;
+  uploadFile: TFileHandler["upload"];
   workspaceId: string;
 };
 
+/**
+ * @description this function returns the file handler required by the read-only editors
+ */
+export const getReadOnlyEditorFileHandlers = (args: Pick<TArgs, "anchor" | "workspaceId">): TReadOnlyFileHandler => {
+  const { anchor, workspaceId } = args;
+
+  return {
+    getAssetSrc: async (path) => {
+      if (!path) return "";
+      if (path?.startsWith("http")) {
+        return path;
+      } else {
+        return getEditorAssetSrc(anchor, path) ?? "";
+      }
+    },
+    restore: async (src: string) => {
+      if (src?.startsWith("http")) {
+        await sitesFileService.restoreOldEditorAsset(workspaceId, src);
+      } else {
+        await sitesFileService.restoreNewAsset(anchor, src);
+      }
+    },
+  };
+};
+
 /**
  * @description this function returns the file handler required by the editors
  * @param {TArgs} args
@@ -31,52 +55,22 @@ export const getEditorFileHandlers = (args: TArgs): TFileHandler => {
   const { anchor, uploadFile, workspaceId } = args;
 
   return {
-    getAssetSrc: async (path) => {
-      if (!path) return "";
-      if (path?.startsWith("http")) {
-        return path;
-      } else {
-        return getEditorAssetSrc(anchor, path) ?? "";
-      }
-    },
+    ...getReadOnlyEditorFileHandlers({
+      anchor,
+      workspaceId,
+    }),
+    assetsUploadStatus: {},
     upload: uploadFile,
     delete: async (src: string) => {
       if (src?.startsWith("http")) {
-        await fileService.deleteOldEditorAsset(workspaceId, src);
+        await sitesFileService.deleteOldEditorAsset(workspaceId, src);
       } else {
-        await fileService.deleteNewAsset(getEditorAssetSrc(anchor, src) ?? "");
+        await sitesFileService.deleteNewAsset(getEditorAssetSrc(anchor, src) ?? "");
       }
     },
-    restore: async (src: string) => {
-      if (src?.startsWith("http")) {
-        await fileService.restoreOldEditorAsset(workspaceId, src);
-      } else {
-        await fileService.restoreNewAsset(anchor, src);
-      }
-    },
-    cancel: fileService.cancelUpload,
+    cancel: sitesFileService.cancelUpload,
     validation: {
       maxFileSize: MAX_FILE_SIZE,
     },
   };
 };
-
-/**
- * @description this function returns the file handler required by the read-only editors
- */
-export const getReadOnlyEditorFileHandlers = (
-  args: Pick<TArgs, "anchor">
-): { getAssetSrc: TFileHandler["getAssetSrc"] } => {
-  const { anchor } = args;
-
-  return {
-    getAssetSrc: async (path) => {
-      if (!path) return "";
-      if (path?.startsWith("http")) {
-        return path;
-      } else {
-        return getEditorAssetSrc(anchor, path) ?? "";
-      }
-    },
-  };
-};
diff --git a/space/helpers/issue.helper.ts b/space/helpers/issue.helper.ts
index a5159edef..a7129ca49 100644
--- a/space/helpers/issue.helper.ts
+++ b/space/helpers/issue.helper.ts
@@ -1,8 +1,7 @@
-import { differenceInCalendarDays } from "date-fns";
-// types
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+// plane internal
+import { STATE_GROUPS } from "@plane/constants";
 import { TStateGroups } from "@plane/types";
-// constants
-import { STATE_GROUPS } from "@/constants/state";
 // helpers
 import { getDate } from "@/helpers/date-time.helper";
 
diff --git a/space/helpers/state.helper.ts b/space/helpers/state.helper.ts
index 81bffdef9..8d97c39f6 100644
--- a/space/helpers/state.helper.ts
+++ b/space/helpers/state.helper.ts
@@ -1,5 +1,5 @@
+import { STATE_GROUPS } from "@plane/constants";
 import { IState } from "@plane/types";
-import { STATE_GROUPS } from "@/constants/state";
 
 export const sortStates = (states: IState[]) => {
   if (!states || states.length === 0) return;
diff --git a/space/package.json b/space/package.json
index 941f8419f..7e7f0429b 100644
--- a/space/package.json
+++ b/space/package.json
@@ -20,17 +20,19 @@
     "@mui/material": "^5.14.1",
     "@plane/constants": "*",
     "@plane/editor": "*",
+    "@plane/i18n": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
-    "@sentry/nextjs": "^8.32.0",
-    "axios": "^1.7.4",
+    "@plane/services": "*",
+    "@sentry/nextjs": "^8.54.0",
+    "axios": "^1.7.9",
     "clsx": "^2.0.0",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "dompurify": "^3.0.11",
     "dotenv": "^16.3.1",
     "lodash": "^4.17.21",
     "lowlight": "^2.9.0",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.469.0",
     "mobx": "^6.10.0",
     "mobx-react": "^9.1.1",
     "mobx-utils": "^6.0.8",
@@ -49,6 +51,7 @@
   },
   "devDependencies": {
     "@plane/eslint-config": "*",
+    "@plane/tailwind-config": "*",
     "@plane/typescript-config": "*",
     "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.17.1",
@@ -59,7 +62,6 @@
     "@types/uuid": "^9.0.1",
     "@types/zxcvbn": "^4.4.4",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "tailwind-config-custom": "*",
     "typescript": "5.3.3"
   }
 }
diff --git a/space/postcss.config.js b/space/postcss.config.js
index 129aa7f59..9b1e55fc4 100644
--- a/space/postcss.config.js
+++ b/space/postcss.config.js
@@ -1 +1,2 @@
-module.exports = require("tailwind-config-custom/postcss.config");
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+module.exports = require("@plane/tailwind-config/postcss.config.js");
diff --git a/space/public/site.webmanifest.json b/space/public/site.webmanifest.json
index 4c32ec6e3..8885d137b 100644
--- a/space/public/site.webmanifest.json
+++ b/space/public/site.webmanifest.json
@@ -1,7 +1,7 @@
 {
   "name": "Plane Space",
   "short_name": "Plane Space",
-  "description": "Plane helps you plan your issues, cycles, and product modules.",
+  "description": "Plane helps you plan your work items, cycles, and product modules.",
   "start_url": ".",
   "display": "standalone",
   "background_color": "#f9fafb",
diff --git a/space/styles/globals.css b/space/styles/globals.css
index 511f6ad1f..8976e83c2 100644
--- a/space/styles/globals.css
+++ b/space/styles/globals.css
@@ -300,6 +300,53 @@
     --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
     --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
   }
+
+  /* stickies and editor colors */
+  :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 */
+
+    /* background colors */
+    --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;
+    /* end background colors */
+  }
+  /* 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 background colors */
 }
 
 * {
@@ -355,7 +402,6 @@ body {
   -webkit-background-clip: text;
 }
 
-
 @-moz-document url-prefix() {
   * {
     scrollbar-width: none;
diff --git a/space/tailwind.config.js b/space/tailwind.config.js
index 1e1e59826..2232bb29a 100644
--- a/space/tailwind.config.js
+++ b/space/tailwind.config.js
@@ -1 +1,2 @@
-module.exports = require("tailwind-config-custom/tailwind.config");
+/* eslint-disable @typescript-eslint/no-require-imports */
+module.exports = require("@plane/tailwind-config/tailwind.config.js");
diff --git a/turbo.json b/turbo.json
index edfcd6771..1113926ce 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,5 +1,6 @@
 {
   "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
   "globalEnv": [
     "NODE_ENV",
     "NEXT_PUBLIC_API_BASE_URL",
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index afa7562fd..5a6f06067 100644
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@@ -3,7 +3,4 @@ module.exports = {
   root: true,
   extends: ["@plane/eslint-config/next.js"],
   parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
 };
diff --git a/web/Dockerfile.dev b/web/Dockerfile.dev
index 5fa751338..64465755e 100644
--- a/web/Dockerfile.dev
+++ b/web/Dockerfile.dev
@@ -1,4 +1,4 @@
-FROM node:18-alpine
+FROM node:20-alpine
 RUN apk add --no-cache libc6-compat
 # Set working directory
 WORKDIR /app
diff --git a/web/Dockerfile.web b/web/Dockerfile.web
index d7d924d7a..56f931adc 100644
--- a/web/Dockerfile.web
+++ b/web/Dockerfile.web
@@ -1,7 +1,9 @@
+FROM node:20-alpine as base
+
 # *****************************************************************************
 # STAGE 1: Build the project
 # *****************************************************************************
-FROM node:18-alpine AS builder
+FROM base AS builder
 RUN apk add --no-cache libc6-compat
 # Set working directory
 WORKDIR /app
@@ -15,7 +17,7 @@ RUN turbo prune --scope=web --docker
 # STAGE 2: Install dependencies & build the project
 # *****************************************************************************
 # Add lockfile and package.json's of isolated subworkspace
-FROM node:18-alpine AS installer
+FROM base AS installer
 
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -62,7 +64,7 @@ RUN yarn turbo run build --filter=web
 # *****************************************************************************
 # STAGE 3: Copy the project and start it
 # *****************************************************************************
-FROM node:18-alpine AS runner
+FROM base AS runner
 WORKDIR /app
 
 COPY --from=installer /app/web/next.config.js .
diff --git a/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
index 4edf41bbd..6416aee12 100644
--- a/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
@@ -1,6 +1,6 @@
 "use client";
-
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Breadcrumbs, ContrastIcon, Header } from "@plane/ui";
 // components
@@ -8,15 +8,17 @@ import { BreadcrumbLink } from "@/components/common";
 // plane web components
 import { UpgradeBadge } from "@/plane-web/components/workspace";
 
-export const WorkspaceActiveCycleHeader = observer(() => (
-  <Header>
-    <Header.LeftItem>
-      <Breadcrumbs>
+export const WorkspaceActiveCycleHeader = observer(() => {
+  const { t } = useTranslation();
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs>
         <Breadcrumbs.BreadcrumbItem
           type="text"
           link={
             <BreadcrumbLink
-              label="Active cycles"
+              label={t("active_cycles")}
               icon={<ContrastIcon className="h-4 w-4 text-custom-text-300 rotate-180" />}
             />
           }
@@ -25,4 +27,5 @@ export const WorkspaceActiveCycleHeader = observer(() => (
       <UpgradeBadge size="md" />
     </Header.LeftItem>
   </Header>
-));
+  );
+});
diff --git a/web/app/[workspaceSlug]/(projects)/analytics/header.tsx b/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
index 4aa66e2a4..2c3247bd7 100644
--- a/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
@@ -3,8 +3,8 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
-// icons
 import { BarChart2, PanelRight } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
@@ -13,8 +13,8 @@ import { BreadcrumbLink } from "@/components/common";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme } from "@/hooks/store";
-
 export const WorkspaceAnalyticsHeader = observer(() => {
+  const { t } = useTranslation();
   const searchParams = useSearchParams();
   const analytics_tab = searchParams.get("analytics_tab");
   // store hooks
@@ -41,7 +41,12 @@ export const WorkspaceAnalyticsHeader = observer(() => {
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            link={<BreadcrumbLink label="Analytics" icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />} />}
+            link={
+              <BreadcrumbLink
+                label={t("workspace_analytics.label")}
+                icon={<BarChart2 className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
           />
         </Breadcrumbs>
         {analytics_tab === "custom" ? (
diff --git a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
index b66c0d19e..8875e1465 100644
--- a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
@@ -4,27 +4,41 @@ import React, { Fragment } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { Tab } from "@headlessui/react";
-// components
+// plane package imports
+import { ANALYTICS_TABS, EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Header, EHeaderVariant } from "@plane/ui";
+// components
 import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { ANALYTICS_TABS } from "@/constants/analytics";
-import { EmptyStateType } from "@/constants/empty-state";
+import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useWorkspace } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProject, useUserPermissions, useWorkspace } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const AnalyticsPage = observer(() => {
   const searchParams = useSearchParams();
   const analytics_tab = searchParams.get("analytics_tab");
+  // plane imports
+  const { t } = useTranslation();
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
   const { workspaceProjectIds, loader } = useProject();
   const { currentWorkspace } = useWorkspace();
+  const { allowPermissions } = useUserPermissions();
+  // helper hooks
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/analytics" });
   // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Analytics` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
+    : undefined;
+
+  // permissions
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
 
   // TODO: refactor loader implementation
   return (
@@ -32,7 +46,7 @@ const AnalyticsPage = observer(() => {
       <PageHead title={pageTitle} />
       {workspaceProjectIds && (
         <>
-          {workspaceProjectIds.length > 0 || loader ? (
+          {workspaceProjectIds.length > 0 || loader === "init-loader" ? (
             <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
               <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
                 <Header variant={EHeaderVariant.SECONDARY}>
@@ -45,7 +59,7 @@ const AnalyticsPage = observer(() => {
                               selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
                             }`}
                           >
-                            {tab.title}
+                            {t(tab.i18n_title)}
                             <div
                               className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
                             />
@@ -66,12 +80,22 @@ const AnalyticsPage = observer(() => {
               </Tab.Group>
             </div>
           ) : (
-            <EmptyState
-              type={EmptyStateType.WORKSPACE_ANALYTICS}
-              primaryButtonOnClick={() => {
-                setTrackElement("Analytics empty state");
-                toggleCreateProjectModal(true);
-              }}
+            <DetailedEmptyState
+              title={t("workspace_analytics.empty_state.general.title")}
+              description={t("workspace_analytics.empty_state.general.description")}
+              assetPath={resolvedPath}
+              customPrimaryButton={
+                <ComicBoxButton
+                  label={t("workspace_analytics.empty_state.general.primary_button.text")}
+                  title={t("workspace_analytics.empty_state.general.primary_button.comic.title")}
+                  description={t("workspace_analytics.empty_state.general.primary_button.comic.description")}
+                  onClick={() => {
+                    setTrackElement("Analytics empty state");
+                    toggleCreateProjectModal(true);
+                  }}
+                  disabled={!canPerformEmptyStateActions}
+                />
+              }
             />
           )}
         </>
diff --git a/web/app/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
new file mode 100644
index 000000000..ec0d8b03a
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Briefcase } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Breadcrumbs, LayersIcon, Header, Logo } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common";
+import { IssueDetailQuickActions } from "@/components/issues";
+// hooks
+import { useIssueDetail, useProject } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+export const ProjectIssueDetailsHeader = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, workItem } = useParams();
+  // store hooks
+  const { t } = useTranslation();
+  const { getProjectById, loader } = useProject();
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+  // derived values
+  const issueId = getIssueIdByIdentifier(workItem?.toString());
+  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
+  const projectId = issueDetails ? issueDetails?.project_id : undefined;
+  const projectDetails = projectId ? getProjectById(projectId?.toString()) : undefined;
+
+  if (!workspaceSlug || !projectId || !issueId) return null;
+
+  return (
+    <Header>
+      <Header.LeftItem>
+        <div>
+          <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  label={projectDetails?.name ?? "Project"}
+                  icon={
+                    projectDetails ? (
+                      projectDetails && (
+                        <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                          <Logo logo={projectDetails?.logo_props} size={16} />
+                        </span>
+                      )
+                    ) : (
+                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                        <Briefcase className="h-4 w-4" />
+                      </span>
+                    )
+                  }
+                />
+              }
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  href={`/${workspaceSlug}/projects/${projectId}/issues`}
+                  label={t("common.work_items")}
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
+            />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  label={
+                    projectDetails && issueDetails ? `${projectDetails.identifier}-${issueDetails.sequence_id}` : ""
+                  }
+                />
+              }
+            />
+          </Breadcrumbs>
+        </div>
+      </Header.LeftItem>
+      <Header.RightItem>
+        {projectId && issueId && (
+          <IssueDetailQuickActions
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            issueId={issueId?.toString()}
+          />
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/layout.tsx
rename to web/app/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx
diff --git a/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
new file mode 100644
index 000000000..e315f3549
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { useTheme } from "next-themes";
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Loader } from "@plane/ui";
+// components
+import { EmptyState } from "@/components/common";
+import { PageHead } from "@/components/core";
+import { IssueDetailRoot } from "@/components/issues";
+// hooks
+import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
+// assets
+import { useAppRouter } from "@/hooks/use-app-router";
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
+import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
+
+const IssueDetailsPage = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, workItem } = useParams();
+  // hooks
+  const { resolvedTheme } = useTheme();
+  // store hooks
+  const { t } = useTranslation();
+  const {
+    fetchIssueWithIdentifier,
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const { getProjectById } = useProject();
+  const { toggleIssueDetailSidebar, issueDetailSidebarCollapsed } = useAppTheme();
+
+  const projectIdentifier = workItem?.toString().split("-")[0];
+  const sequence_id = workItem?.toString().split("-")[1];
+
+  // fetching issue details
+  const { data, isLoading, error } = useSWR(
+    workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
+    workspaceSlug && workItem
+      ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
+      : null
+  );
+  const issueId = data?.id;
+  const projectId = data?.project_id;
+  // derived values
+  const issue = getIssueById(issueId?.toString() || "") || undefined;
+  const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
+  const issueLoader = !issue || isLoading;
+  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
+
+  useEffect(() => {
+    const handleToggleIssueDetailSidebar = () => {
+      if (window && window.innerWidth < 768) {
+        toggleIssueDetailSidebar(true);
+      }
+      if (window && issueDetailSidebarCollapsed && window.innerWidth >= 768) {
+        toggleIssueDetailSidebar(false);
+      }
+    };
+    window.addEventListener("resize", handleToggleIssueDetailSidebar);
+    handleToggleIssueDetailSidebar();
+    return () => window.removeEventListener("resize", handleToggleIssueDetailSidebar);
+  }, [issueDetailSidebarCollapsed, toggleIssueDetailSidebar]);
+
+  return (
+    <>
+      <PageHead title={pageTitle} />
+      {error ? (
+        <EmptyState
+          image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
+          title={t("issue.empty_state.issue_detail.title")}
+          description={t("issue.empty_state.issue_detail.description")}
+          primaryButton={{
+            text: t("issue.empty_state.issue_detail.primary_button.text"),
+            onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues/`),
+          }}
+        />
+      ) : issueLoader ? (
+        <Loader className="flex h-full gap-5 p-5">
+          <div className="basis-2/3 space-y-2">
+            <Loader.Item height="30px" width="40%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="60%" />
+            <Loader.Item height="15px" width="40%" />
+          </div>
+          <div className="basis-1/3 space-y-3">
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+            <Loader.Item height="30px" />
+          </div>
+        </Loader>
+      ) : (
+        workspaceSlug &&
+        projectId &&
+        issueId && (
+          <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+            <IssueDetailRoot
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={projectId.toString()}
+              issueId={issueId.toString()}
+            />
+          </ProjectAuthWrapper>
+        )
+      )}
+    </>
+  );
+});
+
+export default IssueDetailsPage;
diff --git a/web/app/[workspaceSlug]/(projects)/drafts/header.tsx b/web/app/[workspaceSlug]/(projects)/drafts/header.tsx
index f77e61c31..5e1cc66ef 100644
--- a/web/app/[workspaceSlug]/(projects)/drafts/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/drafts/header.tsx
@@ -3,17 +3,16 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { PenSquare } from "lucide-react";
+import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, CountChip } from "@/components/common";
 import { CreateUpdateIssueModal } from "@/components/issues";
-// constants
-import { EIssuesStoreType } from "@/constants/issue";
+
 // hooks
 import { useProject, useUserPermissions, useWorkspaceDraftIssues } from "@/hooks/store";
-// plane-web
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const WorkspaceDraftHeader = observer(() => {
   // state
@@ -22,7 +21,9 @@ export const WorkspaceDraftHeader = observer(() => {
   const { allowPermissions } = useUserPermissions();
   const { paginationInfo } = useWorkspaceDraftIssues();
   const { joinedProjectIds } = useProject();
-  // check if user is authorized to create draft issue
+
+  const { t } = useTranslation();
+  // check if user is authorized to create draft work item
   const isAuthorizedUser = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.WORKSPACE
@@ -42,7 +43,9 @@ export const WorkspaceDraftHeader = observer(() => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={<BreadcrumbLink label={`Drafts`} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />}
+                link={
+                  <BreadcrumbLink label={t("drafts")} icon={<PenSquare className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
             {paginationInfo?.total_count && paginationInfo?.total_count > 0 ? (
@@ -62,7 +65,7 @@ export const WorkspaceDraftHeader = observer(() => {
               onClick={() => setIsDraftIssueModalOpen(true)}
               disabled={!isAuthorizedUser}
             >
-              Draft<span className="hidden sm:inline-block"> an issue</span>
+              {t("workspace_draft_issues.draft_an_issue")}
             </Button>
           )}
         </Header.RightItem>
diff --git a/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx b/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
new file mode 100644
index 000000000..3f3e21cfc
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import React, { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { Plus, Search } from "lucide-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { CreateProjectModal } from "@/components/project";
+import { SidebarProjectsListItem } from "@/components/workspace";
+// hooks
+import { orderJoinedProjects } from "@/helpers/project.helper";
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+import { useAppTheme, useProject, useUserPermissions } from "@/hooks/store";
+import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
+import { TProject } from "@/plane-web/types";
+
+export const ExtendedProjectSidebar = observer(() => {
+  // refs
+  const extendedProjectSidebarRef = useRef<HTMLDivElement | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+  // states
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  // routers
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { t } = useTranslation();
+  const { sidebarCollapsed, extendedProjectSidebarCollapsed, toggleExtendedProjectSidebar } = useAppTheme();
+  const { getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
+  const { allowPermissions } = useUserPermissions();
+
+  const handleOnProjectDrop = (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => {
+    if (!sourceId || !destinationId || !workspaceSlug) return;
+    if (sourceId === destinationId) return;
+
+    const joinedProjectsList: TProject[] = [];
+    joinedProjects.map((projectId) => {
+      const projectDetails = getPartialProjectById(projectId);
+      if (projectDetails) joinedProjectsList.push(projectDetails);
+    });
+
+    const sourceIndex = joinedProjects.indexOf(sourceId);
+    const destinationIndex = shouldDropAtEnd ? joinedProjects.length : joinedProjects.indexOf(destinationId);
+
+    if (joinedProjectsList.length <= 0) return;
+
+    const updatedSortOrder = orderJoinedProjects(sourceIndex, destinationIndex, sourceId, joinedProjectsList);
+    if (updatedSortOrder != undefined)
+      updateProjectView(workspaceSlug.toString(), sourceId, { sort_order: updatedSortOrder }).catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("error"),
+          message: t("something_went_wrong"),
+        });
+      });
+  };
+
+  // filter projects based on search query
+  const filteredProjects = joinedProjects.filter((projectId) => {
+    const project = getPartialProjectById(projectId);
+    if (!project) return false;
+    return project.name.toLowerCase().includes(searchQuery.toLowerCase()) || project.identifier.includes(searchQuery);
+  });
+
+  // auth
+  const isAuthorizedUser = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
+  useExtendedSidebarOutsideClickDetector(
+    extendedProjectSidebarRef,
+    () => {
+      if (!isProjectModalOpen) {
+        toggleExtendedProjectSidebar(false);
+      }
+    },
+    "extended-project-sidebar-toggle"
+  );
+
+  const handleCopyText = (projectId: string) => {
+    copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("link_copied"),
+        message: t("project_link_copied_to_clipboard"),
+      });
+    });
+  };
+  return (
+    <>
+      {workspaceSlug && (
+        <CreateProjectModal
+          isOpen={isProjectModalOpen}
+          onClose={() => setIsProjectModalOpen(false)}
+          setToFavorite={false}
+          workspaceSlug={workspaceSlug.toString()}
+        />
+      )}
+      <div
+        ref={extendedProjectSidebarRef}
+        className={cn(
+          "fixed top-0 h-full z-[19] flex flex-col gap-2 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 shadow-md",
+          {
+            "translate-x-0 opacity-100 pointer-events-auto": extendedProjectSidebarCollapsed,
+            "-translate-x-full opacity-0 pointer-events-none": !extendedProjectSidebarCollapsed,
+            "left-[70px]": sidebarCollapsed,
+            "left-[250px]": !sidebarCollapsed,
+          }
+        )}
+      >
+        <div className="flex flex-col gap-1 w-full sticky top-4 pt-0 px-4">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-custom-text-300 py-1.5">Projects</span>
+            {isAuthorizedUser && (
+              <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
+                <button
+                  type="button"
+                  className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+                  onClick={() => {
+                    setIsProjectModalOpen(true);
+                  }}
+                >
+                  <Plus className="size-3" />
+                </button>
+              </Tooltip>
+            )}
+          </div>
+          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1 w-full">
+            <Search className="h-3.5 w-3.5 text-custom-text-400" />
+            <input
+              className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
+              placeholder={t("search")}
+              value={searchQuery}
+              autoFocus
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 px-4">
+          {filteredProjects.map((projectId, index) => (
+            <SidebarProjectsListItem
+              key={projectId}
+              projectId={projectId}
+              handleCopyText={() => handleCopyText(projectId)}
+              projectListType={"JOINED"}
+              disableDrag={false}
+              disableDrop={false}
+              isLastChild={index === joinedProjects.length - 1}
+              handleOnProjectDrop={handleOnProjectDrop}
+              renderInExtendedSidebar
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx b/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
new file mode 100644
index 000000000..65061ff43
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/extended-sidebar.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import React, { useMemo, useRef } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { EUserWorkspaceRoles, WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS } from "@plane/constants";
+import { cn } from "@plane/utils";
+// hooks
+import { useAppTheme, useWorkspace } from "@/hooks/store";
+import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
+// plane-web imports
+import { ExtendedSidebarItem } from "@/plane-web/components/workspace/sidebar";
+
+export const ExtendedAppSidebar = observer(() => {
+  // refs
+  const extendedSidebarRef = useRef<HTMLDivElement | null>(null);
+  // routers
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { updateSidebarPreference, getNavigationPreferences } = useWorkspace();
+
+  // derived values
+  const currentWorkspaceNavigationPreferences = getNavigationPreferences(workspaceSlug.toString());
+
+  const sortedNavigationItems = useMemo(
+    () =>
+      WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.map((item) => {
+        const preference = currentWorkspaceNavigationPreferences?.[item.key];
+        return {
+          ...item,
+          sort_order: preference ? preference.sort_order : 0,
+        };
+      }).sort((a, b) => a.sort_order - b.sort_order),
+    [currentWorkspaceNavigationPreferences]
+  );
+
+  const sortedNavigationItemsKeys = sortedNavigationItems.map((item) => item.key);
+
+  const orderNavigationItem = (
+    sourceIndex: number,
+    destinationIndex: number,
+    navigationList: {
+      sort_order: number;
+      key: string;
+      labelTranslationKey: string;
+      href: string;
+      access: EUserWorkspaceRoles[];
+    }[]
+  ): number | undefined => {
+    if (sourceIndex < 0 || destinationIndex < 0 || navigationList.length <= 0) return undefined;
+
+    let updatedSortOrder: number | undefined = undefined;
+    const sortOrderDefaultValue = 10000;
+
+    if (destinationIndex === 0) {
+      // updating project at the top of the project
+      const currentSortOrder = navigationList[destinationIndex].sort_order || 0;
+      updatedSortOrder = currentSortOrder - sortOrderDefaultValue;
+    } else if (destinationIndex === navigationList.length) {
+      // updating project at the bottom of the project
+      const currentSortOrder = navigationList[destinationIndex - 1].sort_order || 0;
+      updatedSortOrder = currentSortOrder + sortOrderDefaultValue;
+    } else {
+      // updating project in the middle of the project
+      const destinationTopProjectSortOrder = navigationList[destinationIndex - 1].sort_order || 0;
+      const destinationBottomProjectSortOrder = navigationList[destinationIndex].sort_order || 0;
+      const updatedValue = (destinationTopProjectSortOrder + destinationBottomProjectSortOrder) / 2;
+      updatedSortOrder = updatedValue;
+    }
+
+    return updatedSortOrder;
+  };
+
+  const handleOnNavigationItemDrop = (
+    sourceId: string | undefined,
+    destinationId: string | undefined,
+    shouldDropAtEnd: boolean
+  ) => {
+    if (!sourceId || !destinationId || !workspaceSlug) return;
+    if (sourceId === destinationId) return;
+
+    const sourceIndex = sortedNavigationItemsKeys.indexOf(sourceId);
+    const destinationIndex = shouldDropAtEnd
+      ? sortedNavigationItemsKeys.length
+      : sortedNavigationItemsKeys.indexOf(destinationId);
+
+    const updatedSortOrder = orderNavigationItem(sourceIndex, destinationIndex, sortedNavigationItems);
+
+    if (updatedSortOrder != undefined)
+      updateSidebarPreference(workspaceSlug.toString(), sourceId, {
+        sort_order: updatedSortOrder,
+      });
+  };
+
+  useExtendedSidebarOutsideClickDetector(
+    extendedSidebarRef,
+    () => toggleExtendedSidebar(false),
+    "extended-sidebar-toggle"
+  );
+
+  return (
+    <div
+      ref={extendedSidebarRef}
+      className={cn(
+        "fixed top-0 h-full z-[19] flex flex-col gap-0.5 w-[300px] transform transition-all duration-300 ease-in-out bg-custom-sidebar-background-100 border-r border-custom-sidebar-border-200 p-4 shadow-md pb-6",
+        {
+          "translate-x-0 opacity-100 pointer-events-auto": extendedSidebarCollapsed,
+          "-translate-x-full opacity-0 pointer-events-none": !extendedSidebarCollapsed,
+          "left-[70px]": sidebarCollapsed,
+          "left-[250px]": !sidebarCollapsed,
+        }
+      )}
+    >
+      {sortedNavigationItems.map((item, index) => (
+        <ExtendedSidebarItem
+          key={item.key}
+          item={item}
+          isLastChild={index === sortedNavigationItems.length - 1}
+          handleOnNavigationItemDrop={handleOnNavigationItemDrop}
+        />
+      ))}
+    </div>
+  );
+});
diff --git a/web/app/[workspaceSlug]/(projects)/header.tsx b/web/app/[workspaceSlug]/(projects)/header.tsx
index a7a19afe6..16c106dad 100644
--- a/web/app/[workspaceSlug]/(projects)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/header.tsx
@@ -7,11 +7,12 @@ import { Home } from "lucide-react";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // ui
+import { GITHUB_REDIRECTED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // constants
-import { GITHUB_REDIRECTED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker } from "@/hooks/store";
 
@@ -19,6 +20,7 @@ export const WorkspaceDashboardHeader = () => {
   // hooks
   const { captureEvent } = useEventTracker();
   const { resolvedTheme } = useTheme();
+  const { t } = useTranslation();
 
   return (
     <>
@@ -28,7 +30,9 @@ export const WorkspaceDashboardHeader = () => {
             <Breadcrumbs>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
-                link={<BreadcrumbLink label="Home" icon={<Home className="h-4 w-4 text-custom-text-300" />} />}
+                link={
+                  <BreadcrumbLink label={t("home.title")} icon={<Home className="h-4 w-4 text-custom-text-300" />} />
+                }
               />
             </Breadcrumbs>
           </div>
@@ -51,7 +55,7 @@ export const WorkspaceDashboardHeader = () => {
               width={16}
               alt="GitHub Logo"
             />
-            <span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
+            <span className="hidden text-xs font-medium sm:hidden md:block">{t("home.star_us_on_github")}</span>
           </a>
         </Header.RightItem>
       </Header>
diff --git a/web/app/[workspaceSlug]/(projects)/layout.tsx b/web/app/[workspaceSlug]/(projects)/layout.tsx
index f8fe0f8f9..340ec57d0 100644
--- a/web/app/[workspaceSlug]/(projects)/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/layout.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { CommandPalette } from "@/components/command-palette";
-import { WorkspaceAuthWrapper } from "@/layouts/auth-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers";
+// plane web components
+import { WorkspaceAuthWrapper } from "@/plane-web/layouts/workspace-wrapper";
 import { AppSidebar } from "./sidebar";
 
 export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
diff --git a/web/app/[workspaceSlug]/(projects)/notifications/layout.tsx b/web/app/[workspaceSlug]/(projects)/notifications/layout.tsx
index 7d71948d8..e3d730363 100644
--- a/web/app/[workspaceSlug]/(projects)/notifications/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/notifications/layout.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 // components
-import { NotificationsSidebarRoot } from "@/plane-web/components/workspace-notifications";
+import { NotificationsSidebarRoot } from "@/components/workspace-notifications";
 
 export default function ProjectInboxIssuesLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/web/app/[workspaceSlug]/(projects)/notifications/page.tsx b/web/app/[workspaceSlug]/(projects)/notifications/page.tsx
index 4ea0c8e42..8afe768d8 100644
--- a/web/app/[workspaceSlug]/(projects)/notifications/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/notifications/page.tsx
@@ -4,21 +4,24 @@ import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
+// plane imports
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
 import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 import { InboxContentRoot } from "@/components/inbox";
 import { IssuePeekOverview } from "@/components/issues";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
 import { useIssueDetail, useUserPermissions, useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
 
 const WorkspaceDashboardPage = observer(() => {
   const { workspaceSlug } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { currentWorkspace } = useWorkspace();
   const {
@@ -31,11 +34,14 @@ const WorkspaceDashboardPage = observer(() => {
   const { fetchUserProjectInfo } = useUserPermissions();
   const { setPeekIssue } = useIssueDetail();
   // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Inbox` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? t("notification.page_label", { workspace: currentWorkspace?.name })
+    : undefined;
   const { workspace_slug, project_id, issue_id, is_inbox_issue } =
     notificationLiteByNotificationId(currentSelectedNotificationId);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/intake/issue-detail" });
 
-  // fetching workspace issue properties
+  // fetching workspace work item properties
   useWorkspaceIssueProperties(workspaceSlug);
 
   // fetch workspace notifications
@@ -82,7 +88,7 @@ const WorkspaceDashboardPage = observer(() => {
       <div className="w-full h-full overflow-hidden overflow-y-auto">
         {!currentSelectedNotificationId ? (
           <div className="w-full h-screen flex justify-center items-center">
-            <EmptyState type={EmptyStateType.NOTIFICATION_DETAIL_EMPTY_STATE} layout="screen-simple" />
+            <SimpleEmptyState title={t("notification.empty_state.detail.title")} assetPath={resolvedPath} />
           </div>
         ) : (
           <>
diff --git a/web/app/[workspaceSlug]/(projects)/page.tsx b/web/app/[workspaceSlug]/(projects)/page.tsx
index d684b923e..7a808decd 100644
--- a/web/app/[workspaceSlug]/(projects)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/page.tsx
@@ -2,8 +2,9 @@
 
 import { observer } from "mobx-react";
 // components
+import { useTranslation } from "@plane/i18n";
 import { PageHead, AppHeader, ContentWrapper } from "@/components/core";
-import { WorkspaceDashboardView } from "@/components/page-views";
+import { WorkspaceHomeView } from "@/components/home";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 // local components
@@ -11,15 +12,16 @@ import { WorkspaceDashboardHeader } from "./header";
 
 const WorkspaceDashboardPage = observer(() => {
   const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
   // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Home` : undefined;
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - ${t("home.title")}` : undefined;
 
   return (
     <>
       <AppHeader header={<WorkspaceDashboardHeader />} />
       <ContentWrapper>
         <PageHead title={pageTitle} />
-        <WorkspaceDashboardView />
+        <WorkspaceHomeView />
       </ContentWrapper>
     </>
   );
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
index bf1f88d15..f3b719904 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
@@ -3,6 +3,8 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core";
@@ -10,7 +12,6 @@ import { DownloadActivityButton, WorkspaceActivityListPage } from "@/components/
 // hooks
 import { useUserPermissions } from "@/hooks/store";
 // plane-web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const PER_PAGE = 100;
 
@@ -21,6 +22,8 @@ const ProfileActivityPage = observer(() => {
   const [resultsCount, setResultsCount] = useState(0);
   // router
   const { allowPermissions } = useUserPermissions();
+  //hooks
+  const { t } = useTranslation();
 
   const updateTotalPages = (count: number) => setTotalPages(count);
 
@@ -50,7 +53,7 @@ const ProfileActivityPage = observer(() => {
       <PageHead title="Profile - Activity" />
       <div className="flex h-full w-full flex-col overflow-hidden py-5">
         <div className="flex items-center justify-between gap-2 px-5 md:px-9">
-          <h3 className="text-lg font-medium">Recent activity</h3>
+          <h3 className="text-lg font-medium">{t("profile.stats.recent_activity.title")}</h3>
           {canDownloadActivity && <DownloadActivityButton />}
         </div>
         <div className="vertical-scrollbar scrollbar-md flex h-full flex-col overflow-y-auto px-5 md:px-9">
@@ -58,7 +61,7 @@ const ProfileActivityPage = observer(() => {
           {pageCount < totalPages && resultsCount !== 0 && (
             <div className="flex w-full items-center justify-center text-xs">
               <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
-                Load more
+                {t("common.load_more")}
               </Button>
             </div>
           )}
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index 13a944c88..e97b4751f 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -6,15 +6,15 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { ChevronDown, PanelRight } from "lucide-react";
+import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IUserProfileProjectSegregation } from "@plane/types";
 import { Breadcrumbs, Header, CustomMenu, UserActivityIcon } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // components
 import { ProfileIssuesFilter } from "@/components/profile";
-import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
 import { cn } from "@/helpers/common.helper";
 import { useAppTheme, useUser, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type TUserProfileHeader = {
   userProjectsData: IUserProfileProjectSegregation | undefined;
@@ -30,6 +30,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
   const { toggleProfileSidebar, profileSidebarCollapsed } = useAppTheme();
   const { data: currentUser } = useUser();
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
   // derived values
   const isAuthorized = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -44,7 +45,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
 
   const isCurrentUser = currentUser?.id === userId;
 
-  const breadcrumbLabel = `${isCurrentUser ? "Your" : userName} Work`;
+  const breadcrumbLabel = isCurrentUser ? t("profile.page_label") : `${userName} ${t("profile.work")}`;
 
   return (
     <Header>
@@ -86,7 +87,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
                   href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}
                   className="w-full text-custom-text-300"
                 >
-                  {tab.label}
+                  {t(tab.i18n_label)}
                 </Link>
               </CustomMenu.MenuItem>
             ))}
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
index f31ff959d..fb223f2dd 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
@@ -4,15 +4,15 @@ import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import useSWR from "swr";
 // components
+import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { AppHeader, ContentWrapper } from "@/components/core";
 import { ProfileSidebar } from "@/components/profile";
 // constants
 import { USER_PROFILE_PROJECT_SEGREGATION } from "@/constants/fetch-keys";
-import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
 // hooks
 import { useUserPermissions } from "@/hooks/store";
 import useSize from "@/hooks/use-window-size";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // local components
 import { UserService } from "@/services/user.service";
 import { UserProfileHeader } from "./header";
@@ -32,6 +32,7 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
   const pathname = usePathname();
   // store hooks
   const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
   // derived values
   const isAuthorized = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -64,7 +65,7 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
           <AppHeader
             header={
               <UserProfileHeader
-                type={currentTab?.label}
+                type={currentTab?.i18n_label}
                 userProjectsData={userProjectsData}
                 showProfileIssuesFilter={isIssuesTab}
               />
@@ -79,7 +80,7 @@ const UseProfileLayout: React.FC<Props> = observer((props) => {
                   <div className={`w-full overflow-hidden h-full`}>{children}</div>
                 ) : (
                   <div className="grid h-full w-full place-items-center text-custom-text-200">
-                    You do not have the permission to access this page.
+                    {t("you_do_not_have_the_permission_to_access_this_page")}
                   </div>
                 )}
               </div>
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
index b963ca147..49fa5d2e5 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -5,26 +5,31 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { ChevronDown } from "lucide-react";
+// plane constants
+import {
+  EIssueLayoutTypes,
+  EIssueFilterType,
+  EIssuesStoreType,
+  ISSUE_LAYOUTS,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+} from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
 // components
-import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
-// constants
-import {
-  EIssueFilterType,
-  EIssueLayoutTypes,
-  EIssuesStoreType,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-  ISSUE_LAYOUTS,
-} from "@/constants/issue";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, IssueLayoutIcon } from "@/components/issues";
+
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useLabel } from "@/hooks/store";
 
 export const ProfileIssuesMobileHeader = observer(() => {
+  // plane i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug, userId } = useParams();
   // store hook
@@ -116,7 +121,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
         placement="bottom-start"
         customButton={
           <div className="flex flex-center text-sm text-custom-text-200">
-            Layout
+            {t("common.layout")}
             <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
           </div>
         }
@@ -133,19 +138,19 @@ export const ProfileIssuesMobileHeader = observer(() => {
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="h-3 w-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
+              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
             </CustomMenu.MenuItem>
           );
         })}
       </CustomMenu>
       <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
         <FiltersDropdown
-          title="Filters"
+          title={t("common.filters")}
           placement="bottom-end"
           menuButton={
             <div className="flex flex-center text-sm text-custom-text-200">
-              Filters
+              {t("common.filters")}
               <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" strokeWidth={2} />
             </div>
           }
@@ -153,7 +158,7 @@ export const ProfileIssuesMobileHeader = observer(() => {
         >
           <FilterSelection
             layoutDisplayFiltersOptions={
-              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.profile_issues[activeLayout] : undefined
             }
             filters={issueFilters?.filters ?? {}}
             handleFiltersUpdate={handleFiltersUpdate}
@@ -167,18 +172,18 @@ export const ProfileIssuesMobileHeader = observer(() => {
       </div>
       <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
         <FiltersDropdown
-          title="Display"
+          title={t("common.display")}
           placement="bottom-end"
           menuButton={
             <div className="flex flex-center text-sm text-custom-text-200">
-              Display
+              {t("common.display")}
               <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
             </div>
           }
         >
           <DisplayFiltersSelection
             layoutDisplayFiltersOptions={
-              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.profile_issues[activeLayout] : undefined
             }
             displayFilters={issueFilters?.displayFilters ?? {}}
             handleDisplayFiltersUpdate={handleDisplayFilters}
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
index 4acb93217..a91836518 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@@ -2,11 +2,12 @@ import React from "react";
 
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
+import { PROFILE_VIEWER_TAB, PROFILE_ADMINS_TAB } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 
 // components
 // constants
 import { Header, EHeaderVariant } from "@plane/ui";
-import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
 
 type Props = {
   isAuthorized: boolean;
@@ -14,7 +15,7 @@ type Props = {
 
 export const ProfileNavbar: React.FC<Props> = (props) => {
   const { isAuthorized } = props;
-
+  const { t } = useTranslation();
   const { workspaceSlug, userId } = useParams();
   const pathname = usePathname();
 
@@ -32,7 +33,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
                   : "border-transparent"
               }`}
             >
-              {tab.label}
+              {t(tab.i18n_label)}
             </span>
           </Link>
         ))}
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
index 480e30aed..0db37129c 100644
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
@@ -3,6 +3,8 @@
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // types
+import { GROUP_CHOICES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IUserStateDistribution, TStateGroups } from "@plane/types";
 // components
 import { ContentWrapper } from "@plane/ui";
@@ -16,7 +18,6 @@ import {
 } from "@/components/profile";
 // constants
 import { USER_PROFILE_DATA } from "@/constants/fetch-keys";
-import { GROUP_CHOICES } from "@/constants/project";
 // services
 import { UserService } from "@/services/user.service";
 
@@ -26,6 +27,7 @@ const userService = new UserService();
 export default function ProfileOverviewPage() {
   const { workspaceSlug, userId } = useParams();
 
+  const { t } = useTranslation();
   const { data: userProfile } = useSWR(
     workspaceSlug && userId ? USER_PROFILE_DATA(workspaceSlug.toString(), userId.toString()) : null,
     workspaceSlug && userId ? () => userService.getUserProfileData(workspaceSlug.toString(), userId.toString()) : null
@@ -40,7 +42,7 @@ export default function ProfileOverviewPage() {
 
   return (
     <>
-      <PageHead title="Your work" />
+      <PageHead title={t("profile.page_label")} />
       <ContentWrapper className="space-y-7">
         <ProfileStats userProfile={userProfile} />
         <ProfileWorkload stateDistribution={stateDistribution} />
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index f95611fbc..7f2799cd6 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -3,22 +3,46 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EIssuesStoreType } from "@plane/constants";
 // ui
-import { ArchiveIcon, Breadcrumbs, Tooltip, Header } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, Tooltip, Header, ContrastIcon, DiceIcon, LayersIcon } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
-// constants
-import { PROJECT_ARCHIVES_BREADCRUMB_LIST } from "@/constants/archives";
-import { EIssuesStoreType } from "@/constants/issue";
+import { BreadcrumbLink } from "@/components/common";
 // hooks
 import { useIssues, useProject } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 
 type TProps = {
   activeTab: "issues" | "cycles" | "modules";
 };
 
+const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
+  [key: string]: {
+    label: string;
+    href: string;
+    icon: React.FC<React.SVGAttributes<SVGElement> & { className?: string }>;
+  };
+} = {
+  issues: {
+    label: "Work items",
+    href: "/issues",
+    icon: LayersIcon,
+  },
+  cycles: {
+    label: "Cycles",
+    href: "/cycles",
+    icon: ContrastIcon,
+  },
+  modules: {
+    label: "Modules",
+    href: "/modules",
+    icon: DiceIcon,
+  },
+};
+
 export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
   const { activeTab } = props;
   // router
@@ -28,7 +52,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
   const {
     issues: { getGroupIssueCount },
   } = useIssues(EIssuesStoreType.ARCHIVED);
-  const { currentProjectDetails, loader } = useProject();
+  const { loader } = useProject();
   // hooks
   const { isMobile } = usePlatformOS();
 
@@ -41,22 +65,8 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
     <Header>
       <Header.LeftItem>
         <div className="flex items-center gap-2.5">
-          <Breadcrumbs onBack={router.back} isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
+          <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+            <ProjectBreadcrumb />
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
@@ -82,7 +92,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
           {activeTab === "issues" && issueCount && issueCount > 0 ? (
             <Tooltip
               isMobile={isMobile}
-              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in project's archived`}
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's archived`}
               position="bottom"
             >
               <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
index 276f9ff25..7b9e84a9e 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
@@ -6,12 +6,14 @@ import useSWR from "swr";
 // ui
 import { ArchiveIcon, Breadcrumbs, LayersIcon, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 import { IssueDetailQuickActions } from "@/components/issues";
 // constants
 import { ISSUE_DETAILS } from "@/constants/fetch-keys";
 // hooks
 import { useProject } from "@/hooks/store";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 // services
 import { IssueService } from "@/services/issue";
 
@@ -33,22 +35,8 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
   return (
     <Header>
       <Header.LeftItem>
-        <Breadcrumbs isLoading={loader}>
-          <Breadcrumbs.BreadcrumbItem
-            type="text"
-            link={
-              <BreadcrumbLink
-                label={currentProjectDetails?.name ?? "Project"}
-                icon={
-                  currentProjectDetails && (
-                    <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                      <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                    </span>
-                  )
-                }
-              />
-            }
-          />
+        <Breadcrumbs isLoading={loader === "init-loader"}>
+          <ProjectBreadcrumb />
           <Breadcrumbs.BreadcrumbItem
             type="text"
             link={
@@ -64,7 +52,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
             link={
               <BreadcrumbLink
                 href={`/${workspaceSlug}/projects/${projectId}/archives/issues`}
-                label="Issues"
+                label="Work items"
                 icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
               />
             }
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
index b2298d540..afa6c0d72 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
@@ -15,7 +15,7 @@ const ProjectArchivedIssuesPage = observer(() => {
   const { getProjectById } = useProject();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
-  const pageTitle = project?.name && `${project?.name} - Archived issues`;
+  const pageTitle = project?.name && `${project?.name} - Archived work items`;
 
   return (
     <>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
index a1f7071a4..381b567df 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
@@ -8,8 +8,6 @@ import { PageHead } from "@/components/core";
 import { CycleDetailsSidebar } from "@/components/cycles";
 import useCyclesDetails from "@/components/cycles/active-cycle/use-cycles-details";
 import { CycleLayoutRoot } from "@/components/issues/issue-layouts";
-// constants
-// import { EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -31,7 +29,7 @@ const CycleDetailPage = observer(() => {
   const { setValue, storedValue } = useLocalStorage("cycle_sidebar_collapsed", "false");
 
   useCyclesDetails({
-    workspaceSlug: workspaceSlug.toString(),
+    workspaceSlug: workspaceSlug?.toString(),
     projectId: projectId.toString(),
     cycleId: cycleId.toString(),
   });
@@ -77,7 +75,12 @@ const CycleDetailPage = observer(() => {
                     "0px 1px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(16, 24, 40, 0.06), 0px 1px 8px -1px rgba(16, 24, 40, 0.06)",
                 }}
               >
-                <CycleDetailsSidebar handleClose={toggleSidebar} />
+                <CycleDetailsSidebar
+                  handleClose={toggleSidebar}
+                  cycleId={cycleId.toString()}
+                  projectId={projectId.toString()}
+                  workspaceSlug={workspaceSlug.toString()}
+                />
               </div>
             )}
           </div>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 678c50c2a..508da58a2 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -6,21 +6,25 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 // icons
 import { ArrowRight, PanelRight } from "lucide-react";
+// plane constants
+import {
+  EIssueLayoutTypes,
+  EIssueFilterType,
+  EIssuesStoreType,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, Header } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
-// constants
-import {
-  EIssueFilterType,
-  EIssueLayoutTypes,
-  EIssuesStoreType,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-} from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { isIssueFilterActive } from "@/helpers/filter.helper";
@@ -40,7 +44,8 @@ import {
 import { useAppRouter } from "@/hooks/use-app-router";
 import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 
 const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
   // router
@@ -73,6 +78,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
     projectId: string;
     cycleId: string;
   };
+  // i18n
+  const { t } = useTranslation();
   // store hooks
   const {
     issuesFilter: { issueFilters, updateFilters },
@@ -164,22 +171,13 @@ export const CycleIssuesHeader: React.FC = observer(() => {
       <Header>
         <Header.LeftItem>
           <div className="flex items-center gap-2">
-            <Breadcrumbs onBack={router.back} isLoading={loader}>
+            <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
               <Breadcrumbs.BreadcrumbItem
                 type="text"
                 link={
                   <span>
                     <span className="hidden md:block">
-                      <BreadcrumbLink
-                        label={currentProjectDetails?.name ?? "Project"}
-                        icon={
-                          currentProjectDetails && (
-                            <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                              <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                            </span>
-                          )
-                        }
-                      />
+                      <ProjectBreadcrumb />
                     </span>
                     <Link
                       href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
@@ -194,7 +192,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 type="text"
                 link={
                   <BreadcrumbLink
-                    label="Cycles"
+                    label={t("common.cycles")}
                     href={`/${workspaceSlug}/projects/${projectId}/cycles`}
                     icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
                   />
@@ -213,7 +211,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                             <Tooltip
                               isMobile={isMobile}
                               tooltipContent={`There are ${issuesCount} ${
-                                issuesCount > 1 ? "issues" : "issue"
+                                issuesCount > 1 ? "work items" : "work item"
                               } in this cycle`}
                               position="bottom"
                             >
@@ -249,7 +247,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
               selectedLayout={activeLayout}
             />
             <FiltersDropdown
-              title="Filters"
+              title={t("common.filters")}
               placement="bottom-end"
               isFiltersApplied={isIssueFilterActive(issueFilters)}
             >
@@ -257,7 +255,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 filters={issueFilters?.filters ?? {}}
                 handleFiltersUpdate={handleFiltersUpdate}
                 layoutDisplayFiltersOptions={
-                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
                 }
                 displayFilters={issueFilters?.displayFilters ?? {}}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
@@ -268,10 +266,10 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 moduleViewDisabled={!currentProjectDetails?.module_view}
               />
             </FiltersDropdown>
-            <FiltersDropdown title="Display" placement="bottom-end">
+            <FiltersDropdown title={t("common.display")} placement="bottom-end">
               <DisplayFiltersSelection
                 layoutDisplayFiltersOptions={
-                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
                 }
                 displayFilters={issueFilters?.displayFilters ?? {}}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
@@ -286,18 +284,18 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             {canUserCreateIssue && (
               <>
                 <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-                  Analytics
+                  {t("common.analytics")}
                 </Button>
                 {!isCompletedCycle && (
                   <Button
                     className="h-full self-start"
                     onClick={() => {
-                      setTrackElement("Cycle issues page");
+                      setTrackElement("Cycle work items page");
                       toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
                     }}
                     size="sm"
                   >
-                    Add issue
+                    {t("issue.add.label")}
                   </Button>
                 )}
               </>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
index aa81ae581..31eb5b249 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -4,37 +4,43 @@ import { useCallback, useState } from "react";
 import { useParams } from "next/navigation";
 // icons
 import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+// plane constants
+import {
+  EIssueLayoutTypes,
+  EIssueFilterType,
+  EIssuesStoreType,
+  ISSUE_LAYOUTS,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+} from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
-import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
-// constants
-import {
-  EIssueFilterType,
-  EIssueLayoutTypes,
-  EIssuesStoreType,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-  ISSUE_LAYOUTS,
-} from "@/constants/issue";
+import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, IssueLayoutIcon } from "@/components/issues";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useCycle, useProjectState, useLabel, useMember, useProject } from "@/hooks/store";
 
 export const CycleIssuesMobileHeader = () => {
+  // i18n
+  const { t } = useTranslation();
+
   const [analyticsModal, setAnalyticsModal] = useState(false);
   const { getCycleById } = useCycle();
   const layouts = [
-    { key: "list", title: "List", icon: List },
-    { key: "kanban", title: "Board", icon: Kanban },
-    { key: "calendar", title: "Calendar", icon: Calendar },
+    { key: "list", titleTranslationKey: "issue.layouts.list", icon: List },
+    { key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: Kanban },
+    { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: Calendar },
   ];
 
   const { workspaceSlug, projectId, cycleId } = useParams();
   const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
+
   // store hooks
   const { currentProjectDetails } = useProject();
   const {
@@ -127,7 +133,9 @@ export const CycleIssuesMobileHeader = () => {
           maxHeight={"md"}
           className="flex flex-grow justify-center text-custom-text-200 text-sm"
           placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+          customButton={
+            <span className="flex flex-grow justify-center text-custom-text-200 text-sm">{t("common.layout")}</span>
+          }
           customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
           closeOnSelect
         >
@@ -139,18 +147,18 @@ export const CycleIssuesMobileHeader = () => {
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="w-3 h-3" />
+              <div className="text-custom-text-300">{t(layout.titleTranslationKey)}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
         <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
           <FiltersDropdown
-            title="Filters"
+            title={t("common.filters")}
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-custom-text-200 text-sm">
-                Filters
+                {t("common.filters")}
                 <ChevronDown className="text-custom-text-200  h-4 w-4 ml-2" />
               </span>
             }
@@ -160,7 +168,7 @@ export const CycleIssuesMobileHeader = () => {
               filters={issueFilters?.filters ?? {}}
               handleFiltersUpdate={handleFiltersUpdate}
               layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
               }
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
@@ -174,18 +182,18 @@ export const CycleIssuesMobileHeader = () => {
         </div>
         <div className="flex flex-grow justify-center border-l border-custom-border-200 items-center text-custom-text-200 text-sm">
           <FiltersDropdown
-            title="Display"
+            title={t("common.display")}
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-custom-text-200 text-sm">
-                Display
+                {t("common.display")}
                 <ChevronDown className="text-custom-text-200 h-4 w-4 ml-2" />
               </span>
             }
           >
             <DisplayFiltersSelection
               layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
               }
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
@@ -202,7 +210,7 @@ export const CycleIssuesMobileHeader = () => {
           onClick={() => setAnalyticsModal(true)}
           className="flex flex-grow justify-center text-custom-text-200 text-sm border-l border-custom-border-200"
         >
-          Analytics
+          {t("common.analytics")}
         </span>
       </div>
     </>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
index ca3189a1f..2339c2731 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@@ -2,27 +2,29 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs, Button, ContrastIcon, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 import { CyclesViewHeader } from "@/components/cycles";
 // hooks
 import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 // constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const CyclesListHeader: FC = observer(() => {
   // router
   const router = useAppRouter();
-  const { workspaceSlug } = useParams();
   // store hooks
   const { toggleCreateCycleModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { currentProjectDetails, loader } = useProject();
+  const { t } = useTranslation();
 
   const canUserCreateCycle = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -32,26 +34,17 @@ export const CyclesListHeader: FC = observer(() => {
   return (
     <Header>
       <Header.LeftItem>
-        <Breadcrumbs onBack={router.back} isLoading={loader}>
+        <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+          <ProjectBreadcrumb />
           <Breadcrumbs.BreadcrumbItem
             type="text"
             link={
               <BreadcrumbLink
-                label={currentProjectDetails?.name ?? "Project"}
-                icon={
-                  currentProjectDetails && (
-                    <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                      <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                    </span>
-                  )
-                }
+                label={t("cycle.label", { count: 2 })}
+                icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />}
               />
             }
           />
-          <Breadcrumbs.BreadcrumbItem
-            type="text"
-            link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
-          />
         </Breadcrumbs>
       </Header.LeftItem>
       {canUserCreateCycle && currentProjectDetails ? (
@@ -65,7 +58,8 @@ export const CyclesListHeader: FC = observer(() => {
               toggleCreateCycleModal(true);
             }}
           >
-            <div className="hidden sm:block">Add</div> Cycle
+            <div className="sm:hidden block">{t("add")}</div>
+            <div className="hidden sm:block">{t("project_cycles.add_cycle")}</div>
           </Button>
         </Header.RightItem>
       ) : (
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
index ecb1d5b90..eb65d928b 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
@@ -2,14 +2,35 @@
 
 import { observer } from "mobx-react";
 // ui
-import { List } from "lucide-react";
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+// plane package imports
+import { TCycleLayoutOptions } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
-// icon
-// constants
-import { CYCLE_VIEW_LAYOUTS } from "@/constants/cycle";
 // hooks
 import { useCycleFilter, useProject } from "@/hooks/store";
 
+const CYCLE_VIEW_LAYOUTS: {
+  key: TCycleLayoutOptions;
+  icon: any;
+  title: string;
+}[] = [
+  {
+    key: "list",
+    icon: List,
+    title: "List layout",
+  },
+  {
+    key: "board",
+    icon: LayoutGrid,
+    title: "Gallery layout",
+  },
+  {
+    key: "gantt",
+    icon: GanttChartSquare,
+    title: "Timeline layout",
+  },
+];
+
 export const CyclesListMobileHeader = observer(() => {
   const { currentProjectDetails } = useProject();
   // hooks
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
index 5b1793d5d..d6b4eea15 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
@@ -3,20 +3,22 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// types
+// plane imports
+import { EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TCycleFilters } from "@plane/types";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { CyclesView, CycleCreateUpdateModal, CycleAppliedFiltersList } from "@/components/cycles";
-import { EmptyState } from "@/components/empty-state";
+import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 import { CycleModuleListLayout } from "@/components/ui";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useEventTracker, useCycle, useProject, useCycleFilter } from "@/hooks/store";
+import { useEventTracker, useCycle, useProject, useCycleFilter, useUserPermissions } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const ProjectCyclesPage = observer(() => {
   // states
@@ -26,13 +28,23 @@ const ProjectCyclesPage = observer(() => {
   const { currentProjectCycleIds, loader } = useCycle();
   const { getProjectById, currentProjectDetails } = useProject();
   // router
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // cycle filters hook
   const { clearAllFilters, currentProjectFilters, updateFilters } = useCycleFilter();
+  const { allowPermissions } = useUserPermissions();
   // derived values
   const totalCycles = currentProjectCycleIds?.length ?? 0;
   const project = projectId ? getProjectById(projectId?.toString()) : undefined;
-  const pageTitle = project?.name ? `${project?.name} - Cycles` : undefined;
+  const pageTitle = project?.name ? `${project?.name} - ${t("cycles.label", { count: 2 })}` : undefined;
+  const hasAdminLevelPermission = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const hasMemberLevelPermission = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/cycles" });
 
   const handleRemoveFilter = (key: keyof TCycleFilters, value: string | null) => {
     if (!projectId) return;
@@ -50,9 +62,17 @@ const ProjectCyclesPage = observer(() => {
   if (currentProjectDetails?.cycle_view === false)
     return (
       <div className="flex items-center justify-center h-full w-full">
-        <EmptyState
-          type={EmptyStateType.DISABLED_PROJECT_CYCLE}
-          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.cycle.title")}
+          description={t("disabled_project.empty_state.cycle.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.cycle.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/projects/${projectId}/settings/features`);
+            },
+            disabled: !hasAdminLevelPermission,
+          }}
         />
       </div>
     );
@@ -71,12 +91,22 @@ const ProjectCyclesPage = observer(() => {
         />
         {totalCycles === 0 ? (
           <div className="h-full place-items-center">
-            <EmptyState
-              type={EmptyStateType.PROJECT_CYCLES}
-              primaryButtonOnClick={() => {
-                setTrackElement("Cycle empty state");
-                setCreateModal(true);
-              }}
+            <DetailedEmptyState
+              title={t("project_cycles.empty_state.general.title")}
+              description={t("project_cycles.empty_state.general.description")}
+              assetPath={resolvedPath}
+              customPrimaryButton={
+                <ComicBoxButton
+                  label={t("project_cycles.empty_state.general.primary_button.text")}
+                  title={t("project_cycles.empty_state.general.primary_button.comic.title")}
+                  description={t("project_cycles.empty_state.general.primary_button.comic.description")}
+                  onClick={() => {
+                    setTrackElement("Cycle empty state");
+                    setCreateModal(true);
+                  }}
+                  disabled={!hasMemberLevelPermission}
+                />
+              }
             />
           </div>
         ) : (
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
index c1e866d03..2200b31f1 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
@@ -3,27 +3,29 @@
 import { FC, useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane constants
+import { EIssueLayoutTypes, EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
-// constants
-import {
-  EIssueFilterType,
-  EIssuesStoreType,
-  EIssueLayoutTypes,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-} from "@/constants/issue";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 
+// FIXME: Deprecated. Remove it
 export const ProjectDraftIssueHeader: FC = observer(() => {
+  // i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
   // store hooks
@@ -84,44 +86,29 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
     [workspaceSlug, projectId, updateFilters]
   );
 
-  const issueCount = currentProjectDetails
-    ? !issueFilters?.displayFilters?.sub_issue && currentProjectDetails.draft_sub_issues
-      ? currentProjectDetails.draft_issues - currentProjectDetails.draft_sub_issues
-      : currentProjectDetails.draft_issues
-    : undefined;
+  const issueCount = undefined;
 
   return (
     <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="flex items-center gap-2.5">
-          <Breadcrumbs isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
+          <Breadcrumbs isLoading={loader === "init-loader"}>
+            <ProjectBreadcrumb />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink label="Draft Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
+                <BreadcrumbLink
+                  label="Draft work items"
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
               }
             />
           </Breadcrumbs>
           {issueCount && issueCount > 0 ? (
             <Tooltip
               isMobile={isMobile}
-              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in project's draft`}
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "work items" : "work item"} in project's draft`}
               position="bottom"
             >
               <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
@@ -137,14 +124,18 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
             onChange={(layout) => handleLayoutChange(layout)}
             selectedLayout={activeLayout}
           />
-          <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
+          <FiltersDropdown
+            title={t("common.filters")}
+            placement="bottom-end"
+            isFiltersApplied={isIssueFilterActive(issueFilters)}
+          >
             <FilterSelection
               filters={issueFilters?.filters ?? {}}
               handleFiltersUpdate={handleFiltersUpdate}
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
               layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
               }
               labels={projectLabels}
               memberIds={projectMemberIds ?? undefined}
@@ -153,10 +144,10 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
               moduleViewDisabled={!currentProjectDetails?.module_view}
             />
           </FiltersDropdown>
-          <FiltersDropdown title="Display" placement="bottom-end">
+          <FiltersDropdown title={t("common.display")} placement="bottom-end">
             <DisplayFiltersSelection
               layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
               }
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx
index 924b830cf..d233cb17a 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx
@@ -17,7 +17,7 @@ const ProjectDraftIssuesPage = observer(() => {
   const { getProjectById } = useProject();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
-  const pageTitle = project?.name ? `${project?.name} - Draft Issues` : undefined;
+  const pageTitle = project?.name ? `${project?.name} - Draft work items` : undefined;
 
   return (
     <>
@@ -30,7 +30,7 @@ const ProjectDraftIssuesPage = observer(() => {
             className="flex items-center gap-1.5 rounded-full border border-custom-border-200 px-3 py-1.5 text-xs"
           >
             <PenSquare className="h-4 w-4" />
-            <span>Draft Issues</span>
+            <span>Draft work items</span>
             <X className="h-3 w-3" />
           </button>
         </div>
@@ -40,4 +40,4 @@ const ProjectDraftIssuesPage = observer(() => {
   );
 });
 
-export default ProjectDraftIssuesPage;
\ No newline at end of file
+export default ProjectDraftIssuesPage;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/page.tsx
index 36aa37e30..5cb8509e0 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/page.tsx
@@ -2,41 +2,62 @@
 import { observer } from "mobx-react";
 // components
 import { useParams, useSearchParams } from "next/navigation";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { EUserProjectRoles } from "@plane/constants/src/user";
+import { useTranslation } from "@plane/i18n";
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { InboxIssueRoot } from "@/components/inbox";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // helpers
 import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
 // hooks
-import { useProject } from "@/hooks/store";
+import { useProject, useUserPermissions } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const ProjectInboxPage = observer(() => {
   /// router
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
-
   const searchParams = useSearchParams();
-
   const navigationTab = searchParams.get("currentTab");
   const inboxIssueId = searchParams.get("inboxIssueId");
-
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { currentProjectDetails } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/intake" });
 
   // No access to inbox
   if (currentProjectDetails?.inbox_view === false)
     return (
       <div className="flex items-center justify-center h-full w-full">
-        <EmptyState
-          type={EmptyStateType.DISABLED_PROJECT_INBOX}
-          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.inbox.title")}
+          description={t("disabled_project.empty_state.inbox.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.inbox.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/projects/${projectId}/settings/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
         />
       </div>
     );
 
   // derived values
-  const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - Intake` : "Plane - Intake";
+  const pageTitle = currentProjectDetails?.name
+    ? t("inbox_issue.page_label", {
+        workspace: currentProjectDetails?.name,
+      })
+    : t("inbox_issue.page_label", {
+        workspace: "Plane",
+      });
 
   const currentNavigationTab = navigationTab
     ? navigationTab === "open"
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
index 5b68ae688..cee22b0cf 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
@@ -1,103 +1,62 @@
 "use client";
 
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+import { redirect, useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
-// ui
-import { Loader } from "@plane/ui";
+import { useTranslation } from "@plane/i18n";
 // components
-import { EmptyState } from "@/components/common";
-import { PageHead } from "@/components/core";
-import { IssueDetailRoot } from "@/components/issues";
+import { EmptyState, LogoSpinner } from "@/components/common";
 // hooks
-import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
-// assets
 import { useAppRouter } from "@/hooks/use-app-router";
+// assets
 import emptyIssueDark from "@/public/empty-state/search/issues-dark.webp";
 import emptyIssueLight from "@/public/empty-state/search/issues-light.webp";
+// services
+import { IssueService } from "@/services/issue/issue.service";
+
+const issueService = new IssueService();
 
 const IssueDetailsPage = observer(() => {
-  // router
   const router = useAppRouter();
+  const { t } = useTranslation();
   const { workspaceSlug, projectId, issueId } = useParams();
-  // hooks
   const { resolvedTheme } = useTheme();
-  // store hooks
-  const {
-    fetchIssue,
-    issue: { getIssueById },
-  } = useIssueDetail();
-  const { getProjectById } = useProject();
-  const { toggleIssueDetailSidebar, issueDetailSidebarCollapsed } = useAppTheme();
-  // fetching issue details
-  const { isLoading, error } = useSWR(
-    workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_${workspaceSlug}_${projectId}_${issueId}` : null,
+
+  const { data, isLoading, error } = useSWR(
+    workspaceSlug && projectId && issueId ? `ISSUE_DETAIL_META_${workspaceSlug}_${projectId}_${issueId}` : null,
     workspaceSlug && projectId && issueId
-      ? () => fetchIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () => issueService.getIssueMetaFromURL(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
-  // derived values
-  const issue = getIssueById(issueId?.toString() || "") || undefined;
-  const project = (issue?.project_id && getProjectById(issue?.project_id)) || undefined;
-  const issueLoader = !issue || isLoading;
-  const pageTitle = project && issue ? `${project?.identifier}-${issue?.sequence_id} ${issue?.name}` : undefined;
 
   useEffect(() => {
-    const handleToggleIssueDetailSidebar = () => {
-      if (window && window.innerWidth < 768) {
-        toggleIssueDetailSidebar(true);
-      }
-      if (window && issueDetailSidebarCollapsed && window.innerWidth >= 768) {
-        toggleIssueDetailSidebar(false);
-      }
-    };
-    window.addEventListener("resize", handleToggleIssueDetailSidebar);
-    handleToggleIssueDetailSidebar();
-    return () => window.removeEventListener("resize", handleToggleIssueDetailSidebar);
-  }, [issueDetailSidebarCollapsed, toggleIssueDetailSidebar]);
+    if (data) {
+      redirect(`/${workspaceSlug}/browse/${data.project_identifier}-${data.sequence_id}`);
+    }
+  }, [workspaceSlug, data]);
 
   return (
-    <>
-      <PageHead title={pageTitle} />
+    <div className="flex items-center justify-center size-full">
       {error ? (
         <EmptyState
           image={resolvedTheme === "dark" ? emptyIssueDark : emptyIssueLight}
-          title="Issue does not exist"
-          description="The issue you are looking for does not exist, has been archived, or has been deleted."
+          title={t("issue.empty_state.issue_detail.title")}
+          description={t("issue.empty_state.issue_detail.description")}
           primaryButton={{
-            text: "View other issues",
-            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
+            text: t("issue.empty_state.issue_detail.primary_button.text"),
+            onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues/`),
           }}
         />
-      ) : issueLoader ? (
-        <Loader className="flex h-full gap-5 p-5">
-          <div className="basis-2/3 space-y-2">
-            <Loader.Item height="30px" width="40%" />
-            <Loader.Item height="15px" width="60%" />
-            <Loader.Item height="15px" width="60%" />
-            <Loader.Item height="15px" width="40%" />
-          </div>
-          <div className="basis-1/3 space-y-3">
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-            <Loader.Item height="30px" />
-          </div>
-        </Loader>
+      ) : isLoading ? (
+        <>
+          <LogoSpinner />
+        </>
       ) : (
-        workspaceSlug &&
-        projectId &&
-        issueId && (
-          <IssueDetailRoot
-            workspaceSlug={workspaceSlug.toString()}
-            projectId={projectId.toString()}
-            issueId={issueId.toString()}
-          />
-        )
+        <></>
       )}
-    </>
+    </div>
   );
 });
 
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
deleted file mode 100644
index 8bb1f0693..000000000
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-"use client";
-
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-// ui
-import { Breadcrumbs, LayersIcon, Header } from "@plane/ui";
-// components
-import { BreadcrumbLink, Logo } from "@/components/common";
-import { IssueDetailQuickActions } from "@/components/issues";
-// hooks
-import { useIssueDetail, useProject } from "@/hooks/store";
-import { useAppRouter } from "@/hooks/use-app-router";
-
-export const ProjectIssueDetailsHeader = observer(() => {
-  // router
-  const router = useAppRouter();
-  const { workspaceSlug, projectId, issueId } = useParams();
-  // store hooks
-  const { currentProjectDetails, loader } = useProject();
-  const {
-    issue: { getIssueById },
-  } = useIssueDetail();
-  // derived values
-  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
-
-  return (
-    <Header>
-      <Header.LeftItem>
-        <div>
-          <Breadcrumbs onBack={router.back} isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
-
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  href={`/${workspaceSlug}/projects/${projectId}/issues`}
-                  label="Issues"
-                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
-                />
-              }
-            />
-
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={
-                    currentProjectDetails && issueDetails
-                      ? `${currentProjectDetails.identifier}-${issueDetails.sequence_id}`
-                      : ""
-                  }
-                />
-              }
-            />
-          </Breadcrumbs>
-        </div>
-      </Header.LeftItem>
-      <Header.RightItem>
-        <IssueDetailQuickActions
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-          issueId={issueId.toString()}
-        />
-      </Header.RightItem>
-    </Header>
-  );
-});
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
index 1b1cffcc6..c3aacaebb 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
@@ -1,130 +1,3 @@
-"use client";
+import { IssuesHeader } from "@/plane-web/components/issues";
 
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-// icons
-import { Briefcase, Circle, ExternalLink } from "lucide-react";
-// ui
-import { Breadcrumbs, Button, LayersIcon, Tooltip, Header } from "@plane/ui";
-// components
-import { BreadcrumbLink, CountChip, Logo } from "@/components/common";
-// constants
-import HeaderFilters from "@/components/issues/filters";
-import { EIssuesStoreType } from "@/constants/issue";
-// helpers
-import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper";
-// hooks
-import { useEventTracker, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
-import { useIssues } from "@/hooks/store/use-issues";
-import { useAppRouter } from "@/hooks/use-app-router";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-
-export const ProjectIssuesHeader = observer(() => {
-  // router
-  const router = useAppRouter();
-  const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
-  // store hooks
-  const {
-    issues: { getGroupIssueCount },
-  } = useIssues(EIssuesStoreType.PROJECT);
-
-  const { currentProjectDetails, loader } = useProject();
-
-  const { toggleCreateIssueModal } = useCommandPalette();
-  const { setTrackElement } = useEventTracker();
-  const { allowPermissions } = useUserPermissions();
-  const { isMobile } = usePlatformOS();
-
-  const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? 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}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails ? (
-                      currentProjectDetails && (
-                        <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                          <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                        </span>
-                      )
-                    ) : (
-                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                        <Briefcase className="h-4 w-4" />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
-
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink label="Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />}
-            />
-          </Breadcrumbs>
-          {issuesCount && issuesCount > 0 ? (
-            <Tooltip
-              isMobile={isMobile}
-              tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"} in this project`}
-              position="bottom"
-            >
-              <CountChip count={issuesCount} />
-            </Tooltip>
-          ) : null}
-        </div>
-        {currentProjectDetails?.anchor ? (
-          <a
-            href={publishedURL}
-            className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
-            Public
-            <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
-          </a>
-        ) : (
-          <></>
-        )}
-      </Header.LeftItem>
-      <Header.RightItem>
-        <div className="hidden gap-3 md:flex">
-          <HeaderFilters
-            projectId={projectId}
-            currentProjectDetails={currentProjectDetails}
-            workspaceSlug={workspaceSlug}
-            canUserCreateIssue={canUserCreateIssue}
-          />
-        </div>
-        {canUserCreateIssue ? (
-          <Button
-            onClick={() => {
-              setTrackElement("Project issues page");
-              toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-            }}
-            size="sm"
-          >
-            <div className="hidden sm:block">Add</div> Issue
-          </Button>
-        ) : (
-          <></>
-        )}
-      </Header.RightItem>
-    </Header>
-  );
-});
+export const ProjectIssuesHeader = () => <IssuesHeader />;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
index 025c9fab0..6b86cd88d 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@@ -5,31 +5,40 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+// plane constants
+import {
+  EIssueLayoutTypes,
+  EIssueFilterType,
+  EIssuesStoreType,
+  ISSUE_LAYOUTS,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+} from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
-import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues/issue-layouts";
-// constants
 import {
-  EIssueFilterType,
-  EIssueLayoutTypes,
-  EIssuesStoreType,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-  ISSUE_LAYOUTS,
-} from "@/constants/issue";
+  DisplayFiltersSelection,
+  FilterSelection,
+  FiltersDropdown,
+  IssueLayoutIcon,
+} from "@/components/issues/issue-layouts";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
 
 export const ProjectIssuesMobileHeader = observer(() => {
+  // i18n
+  const { t } = useTranslation();
   const layouts = [
-    { key: "list", title: "List", icon: List },
-    { key: "kanban", title: "Board", icon: Kanban },
-    { key: "calendar", title: "Calendar", icon: Calendar },
+    { key: "list", titleTranslationKey: "issue.layouts.list", icon: List },
+    { key: "kanban", titleTranslationKey: "issue.layouts.kanban", icon: Kanban },
+    { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: Calendar },
   ];
   const [analyticsModal, setAnalyticsModal] = useState(false);
   const { workspaceSlug, projectId } = useParams() as {
@@ -108,7 +117,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
           placement="bottom-start"
           customButton={
             <div className="flex flex-start text-sm text-custom-text-200">
-              Layout
+              {t("common.layout")}
               <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
             </div>
           }
@@ -123,18 +132,18 @@ export const ProjectIssuesMobileHeader = observer(() => {
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="h-3 w-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
+              <div className="text-custom-text-300">{t(layout.titleTranslationKey)}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
         <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
-            title="Filters"
+            title={t("common.filters")}
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-sm text-custom-text-200">
-                Filters
+                {t("common.filters")}
                 <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
               </span>
             }
@@ -146,7 +155,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
               layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
               }
               labels={projectLabels}
               memberIds={projectMemberIds ?? undefined}
@@ -158,18 +167,18 @@ export const ProjectIssuesMobileHeader = observer(() => {
         </div>
         <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
-            title="Display"
+            title={t("common.display")}
             placement="bottom-end"
             menuButton={
               <span className="flex items-center text-sm text-custom-text-200">
-                Display
+                {t("common.display")}
                 <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
               </span>
             }
           >
             <DisplayFiltersSelection
               layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
               }
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
@@ -185,7 +194,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
           onClick={() => setAnalyticsModal(true)}
           className="flex flex-grow justify-center border-l border-custom-border-200 text-sm text-custom-text-200"
         >
-          Analytics
+          {t("common.analytics")}
         </button>
       </div>
     </>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
index 7ea73bb1c..6b83f367b 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
@@ -3,6 +3,8 @@
 import { observer } from "mobx-react";
 import Head from "next/head";
 import { useParams } from "next/navigation";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // components
 import { PageHead } from "@/components/core";
 import { ProjectLayoutRoot } from "@/components/issues";
@@ -11,6 +13,8 @@ import { useProject } from "@/hooks/store";
 
 const ProjectIssuesPage = observer(() => {
   const { projectId } = useParams();
+  // i18n
+  const { t } = useTranslation();
   // store
   const { getProjectById } = useProject();
 
@@ -20,13 +24,15 @@ const ProjectIssuesPage = observer(() => {
 
   // derived values
   const project = getProjectById(projectId.toString());
-  const pageTitle = project?.name ? `${project?.name} - Issues` : undefined;
+  const pageTitle = project?.name ? `${project?.name} - ${t("issue.label", { count: 2 })}` : undefined; // Count is for pluralization
 
   return (
     <>
       <PageHead title={pageTitle} />
       <Head>
-        <title>{project?.name} - Issues</title>
+        <title>
+          {project?.name} - {t("issue.label", { count: 2 })}
+        </title>
       </Head>
       <div className="h-full w-full">
         <ProjectLayoutRoot />
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 38c2f4453..3c5eb7cc7 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -6,21 +6,23 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 // icons
 import { ArrowRight, PanelRight } from "lucide-react";
+// plane constants
+import {
+  EIssueLayoutTypes,
+  EIssuesStoreType,
+  EIssueFilterType,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, Header } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
-// constants
-import {
-  EIssuesStoreType,
-  EIssueFilterType,
-  EIssueLayoutTypes,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-} from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { isIssueFilterActive } from "@/helpers/filter.helper";
@@ -41,7 +43,8 @@ import { useAppRouter } from "@/hooks/use-app-router";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 
 const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
   // router
@@ -163,22 +166,13 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
       />
       <Header>
         <Header.LeftItem>
-          <Breadcrumbs onBack={router.back} isLoading={loader}>
+          <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
                 <span>
                   <span className="hidden md:block">
-                    <BreadcrumbLink
-                      label={currentProjectDetails?.name ?? "Project"}
-                      icon={
-                        currentProjectDetails && (
-                          <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                            <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                          </span>
-                        )
-                      }
-                    />
+                    <ProjectBreadcrumb />
                   </span>
                   <Link
                     href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/issues`}
@@ -212,7 +206,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                           <Tooltip
                             isMobile={isMobile}
                             tooltipContent={`There are ${issuesCount} ${
-                              issuesCount > 1 ? "issues" : "issue"
+                              issuesCount > 1 ? "work items" : "work item"
                             } in this module`}
                             position="bottom"
                           >
@@ -257,7 +251,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                 displayFilters={issueFilters?.displayFilters ?? {}}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
                 layoutDisplayFiltersOptions={
-                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
                 }
                 labels={projectLabels}
                 memberIds={projectMemberIds ?? undefined}
@@ -269,7 +263,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             <FiltersDropdown title="Display" placement="bottom-end">
               <DisplayFiltersSelection
                 layoutDisplayFiltersOptions={
-                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
                 }
                 displayFilters={issueFilters?.displayFilters ?? {}}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
@@ -295,12 +289,12 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
               <Button
                 className="hidden sm:flex"
                 onClick={() => {
-                  setTrackElement("Module issues page");
+                  setTrackElement("Module work items page");
                   toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
                 }}
                 size="sm"
               >
-                Add issue
+                Add work item
               </Button>
             </>
           ) : (
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
index 0edfa2b5a..1f000bae2 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
@@ -5,21 +5,28 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
+// plane constants
+import {
+  EIssueLayoutTypes,
+  EIssueFilterType,
+  EIssuesStoreType,
+  ISSUE_LAYOUTS,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+} from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
 import { CustomMenu } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
-import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
-// constants
 import {
-  EIssueFilterType,
-  EIssueLayoutTypes,
-  EIssuesStoreType,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-  ISSUE_LAYOUTS,
-} from "@/constants/issue";
+  DisplayFiltersSelection,
+  FilterSelection,
+  FiltersDropdown,
+  IssueLayoutIcon,
+} from "@/components/issues/issue-layouts";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
@@ -29,10 +36,11 @@ export const ModuleIssuesMobileHeader = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
   const { currentProjectDetails } = useProject();
   const { getModuleById } = useModule();
+  const { t } = useTranslation();
   const layouts = [
-    { key: "list", title: "List", icon: List },
-    { key: "kanban", title: "Board", icon: Kanban },
-    { key: "calendar", title: "Calendar", icon: Calendar },
+    { key: "list", i18n_title: "issue.layouts.list", icon: List },
+    { key: "kanban", i18n_title: "issue.layouts.kanban", icon: Kanban },
+    { key: "calendar", i18n_title: "issue.layouts.calendar", icon: Calendar },
   ];
   const { workspaceSlug, projectId, moduleId } = useParams() as {
     workspaceSlug: string;
@@ -120,8 +128,8 @@ export const ModuleIssuesMobileHeader = observer(() => {
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="h-3 w-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <IssueLayoutIcon layout={ISSUE_LAYOUTS[index].key} className="h-3 w-3" />
+              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
             </CustomMenu.MenuItem>
           ))}
         </CustomMenu>
@@ -143,7 +151,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
               layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
               }
               labels={projectLabels}
               memberIds={projectMemberIds ?? undefined}
@@ -166,7 +174,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
           >
             <DisplayFiltersSelection
               layoutDisplayFiltersOptions={
-                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
               }
               displayFilters={issueFilters?.displayFilters ?? {}}
               handleDisplayFiltersUpdate={handleDisplayFilters}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
index 6da84e56a..58194fbf3 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@@ -1,28 +1,32 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Breadcrumbs, Button, DiceIcon, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 import { ModuleViewHeader } from "@/components/modules";
 // hooks
 import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 // constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const ModulesListHeader: React.FC = observer(() => {
   // router
   const router = useAppRouter();
-  const { workspaceSlug } = useParams();
   // store hooks
   const { toggleCreateModuleModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
 
-  const { currentProjectDetails, loader } = useProject();
+  const { loader } = useProject();
+
+  const { t } = useTranslation();
 
   // auth
   const canUserCreateModule = allowPermissions(
@@ -34,26 +38,14 @@ export const ModulesListHeader: React.FC = observer(() => {
     <Header>
       <Header.LeftItem>
         <div>
-          <Breadcrumbs onBack={router.back} isLoading={loader}>
+          <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+            <ProjectBreadcrumb />
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
+                <BreadcrumbLink label={t("modules")} icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />
               }
             />
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={<BreadcrumbLink label="Modules" icon={<DiceIcon className="h-4 w-4 text-custom-text-300" />} />}
-            />
           </Breadcrumbs>
         </div>
       </Header.LeftItem>
@@ -68,7 +60,8 @@ export const ModulesListHeader: React.FC = observer(() => {
               toggleCreateModuleModal(true);
             }}
           >
-            <div className="hidden sm:block">Add</div> Module
+            <div className="sm:hidden block">{t("add")}</div>
+            <div className="hidden sm:block">{t("project_module.add_module")}</div>
           </Button>
         ) : (
           <></>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
index 12301c9d4..629dca36a 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
@@ -2,13 +2,16 @@
 
 import { observer } from "mobx-react";
 import { ChevronDown } from "lucide-react";
+import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { CustomMenu, Row } from "@plane/ui";
-import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
+import { ModuleLayoutIcon } from "@/components/modules";
 import { useModuleFilter, useProject } from "@/hooks/store";
 
 export const ModulesListMobileHeader = observer(() => {
   const { currentProjectDetails } = useProject();
   const { updateDisplayFilters } = useModuleFilter();
+  const { t } = useTranslation();
 
   return (
     <div className="flex justify-start md:hidden">
@@ -34,8 +37,8 @@ export const ModulesListMobileHeader = observer(() => {
               }}
               className="flex items-center gap-2"
             >
-              <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <ModuleLayoutIcon layoutType={layout.key} />
+              <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
             </CustomMenu.MenuItem>
           );
         })}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
index 9417016e3..572cb3862 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
@@ -4,27 +4,36 @@ import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
+import { EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TModuleFilters } from "@plane/types";
 // components
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { ModuleAppliedFiltersList, ModulesListView } from "@/components/modules";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useModuleFilter, useProject } from "@/hooks/store";
+import { useModuleFilter, useProject, useUserPermissions } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const ProjectModulesPage = observer(() => {
+  // router
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // store
   const { getProjectById, currentProjectDetails } = useProject();
   const { currentProjectFilters, currentProjectDisplayFilters, clearAllFilters, updateFilters, updateDisplayFilters } =
     useModuleFilter();
+  const { allowPermissions } = useUserPermissions();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Modules` : undefined;
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/modules" });
 
   const handleRemoveFilter = useCallback(
     (key: keyof TModuleFilters, value: string | null) => {
@@ -45,9 +54,17 @@ const ProjectModulesPage = observer(() => {
   if (currentProjectDetails?.module_view === false)
     return (
       <div className="flex items-center justify-center h-full w-full">
-        <EmptyState
-          type={EmptyStateType.DISABLED_PROJECT_MODULE}
-          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.module.title")}
+          description={t("disabled_project.empty_state.module.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.module.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/projects/${projectId}/settings/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
         />
       </div>
     );
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
index 4d3f395ea..2e45b9ba3 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
@@ -1,34 +1,64 @@
 "use client";
 
+import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// ui
+// plane types
+import { TSearchEntityRequestPayload, TWebhookConnectionQueryParams } from "@plane/types";
+import { EFileAssetType } from "@plane/types/src/enums";
+// plane ui
 import { getButtonStyling } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { LogoSpinner } from "@/components/common";
 import { PageHead } from "@/components/core";
 import { IssuePeekOverview } from "@/components/issues";
-import { PageRoot } from "@/components/pages";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { PageRoot, TPageRootConfig, TPageRootHandlers } from "@/components/pages";
 // hooks
-import { usePage, useProjectPages } from "@/hooks/store";
+import { useEditorConfig } from "@/hooks/editor";
+import { useEditorAsset, useWorkspace } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+// services
+import { ProjectPageService, ProjectPageVersionService } from "@/services/page";
+const workspaceService = new WorkspaceService();
+const projectPageService = new ProjectPageService();
+const projectPageVersionService = new ProjectPageVersionService();
 
 const PageDetailsPage = observer(() => {
   const { workspaceSlug, projectId, pageId } = useParams();
-
   // store hooks
-  const { getPageById } = useProjectPages();
-  const page = usePage(pageId?.toString() ?? "");
-  const { id, name } = page;
-
+  const { createPage, fetchPageDetails } = usePageStore(EPageStoreType.PROJECT);
+  const page = usePage({
+    pageId: pageId?.toString() ?? "",
+    storeType: EPageStoreType.PROJECT,
+  });
+  const { getWorkspaceBySlug } = useWorkspace();
+  const { uploadEditorAsset } = useEditorAsset();
+  // derived values
+  const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
+  const { canCurrentUserAccessPage, id, name, updateDescription } = page ?? {};
+  // entity search handler
+  const fetchEntityCallback = useCallback(
+    async (payload: TSearchEntityRequestPayload) =>
+      await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+        ...payload,
+        project_id: projectId?.toString() ?? "",
+      }),
+    [projectId, workspaceSlug]
+  );
+  // editor config
+  const { getEditorFileHandlers } = useEditorConfig();
   // fetch page details
   const { error: pageDetailsError } = useSWR(
     workspaceSlug && projectId && pageId ? `PAGE_DETAILS_${pageId}` : null,
     workspaceSlug && projectId && pageId
-      ? () => getPageById(workspaceSlug?.toString(), projectId?.toString(), pageId.toString())
+      ? () => fetchPageDetails(workspaceSlug?.toString(), projectId?.toString(), pageId.toString())
       : null,
     {
       revalidateIfStale: true,
@@ -36,6 +66,66 @@ const PageDetailsPage = observer(() => {
       revalidateOnReconnect: true,
     }
   );
+  // page root handlers
+  const pageRootHandlers: TPageRootHandlers = useMemo(
+    () => ({
+      create: createPage,
+      fetchAllVersions: async (pageId) => {
+        if (!workspaceSlug || !projectId) return;
+        return await projectPageVersionService.fetchAllVersions(workspaceSlug.toString(), projectId.toString(), pageId);
+      },
+      fetchDescriptionBinary: async () => {
+        if (!workspaceSlug || !projectId || !id) return;
+        return await projectPageService.fetchDescriptionBinary(workspaceSlug.toString(), projectId.toString(), id);
+      },
+      fetchEntity: fetchEntityCallback,
+      fetchVersionDetails: async (pageId, versionId) => {
+        if (!workspaceSlug || !projectId) return;
+        return await projectPageVersionService.fetchVersionById(
+          workspaceSlug.toString(),
+          projectId.toString(),
+          pageId,
+          versionId
+        );
+      },
+      getRedirectionLink: (pageId) => `/${workspaceSlug}/projects/${projectId}/pages/${pageId}`,
+      updateDescription: updateDescription ?? (async () => {}),
+    }),
+    [createPage, fetchEntityCallback, id, projectId, updateDescription, workspaceSlug]
+  );
+  // page root config
+  const pageRootConfig: TPageRootConfig = useMemo(
+    () => ({
+      fileHandler: getEditorFileHandlers({
+        projectId: projectId?.toString() ?? "",
+        uploadFile: async (blockId, file) => {
+          const { asset_id } = await uploadEditorAsset({
+            blockId,
+            data: {
+              entity_identifier: id ?? "",
+              entity_type: EFileAssetType.PAGE_DESCRIPTION,
+            },
+            file,
+            projectId: projectId?.toString() ?? "",
+            workspaceSlug: workspaceSlug?.toString() ?? "",
+          });
+          return asset_id;
+        },
+        workspaceId,
+        workspaceSlug: workspaceSlug?.toString() ?? "",
+      }),
+    }),
+    [getEditorFileHandlers, id, projectId, uploadEditorAsset, workspaceId, workspaceSlug]
+  );
+
+  const webhookConnectionParams: TWebhookConnectionQueryParams = useMemo(
+    () => ({
+      documentType: "project_page",
+      projectId: projectId?.toString() ?? "",
+      workspaceSlug: workspaceSlug?.toString() ?? "",
+    }),
+    [projectId, workspaceSlug]
+  );
 
   if ((!page || !id) && !pageDetailsError)
     return (
@@ -44,7 +134,7 @@ const PageDetailsPage = observer(() => {
       </div>
     );
 
-  if (pageDetailsError)
+  if (pageDetailsError || !canCurrentUserAccessPage)
     return (
       <div className="h-full w-full flex flex-col items-center justify-center">
         <h3 className="text-lg font-semibold text-center">Page not found</h3>
@@ -60,12 +150,21 @@ const PageDetailsPage = observer(() => {
       </div>
     );
 
+  if (!page) return null;
+
   return (
     <>
       <PageHead title={name} />
       <div className="flex h-full flex-col justify-between">
         <div className="relative h-full w-full flex-shrink-0 flex flex-col overflow-hidden">
-          <PageRoot page={page} projectId={projectId.toString()} workspaceSlug={workspaceSlug.toString()} />
+          <PageRoot
+            config={pageRootConfig}
+            handlers={pageRootHandlers}
+            page={page}
+            storeType={EPageStoreType.PROJECT}
+            webhookConnectionParams={webhookConnectionParams}
+            workspaceSlug={workspaceSlug?.toString() ?? ""}
+          />
           <IssuePeekOverview />
         </div>
       </div>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index 1c3d96b57..f8292f442 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@@ -15,11 +15,13 @@ import { PageEditInformationPopover } from "@/components/pages";
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getPageName } from "@/helpers/page.helper";
 // hooks
-import { usePage, useProject, useUser, useUserPermissions } from "@/hooks/store";
+import { useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages";
-import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
+// plane web hooks
+import { EPageStoreType, usePage } from "@/plane-web/hooks/store";
 
 export interface IPagesHeaderProps {
   showButton?: boolean;
@@ -32,18 +34,16 @@ export const PageDetailsHeader = observer(() => {
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const page = usePage(pageId?.toString() ?? "");
-  const { name, logo_props, updatePageLogo, owned_by } = page;
-  const { allowPermissions } = useUserPermissions();
-  const { data: currentUser } = useUser();
+  const page = usePage({
+    pageId: pageId?.toString() ?? "",
+    storeType: EPageStoreType.PROJECT,
+  });
+  if (!page) return null;
+  // derived values
+  const { name, logo_props, updatePageLogo, isContentEditable } = page;
   // use platform
   const { isMobile } = usePlatformOS();
 
-  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
-  const isOwner = owned_by === currentUser?.id;
-
-  const isEditable = isAdmin || isOwner;
-
   const handlePageLogoUpdate = async (data: TLogoProps) => {
     if (data) {
       updatePageLogo(data)
@@ -70,22 +70,13 @@ export const PageDetailsHeader = observer(() => {
     <Header>
       <Header.LeftItem>
         <div>
-          <Breadcrumbs isLoading={loader}>
+          <Breadcrumbs isLoading={loader === "init-loader"}>
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={
                 <span>
                   <span className="hidden md:block">
-                    <BreadcrumbLink
-                      label={currentProjectDetails?.name ?? "Project"}
-                      icon={
-                        currentProjectDetails && (
-                          <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                            <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                          </span>
-                        )
-                      }
-                    />
+                    <ProjectBreadcrumb />
                   </span>
                   <span className="md:hidden">
                     <BreadcrumbLink
@@ -151,7 +142,7 @@ export const PageDetailsHeader = observer(() => {
                               ? EmojiIconPickerTypes.EMOJI
                               : EmojiIconPickerTypes.ICON
                           }
-                          disabled={!isEditable}
+                          disabled={!isContentEditable}
                         />
                       </div>
                       <Tooltip tooltipContent={pageTitle} position="bottom" isMobile={isMobile}>
@@ -169,7 +160,7 @@ export const PageDetailsHeader = observer(() => {
       </Header.LeftItem>
       <Header.RightItem>
         <PageEditInformationPopover page={page} />
-        <PageDetailsHeaderExtraActions />
+        <PageDetailsHeaderExtraActions page={page} />
       </Header.RightItem>
     </Header>
   );
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
index d3646b31b..ca15df8f5 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
@@ -4,16 +4,20 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { FileText } from "lucide-react";
+// constants
+import { EPageAccess } from "@plane/constants";
 // plane types
 import { TPage } from "@plane/types";
 // plane ui
 import { Breadcrumbs, Button, Header, setToast, TOAST_TYPE } from "@plane/ui";
 // helpers
-import { BreadcrumbLink, Logo } from "@/components/common";
-// constants
-import { EPageAccess } from "@/constants/page";
+import { BreadcrumbLink } from "@/components/common";
 // hooks
-import { useEventTracker, useProject, useProjectPages } from "@/hooks/store";
+import { useEventTracker, useProject } from "@/hooks/store";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 
 export const PagesListHeader = observer(() => {
   // states
@@ -25,7 +29,7 @@ export const PagesListHeader = observer(() => {
   const pageType = searchParams.get("type");
   // store hooks
   const { currentProjectDetails, loader } = useProject();
-  const { canCurrentUserCreatePage, createPage } = useProjectPages();
+  const { canCurrentUserCreatePage, createPage } = usePageStore(EPageStoreType.PROJECT);
   const { setTrackElement } = useEventTracker();
   // handle page create
   const handleCreatePage = async () => {
@@ -55,22 +59,8 @@ export const PagesListHeader = observer(() => {
     <Header>
       <Header.LeftItem>
         <div>
-          <Breadcrumbs isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
+          <Breadcrumbs isLoading={loader === "init-loader"}>
+            <ProjectBreadcrumb />
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={<BreadcrumbLink label="Pages" icon={<FileText className="h-4 w-4 text-custom-text-300" />} />}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
index 4171e1f33..56d89d7f4 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
@@ -2,27 +2,37 @@
 
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
-// types
+// plane imports
+import { EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { PagesListRoot, PagesListView } from "@/components/pages";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // hooks
-import { useProject } from "@/hooks/store";
+import { useProject, useUserPermissions } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 
 const ProjectPagesPage = observer(() => {
   // router
+  const router = useAppRouter();
   const searchParams = useSearchParams();
   const type = searchParams.get("type");
   const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { getProjectById, currentProjectDetails } = useProject();
+  const { allowPermissions } = useUserPermissions();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Pages` : undefined;
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/pages" });
 
   const currentPageType = (): TPageNavigationTabs => {
     const pageType = type?.toString();
@@ -37,9 +47,17 @@ const ProjectPagesPage = observer(() => {
   if (currentProjectDetails?.page_view === false)
     return (
       <div className="flex items-center justify-center h-full w-full">
-        <EmptyState
-          type={EmptyStateType.DISABLED_PROJECT_PAGE}
-          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.page.title")}
+          description={t("disabled_project.empty_state.page.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.page.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/projects/${projectId}/settings/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
         />
       </div>
     );
@@ -47,15 +65,12 @@ const ProjectPagesPage = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <PagesListView
-        workspaceSlug={workspaceSlug.toString()}
-        projectId={projectId.toString()}
         pageType={currentPageType()}
+        projectId={projectId.toString()}
+        storeType={EPageStoreType.PROJECT}
+        workspaceSlug={workspaceSlug.toString()}
       >
-        <PagesListRoot
-          pageType={currentPageType()}
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-        />
+        <PagesListRoot pageType={currentPageType()} storeType={EPageStoreType.PROJECT} />
       </PagesListView>
     </>
   );
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/automations/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/automations/page.tsx
index 141cc39fe..5fc536d91 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/automations/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/automations/page.tsx
@@ -3,6 +3,8 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IProject } from "@plane/types";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
@@ -12,7 +14,6 @@ import { AutoArchiveAutomation, AutoCloseAutomation } from "@/components/automat
 import { PageHead } from "@/components/core";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const AutomationSettingsPage = observer(() => {
   // router
@@ -21,6 +22,8 @@ const AutomationSettingsPage = observer(() => {
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
   const { currentProjectDetails: projectDetails, updateProject } = useProject();
 
+  const { t } = useTranslation();
+
   // derived values
   const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
 
@@ -48,7 +51,7 @@ const AutomationSettingsPage = observer(() => {
       <PageHead title={pageTitle} />
       <section className={`w-full overflow-y-auto ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
         <div className="flex flex-col items-start border-b border-custom-border-100 pb-3.5">
-          <h3 className="text-xl font-medium leading-normal">Automations</h3>
+          <h3 className="text-xl font-medium leading-normal">{t("project_settings.automations.label")}</h3>
         </div>
         <AutoArchiveAutomation handleChange={handleChange} />
         <AutoCloseAutomation handleChange={handleChange} />
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/estimates/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/estimates/page.tsx
index 14f770767..0a19713e8 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/estimates/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/estimates/page.tsx
@@ -3,12 +3,12 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { EstimateRoot } from "@/components/estimates";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const EstimatesSettingsPage = observer(() => {
   const { workspaceSlug, projectId } = useParams();
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/features/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/features/page.tsx
index 05bde8c9e..23aa8ad45 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/features/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/features/page.tsx
@@ -3,12 +3,12 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectFeaturesList } from "@/components/project";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const FeaturesSettingsPage = observer(() => {
   const { workspaceSlug, projectId } = useParams();
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
index 404a11f27..6fa36db34 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
@@ -5,16 +5,17 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
 import { Settings } from "lucide-react";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs, CustomMenu, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
-// constants
+import { BreadcrumbLink } from "@/components/common";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-// plane web constants
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 import { PROJECT_SETTINGS_LINKS } from "@/plane-web/constants/project";
-import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const ProjectSettingHeader: FC = observer(() => {
   // router
@@ -22,29 +23,17 @@ export const ProjectSettingHeader: FC = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { allowPermissions } = useUserPermissions();
-  const { currentProjectDetails, loader } = useProject();
+  const { loader } = useProject();
+
+  const { t } = useTranslation();
 
   return (
     <Header>
       <Header.LeftItem>
         <div>
           <div className="z-50">
-            <Breadcrumbs onBack={router.back} isLoading={loader}>
-              <Breadcrumbs.BreadcrumbItem
-                type="text"
-                link={
-                  <BreadcrumbLink
-                    label={currentProjectDetails?.name ?? "Project"}
-                    icon={
-                      currentProjectDetails && (
-                        <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                          <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                        </span>
-                      )
-                    }
-                  />
-                }
-              />
+            <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+              <ProjectBreadcrumb />
               <div className="hidden sm:hidden md:block lg:block">
                 <Breadcrumbs.BreadcrumbItem
                   type="text"
@@ -79,7 +68,7 @@ export const ProjectSettingHeader: FC = observer(() => {
                   key={item.key}
                   onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}${item.href}`)}
                 >
-                  {item.label}
+                  {t(item.i18n_label)}
                 </CustomMenu.MenuItem>
               )
           )}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
index 2705ff490..17a466a80 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
@@ -5,12 +5,12 @@ 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";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectSettingsLabelList } from "@/components/labels";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const LabelsSettingsPage = observer(() => {
   // store hooks
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/members/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/members/page.tsx
index 0d05187b1..565e18754 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/members/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/members/page.tsx
@@ -2,12 +2,12 @@
 
 import { observer } from "mobx-react";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectMemberList, ProjectSettingsMemberDefaults } from "@/components/project";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const MembersSettingsPage = observer(() => {
   // store
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/page.tsx
index e21532c64..96ff1bcc3 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/page.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { PageHead } from "@/components/core";
 import {
   ArchiveRestoreProjectModal,
@@ -16,7 +17,6 @@ import {
 } from "@/components/project";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const GeneralSettingsPage = observer(() => {
   // states
@@ -43,8 +43,6 @@ const GeneralSettingsPage = observer(() => {
   );
 
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - General Settings` : undefined;
-  // const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
-  // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
 
   return (
     <>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
index 7a352ce0f..7bb1984c8 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
@@ -5,6 +5,8 @@ import range from "lodash/range";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
+import { EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Loader } from "@plane/ui";
 // components
@@ -13,7 +15,6 @@ import { SidebarNavItem } from "@/components/sidebar";
 import { useUserPermissions } from "@/hooks/store";
 // plane web constants
 import { PROJECT_SETTINGS_LINKS } from "@/plane-web/constants/project";
-import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const ProjectSettingsSidebar = observer(() => {
   const { workspaceSlug, projectId } = useParams();
@@ -21,6 +22,8 @@ export const ProjectSettingsSidebar = observer(() => {
   // mobx store
   const { allowPermissions, projectUserInfo } = useUserPermissions();
 
+  const { t } = useTranslation();
+
   // derived values
   const currentProjectRole = projectUserInfo?.[workspaceSlug?.toString()]?.[projectId?.toString()]?.role;
 
@@ -58,7 +61,7 @@ export const ProjectSettingsSidebar = observer(() => {
                     isActive={link.highlight(pathname, `/${workspaceSlug}/projects/${projectId}`)}
                     className="text-sm font-medium px-4 py-2"
                   >
-                    {link.label}
+                    {t(link.i18n_label)}
                   </SidebarNavItem>
                 </Link>
               )
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx
index af9bf5618..54fca1c08 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx
@@ -2,13 +2,14 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import { ProjectStateRoot } from "@/components/project-states";
 // hook
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const StatesSettingsPage = observer(() => {
   const { workspaceSlug, projectId } = useParams();
@@ -16,6 +17,8 @@ const StatesSettingsPage = observer(() => {
   const { currentProjectDetails } = useProject();
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
 
+  const { t } = useTranslation();
+
   // derived values
   const pageTitle = currentProjectDetails?.name ? `${currentProjectDetails?.name} - States` : undefined;
   // derived values
@@ -32,7 +35,7 @@ const StatesSettingsPage = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <div className="flex items-center border-b border-custom-border-100">
-        <h3 className="text-xl font-medium">States</h3>
+        <h3 className="text-xl font-medium">{t("common.states")}</h3>
       </div>
       {workspaceSlug && projectId && (
         <ProjectStateRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index 6fd44adfc..cc9a8fff6 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -1,10 +1,20 @@
 "use client";
 
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { Layers, Lock } from "lucide-react";
+// plane constants
+import {
+  EIssueLayoutTypes,
+  EIssueFilterType,
+  EIssuesStoreType,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  EViewAccess,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
@@ -13,16 +23,9 @@ import { Breadcrumbs, Button, CustomMenu, Tooltip, Header } from "@plane/ui";
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
 // constants
-import {
-  EIssuesStoreType,
-  EIssueFilterType,
-  EIssueLayoutTypes,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-} from "@/constants/issue";
-import { EViewAccess } from "@/constants/views";
+import { ViewQuickActions } from "@/components/views";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
-import { getPublishViewLink } from "@/helpers/project-views.helpers";
 import { truncateText } from "@/helpers/string.helper";
 // hooks
 import {
@@ -36,9 +39,12 @@ import {
   useProjectView,
   useUserPermissions,
 } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 
 export const ProjectViewIssuesHeader: React.FC = observer(() => {
+  // refs
+  const parentRef = useRef(null);
   // router
   const { workspaceSlug, projectId, viewId } = useParams();
   // store hooks
@@ -134,27 +140,14 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.PROJECT
   );
-  const publishLink = getPublishViewLink(viewDetails?.anchor);
+
+  if (!viewDetails) return;
 
   return (
     <Header>
       <Header.LeftItem>
-        <Breadcrumbs isLoading={loader}>
-          <Breadcrumbs.BreadcrumbItem
-            type="text"
-            link={
-              <BreadcrumbLink
-                label={currentProjectDetails?.name ?? "Project"}
-                icon={
-                  currentProjectDetails && (
-                    <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                      <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                    </span>
-                  )
-                }
-              />
-            }
-          />
+        <Breadcrumbs isLoading={loader === "init-loader"}>
+          <ProjectBreadcrumb />
           <Breadcrumbs.BreadcrumbItem
             type="text"
             link={
@@ -218,19 +211,14 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
           <></>
         )}
 
-        {viewDetails?.anchor && publishLink ? (
-          <a
-            href={publishLink}
-            className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded text-xs font-medium flex items-center gap-1.5"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
-            Live
-          </a>
-        ) : (
-          <></>
-        )}
+        <div className="hidden md:block">
+          <ViewQuickActions
+            parentRef={parentRef}
+            projectId={projectId.toString()}
+            view={viewDetails}
+            workspaceSlug={workspaceSlug.toString()}
+          />
+        </div>
       </Header.LeftItem>
       <Header.RightItem>
         {!viewDetails?.is_locked ? (
@@ -259,8 +247,9 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
                 displayFilters={issueFilters?.displayFilters ?? {}}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
                 layoutDisplayFiltersOptions={
-                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
                 }
+                projectId={projectId.toString()}
                 labels={projectLabels}
                 memberIds={projectMemberIds ?? undefined}
                 states={projectStates}
@@ -271,7 +260,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             <FiltersDropdown title="Display" placement="bottom-end">
               <DisplayFiltersSelection
                 layoutDisplayFiltersOptions={
-                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+                  activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined
                 }
                 displayFilters={issueFilters?.displayFilters ?? {}}
                 handleDisplayFiltersUpdate={handleDisplayFilters}
@@ -293,7 +282,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             }}
             size="sm"
           >
-            Add issue
+            Add work item
           </Button>
         ) : (
           <></>
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
index 3cb73a33e..ea9a6ac8a 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
@@ -1,43 +1,28 @@
 "use client";
 
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import { Layers } from "lucide-react";
 // ui
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 import { ViewListHeader } from "@/components/views";
 // hooks
 import { useCommandPalette, useProject } from "@/hooks/store";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 
 export const ProjectViewsHeader = observer(() => {
-  // router
-  const { workspaceSlug } = useParams();
   // store hooks
   const { toggleCreateViewModal } = useCommandPalette();
-  const { currentProjectDetails, loader } = useProject();
+  const { loader } = useProject();
 
   return (
     <>
       <Header>
         <Header.LeftItem>
-          <Breadcrumbs isLoading={loader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
+          <Breadcrumbs isLoading={loader === "init-loader"}>
+            <ProjectBreadcrumb />
             <Breadcrumbs.BreadcrumbItem
               type="text"
               link={<BreadcrumbLink label="Views" icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
index 387f6e5b4..d4a3051ec 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
@@ -4,29 +4,37 @@ import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { EUserPermissionsLevel, EUserProjectRoles, EViewAccess } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TViewFilterProps } from "@plane/types";
 import { Header, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { ProjectViewsList } from "@/components/views";
 import { ViewAppliedFiltersList } from "@/components/views/applied-filters";
-import { EmptyStateType } from "@/constants/empty-state";
 // constants
-import { EViewAccess } from "@/constants/views";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useProject, useProjectView } from "@/hooks/store";
+import { useProject, useProjectView, useUserPermissions } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const ProjectViewsPage = observer(() => {
   // router
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // store
   const { getProjectById, currentProjectDetails } = useProject();
   const { filters, updateFilters, clearAllFilters } = useProjectView();
+  const { allowPermissions } = useUserPermissions();
   // derived values
   const project = projectId ? getProjectById(projectId.toString()) : undefined;
   const pageTitle = project?.name ? `${project?.name} - Views` : undefined;
+  const canPerformEmptyStateActions = allowPermissions([EUserProjectRoles.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/disabled-feature/views" });
 
   const handleRemoveFilter = useCallback(
     (key: keyof TViewFilterProps, value: string | EViewAccess | null) => {
@@ -53,9 +61,17 @@ const ProjectViewsPage = observer(() => {
   if (currentProjectDetails?.issue_views_view === false)
     return (
       <div className="flex items-center justify-center h-full w-full">
-        <EmptyState
-          type={EmptyStateType.DISABLED_PROJECT_VIEW}
-          primaryButtonLink={`/${workspaceSlug}/projects/${projectId}/settings/features`}
+        <DetailedEmptyState
+          title={t("disabled_project.empty_state.view.title")}
+          description={t("disabled_project.empty_state.view.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("disabled_project.empty_state.view.primary_button.text"),
+            onClick: () => {
+              router.push(`/${workspaceSlug}/projects/${projectId}/settings/features`);
+            },
+            disabled: !canPerformEmptyStateActions,
+          }}
         />
       </div>
     );
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
index fc2ec0075..8e1d19435 100644
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
@@ -1,11 +1,18 @@
 "use client";
 
 import { ReactNode } from "react";
-// layouts
-import { ProjectAuthWrapper } from "@/layouts/auth-layout";
+import { useParams } from "next/navigation";
+// plane web layouts
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
 
-const ProjectDetailLayout = ({ children }: { children: ReactNode }) => (
-  <ProjectAuthWrapper>{children}</ProjectAuthWrapper>
-);
+const ProjectDetailLayout = ({ children }: { children: ReactNode }) => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  return (
+    <ProjectAuthWrapper workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()}>
+      {children}
+    </ProjectAuthWrapper>
+  );
+};
 
 export default ProjectDetailLayout;
diff --git a/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
index fd2ed9669..21334ff23 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
@@ -4,20 +4,20 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// ui
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
 // component
 import { ApiTokenListItem, CreateApiTokenModal } from "@/components/api-token";
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { APITokenSettingsLoader } from "@/components/ui";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
 // store hooks
 import { useUserPermissions, useWorkspace } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // services
 import { APITokenService } from "@/services/api_token.service";
 
@@ -28,11 +28,14 @@ const ApiTokensPage = observer(() => {
   const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
   // router
   const { workspaceSlug } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { currentWorkspace } = useWorkspace();
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
   // derived values
   const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/api-tokens" });
 
   const { data: tokens } = useSWR(
     workspaceSlug && canPerformWorkspaceAdminActions ? API_TOKENS_LIST(workspaceSlug.toString()) : null,
@@ -40,7 +43,9 @@ const ApiTokensPage = observer(() => {
       workspaceSlug && canPerformWorkspaceAdminActions ? apiTokenService.getApiTokens(workspaceSlug.toString()) : null
   );
 
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - API Tokens` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.api_tokens.title")}`
+    : undefined;
 
   if (workspaceUserInfo && !canPerformWorkspaceAdminActions) {
     return <NotAuthorizedView section="settings" />;
@@ -58,9 +63,9 @@ const ApiTokensPage = observer(() => {
         {tokens.length > 0 ? (
           <>
             <div className="flex items-center justify-between border-b border-custom-border-200 pb-3.5">
-              <h3 className="text-xl font-medium">API tokens</h3>
+              <h3 className="text-xl font-medium">{t("workspace_settings.settings.api_tokens.title")}</h3>
               <Button variant="primary" onClick={() => setIsCreateTokenModalOpen(true)}>
-                Add API token
+                {t("workspace_settings.settings.api_tokens.add_token")}
               </Button>
             </div>
             <div>
@@ -72,13 +77,17 @@ const ApiTokensPage = observer(() => {
         ) : (
           <div className="flex h-full w-full flex-col">
             <div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
-              <h3 className="text-xl font-medium">API tokens</h3>
+              <h3 className="text-xl font-medium">{t("workspace_settings.settings.api_tokens.title")}</h3>
               <Button variant="primary" onClick={() => setIsCreateTokenModalOpen(true)}>
-                Add API token
+                {t("workspace_settings.settings.api_tokens.add_token")}
               </Button>
             </div>
             <div className="h-full w-full flex items-center justify-center">
-              <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS} />
+              <DetailedEmptyState
+                title={t("workspace_settings.empty_state.api_tokens.title")}
+                description={t("workspace_settings.empty_state.api_tokens.description")}
+                assetPath={resolvedPath}
+              />
             </div>
           </div>
         )}
diff --git a/web/app/[workspaceSlug]/(projects)/settings/billing/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/billing/page.tsx
index 03f0cce5e..801b04b37 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/billing/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/billing/page.tsx
@@ -2,13 +2,13 @@
 
 import { observer } from "mobx-react";
 // component
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 // hooks
 import { useUserPermissions, useWorkspace } from "@/hooks/store";
 // plane web components
 import { BillingRoot } from "@/plane-web/components/workspace";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const BillingSettingsPage = observer(() => {
   // store hooks
diff --git a/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
index dc3f3aafc..1b63406de 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
@@ -2,6 +2,8 @@
 
 import { observer } from "mobx-react";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
 import ExportGuide from "@/components/exporter/guide";
@@ -9,19 +11,21 @@ import ExportGuide from "@/components/exporter/guide";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useUserPermissions, useWorkspace } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const ExportsPage = observer(() => {
   // store hooks
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
   const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
 
   // derived values
   const canPerformWorkspaceMemberActions = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.WORKSPACE
   );
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Exports` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.exports.title")}`
+    : undefined;
 
   // if user is not authorized to view this page
   if (workspaceUserInfo && !canPerformWorkspaceMemberActions) {
@@ -37,7 +41,7 @@ const ExportsPage = observer(() => {
         })}
       >
         <div className="flex items-center border-b border-custom-border-100 pb-3.5">
-          <h3 className="text-xl font-medium">Exports</h3>
+          <h3 className="text-xl font-medium">{t("workspace_settings.settings.exports.title")}</h3>
         </div>
         <ExportGuide />
       </div>
diff --git a/web/app/[workspaceSlug]/(projects)/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
index d98db1a65..003e72743 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
@@ -4,6 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Settings } from "lucide-react";
 // ui
+import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
@@ -12,6 +13,7 @@ import { useWorkspace } from "@/hooks/store";
 
 export const WorkspaceSettingHeader: FC = observer(() => {
   const { currentWorkspace, loader } = useWorkspace();
+  const { t } = useTranslation();
 
   return (
     <Header>
@@ -27,7 +29,7 @@ export const WorkspaceSettingHeader: FC = observer(() => {
               />
             }
           />
-          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
+          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={t("settings")} />} />
         </Breadcrumbs>
       </Header.LeftItem>
     </Header>
diff --git a/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
index dc0815751..718742804 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
@@ -2,11 +2,11 @@
 
 import { observer } from "mobx-react";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { PageHead } from "@/components/core";
 import IntegrationGuide from "@/components/integration/guide";
 // hooks
 import { useUserPermissions, useWorkspace } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const ImportsPage = observer(() => {
   // store hooks
diff --git a/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
index 290eb24ca..ef31bd82f 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
@@ -3,6 +3,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { PageHead } from "@/components/core";
 import { SingleIntegrationCard } from "@/components/integration";
 import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "@/components/ui";
@@ -10,7 +11,6 @@ import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "@/
 import { APP_INTEGRATIONS } from "@/constants/fetch-keys";
 // hooks
 import { useUserPermissions, useWorkspace } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // services
 import { IntegrationService } from "@/services/integrations";
 
diff --git a/web/app/[workspaceSlug]/(projects)/settings/layout.tsx b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
index 9bd133cc1..788ca02ae 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
@@ -3,12 +3,12 @@
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { AppHeader } from "@/components/core";
 // hooks
 import { useUserPermissions } from "@/hooks/store";
 // plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // local components
 import { WorkspaceSettingHeader } from "./header";
 import { MobileWorkspaceSettingsTabs } from "./mobile-header-tabs";
diff --git a/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
index ab23261d9..8be7a9d22 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
@@ -5,21 +5,24 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Search } from "lucide-react";
 // types
+import { MEMBER_INVITED, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IWorkspaceBulkInviteFormData } from "@plane/types";
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { NotAuthorizedView } from "@/components/auth-screens";
+import { CountChip } from "@/components/common";
 import { PageHead } from "@/components/core";
-import { SendWorkspaceInvitationModal, WorkspaceMembersList } from "@/components/workspace";
-// constants
-import { MEMBER_INVITED } from "@/constants/event-tracker";
+import { WorkspaceMembersList } from "@/components/workspace";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getUserRole } from "@/helpers/user.helper";
 // hooks
 import { useEventTracker, useMember, useUserPermissions, useWorkspace } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// plane web components
+import { BillingActionsButton } from "@/plane-web/components/workspace/billing";
+import { SendWorkspaceInvitationModal } from "@/plane-web/components/workspace/members";
 
 const WorkspaceMembersSettingsPage = observer(() => {
   // states
@@ -31,9 +34,10 @@ const WorkspaceMembersSettingsPage = observer(() => {
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
   const { captureEvent } = useEventTracker();
   const {
-    workspace: { inviteMembersToWorkspace },
+    workspace: { workspaceMemberIds, inviteMembersToWorkspace },
   } = useMember();
   const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
 
   // derived values
   const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
@@ -62,7 +66,7 @@ const WorkspaceMembersSettingsPage = observer(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
-          message: "Invitations sent successfully.",
+          message: t("workspace_settings.settings.members.invitations_sent_successfully"),
         });
       })
       .catch((err) => {
@@ -80,8 +84,9 @@ const WorkspaceMembersSettingsPage = observer(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: `${err.error ?? "Something went wrong. Please try again."}`,
+          message: `${err.error ?? t("something_went_wrong_please_try_again")}`,
         });
+        throw err;
       });
   };
 
@@ -102,17 +107,22 @@ const WorkspaceMembersSettingsPage = observer(() => {
         onSubmit={handleWorkspaceInvite}
       />
       <section
-        className={cn("w-full overflow-y-auto", {
+        className={cn("w-full h-full overflow-y-auto", {
           "opacity-60": !canPerformWorkspaceMemberActions,
         })}
       >
-        <div className="flex justify-between gap-4 pb-3.5 items-start	">
-          <h4 className="text-xl font-medium">Members</h4>
+        <div className="flex justify-between gap-4 pb-3.5 items-start">
+          <h4 className="flex items-center gap-2.5 text-xl font-medium">
+            {t("workspace_settings.settings.members.title")}
+            {workspaceMemberIds && workspaceMemberIds.length > 0 && (
+              <CountChip count={workspaceMemberIds.length} className="h-5 m-auto" />
+            )}
+          </h4>
           <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
             <Search className="h-3.5 w-3.5 text-custom-text-400" />
             <input
               className="w-full max-w-[234px] border-none bg-transparent text-sm outline-none placeholder:text-custom-text-400"
-              placeholder="Search..."
+              placeholder={`${t("search")}...`}
               value={searchQuery}
               autoFocus
               onChange={(e) => setSearchQuery(e.target.value)}
@@ -120,9 +130,10 @@ const WorkspaceMembersSettingsPage = observer(() => {
           </div>
           {canPerformWorkspaceAdminActions && (
             <Button variant="primary" size="sm" onClick={() => setInviteModal(true)}>
-              Add member
+              {t("workspace_settings.settings.members.add_member")}
             </Button>
           )}
+          <BillingActionsButton canPerformWorkspaceAdminActions={canPerformWorkspaceAdminActions} />
         </div>
         <WorkspaceMembersList searchQuery={searchQuery} isAdmin={canPerformWorkspaceAdminActions} />
       </section>
diff --git a/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx b/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx
index ee3035220..b699a1ff2 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx
@@ -1,11 +1,10 @@
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+import { WORKSPACE_SETTINGS_LINKS, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // hooks
 import { useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-// plane web constants
-import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-import { WORKSPACE_SETTINGS_LINKS } from "@/plane-web/constants/workspace";
 // plane web helpers
 import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
 
@@ -13,6 +12,7 @@ export const MobileWorkspaceSettingsTabs = observer(() => {
   const router = useAppRouter();
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
+  const { t } = useTranslation();
   // mobx store
   const { allowPermissions } = useUserPermissions();
 
@@ -31,7 +31,7 @@ export const MobileWorkspaceSettingsTabs = observer(() => {
               key={index}
               onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
             >
-              {item.label}
+              {t(item.i18n_label)}
             </div>
           )
       )}
diff --git a/web/app/[workspaceSlug]/(projects)/settings/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/page.tsx
index c628e313c..6088cf0a5 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/page.tsx
@@ -2,6 +2,7 @@
 
 import { observer } from "mobx-react";
 // components
+import { useTranslation } from "@plane/i18n";
 import { PageHead } from "@/components/core";
 import { WorkspaceDetails } from "@/components/workspace";
 // hooks
@@ -10,8 +11,11 @@ import { useWorkspace } from "@/hooks/store";
 const WorkspaceSettingsPage = observer(() => {
   // store hooks
   const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
   // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - General Settings` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? t("workspace_settings.page_label", { workspace: currentWorkspace.name })
+    : undefined;
 
   return (
     <>
diff --git a/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
index 6bce5daa3..a12065536 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
@@ -4,13 +4,12 @@ import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
+import { WORKSPACE_SETTINGS_LINKS, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 // hooks
 import { useUserPermissions } from "@/hooks/store";
-// plane web constants
-import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-import { WORKSPACE_SETTINGS_LINKS } from "@/plane-web/constants/workspace";
 // plane web helpers
 import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
 
@@ -19,12 +18,13 @@ export const WorkspaceSettingsSidebar = observer(() => {
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
   // mobx store
+  const { t } = useTranslation();
   const { allowPermissions } = useUserPermissions();
 
   return (
     <div className="flex w-[280px] flex-col gap-6">
       <div className="flex flex-col gap-2">
-        <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
+        <span className="text-xs font-semibold text-custom-sidebar-text-400 uppercase">{t("settings")}</span>
         <div className="flex w-full flex-col gap-1">
           {WORKSPACE_SETTINGS_LINKS.map(
             (link) =>
@@ -36,7 +36,7 @@ export const WorkspaceSettingsSidebar = observer(() => {
                     isActive={link.highlight(pathname, `/${workspaceSlug}`)}
                     className="text-sm font-medium px-4 py-2"
                   >
-                    {link.label}
+                    {t(link.i18n_label)}
                   </SidebarNavItem>
                 </Link>
               )
diff --git a/web/app/[workspaceSlug]/(projects)/settings/webhooks/[webhookId]/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/webhooks/[webhookId]/page.tsx
index 4669f4064..5edc914e9 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/webhooks/[webhookId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/webhooks/[webhookId]/page.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IWebhook } from "@plane/types";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
@@ -13,7 +14,6 @@ import { PageHead } from "@/components/core";
 import { DeleteWebhookModal, WebhookDeleteSection, WebhookForm } from "@/components/web-hooks";
 // hooks
 import { useUserPermissions, useWebhook, useWorkspace } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const WebhookDetailsPage = observer(() => {
   // states
diff --git a/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
index 86c922f07..2623660da 100644
--- a/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
@@ -4,39 +4,43 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// ui
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
 // components
 import { NotAuthorizedView } from "@/components/auth-screens";
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { WebhookSettingsLoader } from "@/components/ui";
 import { WebhooksList, CreateWebhookModal } from "@/components/web-hooks";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // hooks
 import { useUserPermissions, useWebhook, useWorkspace } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const WebhooksListPage = observer(() => {
   // states
   const [showCreateWebhookModal, setShowCreateWebhookModal] = useState(false);
   // router
   const { workspaceSlug } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // mobx store
   const { workspaceUserInfo, allowPermissions } = useUserPermissions();
-
   const { fetchWebhooks, webhooks, clearSecretKey, webhookSecretKey, createWebhook } = useWebhook();
   const { currentWorkspace } = useWorkspace();
-
+  // derived values
   const canPerformWorkspaceAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/webhooks" });
 
   useSWR(
     workspaceSlug && canPerformWorkspaceAdminActions ? `WEBHOOKS_LIST_${workspaceSlug}` : null,
     workspaceSlug && canPerformWorkspaceAdminActions ? () => fetchWebhooks(workspaceSlug.toString()) : null
   );
 
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace.name} - Webhooks` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.webhooks.title")}`
+    : undefined;
 
   // clear secret key when modal is closed.
   useEffect(() => {
@@ -65,9 +69,9 @@ const WebhooksListPage = observer(() => {
         {Object.keys(webhooks).length > 0 ? (
           <div className="flex h-full w-full flex-col">
             <div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
-              <div className="text-xl font-medium">Webhooks</div>
+              <div className="text-xl font-medium">{t("workspace_settings.settings.webhooks.title")}</div>
               <Button variant="primary" size="sm" onClick={() => setShowCreateWebhookModal(true)}>
-                Add webhook
+                {t("workspace_settings.settings.webhooks.add_webhook")}
               </Button>
             </div>
             <WebhooksList />
@@ -75,13 +79,17 @@ const WebhooksListPage = observer(() => {
         ) : (
           <div className="flex h-full w-full flex-col">
             <div className="flex items-center justify-between gap-4 border-b border-custom-border-200 pb-3.5">
-              <div className="text-xl font-medium">Webhooks</div>
+              <div className="text-xl font-medium">{t("workspace_settings.settings.webhooks.title")}</div>
               <Button variant="primary" size="sm" onClick={() => setShowCreateWebhookModal(true)}>
-                Add webhook
+                {t("workspace_settings.settings.webhooks.add_webhook")}
               </Button>
             </div>
             <div className="h-full w-full flex items-center justify-center">
-              <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS} />
+              <DetailedEmptyState
+                title={t("workspace_settings.empty_state.webhooks.title")}
+                description={t("workspace_settings.empty_state.webhooks.description")}
+                assetPath={resolvedPath}
+              />
             </div>
           </div>
         )}
diff --git a/web/app/[workspaceSlug]/(projects)/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
index ac55fdec8..27a73137e 100644
--- a/web/app/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
@@ -2,18 +2,13 @@ import { FC, useEffect, useRef } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 // plane helpers
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // components
-import {
-  SidebarDropdown,
-  SidebarHelpSection,
-  SidebarProjectsList,
-  SidebarQuickActions,
-  SidebarUserMenu,
-  SidebarWorkspaceMenu,
-} from "@/components/workspace";
-// helpers
+import { SidebarDropdown, SidebarHelpSection, SidebarProjectsList, SidebarQuickActions } from "@/components/workspace";
 import { SidebarFavoritesMenu } from "@/components/workspace/sidebar/favorites/favorites-menu";
+import { SidebarMenuItems } from "@/components/workspace/sidebar/sidebar-menu-items";
+// helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useUserPermissions } from "@/hooks/store";
@@ -21,7 +16,9 @@ import { useFavorite } from "@/hooks/store/use-favorite";
 import useSize from "@/hooks/use-window-size";
 // plane web components
 import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams-sidebar-list";
+import { ExtendedProjectSidebar } from "./extended-project-sidebar";
+import { ExtendedAppSidebar } from "./extended-sidebar";
 
 export const AppSidebar: FC = observer(() => {
   // store hooks
@@ -47,61 +44,68 @@ export const AppSidebar: FC = observer(() => {
   });
 
   useEffect(() => {
-    if (windowSize[0] < 768) !sidebarCollapsed && toggleSidebar();
+    if (windowSize[0] < 768 && !sidebarCollapsed) toggleSidebar();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [windowSize]);
 
   const isFavoriteEmpty = isEmpty(groupedFavorites);
 
   return (
-    <div
-      className={cn(
-        "fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 w-[250px] md:relative md:ml-0",
-        {
-          "w-[70px] -ml-[250px]": sidebarCollapsed,
-        }
-      )}
-    >
+    <>
       <div
-        ref={ref}
-        className={cn("size-full flex flex-col flex-1 pt-4 pb-0", {
-          "p-2 pt-4": sidebarCollapsed,
-        })}
+        className={cn(
+          "fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 w-[250px] md:relative md:ml-0",
+          {
+            "w-[70px] -ml-[250px]": sidebarCollapsed,
+          }
+        )}
       >
         <div
-          className={cn("px-2", {
-            "px-4": !sidebarCollapsed,
+          ref={ref}
+          className={cn("size-full flex flex-col flex-1 pt-4 pb-0", {
+            "p-2 pt-4": sidebarCollapsed,
           })}
         >
-          <SidebarDropdown />
-          <div className="flex-shrink-0 h-4" />
-          <SidebarAppSwitcher />
-          <SidebarQuickActions />
-        </div>
-        <hr
-          className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
-            "opacity-0": !sidebarCollapsed,
-          })}
-        />
-        <div
-          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2 py-0.5", {
-            "vertical-scrollbar px-4": !sidebarCollapsed,
-          })}
-        >
-          <SidebarUserMenu />
-
-          <SidebarWorkspaceMenu />
+          <div
+            className={cn("px-2", {
+              "px-4": !sidebarCollapsed,
+            })}
+          >
+            {/* Workspace switcher and settings */}
+            <SidebarDropdown />
+            <div className="flex-shrink-0 h-4" />
+            {/* App switcher */}
+            {canPerformWorkspaceMemberActions && <SidebarAppSwitcher />}
+            {/* Quick actions */}
+            <SidebarQuickActions />
+          </div>
           <hr
             className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
               "opacity-0": !sidebarCollapsed,
             })}
           />
-          {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
-
-          <SidebarProjectsList />
+          <div
+            className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2 py-0.5", {
+              "vertical-scrollbar px-4": !sidebarCollapsed,
+            })}
+          >
+            <SidebarMenuItems />
+            {sidebarCollapsed && (
+              <hr className="flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1" />
+            )}
+            {/* Favorites Menu */}
+            {canPerformWorkspaceMemberActions && !isFavoriteEmpty && <SidebarFavoritesMenu />}
+            {/* Teams List */}
+            <SidebarTeamsList />
+            {/* Projects List */}
+            <SidebarProjectsList />
+          </div>
+          {/* Help Section */}
+          <SidebarHelpSection />
         </div>
-        <SidebarHelpSection />
       </div>
-    </div>
+      <ExtendedAppSidebar />
+      <ExtendedProjectSidebar />
+    </>
   );
 });
diff --git a/web/app/[workspaceSlug]/(projects)/stickies/header.tsx b/web/app/[workspaceSlug]/(projects)/stickies/header.tsx
new file mode 100644
index 000000000..9e3f1a45d
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/stickies/header.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { observer } from "mobx-react";
+// ui
+import { useParams } from "next/navigation";
+import { Breadcrumbs, Button, Header, RecentStickyIcon } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common";
+
+// hooks
+import { StickySearch } from "@/components/stickies/modal/search";
+import { useStickyOperations } from "@/components/stickies/sticky/use-operations";
+// plane-web
+import { useSticky } from "@/hooks/use-stickies";
+
+export const WorkspaceStickyHeader = observer(() => {
+  const { workspaceSlug } = useParams();
+  // hooks
+  const { creatingSticky, toggleShowNewSticky } = useSticky();
+  const { stickyOperations } = useStickyOperations({ workspaceSlug: workspaceSlug?.toString() });
+
+  return (
+    <>
+      <Header>
+        <Header.LeftItem>
+          <div className="flex items-center gap-2.5">
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                link={
+                  <BreadcrumbLink
+                    label={`Stickies`}
+                    icon={<RecentStickyIcon className="size-5 rotate-90 text-custom-text-200" />}
+                  />
+                }
+              />
+            </Breadcrumbs>
+          </div>
+        </Header.LeftItem>
+
+        <Header.RightItem>
+          <StickySearch />
+          <Button
+            variant="primary"
+            size="sm"
+            className="items-center gap-1"
+            onClick={() => {
+              toggleShowNewSticky(true);
+              stickyOperations.create();
+            }}
+            loading={creatingSticky}
+          >
+            Add sticky
+          </Button>
+        </Header.RightItem>
+      </Header>
+    </>
+  );
+});
diff --git a/web/app/[workspaceSlug]/(projects)/stickies/layout.tsx b/web/app/[workspaceSlug]/(projects)/stickies/layout.tsx
new file mode 100644
index 000000000..b1d7e6b92
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/stickies/layout.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { WorkspaceStickyHeader } from "./header";
+
+export default function WorkspaceStickiesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceStickyHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/(projects)/stickies/page.tsx b/web/app/[workspaceSlug]/(projects)/stickies/page.tsx
new file mode 100644
index 000000000..48c2cc374
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/stickies/page.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+// components
+import { PageHead } from "@/components/core";
+import { StickiesInfinite } from "@/components/stickies";
+
+export default function WorkspaceStickiesPage() {
+  return (
+    <>
+      <PageHead title="Your stickies" />
+      <div className="relative h-full w-full overflow-hidden overflow-y-auto">
+        <StickiesInfinite />
+      </div>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
index 3eec4b027..bf7d78a6d 100644
--- a/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
@@ -1,13 +1,15 @@
 "use client";
 
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane imports
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
 // components
 import { PageHead } from "@/components/core";
 import { AllIssueLayoutRoot, GlobalViewsAppliedFiltersRoot } from "@/components/issues";
 import { GlobalViewsHeader } from "@/components/workspace";
 // constants
-import { DEFAULT_GLOBAL_VIEWS_LIST } from "@/constants/workspace";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 
@@ -16,19 +18,25 @@ const GlobalViewIssuesPage = observer(() => {
   const { globalViewId } = useParams();
   // store hooks
   const { currentWorkspace } = useWorkspace();
+  // states
+  const [isLoading, setIsLoading] = useState(false);
 
   // derived values
   const defaultView = DEFAULT_GLOBAL_VIEWS_LIST.find((view) => view.key === globalViewId);
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - All Views` : undefined;
 
+  // handlers
+  const toggleLoading = (value: boolean) => setIsLoading(value);
   return (
     <>
       <PageHead title={pageTitle} />
       <div className="h-full overflow-hidden bg-custom-background-100">
         <div className="flex h-full w-full flex-col border-b border-custom-border-300">
           <GlobalViewsHeader />
-          {globalViewId && <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId.toString()} />}
-          <AllIssueLayoutRoot isDefaultView={!!defaultView} />
+          {globalViewId && (
+            <GlobalViewsAppliedFiltersRoot globalViewId={globalViewId.toString()} isLoading={isLoading} />
+          )}
+          <AllIssueLayoutRoot isDefaultView={!!defaultView} isLoading={isLoading} toggleLoading={toggleLoading} />
         </div>
       </div>
     </>
diff --git a/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
index 500d23ed7..5a5ee0a6e 100644
--- a/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -3,8 +3,11 @@
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// types
 import { Layers } from "lucide-react";
+// plane constants
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Breadcrumbs, Button, Header } from "@plane/ui";
@@ -12,8 +15,6 @@ import { Breadcrumbs, Button, Header } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
 import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
-// constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
@@ -33,6 +34,7 @@ export const GlobalIssuesHeader = observer(() => {
   const {
     workspace: { workspaceMemberIds },
   } = useMember();
+  const { t } = useTranslation();
 
   const issueFilters = globalViewId ? filters[globalViewId.toString()] : undefined;
 
@@ -103,7 +105,7 @@ export const GlobalIssuesHeader = observer(() => {
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label={`Views`} icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
+              link={<BreadcrumbLink label={t("views")} icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
         </Header.LeftItem>
@@ -112,12 +114,12 @@ export const GlobalIssuesHeader = observer(() => {
           {!isLocked ? (
             <>
               <FiltersDropdown
-                title="Filters"
+                title={t("common.filters")}
                 placement="bottom-end"
                 isFiltersApplied={isIssueFilterActive(issueFilters)}
               >
                 <FilterSelection
-                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.spreadsheet}
                   filters={issueFilters?.filters ?? {}}
                   handleFiltersUpdate={handleFiltersUpdate}
                   displayFilters={issueFilters?.displayFilters ?? {}}
@@ -126,9 +128,9 @@ export const GlobalIssuesHeader = observer(() => {
                   memberIds={workspaceMemberIds ?? undefined}
                 />
               </FiltersDropdown>
-              <FiltersDropdown title="Display" placement="bottom-end">
+              <FiltersDropdown title={t("common.display")} placement="bottom-end">
                 <DisplayFiltersSelection
-                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.spreadsheet}
                   displayFilters={issueFilters?.displayFilters ?? {}}
                   handleDisplayFiltersUpdate={handleDisplayFilters}
                   displayProperties={issueFilters?.displayProperties ?? {}}
@@ -141,7 +143,7 @@ export const GlobalIssuesHeader = observer(() => {
           )}
 
           <Button variant="primary" size="sm" onClick={() => setCreateViewModal(true)}>
-            Add view
+            {t("workspace_views.add_view")}
           </Button>
         </Header.RightItem>
       </Header>
diff --git a/web/app/[workspaceSlug]/(projects)/workspace-views/page.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/page.tsx
index 7de442584..87d0cfc58 100644
--- a/web/app/[workspaceSlug]/(projects)/workspace-views/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/workspace-views/page.tsx
@@ -4,13 +4,15 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 // icons
 import { Search } from "lucide-react";
+// plane imports
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Input } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core";
 import { GlobalDefaultViewListItem, GlobalViewsList } from "@/components/workspace";
 // constants
-import { DEFAULT_GLOBAL_VIEWS_LIST } from "@/constants/workspace";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 
@@ -18,6 +20,7 @@ const WorkspaceViewsPage = observer(() => {
   const [query, setQuery] = useState("");
   // store
   const { currentWorkspace } = useWorkspace();
+  const { t } = useTranslation();
   // derived values
   const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - All Views` : undefined;
 
@@ -36,7 +39,7 @@ const WorkspaceViewsPage = observer(() => {
           />
         </div>
         <div className="flex flex-col h-full w-full vertical-scrollbar scrollbar-lg">
-          {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => v.label.toLowerCase().includes(query.toLowerCase())).map(
+          {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => t(v.i18n_label).toLowerCase().includes(query.toLowerCase())).map(
             (option) => (
               <GlobalDefaultViewListItem key={option.key} view={option} />
             )
diff --git a/web/app/accounts/forgot-password/page.tsx b/web/app/accounts/forgot-password/page.tsx
index 91516c5b9..22a241db6 100644
--- a/web/app/accounts/forgot-password/page.tsx
+++ b/web/app/accounts/forgot-password/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
@@ -7,10 +8,10 @@ import { useTheme } from "next-themes";
 import { Controller, useForm } from "react-hook-form";
 // icons
 import { CircleCheck } from "lucide-react";
-// ui
+// plane imports
+import { FORGOT_PASS_LINK, NAVIGATE_TO_SIGNUP } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button, Input, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
-// constants
-import { FORGOT_PASS_LINK, NAVIGATE_TO_SIGNUP } from "@/constants/event-tracker";
 // helpers
 import { EPageTypes } from "@/helpers/authentication.helper";
 import { cn } from "@/helpers/common.helper";
@@ -20,12 +21,12 @@ import { useEventTracker } from "@/hooks/store";
 import useTimer from "@/hooks/use-timer";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers";
-// services
 // images
 import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg";
 import PlaneBackgroundPattern from "@/public/auth/background-pattern.svg";
 import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
 import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
+// services
 import { AuthService } from "@/services/auth.service";
 
 type TForgotPasswordFormValues = {
@@ -39,10 +40,12 @@ const defaultValues: TForgotPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-export default function ForgotPasswordPage() {
+const ForgotPasswordPage = observer(() => {
   // search params
   const searchParams = useSearchParams();
   const email = searchParams.get("email");
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { captureEvent } = useEventTracker();
   // hooks
@@ -73,9 +76,8 @@ export default function ForgotPasswordPage() {
         });
         setToast({
           type: TOAST_TYPE.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.",
+          title: t("auth.forgot_password.toast.success.title"),
+          message: t("auth.forgot_password.toast.success.message"),
         });
         setResendCodeTimer(30);
       })
@@ -85,8 +87,8 @@ export default function ForgotPasswordPage() {
         });
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: err?.error ?? "Something went wrong. Please try again.",
+          title: t("auth.forgot_password.toast.error.title"),
+          message: err?.error ?? t("auth.forgot_password.toast.error.message"),
         });
       });
   };
@@ -111,13 +113,13 @@ export default function ForgotPasswordPage() {
               </Link>
             </div>
             <div className="flex flex-col items-end sm:items-center sm:gap-2 sm:flex-row text-center text-sm font-medium text-onboarding-text-300">
-              New to Plane?{" "}
+              {t("auth.common.new_to_plane")}
               <Link
                 href="/"
                 onClick={() => captureEvent(NAVIGATE_TO_SIGNUP, {})}
                 className="font-semibold text-custom-primary-100 hover:underline"
               >
-                Create an account
+                {t("auth.common.create_account")}
               </Link>
             </div>
           </div>
@@ -125,23 +127,21 @@ export default function ForgotPasswordPage() {
             <div className="relative flex flex-col space-y-6">
               <div className="text-center space-y-1 py-4">
                 <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-                  Reset your password
+                  {t("auth.forgot_password.title")}
                 </h3>
-                <p className="font-medium text-onboarding-text-400">
-                  Enter your user account{"'"}s verified email address and we will send you a password reset link.
-                </p>
+                <p className="font-medium text-onboarding-text-400">{t("auth.forgot_password.description")}</p>
               </div>
               <form onSubmit={handleSubmit(handleForgotPassword)} className="mt-5 space-y-4">
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-                    Email
+                    {t("auth.common.email.label")}
                   </label>
                   <Controller
                     control={control}
                     name="email"
                     rules={{
-                      required: "Email is required",
-                      validate: (value) => checkEmailValidity(value) || "Email is invalid",
+                      required: t("auth.common.email.errors.required"),
+                      validate: (value) => checkEmailValidity(value) || t("auth.common.email.errors.invalid"),
                     }}
                     render={({ field: { value, onChange, ref } }) => (
                       <Input
@@ -152,7 +152,7 @@ export default function ForgotPasswordPage() {
                         onChange={onChange}
                         ref={ref}
                         hasError={Boolean(errors.email)}
-                        placeholder="name@company.com"
+                        placeholder={t("auth.common.email.placeholder")}
                         className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                         autoComplete="on"
                         disabled={resendTimerCode > 0}
@@ -162,7 +162,7 @@ export default function ForgotPasswordPage() {
                   {resendTimerCode > 0 && (
                     <p className="flex w-full items-start px-1 gap-1 text-xs font-medium text-green-700">
                       <CircleCheck height={12} width={12} className="mt-0.5" />
-                      We sent the reset link to your email address
+                      {t("auth.forgot_password.email_sent")}
                     </p>
                   )}
                 </div>
@@ -174,10 +174,12 @@ export default function ForgotPasswordPage() {
                   disabled={!isValid}
                   loading={isSubmitting || resendTimerCode > 0}
                 >
-                  {resendTimerCode > 0 ? `Resend in ${resendTimerCode} seconds` : "Send reset link"}
+                  {resendTimerCode > 0
+                    ? t("auth.common.resend_in", { seconds: resendTimerCode })
+                    : t("auth.forgot_password.send_reset_link")}
                 </Button>
                 <Link href="/" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
-                  Back to sign in
+                  {t("auth.common.back_to_sign_in")}
                 </Link>
               </form>
             </div>
@@ -186,4 +188,6 @@ export default function ForgotPasswordPage() {
       </div>
     </AuthenticationWrapper>
   );
-}
+});
+
+export default ForgotPasswordPage;
diff --git a/web/app/accounts/reset-password/page.tsx b/web/app/accounts/reset-password/page.tsx
index 04d6e3115..e0230f205 100644
--- a/web/app/accounts/reset-password/page.tsx
+++ b/web/app/accounts/reset-password/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useMemo, useState } from "react";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
@@ -8,6 +9,7 @@ import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import { Eye, EyeOff } from "lucide-react";
 // ui
+import { useTranslation } from "@plane/i18n";
 import { Button, Input } from "@plane/ui";
 // components
 import { AuthBanner, PasswordStrengthMeter } from "@/components/account";
@@ -45,7 +47,7 @@ const defaultValues: TResetPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-export default function ResetPasswordPage() {
+const ResetPasswordPage = observer(() => {
   // search params
   const searchParams = useSearchParams();
   const uidb64 = searchParams.get("uidb64");
@@ -65,7 +67,8 @@ export default function ResetPasswordPage() {
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
   const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
-
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { resolvedTheme } = useTheme();
 
@@ -127,9 +130,9 @@ export default function ResetPasswordPage() {
             <div className="relative flex flex-col space-y-6">
               <div className="text-center space-y-1 py-4">
                 <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-                  Set new password
+                  {t("auth.reset_password.title")}
                 </h3>
-                <p className="font-medium text-onboarding-text-400">Secure your account with a strong password</p>
+                <p className="font-medium text-onboarding-text-400">{t("auth.reset_password.description")}</p>
               </div>
               {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
                 <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
@@ -142,7 +145,7 @@ export default function ResetPasswordPage() {
                 <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-                    Email
+                    {t("auth.common.email.label")}
                   </label>
                   <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                     <Input
@@ -151,7 +154,7 @@ export default function ResetPasswordPage() {
                       type="email"
                       value={resetFormData.email}
                       //hasError={Boolean(errors.email)}
-                      placeholder="name@company.com"
+                      placeholder={t("auth.common.email.placeholder")}
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
                       autoComplete="on"
                       disabled
@@ -160,7 +163,7 @@ export default function ResetPasswordPage() {
                 </div>
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-                    Password
+                    {t("auth.common.password.label")}
                   </label>
                   <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                     <Input
@@ -169,7 +172,7 @@ export default function ResetPasswordPage() {
                       value={resetFormData.password}
                       onChange={(e) => handleFormChange("password", e.target.value)}
                       //hasError={Boolean(errors.password)}
-                      placeholder="Enter password"
+                      placeholder={t("auth.common.password.placeholder")}
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                       minLength={8}
                       onFocus={() => setIsPasswordInputFocused(true)}
@@ -193,7 +196,7 @@ export default function ResetPasswordPage() {
                 </div>
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-                    Confirm password
+                    {t("auth.common.password.confirm_password.label")}
                   </label>
                   <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                     <Input
@@ -201,7 +204,7 @@ export default function ResetPasswordPage() {
                       name="confirm_password"
                       value={resetFormData.confirm_password}
                       onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                      placeholder="Confirm password"
+                      placeholder={t("auth.common.password.confirm_password.placeholder")}
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                       onFocus={() => setIsRetryPasswordInputFocused(true)}
                       onBlur={() => setIsRetryPasswordInputFocused(false)}
@@ -220,10 +223,12 @@ export default function ResetPasswordPage() {
                   </div>
                   {!!resetFormData.confirm_password &&
                     resetFormData.password !== resetFormData.confirm_password &&
-                    renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+                    renderPasswordMatchError && (
+                      <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+                    )}
                 </div>
                 <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-                  Set password
+                  {t("auth.common.password.submit")}
                 </Button>
               </form>
             </div>
@@ -232,4 +237,6 @@ export default function ResetPasswordPage() {
       </div>
     </AuthenticationWrapper>
   );
-}
+});
+
+export default ResetPasswordPage;
diff --git a/web/app/accounts/set-password/page.tsx b/web/app/accounts/set-password/page.tsx
index f3ac35b76..5bfa7c08f 100644
--- a/web/app/accounts/set-password/page.tsx
+++ b/web/app/accounts/set-password/page.tsx
@@ -8,7 +8,8 @@ import { useSearchParams } from "next/navigation";
 // icons
 import { useTheme } from "next-themes";
 import { Eye, EyeOff } from "lucide-react";
-// ui
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { PasswordStrengthMeter } from "@/components/account";
@@ -60,9 +61,10 @@ const SetPasswordPage = observer(() => {
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
   const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { resolvedTheme } = useTheme();
-  // hooks
   const { data: user, handleSetPassword } = useUser();
 
   useEffect(() => {
@@ -95,8 +97,8 @@ const SetPasswordPage = observer(() => {
     } catch (err: any) {
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: err?.error ?? "Something went wrong. Please try again.",
+        title: t("common.errors.default.title"),
+        message: err?.error ?? t("common.errors.default.message"),
       });
     }
   };
@@ -108,7 +110,8 @@ const SetPasswordPage = observer(() => {
   const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
 
   return (
-    <AuthenticationWrapper pageType={EPageTypes.SET_PASSWORD}>
+    // TODO: change to EPageTypes.SET_PASSWORD
+    <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
       <div className="relative w-screen h-screen overflow-hidden">
         <div className="absolute inset-0 z-0">
           <Image
@@ -129,14 +132,14 @@ const SetPasswordPage = observer(() => {
             <div className="relative flex flex-col space-y-6">
               <div className="text-center space-y-1 py-4">
                 <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-                  Secure your account
+                  {t("auth.set_password.title")}
                 </h3>
-                <p className="font-medium text-onboarding-text-400">Setting password helps you login securely</p>
+                <p className="font-medium text-onboarding-text-400">{t("auth.set_password.description")}</p>
               </div>
               <form className="mt-5 space-y-4" onSubmit={(e) => handleSubmit(e)}>
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-                    Email
+                    {t("auth.common.email.label")}
                   </label>
                   <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                     <Input
@@ -145,7 +148,7 @@ const SetPasswordPage = observer(() => {
                       type="email"
                       value={user?.email}
                       //hasError={Boolean(errors.email)}
-                      placeholder="name@company.com"
+                      placeholder={t("auth.common.email.placeholder")}
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
                       autoComplete="on"
                       disabled
@@ -154,7 +157,7 @@ const SetPasswordPage = observer(() => {
                 </div>
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-                    Set a password
+                    {t("auth.common.password.label")}
                   </label>
                   <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                     <Input
@@ -163,7 +166,7 @@ const SetPasswordPage = observer(() => {
                       value={passwordFormData.password}
                       onChange={(e) => handleFormChange("password", e.target.value)}
                       //hasError={Boolean(errors.password)}
-                      placeholder="Enter password"
+                      placeholder={t("auth.common.password.placeholder")}
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                       minLength={8}
                       onFocus={() => setIsPasswordInputFocused(true)}
@@ -187,7 +190,7 @@ const SetPasswordPage = observer(() => {
                 </div>
                 <div className="space-y-1">
                   <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-                    Confirm password
+                    {t("auth.common.password.confirm_password.label")}
                   </label>
                   <div className="relative flex items-center rounded-md bg-onboarding-background-200">
                     <Input
@@ -195,7 +198,7 @@ const SetPasswordPage = observer(() => {
                       name="confirm_password"
                       value={passwordFormData.confirm_password}
                       onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                      placeholder="Confirm password"
+                      placeholder={t("auth.common.password.confirm_password.placeholder")}
                       className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                       onFocus={() => setIsRetryPasswordInputFocused(true)}
                       onBlur={() => setIsRetryPasswordInputFocused(false)}
@@ -214,10 +217,12 @@ const SetPasswordPage = observer(() => {
                   </div>
                   {!!passwordFormData.confirm_password &&
                     passwordFormData.password !== passwordFormData.confirm_password &&
-                    renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+                    renderPasswordMatchError && (
+                      <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+                    )}
                 </div>
                 <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-                  Continue
+                  {t("common.continue")}
                 </Button>
               </form>
             </div>
diff --git a/web/app/create-workspace/page.tsx b/web/app/create-workspace/page.tsx
index 36bc8978a..842532034 100644
--- a/web/app/create-workspace/page.tsx
+++ b/web/app/create-workspace/page.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import Image from "next/image";
 import Link from "next/link";
 import { useTheme } from "next-themes";
+import { useTranslation } from "@plane/i18n";
 import { IWorkspace } from "@plane/types";
 // components
 import { Button, getButtonStyling } from "@plane/ui";
@@ -22,6 +23,7 @@ import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue
 import WorkspaceCreationDisabled from "@/public/workspace/workspace-creation-disabled.png";
 
 const CreateWorkspacePage = observer(() => {
+  const { t } = useTranslation();
   // router
   const router = useAppRouter();
   // store hooks
@@ -38,6 +40,18 @@ const CreateWorkspacePage = observer(() => {
   // derived values
   const isWorkspaceCreationDisabled = getIsWorkspaceCreationDisabled();
 
+  // methods
+  const getMailtoHref = () => {
+    const subject = t("workspace_creation.request_email.subject");
+    const body = t("workspace_creation.request_email.body", {
+      firstName: currentUser?.first_name || "",
+      lastName: currentUser?.last_name || "",
+      email: currentUser?.email || "",
+    });
+
+    return `mailto:?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+  };
+
   const onSubmit = async (workspace: IWorkspace) => {
     await updateUserProfile({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
   };
@@ -65,26 +79,24 @@ const CreateWorkspacePage = observer(() => {
           {isWorkspaceCreationDisabled ? (
             <div className="w-4/5 h-full flex flex-col items-center justify-center text-lg font-medium gap-1">
               <Image src={WorkspaceCreationDisabled} width={200} alt="Workspace creation disabled" className="mb-4" />
-              <div className="text-lg font-medium text-center">Only your instance admin can create workspaces</div>
-              <p className="text-sm text-custom-text-300 text-center">
-                If you know your instance admin&apos;s email address, <br /> click the button below to get in touch with
-                them.
+              <div className="text-lg font-medium text-center">
+                {t("workspace_creation.errors.creation_disabled.title")}
+              </div>
+              <p className="text-sm text-custom-text-300 break-words text-center">
+                {t("workspace_creation.errors.creation_disabled.description")}
               </p>
               <div className="flex gap-4 mt-6">
                 <Button variant="primary" onClick={() => router.back()}>
-                  Go back
+                  {t("common.go_back")}
                 </Button>
-                <a
-                  href={`mailto:?subject=${encodeURIComponent("Requesting a new workspace")}&body=${encodeURIComponent(`Hi instance admin(s),\n\nPlease create a new workspace with the URL [/workspace-name] for [purpose of creating the workspace].\n\nThanks,\n${currentUser?.first_name} ${currentUser?.last_name}\n${currentUser?.email}`)}`}
-                  className={getButtonStyling("outline-primary", "md")}
-                >
-                  Request instance admin
+                <a href={getMailtoHref()} className={getButtonStyling("outline-primary", "md")}>
+                  {t("workspace_creation.errors.creation_disabled.request_button")}
                 </a>
               </div>
             </div>
           ) : (
             <div className="w-full space-y-7 sm:space-y-10">
-              <h4 className="text-2xl font-semibold">Create your workspace</h4>
+              <h4 className="text-2xl font-semibold">{t("workspace_creation.heading")}</h4>
               <div className="sm:w-3/4 md:w-2/5">
                 <CreateWorkspaceForm
                   onSubmit={onSubmit}
diff --git a/web/app/global-error.tsx b/web/app/global-error.tsx
index 23ab664d8..b0b191e41 100644
--- a/web/app/global-error.tsx
+++ b/web/app/global-error.tsx
@@ -1,15 +1,8 @@
 "use client";
 
-// import { useEffect } from "react";
-// import * as Sentry from "@sentry/nextjs";
 import NextError from "next/error";
 
-// export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
 export default function GlobalError() {
-  // useEffect(() => {
-  //   Sentry.captureException(error);
-  // }, [error]);
-
   return (
     <html>
       <body>
diff --git a/web/app/invitations/page.tsx b/web/app/invitations/page.tsx
index 73ef15b63..df6befa68 100644
--- a/web/app/invitations/page.tsx
+++ b/web/app/invitations/page.tsx
@@ -7,18 +7,18 @@ import Link from "next/link";
 
 import { useTheme } from "next-themes";
 import useSWR, { mutate } from "swr";
-// icons
 import { CheckCircle2 } from "lucide-react";
+// plane imports
+import { ROLE, MEMBER_ACCEPTED, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { EmptyState } from "@/components/common";
-// constants
-import { MEMBER_ACCEPTED } from "@/constants/event-tracker";
+import { WorkspaceLogo } from "@/components/workspace/logo";
 import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys";
-import { ROLE } from "@/constants/workspace";
 // helpers
 import { truncateText } from "@/helpers/string.helper";
 import { getUserRole } from "@/helpers/user.helper";
@@ -27,8 +27,6 @@ import { useEventTracker, useUser, useUserProfile, useWorkspace } from "@/hooks/
 import { useAppRouter } from "@/hooks/use-app-router";
 // services
 import { AuthenticationWrapper } from "@/lib/wrappers";
-// plane web constants
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // plane web services
 import { WorkspaceService } from "@/plane-web/services";
 // images
@@ -45,6 +43,7 @@ const UserInvitationsPage = observer(() => {
   // router
   const router = useAppRouter();
   // store hooks
+  const { t } = useTranslation();
   const { captureEvent, joinWorkspaceMetricGroup } = useEventTracker();
   const { data: currentUser } = useUser();
   const { updateUserProfile } = useUserProfile();
@@ -72,8 +71,8 @@ const UserInvitationsPage = observer(() => {
     if (invitationsRespond.length === 0) {
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Please select at least one invitation.",
+        title: t("error"),
+        message: t("please_select_at_least_one_invitation"),
       });
       return;
     }
@@ -107,8 +106,8 @@ const UserInvitationsPage = observer(() => {
           .catch(() => {
             setToast({
               type: TOAST_TYPE.ERROR,
-              title: "Error!",
-              message: "Something went wrong, Please try again.",
+              title: t("error"),
+              message: t("something_went_wrong_please_try_again"),
             });
             setIsJoiningWorkspaces(false);
           });
@@ -122,8 +121,8 @@ const UserInvitationsPage = observer(() => {
         });
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong, Please try again.",
+          title: t("error"),
+          message: t("something_went_wrong_please_try_again"),
         });
         setIsJoiningWorkspaces(false);
       });
@@ -152,8 +151,8 @@ const UserInvitationsPage = observer(() => {
           invitations.length > 0 ? (
             <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
               <div className="w-full space-y-10">
-                <h5 className="text-lg">We see that someone has invited you to</h5>
-                <h4 className="text-2xl font-semibold">Join a workspace</h4>
+                <h5 className="text-lg">{t("we_see_that_someone_has_invited_you_to_join_a_workspace")}</h5>
+                <h4 className="text-2xl font-semibold">{t("join_a_workspace")}</h4>
                 <div className="max-h-[37vh] space-y-4 overflow-y-auto md:w-3/5">
                   {invitations.map((invitation) => {
                     const isSelected = invitationsRespond.includes(invitation.id);
@@ -169,21 +168,11 @@ const UserInvitationsPage = observer(() => {
                         onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
                       >
                         <div className="flex-shrink-0">
-                          <div className="grid h-9 w-9 place-items-center rounded">
-                            {invitation.workspace.logo && invitation.workspace.logo.trim() !== "" ? (
-                              <img
-                                src={invitation.workspace.logo}
-                                height="100%"
-                                width="100%"
-                                className="rounded"
-                                alt={invitation.workspace.name}
-                              />
-                            ) : (
-                              <span className="grid h-9 w-9 place-items-center rounded bg-gray-700 px-3 py-1.5 uppercase text-white">
-                                {invitation.workspace.name[0]}
-                              </span>
-                            )}
-                          </div>
+                          <WorkspaceLogo
+                            logo={invitation.workspace.logo_url}
+                            name={invitation.workspace.name}
+                            classNames="size-9 flex-shrink-0"
+                          />
                         </div>
                         <div className="min-w-0 flex-1">
                           <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
@@ -207,12 +196,12 @@ const UserInvitationsPage = observer(() => {
                     disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
                     loading={isJoiningWorkspaces}
                   >
-                    Accept & Join
+                    {t("accept_and_join")}
                   </Button>
                   <Link href={`/${redirectWorkspaceSlug}`}>
                     <span>
                       <Button variant="neutral-primary" size="md">
-                        Go Home
+                        {t("go_home")}
                       </Button>
                     </span>
                   </Link>
@@ -222,11 +211,11 @@ const UserInvitationsPage = observer(() => {
           ) : (
             <div className="fixed left-0 top-0 grid h-full w-full place-items-center">
               <EmptyState
-                title="No pending invites"
-                description="You can see here if someone invites you to a workspace."
+                title={t("no_pending_invites")}
+                description={t("you_can_see_here_if_someone_invites_you_to_a_workspace")}
                 image={emptyInvitation}
                 primaryButton={{
-                  text: "Back to home",
+                  text: t("back_to_home"),
                   onClick: () => router.push("/"),
                 }}
               />
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 648f70357..6024753df 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -6,7 +6,8 @@ import "@/styles/command-pallette.css";
 import "@/styles/emoji.css";
 import "@/styles/react-day-picker.css";
 // meta data info
-import { SITE_NAME, SITE_DESCRIPTION } from "@/constants/meta";
+
+import { SITE_DESCRIPTION, SITE_NAME } from "@plane/constants";
 // helpers
 import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // local
@@ -17,12 +18,11 @@ export const metadata: Metadata = {
   description: SITE_DESCRIPTION,
   openGraph: {
     title: "Plane | Simple, extensible, open-source project management tool.",
-    description:
-      "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
+    description: "Open-source project management tool to manage work items, cycles, and product roadmaps easily",
     url: "https://app.plane.so/",
   },
   keywords:
-    "software development, plan, ship, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
+    "software development, plan, ship, software, accelerate, code management, release management, project management, work item tracking, agile, scrum, kanban, collaboration",
   twitter: {
     site: "@planepowers",
   },
@@ -67,7 +67,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="preload" href={`${API_BASE_URL}/api/users/me/settings/ `} as="fetch" crossOrigin="use-credentials" />
         <link
           rel="preload"
-          href={`${API_BASE_URL}/api/users/me/workspaces/`}
+          href={`${API_BASE_URL}/api/users/me/workspaces/?v=${Date.now()}`}
           as="fetch"
           crossOrigin="use-credentials"
         />
diff --git a/web/app/onboarding/page.tsx b/web/app/onboarding/page.tsx
index 6d915dfcb..a26bef3a6 100644
--- a/web/app/onboarding/page.tsx
+++ b/web/app/onboarding/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // types
+import { USER_ONBOARDING_COMPLETED } from "@plane/constants";
 import { TOnboardingSteps, TUserProfile } from "@plane/types";
 // ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
@@ -11,7 +12,6 @@ import { TOAST_TYPE, setToast } from "@plane/ui";
 import { LogoSpinner } from "@/components/common";
 import { InviteMembers, CreateOrJoinWorkspaces, ProfileSetup } from "@/components/onboarding";
 // constants
-import { USER_ONBOARDING_COMPLETED } from "@/constants/event-tracker";
 import { USER_WORKSPACES_LIST } from "@/constants/fetch-keys";
 // helpers
 import { EPageTypes } from "@/helpers/authentication.helper";
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 63ef855ca..f63845fcb 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -7,10 +7,11 @@ import Link from "next/link";
 // ui
 import { useTheme } from "next-themes";
 // components
+import { NAVIGATE_TO_SIGNUP } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { AuthRoot } from "@/components/account";
 import { PageHead } from "@/components/core";
 // constants
-import { NAVIGATE_TO_SIGNUP } from "@/constants/event-tracker";
 // helpers
 import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper";
 // hooks
@@ -27,6 +28,8 @@ import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue
 
 const HomePage = observer(() => {
   const { resolvedTheme } = useTheme();
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { captureEvent } = useEventTracker();
 
@@ -37,7 +40,7 @@ const HomePage = observer(() => {
       <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
         <>
           <div className="relative w-screen h-screen overflow-hidden">
-            <PageHead title="Log in - Plane" />
+            <PageHead title={t("auth.common.login") + " - Plane"} />
             <div className="absolute inset-0 z-0">
               <Image
                 src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
@@ -53,13 +56,13 @@ const HomePage = observer(() => {
                   </Link>
                 </div>
                 <div className="flex flex-col items-end sm:items-center sm:gap-2 sm:flex-row text-center text-sm font-medium text-onboarding-text-300">
-                  New to Plane?{" "}
+                  {t("auth.common.new_to_plane")}
                   <Link
                     href="/sign-up"
                     onClick={() => captureEvent(NAVIGATE_TO_SIGNUP, {})}
                     className="font-semibold text-custom-primary-100 hover:underline"
                   >
-                    Create an account
+                    {t("auth.common.create_account")}
                   </Link>
                 </div>
               </div>
diff --git a/web/app/profile/activity/page.tsx b/web/app/profile/activity/page.tsx
index afc9b29bf..ca6c9511d 100644
--- a/web/app/profile/activity/page.tsx
+++ b/web/app/profile/activity/page.tsx
@@ -2,18 +2,19 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Button } from "@plane/ui";
 // components
 import { PageHead } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import {
   ProfileActivityListPage,
   ProfileSettingContentHeader,
   ProfileSettingContentWrapper,
 } from "@/components/profile";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
+// hooks
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 const PER_PAGE = 100;
 
@@ -23,6 +24,10 @@ const ProfileActivityPage = observer(() => {
   const [totalPages, setTotalPages] = useState(0);
   const [resultsCount, setResultsCount] = useState(0);
   const [isEmpty, setIsEmpty] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/profile/activity" });
 
   const updateTotalPages = (count: number) => setTotalPages(count);
 
@@ -48,19 +53,25 @@ const ProfileActivityPage = observer(() => {
   const isLoadMoreVisible = pageCount < totalPages && resultsCount !== 0;
 
   if (isEmpty) {
-    return <EmptyState type={EmptyStateType.PROFILE_ACTIVITY} layout="screen-detailed" />;
+    return (
+      <DetailedEmptyState
+        title={t("profile.empty_state.activity.title")}
+        description={t("profile.empty_state.activity.description")}
+        assetPath={resolvedPath}
+      />
+    );
   }
 
   return (
     <>
       <PageHead title="Profile - Activity" />
       <ProfileSettingContentWrapper>
-        <ProfileSettingContentHeader title="Activity" />
+        <ProfileSettingContentHeader title={t("activity")} />
         {activityPages}
         {isLoadMoreVisible && (
           <div className="flex w-full items-center justify-center text-xs">
             <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
-              Load more
+              {t("load_more")}
             </Button>
           </div>
         )}
diff --git a/web/app/profile/appearance/page.tsx b/web/app/profile/appearance/page.tsx
index 775ff637b..c89bcdf3c 100644
--- a/web/app/profile/appearance/page.tsx
+++ b/web/app/profile/appearance/page.tsx
@@ -3,6 +3,9 @@
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
+// plane imports
+import { I_THEME_OPTION, THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IUserTheme } from "@plane/types";
 import { setPromiseToast } from "@plane/ui";
 // components
@@ -10,13 +13,12 @@ import { LogoSpinner } from "@/components/common";
 import { CustomThemeSelector, ThemeSwitch, PageHead } from "@/components/core";
 import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 // constants
-import { I_THEME_OPTION, THEME_OPTIONS } from "@/constants/themes";
 // helpers
 import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
 // hooks
 import { useUserProfile } from "@/hooks/store";
-
 const ProfileAppearancePage = observer(() => {
+  const { t } = useTranslation();
   const { setTheme } = useTheme();
   // states
   const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
@@ -62,11 +64,11 @@ const ProfileAppearancePage = observer(() => {
       <PageHead title="Profile - Appearance" />
       {userProfile ? (
         <ProfileSettingContentWrapper>
-          <ProfileSettingContentHeader title="Appearance" />
+          <ProfileSettingContentHeader title={t("appearance")} />
           <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
             <div className="col-span-12 sm:col-span-6">
-              <h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
-              <p className="text-sm text-custom-text-200">Select or customize your interface color scheme.</p>
+              <h4 className="text-lg font-semibold text-custom-text-100">{t("theme")}</h4>
+              <p className="text-sm text-custom-text-200">{t("select_or_customize_your_interface_color_scheme")}</p>
             </div>
             <div className="col-span-12 sm:col-span-6">
               <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
diff --git a/web/app/profile/notifications/page.tsx b/web/app/profile/notifications/page.tsx
index b39563378..5e154fdff 100644
--- a/web/app/profile/notifications/page.tsx
+++ b/web/app/profile/notifications/page.tsx
@@ -2,6 +2,7 @@
 
 import useSWR from "swr";
 // components
+import { useTranslation } from "@plane/i18n";
 import { PageHead } from "@/components/core";
 import { ProfileSettingContentHeader, ProfileSettingContentWrapper } from "@/components/profile";
 import { EmailNotificationForm } from "@/components/profile/notification";
@@ -12,6 +13,7 @@ import { UserService } from "@/services/user.service";
 const userService = new UserService();
 
 export default function ProfileNotificationPage() {
+  const { t } = useTranslation();
   // fetching user email notification settings
   const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
     userService.currentUserEmailNotificationSettings()
@@ -23,11 +25,11 @@ export default function ProfileNotificationPage() {
 
   return (
     <>
-      <PageHead title="Profile - Notifications" />
+      <PageHead title={`${t("profile.label")} - ${t("notifications")}`} />
       <ProfileSettingContentWrapper>
         <ProfileSettingContentHeader
-          title="Email notifications"
-          description="Stay in the loop on Issues you are subscribed to. Enable this to get notified."
+          title={t("email_notifications")}
+          description={t("stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified")}
         />
         <EmailNotificationForm data={data} />
       </ProfileSettingContentWrapper>
diff --git a/web/app/profile/page.tsx b/web/app/profile/page.tsx
index 1dd9702a3..66b59ab9f 100644
--- a/web/app/profile/page.tsx
+++ b/web/app/profile/page.tsx
@@ -1,140 +1,18 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
-import { Controller, useForm } from "react-hook-form";
-import { ChevronDown, CircleUserRound } from "lucide-react";
-import { Disclosure, Transition } from "@headlessui/react";
-import type { IUser } from "@plane/types";
-import {
-  Button,
-  CustomSelect,
-  CustomSearchSelect,
-  Input,
-  TOAST_TYPE,
-  setPromiseToast,
-  setToast,
-  Tooltip,
-} from "@plane/ui";
+import { useTranslation } from "@plane/i18n";
 // components
-import { DeactivateAccountModal } from "@/components/account";
 import { LogoSpinner } from "@/components/common";
-import { ImagePickerPopover, UserImageUploadModal, PageHead } from "@/components/core";
-import { ProfileSettingContentWrapper } from "@/components/profile";
-// constants
-import { TIME_ZONES, TTimezone } from "@/constants/timezones";
-import { USER_ROLES } from "@/constants/workspace";
-// helpers
-import { getFileURL } from "@/helpers/file.helper";
+import { PageHead } from "@/components/core";
+import { ProfileSettingContentWrapper, ProfileForm } from "@/components/profile";
 // hooks
 import { useUser } from "@/hooks/store";
 
-const defaultValues: Partial<IUser> = {
-  avatar_url: "",
-  cover_image_url: "",
-  first_name: "",
-  last_name: "",
-  display_name: "",
-  email: "",
-  role: "Product / Project Manager",
-  user_timezone: "Asia/Kolkata",
-};
-
 const ProfileSettingsPage = observer(() => {
-  // states
-  const [isLoading, setIsLoading] = useState(false);
-  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
-  const [deactivateAccountModal, setDeactivateAccountModal] = useState(false);
-  // form info
-  const {
-    handleSubmit,
-    reset,
-    watch,
-    control,
-    setValue,
-    formState: { errors },
-  } = useForm<IUser>({ defaultValues });
-  // derived values
-  const userAvatar = watch("avatar_url");
-  const userCover = watch("cover_image_url");
+  const { t } = useTranslation();
   // store hooks
-  const { data: currentUser, updateCurrentUser } = useUser();
-
-  useEffect(() => {
-    reset({ ...defaultValues, ...currentUser });
-  }, [currentUser, reset]);
-
-  const onSubmit = async (formData: IUser) => {
-    setIsLoading(true);
-    const payload: Partial<IUser> = {
-      first_name: formData.first_name,
-      last_name: formData.last_name,
-      avatar_url: formData.avatar_url,
-      role: formData.role,
-      display_name: formData?.display_name,
-      user_timezone: formData.user_timezone,
-    };
-    // if unsplash or a pre-defined image is uploaded, delete the old uploaded asset
-    if (formData.cover_image_url?.startsWith("http")) {
-      payload.cover_image = formData.cover_image_url;
-      payload.cover_image_asset = null;
-    }
-
-    const updateCurrentUserDetail = updateCurrentUser(payload).finally(() => setIsLoading(false));
-    setPromiseToast(updateCurrentUserDetail, {
-      loading: "Updating...",
-      success: {
-        title: "Success!",
-        message: () => `Profile updated successfully.`,
-      },
-      error: {
-        title: "Error!",
-        message: () => `There was some error in updating your profile. Please try again.`,
-      },
-    });
-  };
-
-  const handleDelete = 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", "");
-      })
-      .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 getTimeZoneLabel = (timezone: TTimezone | undefined) => {
-    if (!timezone) return undefined;
-    return (
-      <div className="flex gap-1.5">
-        <span className="text-custom-text-400">{timezone.gmtOffset}</span>
-        <span className="text-custom-text-200">{timezone.name}</span>
-      </div>
-    );
-  };
-
-  const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
-    value: timeZone.value,
-    query: timeZone.name + " " + timeZone.gmtOffset + " " + timeZone.value,
-    content: getTimeZoneLabel(timeZone),
-  }));
+  const { data: currentUser, userProfile } = useUser();
 
   if (!currentUser)
     return (
@@ -145,314 +23,9 @@ const ProfileSettingsPage = observer(() => {
 
   return (
     <>
-      <PageHead title="Profile - General Settings" />
+      <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
       <ProfileSettingContentWrapper>
-        <Controller
-          control={control}
-          name="avatar_url"
-          render={({ field: { onChange, value } }) => (
-            <UserImageUploadModal
-              isOpen={isImageUploadModalOpen}
-              onClose={() => setIsImageUploadModalOpen(false)}
-              handleRemove={async () => await handleDelete(currentUser?.avatar_url)}
-              onSuccess={(url) => {
-                onChange(url);
-                handleSubmit(onSubmit)();
-                setIsImageUploadModalOpen(false);
-              }}
-              value={value && value.trim() !== "" ? value : null}
-            />
-          )}
-        />
-        <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
-        <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="flex w-full flex-col gap-6">
-            <div className="relative h-44 w-full">
-              <img
-                src={userCover ? getFileURL(userCover) : "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
-                className="h-44 w-full rounded-lg object-cover"
-                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-custom-background-90">
-                    <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
-                      {!userAvatar || userAvatar === "" ? (
-                        <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
-                          <CircleUserRound className="h-full w-full text-custom-text-200" />
-                        </div>
-                      ) : (
-                        <div className="relative h-16 w-16 overflow-hidden">
-                          <img
-                            src={getFileURL(userAvatar)}
-                            className="absolute left-0 top-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 bottom-3 right-3 flex">
-                <Controller
-                  control={control}
-                  name="cover_image_url"
-                  render={({ field: { value, onChange } }) => (
-                    <ImagePickerPopover
-                      label={"Change cover"}
-                      onChange={(imageUrl) => onChange(imageUrl)}
-                      control={control}
-                      value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
-                      isProfileCover
-                    />
-                  )}
-                />
-              </div>
-            </div>
-            <div className="item-center mt-6 flex justify-between">
-              <div className="flex flex-col">
-                <div className="item-center flex text-lg font-medium text-custom-text-200">
-                  <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
-                </div>
-                <span className="text-sm text-custom-text-300 tracking-tight">{watch("email")}</span>
-              </div>
-            </div>
-            <div className="flex flex-col gap-2">
-              <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm font-medium text-custom-text-200">
-                    First name<span className="text-red-500">*</span>
-                  </h4>
-                  <Controller
-                    control={control}
-                    name="first_name"
-                    rules={{
-                      required: "Please enter first name",
-                    }}
-                    render={({ field: { value, onChange, ref } }) => (
-                      <Input
-                        id="first_name"
-                        name="first_name"
-                        type="text"
-                        value={value}
-                        onChange={onChange}
-                        ref={ref}
-                        hasError={Boolean(errors.first_name)}
-                        placeholder="Enter your first name"
-                        className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
-                        maxLength={24}
-                        autoComplete="on"
-                      />
-                    )}
-                  />
-                  {errors.first_name && <span className="text-xs text-red-500">{errors.first_name.message}</span>}
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm font-medium text-custom-text-200">Last name</h4>
-                  <Controller
-                    control={control}
-                    name="last_name"
-                    render={({ field: { value, onChange, ref } }) => (
-                      <Input
-                        id="last_name"
-                        name="last_name"
-                        type="text"
-                        value={value}
-                        onChange={onChange}
-                        ref={ref}
-                        hasError={Boolean(errors.last_name)}
-                        placeholder="Enter your last name"
-                        className="w-full rounded-md"
-                        maxLength={24}
-                        autoComplete="on"
-                      />
-                    )}
-                  />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm font-medium text-custom-text-200">
-                    Display name<span className="text-red-500">*</span>
-                  </h4>
-                  <Controller
-                    control={control}
-                    name="display_name"
-                    rules={{
-                      required: "Display name is required.",
-                      validate: (value) => {
-                        if (value.trim().length < 1) return "Display name can't be empty.";
-                        if (value.split("  ").length > 1) return "Display name can't have two consecutive spaces.";
-                        if (value.replace(/\s/g, "").length < 1)
-                          return "Display name must be at least 1 character long.";
-                        if (value.replace(/\s/g, "").length > 20)
-                          return "Display name must be less than 20 characters long.";
-                        return true;
-                      },
-                    }}
-                    render={({ field: { value, onChange, ref } }) => (
-                      <Input
-                        id="display_name"
-                        name="display_name"
-                        type="text"
-                        value={value}
-                        onChange={onChange}
-                        ref={ref}
-                        hasError={Boolean(errors?.display_name)}
-                        placeholder="Enter your display name"
-                        className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
-                        maxLength={24}
-                      />
-                    )}
-                  />
-                  {errors?.display_name && (
-                    <span className="text-xs text-red-500">{errors?.display_name?.message}</span>
-                  )}
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm font-medium text-custom-text-200">
-                    Email<span className="text-red-500">*</span>
-                  </h4>
-                  <Controller
-                    control={control}
-                    name="email"
-                    rules={{
-                      required: "Email is required.",
-                    }}
-                    render={({ field: { value, ref } }) => (
-                      <Input
-                        id="email"
-                        name="email"
-                        type="email"
-                        value={value}
-                        ref={ref}
-                        hasError={Boolean(errors.email)}
-                        placeholder="Enter your email"
-                        className={`w-full cursor-not-allowed rounded-md !bg-custom-background-90 ${
-                          errors.email ? "border-red-500" : ""
-                        }`}
-                        autoComplete="on"
-                        disabled
-                      />
-                    )}
-                  />
-                </div>
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm font-medium text-custom-text-200">
-                    Role<span className="text-red-500">*</span>
-                  </h4>
-                  <Controller
-                    name="role"
-                    control={control}
-                    rules={{ required: "Role is required." }}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSelect
-                        value={value}
-                        onChange={onChange}
-                        label={value ? value.toString() : "Select your role"}
-                        buttonClassName={errors.role ? "border-red-500" : "border-none"}
-                        className="rounded-md border-[0.5px] !border-custom-border-200"
-                        optionsClassName="w-full"
-                        input
-                      >
-                        {USER_ROLES.map((item) => (
-                          <CustomSelect.Option key={item.value} value={item.value}>
-                            {item.label}
-                          </CustomSelect.Option>
-                        ))}
-                      </CustomSelect>
-                    )}
-                  />
-                  {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
-                </div>
-              </div>
-            </div>
-            <div className="flex flex-col gap-2 pt-4">
-              <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
-                <div className="flex flex-col gap-1">
-                  <h4 className="text-sm font-medium text-custom-text-200">
-                    Timezone<span className="text-red-500">*</span>
-                  </h4>
-                  <Controller
-                    name="user_timezone"
-                    control={control}
-                    rules={{ required: "Please select a timezone" }}
-                    render={({ field: { value, onChange } }) => (
-                      <CustomSearchSelect
-                        value={value}
-                        label={
-                          value
-                            ? (getTimeZoneLabel(TIME_ZONES.find((t) => t.value === value)) ?? value)
-                            : "Select a timezone"
-                        }
-                        options={timeZoneOptions}
-                        onChange={onChange}
-                        buttonClassName={errors.user_timezone ? "border-red-500" : ""}
-                        className="rounded-md border-[0.5px] !border-custom-border-200"
-                        optionsClassName="w-72"
-                        input
-                      />
-                    )}
-                  />
-                  {errors.user_timezone && <span className="text-xs text-red-500">{errors.user_timezone.message}</span>}
-                </div>
-                <Tooltip tooltipContent="Coming soon" position="bottom">
-                  <div className="flex flex-col gap-1">
-                    <h4 className="text-sm font-medium text-custom-text-200">Language</h4>
-                    <CustomSearchSelect
-                      value="English (US)"
-                      label="English (US)"
-                      options={[]}
-                      onChange={() => {}}
-                      className="rounded-md bg-custom-background-90"
-                      input
-                      disabled
-                    />
-                  </div>
-                </Tooltip>
-              </div>
-              <div className="flex items-center justify-between pt-6 pb-8">
-                <Button variant="primary" type="submit" loading={isLoading}>
-                  {isLoading ? "Saving..." : "Save changes"}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </form>
-        <Disclosure as="div" className="border-t border-custom-border-100">
-          {({ open }) => (
-            <>
-              <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
-                <span className="text-lg font-medium tracking-tight">Deactivate account</span>
-                <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
-              </Disclosure.Button>
-              <Transition
-                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-sm tracking-tight">
-                      When deactivating an account, all of the data and resources within that account will be
-                      permanently removed and cannot be recovered.
-                    </span>
-                    <div>
-                      <Button variant="danger" onClick={() => setDeactivateAccountModal(true)}>
-                        Deactivate account
-                      </Button>
-                    </div>
-                  </div>
-                </Disclosure.Panel>
-              </Transition>
-            </>
-          )}
-        </Disclosure>
+        <ProfileForm user={currentUser} profile={userProfile.data} />
       </ProfileSettingContentWrapper>
     </>
   );
diff --git a/web/app/profile/security/page.tsx b/web/app/profile/security/page.tsx
index 594816cc1..86098f122 100644
--- a/web/app/profile/security/page.tsx
+++ b/web/app/profile/security/page.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
@@ -55,6 +56,8 @@ const SecurityPage = observer(() => {
   const oldPassword = watch("old_password");
   const password = watch("new_password");
   const confirmPassword = watch("confirm_password");
+  // i18n
+  const { t } = useTranslation();
 
   const isNewPasswordSameAsOldPassword = oldPassword !== "" && password !== "" && password === oldPassword;
 
@@ -76,16 +79,16 @@ const SecurityPage = observer(() => {
       setShowPassword(defaultShowPassword);
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Success!",
-        message: "Password changed successfully.",
+        title: t("auth.common.password.toast.change_password.success.title"),
+        message: t("auth.common.password.toast.change_password.success.message"),
       });
     } catch (err: any) {
       const errorInfo = authErrorHandler(err.error_code?.toString());
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: errorInfo?.title ?? "Error!",
+        title: errorInfo?.title ?? t("auth.common.password.toast.error.title"),
         message:
-          typeof errorInfo?.message === "string" ? errorInfo.message : "Something went wrong. Please try again 2.",
+          typeof errorInfo?.message === "string" ? errorInfo.message : t("auth.common.password.toast.error.message"),
       });
     }
   };
@@ -109,17 +112,17 @@ const SecurityPage = observer(() => {
     <>
       <PageHead title="Profile - Security" />
       <ProfileSettingContentWrapper>
-        <ProfileSettingContentHeader title="Change password" />
+        <ProfileSettingContentHeader title={t("auth.common.password.change_password.label.default")} />
         <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 py-6">
           <div className="flex flex-col gap-10 w-full max-w-96">
             <div className="space-y-1">
-              <h4 className="text-sm">Current password</h4>
+              <h4 className="text-sm">{t("auth.common.password.current_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
                 <Controller
                   control={control}
                   name="old_password"
                   rules={{
-                    required: "This field is required",
+                    required: t("common.errors.required"),
                   }}
                   render={({ field: { value, onChange } }) => (
                     <Input
@@ -127,7 +130,7 @@ const SecurityPage = observer(() => {
                       type={showPassword?.oldPassword ? "text" : "password"}
                       value={value}
                       onChange={onChange}
-                      placeholder="Old password"
+                      placeholder={t("old_password")}
                       className="w-full"
                       hasError={Boolean(errors.old_password)}
                     />
@@ -148,20 +151,20 @@ const SecurityPage = observer(() => {
               {errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
             </div>
             <div className="space-y-1">
-              <h4 className="text-sm">New password</h4>
+              <h4 className="text-sm">{t("auth.common.password.new_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
                 <Controller
                   control={control}
                   name="new_password"
                   rules={{
-                    required: "This field is required",
+                    required: t("common.errors.required"),
                   }}
                   render={({ field: { value, onChange } }) => (
                     <Input
                       id="new_password"
                       type={showPassword?.password ? "text" : "password"}
                       value={value}
-                      placeholder="New password"
+                      placeholder={t("auth.common.password.new_password.placeholder")}
                       onChange={onChange}
                       className="w-full"
                       hasError={Boolean(errors.new_password)}
@@ -184,23 +187,23 @@ const SecurityPage = observer(() => {
               </div>
               {passwordSupport}
               {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
-                <span className="text-xs text-red-500">New password must be different from old password</span>
+                <span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
               )}
             </div>
             <div className="space-y-1">
-              <h4 className="text-sm">Confirm password</h4>
+              <h4 className="text-sm">{t("auth.common.password.confirm_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
                 <Controller
                   control={control}
                   name="confirm_password"
                   rules={{
-                    required: "This field is required",
+                    required: t("common.errors.required"),
                   }}
                   render={({ field: { value, onChange } }) => (
                     <Input
                       id="confirm_password"
                       type={showPassword?.confirmPassword ? "text" : "password"}
-                      placeholder="Confirm password"
+                      placeholder={t("auth.common.password.confirm_password.placeholder")}
                       value={value}
                       onChange={onChange}
                       className="w-full"
@@ -223,14 +226,16 @@ const SecurityPage = observer(() => {
                 )}
               </div>
               {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
-                <span className="text-sm text-red-500">Passwords don{"'"}t match</span>
+                <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
               )}
             </div>
           </div>
 
           <div className="flex items-center justify-between py-2">
             <Button variant="primary" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
-              {isSubmitting ? "Changing password..." : "Change password"}
+              {isSubmitting
+                ? `${t("auth.common.password.change_password.label.submitting")}`
+                : t("auth.common.password.change_password.label.default")}
             </Button>
           </div>
         </form>
diff --git a/web/app/profile/sidebar.tsx b/web/app/profile/sidebar.tsx
index 479ef21f5..07fd746c6 100644
--- a/web/app/profile/sidebar.tsx
+++ b/web/app/profile/sidebar.tsx
@@ -5,15 +5,26 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 // icons
-import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
-// plane helpers
+import {
+  ChevronLeft,
+  LogOut,
+  MoveLeft,
+  Plus,
+  UserPlus,
+  Activity,
+  Bell,
+  CircleUser,
+  KeyRound,
+  Settings2,
+} from "lucide-react";
+// plane imports
+import { PROFILE_ACTION_LINKS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
-// ui
+import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
 import { SidebarNavItem } from "@/components/sidebar";
 // constants
-import { PROFILE_ACTION_LINKS } from "@/constants/profile";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getFileURL } from "@/helpers/file.helper";
@@ -23,7 +34,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 
 const WORKSPACE_ACTION_LINKS = [
   {
-    key: "create-workspace",
+    key: "create_workspace",
     Icon: Plus,
     label: "Create workspace",
     href: "/create-workspace",
@@ -36,6 +47,19 @@ const WORKSPACE_ACTION_LINKS = [
   },
 ];
 
+export const ProjectActionIcons = ({ type, size, className }: { type: string; size?: number; className?: string }) => {
+  const icons = {
+    profile: CircleUser,
+    security: KeyRound,
+    activity: Activity,
+    appearance: Settings2,
+    notifications: Bell,
+  };
+
+  if (type === undefined) return null;
+  const Icon = icons[type as keyof typeof icons];
+  return <Icon size={size} className={className} />;
+};
 export const ProfileLayoutSidebar = observer(() => {
   // states
   const [isSigningOut, setIsSigningOut] = useState(false);
@@ -47,6 +71,7 @@ export const ProfileLayoutSidebar = observer(() => {
   const { data: currentUserSettings } = useUserSettings();
   const { workspaces } = useWorkspace();
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
 
   const workspacesList = Object.values(workspaces ?? {});
 
@@ -91,8 +116,8 @@ export const ProfileLayoutSidebar = observer(() => {
       .catch(() =>
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Failed to sign out. Please try again.",
+          title: t("sign_out.toast.error.title"),
+          message: t("sign_out.toast.error.message"),
         })
       )
       .finally(() => setIsSigningOut(false));
@@ -117,13 +142,13 @@ export const ProfileLayoutSidebar = observer(() => {
               <ChevronLeft className="h-5 w-5" strokeWidth={1} />
             </span>
             {!sidebarCollapsed && (
-              <h4 className="truncate text-lg font-semibold text-custom-text-200">Profile settings</h4>
+              <h4 className="truncate text-lg font-semibold text-custom-text-200">{t("profile_settings")}</h4>
             )}
           </div>
         </Link>
         <div className="flex flex-shrink-0 flex-col overflow-x-hidden">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Your account</h6>
+            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">{t("your_account")}</h6>
           )}
           <div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
             {PROFILE_ACTION_LINKS.map((link) => {
@@ -132,7 +157,7 @@ export const ProfileLayoutSidebar = observer(() => {
               return (
                 <Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
                   <Tooltip
-                    tooltipContent={link.label}
+                    tooltipContent={t(link.key)}
                     position="right"
                     className="ml-2"
                     disabled={!sidebarCollapsed}
@@ -144,8 +169,9 @@ export const ProfileLayoutSidebar = observer(() => {
                       isActive={link.highlight(pathname)}
                     >
                       <div className="flex items-center gap-1.5 py-[1px]">
-                        <link.Icon className="size-4" />
-                        {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{link.label}</p>}
+                        <ProjectActionIcons type={link.key} size={16} />
+
+                        {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(link.i18n_label)}</p>}
                       </div>
                     </SidebarNavItem>
                   </Tooltip>
@@ -156,7 +182,7 @@ export const ProfileLayoutSidebar = observer(() => {
         </div>
         <div className="flex flex-col overflow-x-hidden">
           {!sidebarCollapsed && (
-            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">Workspaces</h6>
+            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">{t("workspaces")}</h6>
           )}
           {workspacesList && workspacesList.length > 0 && (
             <div
@@ -206,7 +232,7 @@ export const ProfileLayoutSidebar = observer(() => {
             {WORKSPACE_ACTION_LINKS.map((link) => (
               <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
                 <Tooltip
-                  tooltipContent={link.label}
+                  tooltipContent={t(link.key)}
                   position="right"
                   className="ml-2"
                   disabled={!sidebarCollapsed}
@@ -218,7 +244,7 @@ export const ProfileLayoutSidebar = observer(() => {
                     }`}
                   >
                     {<link.Icon className="h-4 w-4" />}
-                    {!sidebarCollapsed && link.label}
+                    {!sidebarCollapsed && t(link.key)}
                   </div>
                 </Tooltip>
               </Link>
@@ -238,7 +264,7 @@ export const ProfileLayoutSidebar = observer(() => {
               disabled={isSigningOut}
             >
               <LogOut className="h-3.5 w-3.5" />
-              {!sidebarCollapsed && <span>{isSigningOut ? "Signing out..." : "Sign out"}</span>}
+              {!sidebarCollapsed && <span>{isSigningOut ? `${t("signing_out")}...` : t("sign_out")}</span>}
             </button>
             <button
               type="button"
diff --git a/web/app/provider.tsx b/web/app/provider.tsx
index dba975a63..b120882f7 100644
--- a/web/app/provider.tsx
+++ b/web/app/provider.tsx
@@ -4,10 +4,10 @@ import { FC, ReactNode } from "react";
 import dynamic from "next/dynamic";
 import { useTheme, ThemeProvider } from "next-themes";
 import { SWRConfig } from "swr";
-// ui
+// Plane Imports
+import { WEB_SWR_CONFIG } from "@plane/constants";
+import { TranslationProvider } from "@plane/i18n";
 import { Toast } from "@plane/ui";
-// constants
-import { SWR_CONFIG } from "@/constants/swr-config";
 //helpers
 import { resolveGeneralTheme } from "@/helpers/theme.helper";
 // nprogress
@@ -41,15 +41,17 @@ export const AppProvider: FC<IAppProvider> = (props) => {
       <StoreProvider>
         <ThemeProvider themes={["light", "dark", "light-contrast", "dark-contrast", "custom"]} defaultTheme="system">
           <ToastWithTheme />
-          <StoreWrapper>
-            <InstanceWrapper>
-              <IntercomProvider>
-                <PostHogProvider>
-                  <SWRConfig value={SWR_CONFIG}>{children}</SWRConfig>
-                </PostHogProvider>
-              </IntercomProvider>
-            </InstanceWrapper>
-          </StoreWrapper>
+          <TranslationProvider>
+            <StoreWrapper>
+              <InstanceWrapper>
+                <IntercomProvider>
+                  <PostHogProvider>
+                    <SWRConfig value={WEB_SWR_CONFIG}>{children}</SWRConfig>
+                  </PostHogProvider>
+                </IntercomProvider>
+              </InstanceWrapper>
+            </StoreWrapper>
+          </TranslationProvider>
         </ThemeProvider>
       </StoreProvider>
     </>
diff --git a/web/app/sign-up/page.tsx b/web/app/sign-up/page.tsx
index f08ccbae7..aa18cf085 100644
--- a/web/app/sign-up/page.tsx
+++ b/web/app/sign-up/page.tsx
@@ -6,9 +6,10 @@ import Link from "next/link";
 // ui
 import { useTheme } from "next-themes";
 // components
+import { NAVIGATE_TO_SIGNIN } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { AuthRoot } from "@/components/account";
 // constants
-import { NAVIGATE_TO_SIGNIN } from "@/constants/event-tracker";
 // helpers
 import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper";
 // hooks
@@ -23,6 +24,8 @@ import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue
 export type AuthType = "sign-in" | "sign-up";
 
 const SignInPage = observer(() => {
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { captureEvent } = useEventTracker();
   // hooks
@@ -48,13 +51,13 @@ const SignInPage = observer(() => {
               </Link>
             </div>
             <div className="flex flex-col items-end sm:items-center sm:gap-2 sm:flex-row  text-center text-sm font-medium text-onboarding-text-300">
-              Already have an account?{" "}
+              {t("auth.common.already_have_an_account")}
               <Link
                 href="/"
                 onClick={() => captureEvent(NAVIGATE_TO_SIGNIN, {})}
                 className="font-semibold text-custom-primary-100 hover:underline"
               >
-                Log in
+                {t("auth.common.login")}
               </Link>
             </div>
           </div>
diff --git a/web/app/workspace-invitations/page.tsx b/web/app/workspace-invitations/page.tsx
index a68290198..8d981fff4 100644
--- a/web/app/workspace-invitations/page.tsx
+++ b/web/app/workspace-invitations/page.tsx
@@ -82,7 +82,7 @@ const WorkspaceInvitationPage = observer(() => {
           ) : (
             <EmptySpace
               title={`You have been invited to ${invitationDetail.workspace.name}`}
-              description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
+              description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your Plane account."
             >
               <EmptySpaceItem Icon={Check} title="Accept" action={handleAccept} />
               <EmptySpaceItem Icon={X} title="Ignore" action={handleReject} />
@@ -92,14 +92,14 @@ const WorkspaceInvitationPage = observer(() => {
           invitationDetail?.accepted ? (
             <EmptySpace
               title={`You are already a member of ${invitationDetail.workspace.name}`}
-              description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
+              description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your Plane account."
             >
               <EmptySpaceItem Icon={Boxes} title="Continue to home" href="/" />
             </EmptySpace>
           ) : (
             <EmptySpace
               title="This invitation link is not active anymore."
-              description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
+              description="Your workspace is where you'll create projects, collaborate on your work items, and organize different streams of work in your Plane account."
               link={{ text: "Or start from an empty project", href: "/" }}
             >
               {!currentUser ? (
diff --git a/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx b/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
index f19ffa809..e8a13f036 100644
--- a/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
+++ b/web/ce/components/active-cycles/workspace-active-cycles-upgrade.tsx
@@ -3,19 +3,63 @@
 import React from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
-// ui
+import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope, Search } from "lucide-react";
+// plane imports
+import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ContentWrapper, getButtonStyling } from "@plane/ui";
 // components
 import { ProIcon } from "@/components/common";
-// constants
-import { MARKETING_PRICING_PAGE_LINK } from "@/constants/common";
-import { WORKSPACE_ACTIVE_CYCLES_DETAILS } from "@/constants/cycle";
 // helper
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useUser } from "@/hooks/store";
 
+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: Folder,
+  },
+  {
+    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: BarChart4,
+  },
+  {
+    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: AlertOctagon,
+  },
+  {
+    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: Search,
+  },
+  {
+    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(() => {
+  const { t } = useTranslation();
   // store hooks
   const {
     userProfile: { data: userProfile },
@@ -33,10 +77,8 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
       >
         <div className="relative flex flex-col justify-center gap-7 px-14 lg:w-1/2">
           <div className="flex max-w-64 flex-col gap-2">
-            <h2 className="text-2xl font-semibold">On-demand snapshots of all your cycles</h2>
-            <p className="text-base font-medium text-custom-text-300">
-              Monitor cycles across projects, track high-priority issues, and zoom in cycles that need attention.
-            </p>
+            <h2 className="text-2xl font-semibold">{t("on_demand_snapshots_of_all_your_cycles")}</h2>
+            <p className="text-base font-medium text-custom-text-300">{t("active_cycles_description")}</p>
           </div>
           <div className="flex items-center gap-3">
             <a
@@ -46,7 +88,7 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
               rel="noreferrer"
             >
               <ProIcon className="h-3.5 w-3.5 text-white" />
-              Upgrade
+              {t("upgrade")}
             </a>
           </div>
           <span className="absolute left-0 top-0">
@@ -81,11 +123,11 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
       <div className="grid h-full grid-cols-1 gap-5 pb-8 lg:grid-cols-2 xl:grid-cols-3">
         {WORKSPACE_ACTIVE_CYCLES_DETAILS.map((item) => (
           <div key={item.title} className="flex min-h-32 w-full flex-col gap-2 rounded-md bg-custom-background-80 p-4">
-            <div className="flex items-center gap-2 justify-between">
-              <h3 className="font-medium">{item.title}</h3>
-              <item.icon className="h-4 w-4 text-blue-500" />
+            <div className="flex gap-2 justify-between">
+              <h3 className="font-medium">{t(item.key)}</h3>
+              <item.icon className="mt-1 h-4 w-4 text-blue-500" />
             </div>
-            <span className="text-sm text-custom-text-300">{item.description}</span>
+            <span className="text-sm text-custom-text-300">{t(`${item.key}_description`)}</span>
           </div>
         ))}
       </div>
diff --git a/web/ce/components/breadcrumbs/index.ts b/web/ce/components/breadcrumbs/index.ts
new file mode 100644
index 000000000..9ff8c7dff
--- /dev/null
+++ b/web/ce/components/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from "./project";
diff --git a/web/ce/components/breadcrumbs/project.tsx b/web/ce/components/breadcrumbs/project.tsx
new file mode 100644
index 000000000..3b49bb211
--- /dev/null
+++ b/web/ce/components/breadcrumbs/project.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { Briefcase } from "lucide-react";
+// ui
+import { Breadcrumbs, Logo } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common";
+// hooks
+import { useProject } from "@/hooks/store";
+
+export const ProjectBreadcrumb = observer(() => {
+  // store hooks
+  const { currentProjectDetails } = useProject();
+
+  return (
+    <Breadcrumbs.BreadcrumbItem
+      type="text"
+      link={
+        <BreadcrumbLink
+          label={currentProjectDetails?.name ?? "Project"}
+          icon={
+            currentProjectDetails ? (
+              currentProjectDetails && (
+                <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+                  <Logo logo={currentProjectDetails?.logo_props} size={16} />
+                </span>
+              )
+            ) : (
+              <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                <Briefcase className="h-4 w-4" />
+              </span>
+            )
+          }
+        />
+      }
+    />
+  );
+});
diff --git a/web/ce/components/command-palette/actions/index.ts b/web/ce/components/command-palette/actions/index.ts
new file mode 100644
index 000000000..c7f1e122d
--- /dev/null
+++ b/web/ce/components/command-palette/actions/index.ts
@@ -0,0 +1 @@
+export * from "./work-item-actions";
diff --git a/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx b/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx
new file mode 100644
index 000000000..9f59d226b
--- /dev/null
+++ b/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx
@@ -0,0 +1,43 @@
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { Check } from "lucide-react";
+// plane imports
+import { Spinner, StateGroupIcon } from "@plane/ui";
+// store hooks
+import { useProjectState } from "@/hooks/store";
+
+export type TChangeWorkItemStateListProps = {
+  projectId: string | null;
+  currentStateId: string | null;
+  handleStateChange: (stateId: string) => void;
+};
+
+export const ChangeWorkItemStateList = observer((props: TChangeWorkItemStateListProps) => {
+  const { projectId, currentStateId, handleStateChange } = props;
+  // store hooks
+  const { getProjectStates } = useProjectState();
+  // derived values
+  const projectStates = getProjectStates(projectId);
+
+  return (
+    <>
+      {projectStates ? (
+        projectStates.length > 0 ? (
+          projectStates.map((state) => (
+            <Command.Item key={state.id} onSelect={() => handleStateChange(state.id)} className="focus:outline-none">
+              <div className="flex items-center space-x-3">
+                <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
+                <p>{state.name}</p>
+              </div>
+              <div>{state.id === currentStateId && <Check className="h-3 w-3" />}</div>
+            </Command.Item>
+          ))
+        ) : (
+          <div className="text-center">No states found</div>
+        )
+      ) : (
+        <Spinner />
+      )}
+    </>
+  );
+});
diff --git a/web/ce/components/command-palette/actions/work-item-actions/index.ts b/web/ce/components/command-palette/actions/work-item-actions/index.ts
new file mode 100644
index 000000000..ac7f8aa86
--- /dev/null
+++ b/web/ce/components/command-palette/actions/work-item-actions/index.ts
@@ -0,0 +1 @@
+export * from "./change-state-list";
diff --git a/web/ce/components/command-palette/modals/index.ts b/web/ce/components/command-palette/modals/index.ts
new file mode 100644
index 000000000..a4fac4b91
--- /dev/null
+++ b/web/ce/components/command-palette/modals/index.ts
@@ -0,0 +1,3 @@
+export * from "./workspace-level";
+export * from "./project-level";
+export * from "./issue-level";
diff --git a/web/ce/components/command-palette/modals/issue-level.tsx b/web/ce/components/command-palette/modals/issue-level.tsx
new file mode 100644
index 000000000..b1d1bdb1c
--- /dev/null
+++ b/web/ce/components/command-palette/modals/issue-level.tsx
@@ -0,0 +1,70 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+// components
+import { BulkDeleteIssuesModal } from "@/components/core";
+import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
+// constants
+// hooks
+import { useCommandPalette, useIssueDetail, useUser } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+
+export type TIssueLevelModalsProps = {
+  projectId: string | undefined;
+  issueId: string | undefined;
+};
+
+export const IssueLevelModals: FC<TIssueLevelModalsProps> = observer((props) => {
+  const { projectId, issueId } = props;
+  // router
+  const pathname = usePathname();
+  const { workspaceSlug, cycleId, moduleId } = useParams();
+  const router = useAppRouter();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    issue: { getIssueById },
+  } = useIssueDetail();
+  const {
+    issues: { removeIssue },
+  } = useIssuesStore();
+  const {
+    isCreateIssueModalOpen,
+    toggleCreateIssueModal,
+    isDeleteIssueModalOpen,
+    toggleDeleteIssueModal,
+    isBulkDeleteIssueModalOpen,
+    toggleBulkDeleteIssueModal,
+  } = useCommandPalette();
+  // derived values
+  const issueDetails = issueId ? getIssueById(issueId) : undefined;
+  const isDraftIssue = pathname?.includes("draft-issues") || false;
+
+  return (
+    <>
+      <CreateUpdateIssueModal
+        isOpen={isCreateIssueModalOpen}
+        onClose={() => toggleCreateIssueModal(false)}
+        data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_ids: [moduleId.toString()] } : undefined}
+        isDraft={isDraftIssue}
+      />
+      {workspaceSlug && projectId && issueId && issueDetails && (
+        <DeleteIssueModal
+          handleClose={() => toggleDeleteIssueModal(false)}
+          isOpen={isDeleteIssueModalOpen}
+          data={issueDetails}
+          onSubmit={async () => {
+            await removeIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString());
+            router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
+          }}
+        />
+      )}
+      <BulkDeleteIssuesModal
+        isOpen={isBulkDeleteIssueModalOpen}
+        onClose={() => toggleBulkDeleteIssueModal(false)}
+        user={currentUser}
+      />
+    </>
+  );
+});
diff --git a/web/ce/components/command-palette/modals/project-level.tsx b/web/ce/components/command-palette/modals/project-level.tsx
new file mode 100644
index 000000000..e0ff03a48
--- /dev/null
+++ b/web/ce/components/command-palette/modals/project-level.tsx
@@ -0,0 +1,62 @@
+import { observer } from "mobx-react";
+// components
+import { CycleCreateUpdateModal } from "@/components/cycles";
+import { CreateUpdateModuleModal } from "@/components/modules";
+import { CreatePageModal } from "@/components/pages";
+import { CreateUpdateProjectViewModal } from "@/components/views";
+// hooks
+import { useCommandPalette } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
+
+export type TProjectLevelModalsProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectLevelModals = observer((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/web/ce/components/command-palette/modals/workspace-level.tsx b/web/ce/components/command-palette/modals/workspace-level.tsx
new file mode 100644
index 000000000..64d22493e
--- /dev/null
+++ b/web/ce/components/command-palette/modals/workspace-level.tsx
@@ -0,0 +1,25 @@
+import { observer } from "mobx-react";
+// components
+import { CreateProjectModal } from "@/components/project";
+// hooks
+import { useCommandPalette } from "@/hooks/store";
+
+export type TWorkspaceLevelModalsProps = {
+  workspaceSlug: string;
+};
+
+export const WorkspaceLevelModals = observer((props: TWorkspaceLevelModalsProps) => {
+  const { workspaceSlug } = props;
+  // store hooks
+  const { isCreateProjectModalOpen, toggleCreateProjectModal } = useCommandPalette();
+
+  return (
+    <>
+      <CreateProjectModal
+        isOpen={isCreateProjectModalOpen}
+        onClose={() => toggleCreateProjectModal(false)}
+        workspaceSlug={workspaceSlug.toString()}
+      />
+    </>
+  );
+});
diff --git a/web/ce/components/common/index.ts b/web/ce/components/common/index.ts
new file mode 100644
index 000000000..75c2cf410
--- /dev/null
+++ b/web/ce/components/common/index.ts
@@ -0,0 +1 @@
+export * from "./subscription";
diff --git a/web/ce/components/common/subscription/index.ts b/web/ce/components/common/subscription/index.ts
new file mode 100644
index 000000000..beb26e1d9
--- /dev/null
+++ b/web/ce/components/common/subscription/index.ts
@@ -0,0 +1 @@
+export * from "./subscription-pill";
\ No newline at end of file
diff --git a/web/ce/components/common/subscription/subscription-pill.tsx b/web/ce/components/common/subscription/subscription-pill.tsx
new file mode 100644
index 000000000..c557ce204
--- /dev/null
+++ b/web/ce/components/common/subscription/subscription-pill.tsx
@@ -0,0 +1,7 @@
+import { IWorkspace } from "@plane/types";
+
+type TProps = {
+  workspace: IWorkspace;
+};
+
+export const SubscriptionPill = (props: TProps) => <></>;
diff --git a/web/ce/components/cycles/active-cycle/root.tsx b/web/ce/components/cycles/active-cycle/root.tsx
index a173cfda0..6b2ecb928 100644
--- a/web/ce/components/cycles/active-cycle/root.tsx
+++ b/web/ce/components/cycles/active-cycle/root.tsx
@@ -1,8 +1,10 @@
 "use client";
 
+import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { Disclosure } from "@headlessui/react";
-// ui
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { Row } from "@plane/ui";
 // components
 import {
@@ -13,77 +15,97 @@ import {
   CyclesListItem,
 } from "@/components/cycles";
 import useCyclesDetails from "@/components/cycles/active-cycle/use-cycles-details";
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
+// hooks
 import { useCycle } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { ActiveCycleIssueDetails } from "@/store/issue/cycle";
 
 interface IActiveCycleDetails {
   workspaceSlug: string;
   projectId: string;
+  cycleId?: string;
+  showHeader?: boolean;
 }
 
 export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
-  const { workspaceSlug, projectId } = props;
-  const { currentProjectActiveCycle, currentProjectActiveCycleId } = useCycle();
+  const { workspaceSlug, projectId, cycleId: propsCycleId, showHeader = true } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { currentProjectActiveCycleId } = useCycle();
+  // derived values
+  const cycleId = propsCycleId ?? currentProjectActiveCycleId;
+  const activeCycleResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/cycle/active" });
+  // fetch cycle details
   const {
     handleFiltersUpdate,
     cycle: activeCycle,
     cycleIssueDetails,
-  } = useCyclesDetails({ workspaceSlug, projectId, cycleId: currentProjectActiveCycleId });
+  } = useCyclesDetails({ workspaceSlug, projectId, cycleId });
+
+  const ActiveCyclesComponent = useMemo(
+    () => (
+      <>
+        {!cycleId || !activeCycle ? (
+          <DetailedEmptyState
+            title={t("project_cycles.empty_state.active.title")}
+            description={t("project_cycles.empty_state.active.description")}
+            assetPath={activeCycleResolvedPath}
+          />
+        ) : (
+          <div className="flex flex-col border-b border-custom-border-200">
+            {cycleId && (
+              <CyclesListItem
+                key={cycleId}
+                cycleId={cycleId}
+                workspaceSlug={workspaceSlug}
+                projectId={projectId}
+                className="!border-b-transparent"
+              />
+            )}
+            <Row className="bg-custom-background-100 pt-3 pb-6">
+              <div className="grid grid-cols-1 bg-custom-background-100 gap-3 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 as ActiveCycleIssueDetails}
+                />
+              </div>
+            </Row>
+          </div>
+        )}
+      </>
+    ),
+    [cycleId, activeCycle, workspaceSlug, projectId, handleFiltersUpdate, cycleIssueDetails]
+  );
 
   return (
     <>
-      <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 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
-              <CycleListGroupHeader title="Active cycle" type="current" isExpanded={open} />
-            </Disclosure.Button>
-            <Disclosure.Panel>
-              {!currentProjectActiveCycle ? (
-                <EmptyState type={EmptyStateType.PROJECT_CYCLE_ACTIVE} size="sm" />
-              ) : (
-                <div className="flex flex-col border-b border-custom-border-200">
-                  {currentProjectActiveCycleId && (
-                    <CyclesListItem
-                      key={currentProjectActiveCycleId}
-                      cycleId={currentProjectActiveCycleId}
-                      workspaceSlug={workspaceSlug}
-                      projectId={projectId}
-                      className="!border-b-transparent"
-                    />
-                  )}
-                  <Row className="bg-custom-background-100 pt-3 pb-6">
-                    <div className="grid grid-cols-1 bg-custom-background-100 gap-3 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={currentProjectActiveCycleId}
-                        handleFiltersUpdate={handleFiltersUpdate}
-                        cycleIssueDetails={cycleIssueDetails as ActiveCycleIssueDetails}
-                      />
-                    </div>
-                  </Row>
-                </div>
-              )}
-            </Disclosure.Panel>
-          </>
-        )}
-      </Disclosure>
+      {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 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
+                <CycleListGroupHeader title={t("project_cycles.active_cycle.label")} type="current" isExpanded={open} />
+              </Disclosure.Button>
+              <Disclosure.Panel>{ActiveCyclesComponent}</Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+      ) : (
+        <>{ActiveCyclesComponent}</>
+      )}
     </>
   );
 });
diff --git a/web/ce/components/cycles/additional-actions.tsx b/web/ce/components/cycles/additional-actions.tsx
new file mode 100644
index 000000000..1fcb7146f
--- /dev/null
+++ b/web/ce/components/cycles/additional-actions.tsx
@@ -0,0 +1,7 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+type Props = {
+  cycleId: string;
+  projectId: string;
+};
+export const CycleAdditionalActions: FC<Props> = observer(() => <></>);
diff --git a/web/ce/components/cycles/analytics-sidebar/base.tsx b/web/ce/components/cycles/analytics-sidebar/base.tsx
index 87f07e387..c259a4a81 100644
--- a/web/ce/components/cycles/analytics-sidebar/base.tsx
+++ b/web/ce/components/cycles/analytics-sidebar/base.tsx
@@ -2,6 +2,7 @@
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 // plane ui
+import { useTranslation } from "@plane/i18n";
 import { TCycleEstimateType } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
@@ -23,6 +24,7 @@ export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
   // hooks
   const { getEstimateTypeByCycleId, getCycleById, fetchCycleDetails, fetchArchivedCycleDetails, setEstimateType } =
     useCycle();
+  const { t } = useTranslation();
 
   // derived data
   const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
@@ -66,11 +68,11 @@ export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
           <div className="relative flex items-center gap-2">
             <div className="flex items-center justify-center gap-1 text-xs">
               <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-              <span>Ideal</span>
+              <span>{t("ideal")}</span>
             </div>
             <div className="flex items-center justify-center gap-1 text-xs">
               <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-              <span>Current</span>
+              <span>{t("current")}</span>
             </div>
           </div>
           {cycleStartDate && cycleEndDate && completionChartDistributionData ? (
@@ -80,7 +82,7 @@ export const SidebarChart: FC<ProgressChartProps> = observer((props) => {
                 startDate={cycleStartDate}
                 endDate={cycleEndDate}
                 totalIssues={estimateType === "points" ? totalEstimatePoints : totalIssues}
-                plotTitle={estimateType === "points" ? "points" : "issues"}
+                plotTitle={estimateType === "points" ? t("points") : t("work_items")}
               />
             </Fragment>
           ) : (
diff --git a/web/ce/components/cycles/end-cycle/index.ts b/web/ce/components/cycles/end-cycle/index.ts
new file mode 100644
index 000000000..2e60c4561
--- /dev/null
+++ b/web/ce/components/cycles/end-cycle/index.ts
@@ -0,0 +1,2 @@
+export * from "./modal";
+export * from "./use-end-cycle";
diff --git a/web/ce/components/cycles/end-cycle/modal.tsx b/web/ce/components/cycles/end-cycle/modal.tsx
new file mode 100644
index 000000000..754c84f9f
--- /dev/null
+++ b/web/ce/components/cycles/end-cycle/modal.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+interface Props {
+  isOpen: boolean;
+  handleClose: () => void;
+  cycleId: string;
+  projectId: string;
+  workspaceSlug: string;
+  transferrableIssuesCount: number;
+  cycleName: string;
+}
+
+export const EndCycleModal: React.FC<Props> = () => <></>;
diff --git a/web/ce/components/cycles/end-cycle/use-end-cycle.tsx b/web/ce/components/cycles/end-cycle/use-end-cycle.tsx
new file mode 100644
index 000000000..c1bf62618
--- /dev/null
+++ b/web/ce/components/cycles/end-cycle/use-end-cycle.tsx
@@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useEndCycle = (isCurrentCycle: boolean) => ({
+  isEndCycleModalOpen: false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setEndCycleModalOpen: (value: boolean) => {},
+  endCycleContextMenu: undefined,
+});
diff --git a/web/ce/components/cycles/index.ts b/web/ce/components/cycles/index.ts
index 899346875..1da115025 100644
--- a/web/ce/components/cycles/index.ts
+++ b/web/ce/components/cycles/index.ts
@@ -1,2 +1,4 @@
 export * from "./active-cycle";
 export * from "./analytics-sidebar";
+export * from "./additional-actions";
+export * from "./end-cycle";
diff --git a/web/ce/components/editor/embeds/index.ts b/web/ce/components/editor/embeds/index.ts
new file mode 100644
index 000000000..8146e94d9
--- /dev/null
+++ b/web/ce/components/editor/embeds/index.ts
@@ -0,0 +1 @@
+export * from "./mentions";
diff --git a/web/ce/components/editor/embeds/mentions/index.ts b/web/ce/components/editor/embeds/mentions/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/web/ce/components/editor/embeds/mentions/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/ce/components/editor/embeds/mentions/root.tsx b/web/ce/components/editor/embeds/mentions/root.tsx
new file mode 100644
index 000000000..16e21f848
--- /dev/null
+++ b/web/ce/components/editor/embeds/mentions/root.tsx
@@ -0,0 +1,4 @@
+// plane editor
+import { TMentionComponentProps } from "@plane/editor";
+
+export const EditorAdditionalMentionsRoot: React.FC<TMentionComponentProps> = () => null;
diff --git a/web/ce/components/editor/index.ts b/web/ce/components/editor/index.ts
new file mode 100644
index 000000000..cf8352ae4
--- /dev/null
+++ b/web/ce/components/editor/index.ts
@@ -0,0 +1 @@
+export * from "./embeds";
diff --git a/web/ce/components/epics/epic-modal/index.ts b/web/ce/components/epics/epic-modal/index.ts
new file mode 100644
index 000000000..031608e25
--- /dev/null
+++ b/web/ce/components/epics/epic-modal/index.ts
@@ -0,0 +1 @@
+export * from "./modal";
diff --git a/web/ce/components/epics/epic-modal/modal.tsx b/web/ce/components/epics/epic-modal/modal.tsx
new file mode 100644
index 000000000..9c76b7bda
--- /dev/null
+++ b/web/ce/components/epics/epic-modal/modal.tsx
@@ -0,0 +1,19 @@
+"use client";
+import React, { FC } from "react";
+import { 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 const CreateUpdateEpicModal: FC<EpicModalProps> = (props) => <></>;
diff --git a/web/ce/components/epics/index.ts b/web/ce/components/epics/index.ts
new file mode 100644
index 000000000..29da0cc8a
--- /dev/null
+++ b/web/ce/components/epics/index.ts
@@ -0,0 +1 @@
+export * from "./epic-modal";
diff --git a/web/ce/components/gantt-chart/dependency/dependency-paths.tsx b/web/ce/components/gantt-chart/dependency/dependency-paths.tsx
index f049875f1..6feb208a8 100644
--- a/web/ce/components/gantt-chart/dependency/dependency-paths.tsx
+++ b/web/ce/components/gantt-chart/dependency/dependency-paths.tsx
@@ -1 +1,9 @@
-export const TimelineDependencyPaths = () => <></>;
+import { FC } from "react";
+
+type Props = {
+  isEpic?: boolean;
+};
+export const TimelineDependencyPaths: FC<Props> = (props) => {
+  const { isEpic = false } = props;
+  return <></>;
+};
diff --git a/web/ce/components/global/product-updates-header.tsx b/web/ce/components/global/product-updates-header.tsx
index a5965bb2d..5274ab5c1 100644
--- a/web/ce/components/global/product-updates-header.tsx
+++ b/web/ce/components/global/product-updates-header.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
+import { useTranslation } from "@plane/i18n";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // assets
@@ -7,20 +8,23 @@ import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
 // package.json
 import packageJson from "package.json";
 
-export const ProductUpdatesHeader = observer(() => (
-  <div className="flex gap-2 mx-6 my-4 items-center justify-between flex-shrink-0">
-    <div className="flex w-full items-center">
-      <div className="flex gap-2 text-xl font-medium">What&apos;s new</div>
+export const ProductUpdatesHeader = observer(() => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex gap-2 mx-6 my-4 items-center justify-between flex-shrink-0">
+      <div className="flex w-full items-center">
+        <div className="flex gap-2 text-xl font-medium">{t("whats_new")}</div>
       <div
-        className={cn(
-          "px-2 mx-2 py-0.5 text-center text-xs font-medium rounded-full bg-custom-primary-100/20 text-custom-primary-100"
-        )}
-      >
-        Version: v{packageJson.version}
+          className={cn(
+            "px-2 mx-2 py-0.5 text-center text-xs font-medium rounded-full bg-custom-primary-100/20 text-custom-primary-100"
+          )}
+        >
+          {t("version")}: v{packageJson.version}
+        </div>
+      </div>
+      <div className="flex flex-shrink-0 items-center gap-8">
+        <Image src={PlaneLogo} alt="Plane" width={24} height={24} />
       </div>
     </div>
-    <div className="flex flex-shrink-0 items-center gap-8">
-      <Image src={PlaneLogo} alt="Plane" width={24} height={24} />
-    </div>
-  </div>
-));
+  );
+});
diff --git a/web/ce/components/global/version-number.tsx b/web/ce/components/global/version-number.tsx
index 47ff380d3..6c5c29656 100644
--- a/web/ce/components/global/version-number.tsx
+++ b/web/ce/components/global/version-number.tsx
@@ -1,4 +1,8 @@
 // assets
+import { useTranslation } from "@plane/i18n";
 import packageJson from "package.json";
 
-export const PlaneVersionNumber: React.FC = () => <span>Version: v{packageJson.version}</span>;
+export const PlaneVersionNumber: React.FC = () => {
+  const { t } = useTranslation();
+  return <span>{t("version")}: v{packageJson.version}</span>;
+};
diff --git a/web/ce/components/home/header.tsx b/web/ce/components/home/header.tsx
new file mode 100644
index 000000000..c95736c9e
--- /dev/null
+++ b/web/ce/components/home/header.tsx
@@ -0,0 +1 @@
+export const HomePageHeader = () => <></>;
diff --git a/web/ce/components/issue-types/values/update.tsx b/web/ce/components/issue-types/values/update.tsx
index cff391d9e..2fd629042 100644
--- a/web/ce/components/issue-types/values/update.tsx
+++ b/web/ce/components/issue-types/values/update.tsx
@@ -1,9 +1,12 @@
+import { TIssueServiceType } from "@plane/types";
+
 export type TIssueAdditionalPropertyValuesUpdateProps = {
   issueId: string;
   issueTypeId: string;
   projectId: string;
   workspaceSlug: string;
   isDisabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAdditionalPropertyValuesUpdate: React.FC<TIssueAdditionalPropertyValuesUpdateProps> = () => <></>;
diff --git a/web/ce/components/issues/filters/index.ts b/web/ce/components/issues/filters/index.ts
index 2cd80e3a7..f0f36b6c9 100644
--- a/web/ce/components/issues/filters/index.ts
+++ b/web/ce/components/issues/filters/index.ts
@@ -1,2 +1,3 @@
 export * from "./applied-filters";
 export * from "./issue-types";
+export * from "./team-project";
diff --git a/web/ce/components/issues/filters/team-project.tsx b/web/ce/components/issues/filters/team-project.tsx
new file mode 100644
index 000000000..4f4787fef
--- /dev/null
+++ b/web/ce/components/issues/filters/team-project.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  searchQuery: string;
+};
+
+export const FilterTeamProjects: React.FC<Props> = observer(() => null);
diff --git a/web/ce/components/issues/header.tsx b/web/ce/components/issues/header.tsx
new file mode 100644
index 000000000..abe44d506
--- /dev/null
+++ b/web/ce/components/issues/header.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// icons
+import { Circle, ExternalLink } from "lucide-react";
+// plane constants
+import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Breadcrumbs, Button, LayersIcon, Tooltip, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink, CountChip } from "@/components/common";
+// constants
+import HeaderFilters from "@/components/issues/filters";
+// helpers
+import { SPACE_BASE_PATH, SPACE_BASE_URL } from "@/helpers/common.helper";
+// hooks
+import { useEventTracker, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
+import { useIssues } from "@/hooks/store/use-issues";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
+
+export const IssuesHeader = observer(() => {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
+  // store hooks
+  const {
+    issues: { getGroupIssueCount },
+  } = useIssues(EIssuesStoreType.PROJECT);
+  // i18n
+  const { t } = useTranslation();
+
+  const { currentProjectDetails, loader } = useProject();
+
+  const { toggleCreateIssueModal } = useCommandPalette();
+  const { setTrackElement } = useEventTracker();
+  const { allowPermissions } = useUserPermissions();
+  const { isMobile } = usePlatformOS();
+
+  const SPACE_APP_URL = (SPACE_BASE_URL.trim() === "" ? 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"}>
+            <ProjectBreadcrumb />
+
+            <Breadcrumbs.BreadcrumbItem
+              type="text"
+              link={
+                <BreadcrumbLink
+                  label={t("issue.label", { count: 2 })} // count is for pluralization
+                  icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />}
+                />
+              }
+            />
+          </Breadcrumbs>
+          {issuesCount && issuesCount > 0 ? (
+            <Tooltip
+              isMobile={isMobile}
+              tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "work items" : "work item"} in this project`}
+              position="bottom"
+            >
+              <CountChip count={issuesCount} />
+            </Tooltip>
+          ) : null}
+        </div>
+        {currentProjectDetails?.anchor ? (
+          <a
+            href={publishedURL}
+            className="group flex items-center gap-1.5 rounded bg-custom-primary-100/10 px-2.5 py-1 text-xs font-medium text-custom-primary-100"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Circle className="h-1.5 w-1.5 fill-custom-primary-100" strokeWidth={2} />
+            {t("workspace_projects.network.public.title")}
+            <ExternalLink className="hidden h-3 w-3 group-hover:block" strokeWidth={2} />
+          </a>
+        ) : (
+          <></>
+        )}
+      </Header.LeftItem>
+      <Header.RightItem>
+        <div className="hidden gap-3 md:flex">
+          <HeaderFilters
+            projectId={projectId}
+            currentProjectDetails={currentProjectDetails}
+            workspaceSlug={workspaceSlug}
+            canUserCreateIssue={canUserCreateIssue}
+          />
+        </div>
+        {canUserCreateIssue ? (
+          <Button
+            onClick={() => {
+              setTrackElement("Project work items page");
+              toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+            }}
+            size="sm"
+          >
+            <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/web/ce/components/issues/index.ts b/web/ce/components/issues/index.ts
index 97b57af4b..01fc1d9ac 100644
--- a/web/ce/components/issues/index.ts
+++ b/web/ce/components/issues/index.ts
@@ -4,3 +4,4 @@ export * from "./issue-modal";
 export * from "./issue-details";
 export * from "./quick-add";
 export * from "./filters";
+export * from "./header";
diff --git a/web/ce/components/issues/issue-details/index.ts b/web/ce/components/issues/issue-details/index.ts
index 3979faf94..e23fbe531 100644
--- a/web/ce/components/issues/issue-details/index.ts
+++ b/web/ce/components/issues/issue-details/index.ts
@@ -2,3 +2,4 @@ export * from "./issue-identifier";
 export * from "./issue-properties-activity";
 export * from "./issue-type-switcher";
 export * from "./issue-type-activity";
+export * from "./parent-select-root";
diff --git a/web/ce/components/issues/issue-details/issue-identifier.tsx b/web/ce/components/issues/issue-details/issue-identifier.tsx
index fbd943984..1e87d387e 100644
--- a/web/ce/components/issues/issue-details/issue-identifier.tsx
+++ b/web/ce/components/issues/issue-details/issue-identifier.tsx
@@ -50,7 +50,7 @@ export const IdentifierText: React.FC<TIdentifierTextProps> = (props) => {
       navigator.clipboard.writeText(identifier).then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Issue ID copied to clipboard",
+          title: "Work item ID copied to clipboard",
         });
       });
     }
diff --git a/web/ce/components/issues/issue-details/parent-select-root.tsx b/web/ce/components/issues/issue-details/parent-select-root.tsx
new file mode 100644
index 000000000..820a578e1
--- /dev/null
+++ b/web/ce/components/issues/issue-details/parent-select-root.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { TOAST_TYPE, setToast } from "@plane/ui";
+// components
+import { IssueParentSelect, TIssueOperations } from "@/components/issues";
+// hooks
+import { useIssueDetail } from "@/hooks/store";
+
+type TIssueParentSelect = {
+  className?: string;
+  disabled?: boolean;
+  issueId: string;
+  issueOperations: TIssueOperations;
+  projectId: string;
+  workspaceSlug: string;
+};
+
+export const IssueParentSelectRoot: React.FC<TIssueParentSelect> = observer((props) => {
+  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/web/ce/components/issues/issue-layouts/empty-states/index.ts b/web/ce/components/issues/issue-layouts/empty-states/index.ts
new file mode 100644
index 000000000..319b4c684
--- /dev/null
+++ b/web/ce/components/issues/issue-layouts/empty-states/index.ts
@@ -0,0 +1,2 @@
+export * from "./team-issues";
+export * from "./team-view-issues";
diff --git a/web/ce/components/issues/issue-layouts/empty-states/team-issues.tsx b/web/ce/components/issues/issue-layouts/empty-states/team-issues.tsx
new file mode 100644
index 000000000..1e05f40cb
--- /dev/null
+++ b/web/ce/components/issues/issue-layouts/empty-states/team-issues.tsx
@@ -0,0 +1,3 @@
+import { observer } from "mobx-react";
+
+export const TeamEmptyState: React.FC = observer(() => <></>);
diff --git a/web/ce/components/issues/issue-layouts/empty-states/team-view-issues.tsx b/web/ce/components/issues/issue-layouts/empty-states/team-view-issues.tsx
new file mode 100644
index 000000000..03b546be5
--- /dev/null
+++ b/web/ce/components/issues/issue-layouts/empty-states/team-view-issues.tsx
@@ -0,0 +1,3 @@
+import { observer } from "mobx-react";
+
+export const TeamViewEmptyState: React.FC = observer(() => <></>);
diff --git a/web/ce/components/issues/issue-layouts/issue-stats.tsx b/web/ce/components/issues/issue-layouts/issue-stats.tsx
new file mode 100644
index 000000000..3e842c92d
--- /dev/null
+++ b/web/ce/components/issues/issue-layouts/issue-stats.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import React, { FC } from "react";
+
+type Props = {
+  issueId: string;
+};
+
+export const IssueStats: FC<Props> = (props) => {
+  const { issueId } = props;
+  return <></>;
+};
diff --git a/web/ce/components/issues/issue-layouts/utils.tsx b/web/ce/components/issues/issue-layouts/utils.tsx
new file mode 100644
index 000000000..48dca43bd
--- /dev/null
+++ b/web/ce/components/issues/issue-layouts/utils.tsx
@@ -0,0 +1,4 @@
+// types
+import { IGroupByColumn } from "@plane/types";
+
+export const getTeamProjectColumns = (): IGroupByColumn[] | undefined => undefined;
diff --git a/web/ce/components/issues/quick-add/root.tsx b/web/ce/components/issues/quick-add/root.tsx
index 382f790a0..72daa259e 100644
--- a/web/ce/components/issues/quick-add/root.tsx
+++ b/web/ce/components/issues/quick-add/root.tsx
@@ -1,6 +1,8 @@
 import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { UseFormRegister, UseFormSetFocus } from "react-hook-form";
+// plane constants
+import { EIssueLayoutTypes } from "@plane/constants";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
@@ -14,8 +16,6 @@ import {
   SpreadsheetQuickAddIssueForm,
   TQuickAddIssueForm,
 } from "@/components/issues/issue-layouts";
-// constants
-import { EIssueLayoutTypes } from "@/constants/issue";
 // hooks
 import { useProject } from "@/hooks/store";
 import useKeypress from "@/hooks/use-keypress";
@@ -30,10 +30,11 @@ export type TQuickAddIssueFormRoot = {
   register: UseFormRegister<TIssue>;
   onSubmit: () => void;
   onClose: () => void;
+  isEpic: boolean;
 };
 
 export const QuickAddIssueFormRoot: FC<TQuickAddIssueFormRoot> = observer((props) => {
-  const { isOpen, layout, projectId, hasError = false, setFocus, register, onSubmit, onClose } = props;
+  const { isOpen, layout, projectId, hasError = false, setFocus, register, onSubmit, onClose, isEpic } = props;
   // store hooks
   const { getProjectById } = useProject();
   // derived values
@@ -70,6 +71,7 @@ export const QuickAddIssueFormRoot: FC<TQuickAddIssueFormRoot> = observer((props
       hasError={hasError}
       register={register}
       onSubmit={onSubmit}
+      isEpic={isEpic}
     />
   );
 });
diff --git a/web/ce/components/issues/worklog/activity/filter-root.tsx b/web/ce/components/issues/worklog/activity/filter-root.tsx
index 2d11ae341..a4dc62a6d 100644
--- a/web/ce/components/issues/worklog/activity/filter-root.tsx
+++ b/web/ce/components/issues/worklog/activity/filter-root.tsx
@@ -2,9 +2,9 @@
 
 import { FC } from "react";
 // components
+import { TActivityFilters, ACTIVITY_FILTER_TYPE_OPTIONS, TActivityFilterOption } from "@plane/constants";
 import { ActivityFilter } from "@/components/issues";
 // plane web constants
-import { TActivityFilters, ACTIVITY_FILTER_TYPE_OPTIONS, TActivityFilterOption } from "@/plane-web/constants/issues";
 
 export type TActivityFilterRoot = {
   selectedFilters: TActivityFilters[];
@@ -20,7 +20,7 @@ export const ActivityFilterRoot: FC<TActivityFilterRoot> = (props) => {
     const filterKey = key as TActivityFilters;
     return {
       key: filterKey,
-      label: value.label,
+      labelTranslationKey: value.labelTranslationKey,
       isSelected: selectedFilters.includes(filterKey),
       onClick: () => toggleFilter(filterKey),
     };
diff --git a/web/ce/components/pages/editor/ai/ask-pi-menu.tsx b/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
index 211155d37..bd49942ef 100644
--- a/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
+++ b/web/ce/components/pages/editor/ai/ask-pi-menu.tsx
@@ -6,20 +6,25 @@ import { Tooltip } from "@plane/ui";
 import { RichTextReadOnlyEditor } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
+// hooks
+import { useWorkspace } from "@/hooks/store";
 
 type Props = {
   handleInsertText: (insertOnNextLine: boolean) => void;
   handleRegenerate: () => Promise<void>;
   isRegenerating: boolean;
-  projectId: string;
   response: string | undefined;
   workspaceSlug: string;
 };
 
 export const AskPiMenu: React.FC<Props> = (props) => {
-  const { handleInsertText, handleRegenerate, isRegenerating, projectId, response, workspaceSlug } = 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 (
     <>
@@ -41,8 +46,8 @@ export const AskPiMenu: React.FC<Props> = (props) => {
               initialValue={response}
               containerClassName="!p-0 border-none"
               editorClassName="!pl-0"
+              workspaceId={workspaceId}
               workspaceSlug={workspaceSlug}
-              projectId={projectId}
             />
             <div className="mt-3 flex items-center gap-4">
               <button
diff --git a/web/ce/components/pages/editor/ai/menu.tsx b/web/ce/components/pages/editor/ai/menu.tsx
index 1029ad73b..cef586a77 100644
--- a/web/ce/components/pages/editor/ai/menu.tsx
+++ b/web/ce/components/pages/editor/ai/menu.tsx
@@ -21,7 +21,7 @@ type Props = {
   editorRef: RefObject<EditorRefApi>;
   isOpen: boolean;
   onClose: () => void;
-  projectId: string;
+  workspaceId: string;
   workspaceSlug: string;
 };
 
@@ -59,7 +59,7 @@ const TONES_LIST = [
 ];
 
 export const EditorAIMenu: React.FC<Props> = (props) => {
-  const { editorRef, isOpen, onClose, projectId, workspaceSlug } = 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);
@@ -193,7 +193,6 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
               handleInsertText={handleInsertText}
               handleRegenerate={handleRegenerate}
               isRegenerating={isRegenerating}
-              projectId={projectId}
               response={response}
               workspaceSlug={workspaceSlug}
             />
@@ -217,8 +216,8 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
                       initialValue={response}
                       containerClassName="!p-0 border-none"
                       editorClassName="!pl-0"
+                      workspaceId={workspaceId}
                       workspaceSlug={workspaceSlug}
-                      projectId={projectId}
                     />
                     <div className="mt-3 flex items-center gap-4">
                       <button
diff --git a/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx b/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
index d9ea1b8a0..b4f68028d 100644
--- a/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
+++ b/web/ce/components/pages/editor/embed/issue-embed-upgrade-card.tsx
@@ -18,7 +18,7 @@ export const IssueEmbedUpgradeCard: React.FC<any> = (props) => (
       <div className="flex items-center gap-4">
         <ProIcon className="flex-shrink-0 size-4" />
         <p className="text-custom-text !text-base">
-          Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
+          Embed and access work items in pages seamlessly, upgrade to Plane Pro now.
         </p>
       </div>
       <a
diff --git a/web/ce/components/pages/extra-actions.tsx b/web/ce/components/pages/extra-actions.tsx
index d60d2bc66..dd15dab7e 100644
--- a/web/ce/components/pages/extra-actions.tsx
+++ b/web/ce/components/pages/extra-actions.tsx
@@ -1 +1,8 @@
-export const PageDetailsHeaderExtraActions = () => null;
+// store
+import { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageHeaderExtraActionsProps = {
+  page: TPageInstance;
+};
+
+export const PageDetailsHeaderExtraActions: React.FC<TPageHeaderExtraActionsProps> = () => null;
diff --git a/web/ce/components/pages/index.ts b/web/ce/components/pages/index.ts
index 6f3d30c9a..c4131c5f9 100644
--- a/web/ce/components/pages/index.ts
+++ b/web/ce/components/pages/index.ts
@@ -1,2 +1,3 @@
 export * from "./editor";
+export * from "./modals";
 export * from "./extra-actions";
diff --git a/web/ce/components/pages/modals/index.ts b/web/ce/components/pages/modals/index.ts
new file mode 100644
index 000000000..da78df1c8
--- /dev/null
+++ b/web/ce/components/pages/modals/index.ts
@@ -0,0 +1 @@
+export * from "./move-page-modal";
diff --git a/web/ce/components/pages/modals/move-page-modal.tsx b/web/ce/components/pages/modals/move-page-modal.tsx
new file mode 100644
index 000000000..d1aeb7b53
--- /dev/null
+++ b/web/ce/components/pages/modals/move-page-modal.tsx
@@ -0,0 +1,10 @@
+// store types
+import { TPageInstance } from "@/store/pages/base-page";
+
+export type TMovePageModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  page: TPageInstance;
+};
+
+export const MovePageModal: React.FC<TMovePageModalProps> = () => null;
diff --git a/web/ce/components/projects/create/attributes.tsx b/web/ce/components/projects/create/attributes.tsx
index 178275641..a40f12317 100644
--- a/web/ce/components/projects/create/attributes.tsx
+++ b/web/ce/components/projects/create/attributes.tsx
@@ -1,14 +1,14 @@
 "use client";
 import { FC } from "react";
 import { Controller, useFormContext } from "react-hook-form";
+import { NETWORK_CHOICES, ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IProject } from "@plane/types";
 // ui
 import { CustomSelect } from "@plane/ui";
 // components
 import { MemberDropdown } from "@/components/dropdowns";
-// constants
-import { NETWORK_CHOICES } from "@/constants/project";
-import { ETabIndices } from "@/constants/tab-indices";
+import { ProjectNetworkIcon } from "@/components/project";
 // helpers
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 
@@ -18,6 +18,7 @@ type Props = {
 
 const ProjectAttributes: FC<Props> = (props) => {
   const { isMobile = false } = props;
+  const { t } = useTranslation();
   const { control } = useFormContext<IProject>();
   const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
   return (
@@ -37,11 +38,11 @@ const ProjectAttributes: FC<Props> = (props) => {
                   <div className="flex items-center gap-1 h-full">
                     {currentNetwork ? (
                       <>
-                        <currentNetwork.icon className="h-3 w-3" />
-                        {currentNetwork.label}
+                        <ProjectNetworkIcon iconKey={currentNetwork.iconKey} />
+                        {t(currentNetwork.i18n_label)}
                       </>
                     ) : (
-                      <span className="text-custom-text-400">Select network</span>
+                      <span className="text-custom-text-400">{t("select_network")}</span>
                     )}
                   </div>
                 }
@@ -54,10 +55,10 @@ const ProjectAttributes: FC<Props> = (props) => {
                 {NETWORK_CHOICES.map((network) => (
                   <CustomSelect.Option key={network.key} value={network.key}>
                     <div className="flex items-start gap-2">
-                      <network.icon className="h-3.5 w-3.5" />
+                      <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
                       <div className="-mt-1">
-                        <p>{network.label}</p>
-                        <p className="text-xs text-custom-text-400">{network.description}</p>
+                        <p>{t(network.i18n_label)}</p>
+                        <p className="text-xs text-custom-text-400">{t(network.description)}</p>
                       </div>
                     </div>
                   </CustomSelect.Option>
@@ -75,9 +76,9 @@ const ProjectAttributes: FC<Props> = (props) => {
             return (
               <div className="flex-shrink-0 h-7" tabIndex={getIndex("lead")}>
                 <MemberDropdown
-                  value={value}
+                  value={value ?? null}
                   onChange={(lead) => onChange(lead === value ? null : lead)}
-                  placeholder="Lead"
+                  placeholder={t("lead")}
                   multiple={false}
                   buttonVariant="border-with-text"
                   tabIndex={5}
diff --git a/web/ce/components/projects/create/root.tsx b/web/ce/components/projects/create/root.tsx
index c7dabd20e..c8ba67d50 100644
--- a/web/ce/components/projects/create/root.tsx
+++ b/web/ce/components/projects/create/root.tsx
@@ -3,14 +3,14 @@
 import { useState, FC } from "react";
 import { observer } from "mobx-react";
 import { FormProvider, useForm } from "react-hook-form";
+import { PROJECT_UNSPLASH_COVERS, PROJECT_CREATED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { setToast, TOAST_TYPE } from "@plane/ui";
 // constants
 import ProjectCommonAttributes from "@/components/project/create/common-attributes";
 import ProjectCreateHeader from "@/components/project/create/header";
 import ProjectCreateButtons from "@/components/project/create/project-create-buttons";
-import { PROJECT_CREATED } from "@/constants/event-tracker";
-import { PROJECT_UNSPLASH_COVERS } from "@/constants/project";
 // helpers
 import { getRandomEmoji } from "@/helpers/emoji.helper";
 // hooks
@@ -47,6 +47,7 @@ const defaultValues: Partial<TProject> = {
 export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) => {
   const { setToFavorite, workspaceSlug, onClose, handleNextStep, updateCoverImageStatus } = props;
   // store
+  const { t } = useTranslation();
   const { captureProjectEvent } = useEventTracker();
   const { addProjectToFavorites, createProject } = useProject();
   // states
@@ -64,8 +65,8 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
     addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Couldn't remove the project from favorites. Please try again.",
+        title: t("error"),
+        message: t("failed_to_remove_project_from_favorites"),
       });
     });
   };
@@ -95,8 +96,8 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
         });
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Project created successfully.",
+          title: t("success"),
+          message: t("project_created_successfully"),
         });
         if (setToFavorite) {
           handleAddToFavorites(res.id);
@@ -107,7 +108,7 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
         Object.keys(err.data).map((key) => {
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
+            title: t("error"),
             message: err.data[key],
           });
           captureProjectEvent({
diff --git a/web/ce/components/projects/mobile-header.tsx b/web/ce/components/projects/mobile-header.tsx
index 380472160..9e51c6799 100644
--- a/web/ce/components/projects/mobile-header.tsx
+++ b/web/ce/components/projects/mobile-header.tsx
@@ -4,6 +4,8 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { ChevronDown, ListFilter } from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { TProjectFilters } from "@plane/types";
 // hooks
@@ -15,6 +17,8 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { useMember, useProjectFilter } from "@/hooks/store";
 
 export const ProjectsListMobileHeader = observer(() => {
+  // i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug } = useParams();
   const {
@@ -63,12 +67,12 @@ export const ProjectsListMobileHeader = observer(() => {
       <div className="border-l border-custom-border-200 flex justify-around w-full">
         <FiltersDropdown
           icon={<ListFilter className="h-3 w-3" />}
-          title="Filters"
+          title={t("common.filters")}
           placement="bottom-end"
           menuButton={
             <div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
               <ListFilter className="h-3 w-3" />
-              Filters
+              {t("common.filters")}
               <ChevronDown className="h-3 w-3" strokeWidth={2} />
             </div>
           }
diff --git a/web/ce/components/projects/page.tsx b/web/ce/components/projects/page.tsx
index a44ab7df4..8e15ebff7 100644
--- a/web/ce/components/projects/page.tsx
+++ b/web/ce/components/projects/page.tsx
@@ -1,3 +1,25 @@
-import Root from "@/components/project/root";
+"use client";
 
-export const ProjectPageRoot = () => <Root />;
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+// components
+import Root from "@/components/project/root";
+// hooks
+import { useProject, useWorkspace } from "@/hooks/store";
+
+export const ProjectPageRoot = observer(() => {
+  // 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 <Root />;
+});
diff --git a/web/ce/components/projects/settings/intake/header.tsx b/web/ce/components/projects/settings/intake/header.tsx
index cffd1ba56..32a93894f 100644
--- a/web/ce/components/projects/settings/intake/header.tsx
+++ b/web/ce/components/projects/settings/intake/header.tsx
@@ -5,13 +5,16 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { RefreshCcw } from "lucide-react";
 // ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs, Button, Intake, Header } from "@plane/ui";
 // components
-import { BreadcrumbLink, Logo } from "@/components/common";
+import { BreadcrumbLink } from "@/components/common";
 import { InboxIssueCreateModalRoot } from "@/components/inbox";
 // hooks
 import { useProject, useProjectInbox, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// plane web
+import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs";
 
 export const ProjectInboxHeader: FC = observer(() => {
   // states
@@ -20,6 +23,7 @@ export const ProjectInboxHeader: FC = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
 
   const { currentProjectDetails, loader: currentProjectDetailsLoader } = useProject();
   const { loader } = useProjectInbox();
@@ -34,33 +38,19 @@ export const ProjectInboxHeader: FC = observer(() => {
     <Header>
       <Header.LeftItem>
         <div className="flex items-center gap-4">
-          <Breadcrumbs isLoading={currentProjectDetailsLoader}>
-            <Breadcrumbs.BreadcrumbItem
-              type="text"
-              link={
-                <BreadcrumbLink
-                  label={currentProjectDetails?.name ?? "Project"}
-                  icon={
-                    currentProjectDetails && (
-                      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                        <Logo logo={currentProjectDetails?.logo_props} size={16} />
-                      </span>
-                    )
-                  }
-                />
-              }
-            />
+          <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
+            <ProjectBreadcrumb />
 
             <Breadcrumbs.BreadcrumbItem
               type="text"
-              link={<BreadcrumbLink label="Intake" icon={<Intake className="h-4 w-4 text-custom-text-300" />} />}
+              link={<BreadcrumbLink label={t("intake")} icon={<Intake className="h-4 w-4 text-custom-text-300" />} />}
             />
           </Breadcrumbs>
 
           {loader === "pagination-loading" && (
             <div className="flex items-center gap-1.5 text-custom-text-300">
               <RefreshCcw className="h-3.5 w-3.5 animate-spin" />
-              <p className="text-sm">Syncing...</p>
+              <p className="text-sm">{t("syncing")}...</p>
             </div>
           )}
         </div>
@@ -76,7 +66,7 @@ export const ProjectInboxHeader: FC = observer(() => {
             />
 
             <Button variant="primary" size="sm" onClick={() => setCreateIssueModal(true)}>
-              Add issue
+              {t("add_work_item")}
             </Button>
           </div>
         ) : (
diff --git a/web/ce/components/projects/settings/useProjectColumns.tsx b/web/ce/components/projects/settings/useProjectColumns.tsx
index 8103e9eef..bd9e589ad 100644
--- a/web/ce/components/projects/settings/useProjectColumns.tsx
+++ b/web/ce/components/projects/settings/useProjectColumns.tsx
@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IWorkspaceMember } from "@plane/types";
 import { AccountTypeColumn, NameColumn } from "@/components/project/settings/member-columns";
 import { useUser, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export interface RowData {
   member: IWorkspaceMember;
diff --git a/web/ce/components/relations/activity.ts b/web/ce/components/relations/activity.ts
index ad0d4f305..30f08cb74 100644
--- a/web/ce/components/relations/activity.ts
+++ b/web/ce/components/relations/activity.ts
@@ -5,15 +5,15 @@ export const getRelationActivityContent = (activity: TIssueActivity | undefined)
 
   switch (activity.field) {
     case "blocking":
-      return activity.old_value === "" ? `marked this issue is blocking issue ` : `removed the blocking issue `;
+      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 issue is being blocked by `
-        : `removed this issue being blocked by issue `;
+        ? `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 issue as duplicate of ` : `removed this issue as a duplicate of `;
+      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 issue relates to ` : `removed the relation from `;
+      return activity.old_value === "" ? `marked that this work item relates to ` : `removed the relation from `;
   }
 
   return;
diff --git a/web/ce/components/relations/index.tsx b/web/ce/components/relations/index.tsx
index 5517ac063..7f906564a 100644
--- a/web/ce/components/relations/index.tsx
+++ b/web/ce/components/relations/index.tsx
@@ -8,28 +8,28 @@ export * from "./activity";
 export const ISSUE_RELATION_OPTIONS: Record<TIssueRelationTypes, TRelationObject> = {
   relates_to: {
     key: "relates_to",
-    label: "Relates to",
+    i18n_label: "issue.relation.relates_to",
     className: "bg-custom-background-80 text-custom-text-200",
     icon: (size) => <RelatedIcon height={size} width={size} className="text-custom-text-200" />,
-    placeholder: "Add related issues",
+    placeholder: "Add related work items",
   },
   duplicate: {
     key: "duplicate",
-    label: "Duplicate of",
+    i18n_label: "issue.relation.duplicate",
     className: "bg-custom-background-80 text-custom-text-200",
     icon: (size) => <CopyPlus size={size} className="text-custom-text-200" />,
     placeholder: "None",
   },
   blocked_by: {
     key: "blocked_by",
-    label: "Blocked by",
+    i18n_label: "issue.relation.blocked_by",
     className: "bg-red-500/20 text-red-700",
     icon: (size) => <CircleDot size={size} className="text-custom-text-200" />,
     placeholder: "None",
   },
   blocking: {
     key: "blocking",
-    label: "Blocking",
+    i18n_label: "issue.relation.blocking",
     className: "bg-yellow-500/20 text-yellow-700",
     icon: (size) => <XCircle size={size} className="text-custom-text-200" />,
     placeholder: "None",
diff --git a/web/ce/components/sidebar/project-navigation-root.tsx b/web/ce/components/sidebar/project-navigation-root.tsx
index 25a0dd9d8..6b269a0a0 100644
--- a/web/ce/components/sidebar/project-navigation-root.tsx
+++ b/web/ce/components/sidebar/project-navigation-root.tsx
@@ -7,9 +7,12 @@ import { ProjectNavigation } from "@/components/workspace";
 type TProjectItemsRootProps = {
   workspaceSlug: string;
   projectId: string;
+  isSidebarCollapsed: boolean;
 };
 
 export const ProjectNavigationRoot: FC<TProjectItemsRootProps> = (props) => {
-  const { workspaceSlug, projectId } = props;
-  return <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} />;
+  const { workspaceSlug, projectId, isSidebarCollapsed } = props;
+  return (
+    <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} isSidebarCollapsed={isSidebarCollapsed} />
+  );
 };
diff --git a/web/ce/components/workflow/add-state-transition.tsx b/web/ce/components/workflow/add-state-transition.tsx
deleted file mode 100644
index 48ba6c02a..000000000
--- a/web/ce/components/workflow/add-state-transition.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Plus } from "lucide-react";
-// Plane
-import { cn } from "@plane/editor";
-
-type Props = {
-  workspaceSlug: string;
-  projectId: string;
-  parentStateId: string;
-  onTransitionAdd?: () => void;
-};
-
-export const AddStateTransition = (props: Props) => (
-  <div className={cn("flex w-full px-3 h-6 items-center justify-start gap-2 text-sm bg-custom-background-90")}>
-    <>
-      <Plus className="h-4 w-4" color="#8591AD" />
-      <span className="text-custom-text-400 font-medium"> Add Transition</span>
-      <div className="text-white bg-custom-background-80 font-semibold px-2 rounded-lg">Pro</div>
-    </>
-  </div>
-);
diff --git a/web/ce/components/workflow/index.tsx b/web/ce/components/workflow/index.ts
similarity index 67%
rename from web/ce/components/workflow/index.tsx
rename to web/ce/components/workflow/index.ts
index 3cf9d8d3f..07b59ccc3 100644
--- a/web/ce/components/workflow/index.tsx
+++ b/web/ce/components/workflow/index.ts
@@ -1,6 +1,5 @@
 export * from "./state-option";
-export * from "./state-item-child";
-export * from "./state-transition-count";
 export * from "./use-workflow-drag-n-drop";
 export * from "./workflow-disabled-message";
 export * from "./workflow-group-tree";
+export * from "./workflow-disabled-overlay";
diff --git a/web/ce/components/workflow/state-item-child.tsx b/web/ce/components/workflow/state-item-child.tsx
deleted file mode 100644
index 2c07fd9ff..000000000
--- a/web/ce/components/workflow/state-item-child.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { SetStateAction } from "react";
-import { observer } from "mobx-react";
-// Plane
-import { IState } from "@plane/types";
-// components
-import { StateItemTitle } from "@/components/project-states/state-item-title";
-// constants
-import { DISPLAY_WORKFLOW_PRO_CTA } from "@/constants/state";
-//
-import { AddStateTransition } from "./add-state-transition";
-
-export type StateItemChildProps = {
-  workspaceSlug: string;
-  projectId: string;
-  stateCount: number;
-  disabled: boolean;
-  state: IState;
-  setUpdateStateModal: (value: SetStateAction<boolean>) => void;
-};
-
-export const StateItemChild = observer((props: StateItemChildProps) => {
-  const { workspaceSlug, projectId, stateCount, setUpdateStateModal, disabled, state } = props;
-
-  return (
-    <div className="flex flex-col w-full items-center justify-between">
-      <StateItemTitle
-        workspaceSlug={workspaceSlug}
-        projectId={projectId}
-        setUpdateStateModal={setUpdateStateModal}
-        stateCount={stateCount}
-        disabled={disabled}
-        state={state}
-      />
-      {DISPLAY_WORKFLOW_PRO_CTA && (
-        <AddStateTransition workspaceSlug={workspaceSlug} projectId={projectId} parentStateId={state.id} />
-      )}
-    </div>
-  );
-});
diff --git a/web/ce/components/workflow/state-option.tsx b/web/ce/components/workflow/state-option.tsx
index aa9665d90..c9bf24d61 100644
--- a/web/ce/components/workflow/state-option.tsx
+++ b/web/ce/components/workflow/state-option.tsx
@@ -12,6 +12,7 @@ type Props = {
   filterAvailableStateIds: boolean;
   selectedValue: string | null | undefined;
   className?: string;
+  isForWorkItemCreation?: boolean;
 };
 
 export const StateOption = observer((props: Props) => {
diff --git a/web/ce/components/workflow/state-transition-count.tsx b/web/ce/components/workflow/state-transition-count.tsx
deleted file mode 100644
index b9e4a22f9..000000000
--- a/web/ce/components/workflow/state-transition-count.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { IStateWorkFlow } from "@/plane-web/types";
-
-type Props = {
-  currentTransitionMap?: IStateWorkFlow;
-};
-
-export const StateTransitionCount = (props: Props) => <></>;
diff --git a/web/ce/components/workflow/use-workflow-drag-n-drop.ts b/web/ce/components/workflow/use-workflow-drag-n-drop.ts
index e4044d843..f6117a0d8 100644
--- a/web/ce/components/workflow/use-workflow-drag-n-drop.ts
+++ b/web/ce/components/workflow/use-workflow-drag-n-drop.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { TIssueGroupByOptions } from "@plane/types";
 
 export const useWorkFlowFDragNDrop = (
@@ -6,6 +7,7 @@ export const useWorkFlowFDragNDrop = (
 ) => ({
   workflowDisabledSource: undefined,
   isWorkflowDropDisabled: false,
+  getIsWorkflowWorkItemCreationDisabled: (groupId: string, subGroupId?: string) => false,
   handleWorkFlowState: (
     sourceGroupId: string,
     destinationGroupId: string,
diff --git a/web/ce/components/workflow/workflow-disabled-message.tsx b/web/ce/components/workflow/workflow-disabled-message.tsx
index bc2c2ee53..af3489556 100644
--- a/web/ce/components/workflow/workflow-disabled-message.tsx
+++ b/web/ce/components/workflow/workflow-disabled-message.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 type Props = {
   parentStateId: string;
   className?: string;
diff --git a/web/ce/components/workflow/workflow-disabled-overlay.tsx b/web/ce/components/workflow/workflow-disabled-overlay.tsx
new file mode 100644
index 000000000..5ec69f432
--- /dev/null
+++ b/web/ce/components/workflow/workflow-disabled-overlay.tsx
@@ -0,0 +1,10 @@
+import { observer } from "mobx-react";
+
+export type TWorkflowDisabledOverlayProps = {
+  messageContainerRef: React.RefObject<HTMLDivElement>;
+  workflowDisabledSource: string;
+  shouldOverlayBeVisible: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const WorkFlowDisabledOverlay = observer((props: TWorkflowDisabledOverlayProps) => <></>);
diff --git a/web/ce/components/workflow/workflow-group-tree.tsx b/web/ce/components/workflow/workflow-group-tree.tsx
index 934db70f3..5caed4170 100644
--- a/web/ce/components/workflow/workflow-group-tree.tsx
+++ b/web/ce/components/workflow/workflow-group-tree.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { TIssueGroupByOptions } from "@plane/types";
 
 type Props = {
diff --git a/web/ce/components/workspace-notifications/index.ts b/web/ce/components/workspace-notifications/index.ts
index c8711b96a..18c4afa96 100644
--- a/web/ce/components/workspace-notifications/index.ts
+++ b/web/ce/components/workspace-notifications/index.ts
@@ -1 +1 @@
-export * from './root'
\ No newline at end of file
+export * from "./notification-card/root";
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/root.tsx b/web/ce/components/workspace-notifications/notification-card/root.tsx
similarity index 89%
rename from web/core/components/workspace-notifications/sidebar/notification-card/root.tsx
rename to web/ce/components/workspace-notifications/notification-card/root.tsx
index bfff113ba..2aff9edfe 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/root.tsx
+++ b/web/ce/components/workspace-notifications/notification-card/root.tsx
@@ -2,10 +2,12 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+// plane imports
+import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
 // components
+import { useTranslation } from "@plane/i18n";
 import { NotificationItem } from "@/components/workspace-notifications";
 // constants
-import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
 
@@ -19,6 +21,7 @@ export const NotificationCardListRoot: FC<TNotificationCardListRoot> = observer(
   // hooks
   const { loader, paginationInfo, getNotifications, notificationIdsByWorkspaceId } = useWorkspaceNotifications();
   const notificationIds = notificationIdsByWorkspaceId(workspaceId);
+  const { t } = useTranslation();
 
   const getNextNotifications = async () => {
     try {
@@ -40,12 +43,12 @@ export const NotificationCardListRoot: FC<TNotificationCardListRoot> = observer(
         <>
           {loader === ENotificationLoader.PAGINATION_LOADER ? (
             <div className="py-4 flex justify-center items-center text-sm font-medium">
-              <div className="text-custom-primary-90">Loading...</div>
+              <div className="text-custom-primary-90">{t("loading")}...</div>
             </div>
           ) : (
             <div className="py-4 flex justify-center items-center text-sm font-medium" onClick={getNextNotifications}>
               <div className="text-custom-primary-90 hover:text-custom-primary-100 transition-all cursor-pointer">
-                Load more
+                {t("load_more")}
               </div>
             </div>
           )}
diff --git a/web/ce/components/workspace/billing/billing-actions-button.tsx b/web/ce/components/workspace/billing/billing-actions-button.tsx
new file mode 100644
index 000000000..b15d67b91
--- /dev/null
+++ b/web/ce/components/workspace/billing/billing-actions-button.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import { observer } from "mobx-react";
+
+export type TBillingActionsButtonProps = {
+  canPerformWorkspaceAdminActions: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const BillingActionsButton = observer((props: TBillingActionsButtonProps) => <></>);
diff --git a/web/ce/components/workspace/billing/index.ts b/web/ce/components/workspace/billing/index.ts
index 1efe34c51..f02c34d3f 100644
--- a/web/ce/components/workspace/billing/index.ts
+++ b/web/ce/components/workspace/billing/index.ts
@@ -1 +1,2 @@
 export * from "./root";
+export * from "./billing-actions-button";
diff --git a/web/ce/components/workspace/billing/root.tsx b/web/ce/components/workspace/billing/root.tsx
index 3a6d6c45c..e9c6bd8f7 100644
--- a/web/ce/components/workspace/billing/root.tsx
+++ b/web/ce/components/workspace/billing/root.tsx
@@ -1,23 +1,27 @@
-// ui
+import { MARKETING_PRICING_PAGE_LINK } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
-// constants
-import { MARKETING_PRICING_PAGE_LINK } from "@/constants/common";
 
-export const BillingRoot = () => (
-  <section className="w-full overflow-y-auto">
-    <div>
-      <div className="flex  items-center border-b border-custom-border-100 pb-3.5">
-        <h3 className="text-xl font-medium">Billing and Plans</h3>
-      </div>
-    </div>
-    <div className="py-6">
+export const BillingRoot = () => {
+  const { t } = useTranslation();
+  return (
+    <section className="w-full overflow-y-auto">
       <div>
-        <h4 className="text-md mb-1 leading-6">Current plan</h4>
-        <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
-        <a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer">
-          <Button variant="neutral-primary">View plans</Button>
-        </a>
+        <div className="flex  items-center border-b border-custom-border-100 pb-3.5">
+          <h3 className="text-xl font-medium">{t("workspace_settings.settings.billing_and_plans.title")}</h3>
+        </div>
       </div>
-    </div>
-  </section>
-);
+      <div className="py-6">
+        <div>
+          <h4 className="text-md mb-1 leading-6">{t("workspace_settings.settings.billing_and_plans.current_plan")}</h4>
+          <p className="mb-3 text-sm text-custom-text-200">
+            {t("workspace_settings.settings.billing_and_plans.free_plan")}
+          </p>
+          <a href={MARKETING_PRICING_PAGE_LINK} target="_blank" rel="noreferrer">
+            <Button variant="neutral-primary">{t("workspace_settings.settings.billing_and_plans.view_plans")}</Button>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+};
diff --git a/web/ce/components/workspace/delete-workspace-modal.tsx b/web/ce/components/workspace/delete-workspace-modal.tsx
new file mode 100644
index 000000000..cccee781f
--- /dev/null
+++ b/web/ce/components/workspace/delete-workspace-modal.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+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: React.FC<Props> = observer((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/web/ce/components/workspace/delete-workspace-section.tsx b/web/ce/components/workspace/delete-workspace-section.tsx
index 93836284f..00fb7b878 100644
--- a/web/ce/components/workspace/delete-workspace-section.tsx
+++ b/web/ce/components/workspace/delete-workspace-section.tsx
@@ -2,11 +2,12 @@ import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IWorkspace } from "@plane/types";
 // ui
 import { Button, Collapsible } from "@plane/ui";
+import { DeleteWorkspaceModal } from "./delete-workspace-modal";
 // components
-import { DeleteWorkspaceModal } from "@/components/workspace";
 
 type TDeleteWorkspace = {
   workspace: IWorkspace | null;
@@ -17,6 +18,7 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
   // states
   const [isOpen, setIsOpen] = useState(false);
   const [deleteWorkspaceModal, setDeleteWorkspaceModal] = useState(false);
+  const { t } = useTranslation();
 
   return (
     <>
@@ -34,19 +36,20 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
             buttonClassName="flex w-full items-center justify-between py-4"
             title={
               <>
-                <span className="text-lg tracking-tight">Delete workspace</span>
+                <span className="text-lg tracking-tight">
+                  {t("workspace_settings.settings.general.delete_workspace")}
+                </span>
                 {isOpen ? <ChevronUp className="h-5 w-5" /> : <ChevronDown className="h-5 w-5" />}
               </>
             }
           >
             <div className="flex flex-col gap-4">
               <span className="text-base tracking-tight">
-                When deleting a workspace, all of the data and resources within that workspace will be permanently
-                removed and cannot be recovered.
+                {t("workspace_settings.settings.general.delete_workspace_description")}
               </span>
               <div>
                 <Button variant="danger" onClick={() => setDeleteWorkspaceModal(true)}>
-                  Delete my workspace
+                  {t("workspace_settings.settings.general.delete_btn")}
                 </Button>
               </div>
             </div>
diff --git a/web/ce/components/workspace/edition-badge.tsx b/web/ce/components/workspace/edition-badge.tsx
index e1c3d1c1d..effb5501b 100644
--- a/web/ce/components/workspace/edition-badge.tsx
+++ b/web/ce/components/workspace/edition-badge.tsx
@@ -1,16 +1,18 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
+import packageJson from "package.json";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Button, Tooltip } from "@plane/ui";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // assets
-import packageJson from "package.json";
 // local components
 import { PaidPlanUpgradeModal } from "./upgrade";
 
 export const WorkspaceEditionBadge = observer(() => {
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
   // states
   const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
 
@@ -27,7 +29,7 @@ export const WorkspaceEditionBadge = observer(() => {
           className="w-fit min-w-24 cursor-pointer rounded-2xl px-2 py-1 text-center text-sm font-medium outline-none"
           onClick={() => setIsPaidPlanPurchaseModalOpen(true)}
         >
-          Upgrade
+          {t("sidebar.upgrade")}
         </Button>
       </Tooltip>
     </>
diff --git a/web/ce/components/workspace/index.ts b/web/ce/components/workspace/index.ts
index 94a166947..d68c6eca2 100644
--- a/web/ce/components/workspace/index.ts
+++ b/web/ce/components/workspace/index.ts
@@ -2,3 +2,5 @@ export * from "./edition-badge";
 export * from "./upgrade-badge";
 export * from "./billing";
 export * from "./delete-workspace-section";
+export * from "./sidebar";
+export * from "./members";
diff --git a/web/ce/components/workspace/members/index.ts b/web/ce/components/workspace/members/index.ts
new file mode 100644
index 000000000..5e1651e90
--- /dev/null
+++ b/web/ce/components/workspace/members/index.ts
@@ -0,0 +1 @@
+export * from "./invite-modal";
diff --git a/web/ce/components/workspace/members/invite-modal.tsx b/web/ce/components/workspace/members/invite-modal.tsx
new file mode 100644
index 000000000..629370cc1
--- /dev/null
+++ b/web/ce/components/workspace/members/invite-modal.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { IWorkspaceBulkInviteFormData } from "@plane/types";
+// ui
+import { EModalWidth, EModalPosition, ModalCore } from "@plane/ui";
+// components
+import { InvitationFields, InvitationModalActions } from "@/components/workspace/invite-modal";
+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: React.FC<TSendWorkspaceInvitationModalProps> = observer((props) => {
+  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/web/ce/components/workspace/settings/useMemberColumns.tsx b/web/ce/components/workspace/settings/useMemberColumns.tsx
index 64c92cf52..c34051878 100644
--- a/web/ce/components/workspace/settings/useMemberColumns.tsx
+++ b/web/ce/components/workspace/settings/useMemberColumns.tsx
@@ -1,8 +1,9 @@
 import { useState } from "react";
 import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { AccountTypeColumn, NameColumn, RowData } from "@/components/workspace/settings/member-columns";
 import { useUser, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const useMemberColumns = () => {
   // states
@@ -12,6 +13,7 @@ export const useMemberColumns = () => {
 
   const { data: currentUser } = useUser();
   const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
 
   const getFormattedDate = (dateStr: string) => {
     const date = new Date(dateStr);
@@ -26,7 +28,7 @@ export const useMemberColumns = () => {
   const columns = [
     {
       key: "Full name",
-      content: "Full name",
+      content: t("workspace_settings.settings.members.details.full_name"),
       thClassName: "text-left",
       tdRender: (rowData: RowData) => (
         <NameColumn
@@ -41,25 +43,25 @@ export const useMemberColumns = () => {
 
     {
       key: "Display name",
-      content: "Display name",
+      content: t("workspace_settings.settings.members.details.display_name"),
       tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
     },
 
     {
       key: "Email address",
-      content: "Email address",
+      content: t("workspace_settings.settings.members.details.email_address"),
       tdRender: (rowData: RowData) => <div className="w-48 truncate">{rowData.member.email}</div>,
     },
 
     {
       key: "Account type",
-      content: "Account type",
+      content: t("workspace_settings.settings.members.details.account_type"),
       tdRender: (rowData: RowData) => <AccountTypeColumn rowData={rowData} workspaceSlug={workspaceSlug as string} />,
     },
 
     {
       key: "Authentication",
-      content: "Authentication",
+      content: t("workspace_settings.settings.members.details.authentication"),
       tdRender: (rowData: RowData) => (
         <div className="capitalize">{rowData.member.last_login_medium?.replace("-", " ")}</div>
       ),
@@ -67,7 +69,7 @@ export const useMemberColumns = () => {
 
     {
       key: "Joining date",
-      content: "Joining date",
+      content: t("workspace_settings.settings.members.details.joining_date"),
       tdRender: (rowData: RowData) => <div>{getFormattedDate(rowData?.member?.joining_date || "")}</div>,
     },
   ];
diff --git a/web/ce/components/workspace/sidebar/app-search.tsx b/web/ce/components/workspace/sidebar/app-search.tsx
new file mode 100644
index 000000000..6ab92b996
--- /dev/null
+++ b/web/ce/components/workspace/sidebar/app-search.tsx
@@ -0,0 +1,26 @@
+import { observer } from "mobx-react";
+import { Search } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useAppTheme, useCommandPalette } from "@/hooks/store";
+
+export const AppSearch = observer(() => {
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
+  const { toggleCommandPaletteModal } = useCommandPalette();
+
+  return (
+    <button
+      className={cn(
+        "flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
+        {
+          "border-[0.5px] border-custom-sidebar-border-300": !sidebarCollapsed,
+        }
+      )}
+      onClick={() => toggleCommandPaletteModal(true)}
+    >
+      <Search className="size-4 text-custom-sidebar-text-300" />
+    </button>
+  );
+});
diff --git a/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
new file mode 100644
index 000000000..22cfe0842
--- /dev/null
+++ b/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -0,0 +1,220 @@
+import { FC, 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 { Eye, EyeClosed } from "lucide-react";
+// plane imports
+import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { DragHandle, DropIndicator, Tooltip } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar";
+// hooks
+import { useAppTheme, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
+// plane web imports
+// local imports
+import { UpgradeBadge } from "../upgrade-badge";
+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: FC<TExtendedSidebarItemProps> = observer((props) => {
+  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 { getNavigationPreferences, updateSidebarPreference } = useWorkspace();
+  const { toggleExtendedSidebar } = useAppTheme();
+  const { data } = useUser();
+  const { allowPermissions } = useUserPermissions();
+
+  // derived values
+  const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
+  const isPinned = sidebarPreference?.[item.key]?.is_pinned;
+
+  const handleLinkClick = () => toggleExtendedSidebar();
+
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
+    return null;
+  }
+
+  const itemHref =
+    item.key === "your_work"
+      ? `/${workspaceSlug.toString()}${item.href}${data?.id}`
+      : `/${workspaceSlug.toString()}${item.href}`;
+  const isActive = itemHref === pathname;
+
+  const pinNavigationItem = (workspaceSlug: string, key: string) => {
+    updateSidebarPreference(workspaceSlug, key, { is_pinned: true });
+  };
+
+  const unPinNavigationItem = (workspaceSlug: string, key: string) => {
+    updateSidebarPreference(workspaceSlug, key, { is_pinned: false });
+  };
+
+  const icon = getSidebarNavigationItemIcon(item.key);
+
+  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",
+        getData: ({ input, element }) => {
+          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]);
+
+  return (
+    <div
+      id={`sidebar-${item.key}`}
+      className={cn("relative", { "bg-custom-sidebar-background-80 opacity-60": isDragging })}
+      ref={navigationIemRef}
+    >
+      <DropIndicator classNames="absolute top-0" isVisible={instruction === "DRAG_OVER"} />
+      <div
+        className={cn(
+          "group/project-item relative w-full  flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90"
+        )}
+        id={`${item.key}`}
+      >
+        {!disableDrag && (
+          <Tooltip
+            // isMobile={isMobile}
+            tooltipContent={t("drag_to_rearrange")}
+            position="top-right"
+            disabled={isDragging}
+          >
+            <button
+              type="button"
+              className={cn(
+                "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-custom-sidebar-text-400 cursor-grab",
+                {
+                  // "cursor-not-allowed opacity-60": project.sort_order === null,
+                  "cursor-grabbing": isDragging,
+
+                  // "!hidden": isSidebarCollapsed,
+                }
+              )}
+              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-sm 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 tooltipContent="Hide tab">
+                <Eye
+                  className="size-4 flex-shrink-0 hover:text-custom-text-200 text-custom-text-300 outline-none"
+                  onClick={() => unPinNavigationItem(workspaceSlug.toString(), item.key)}
+                />
+              </Tooltip>
+            ) : (
+              <Tooltip tooltipContent="Show tab">
+                <EyeClosed
+                  className="size-4 flex-shrink-0 hover:text-custom-text-200 text-custom-text-400 outline-none"
+                  onClick={() => pinNavigationItem(workspaceSlug.toString(), item.key)}
+                />
+              </Tooltip>
+            )}
+          </div>
+        </SidebarNavItem>
+      </div>
+      {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
+    </div>
+  );
+});
diff --git a/web/ce/components/workspace/sidebar/helper.tsx b/web/ce/components/workspace/sidebar/helper.tsx
new file mode 100644
index 000000000..d00b0c361
--- /dev/null
+++ b/web/ce/components/workspace/sidebar/helper.tsx
@@ -0,0 +1,26 @@
+import { BarChart2, Briefcase, Home, Inbox, Layers, PenSquare } from "lucide-react";
+import { ArchiveIcon, ContrastIcon, UserActivityIcon } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+export const getSidebarNavigationItemIcon = (key: string, className: string = "") => {
+  switch (key) {
+    case "home":
+      return <Home className={cn("size-4 flex-shrink-0", className)} />;
+    case "inbox":
+      return <Inbox className={cn("size-4 flex-shrink-0", className)} />;
+    case "projects":
+      return <Briefcase className={cn("size-4 flex-shrink-0", className)} />;
+    case "views":
+      return <Layers className={cn("size-4 flex-shrink-0", className)} />;
+    case "active_cycles":
+      return <ContrastIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "analytics":
+      return <BarChart2 className={cn("size-4 flex-shrink-0", className)} />;
+    case "your_work":
+      return <UserActivityIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "drafts":
+      return <PenSquare className={cn("size-4 flex-shrink-0", className)} />;
+    case "archives":
+      return <ArchiveIcon className={cn("size-4 flex-shrink-0", className)} />;
+  }
+};
diff --git a/web/ce/components/workspace/sidebar/index.ts b/web/ce/components/workspace/sidebar/index.ts
new file mode 100644
index 000000000..c22f296a2
--- /dev/null
+++ b/web/ce/components/workspace/sidebar/index.ts
@@ -0,0 +1,4 @@
+export * from "./app-search";
+export * from "./extended-sidebar-item";
+export * from "./helper";
+export * from "./sidebar-item";
diff --git a/web/ce/components/workspace/sidebar/sidebar-item.tsx b/web/ce/components/workspace/sidebar/sidebar-item.tsx
new file mode 100644
index 000000000..51a5735de
--- /dev/null
+++ b/web/ce/components/workspace/sidebar/sidebar-item.tsx
@@ -0,0 +1,90 @@
+"use client";
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel, IWorkspaceSidebarNavigationItem } from "@plane/constants";
+import { usePlatformOS } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@plane/ui";
+// components
+import { SidebarNavItem } from "@/components/sidebar";
+import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
+// hooks
+import { useAppTheme, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
+// local imports
+import { getSidebarNavigationItemIcon } from "./helper";
+
+type TSidebarItemProps = {
+  item: IWorkspaceSidebarNavigationItem;
+};
+
+export const SidebarItem: FC<TSidebarItemProps> = observer((props) => {
+  const { item } = props;
+  const { t } = useTranslation();
+  // nextjs hooks
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  const { allowPermissions } = useUserPermissions();
+  const { getNavigationPreferences } = useWorkspace();
+  const { data } = useUser();
+
+  // store hooks
+  const { toggleSidebar, sidebarCollapsed, extendedSidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { isMobile } = usePlatformOS();
+
+  const handleLinkClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+    if (extendedSidebarCollapsed) toggleExtendedSidebar();
+  };
+
+  const staticItems = ["home", "inbox", "pi-chat", "projects"];
+
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
+    return null;
+  }
+
+  const itemHref =
+    item.key === "your_work"
+      ? `/${workspaceSlug.toString()}${item.href}/${data?.id}`
+      : `/${workspaceSlug.toString()}${item.href}`;
+
+  const isActive = itemHref === pathname;
+
+  const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
+  const isPinned = sidebarPreference?.[item.key]?.is_pinned;
+  if (!isPinned && !staticItems.includes(item.key)) return null;
+
+  const icon = getSidebarNavigationItemIcon(item.key);
+
+  return (
+    <Tooltip
+      tooltipContent={t(item.labelTranslationKey)}
+      position="right"
+      className="ml-2"
+      disabled={!sidebarCollapsed}
+      isMobile={isMobile}
+    >
+      <Link href={itemHref} onClick={() => handleLinkClick()}>
+        <SidebarNavItem
+          className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
+          isActive={isActive}
+        >
+          <div className="flex items-center gap-1.5 py-[1px]">
+            {icon}
+            {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
+          </div>
+          {item.key === "inbox" && (
+            <NotificationAppSidebarOption
+              workspaceSlug={workspaceSlug?.toString()}
+              isSidebarCollapsed={sidebarCollapsed ?? false}
+            />
+          )}
+        </SidebarNavItem>
+      </Link>
+    </Tooltip>
+  );
+});
diff --git a/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx b/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx
new file mode 100644
index 000000000..92cbdfc5f
--- /dev/null
+++ b/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx
@@ -0,0 +1 @@
+export const SidebarTeamsList = () => null;
diff --git a/web/ce/components/workspace/upgrade-badge.tsx b/web/ce/components/workspace/upgrade-badge.tsx
index 3fc3654cf..1abb731e7 100644
--- a/web/ce/components/workspace/upgrade-badge.tsx
+++ b/web/ce/components/workspace/upgrade-badge.tsx
@@ -1,5 +1,6 @@
 import { FC } from "react";
 // helpers
+import { useTranslation } from "@plane/i18n";
 import { cn } from "@/helpers/common.helper";
 
 type TUpgradeBadge = {
@@ -10,6 +11,8 @@ type TUpgradeBadge = {
 export const UpgradeBadge: FC<TUpgradeBadge> = (props) => {
   const { className, size = "sm" } = props;
 
+  const { t } = useTranslation();
+
   return (
     <div
       className={cn(
@@ -21,7 +24,7 @@ export const UpgradeBadge: FC<TUpgradeBadge> = (props) => {
         className
       )}
     >
-      Pro
+      {t("sidebar.pro")}
     </div>
   );
 };
diff --git a/web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx b/web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx
index 0f6d0681e..88201af63 100644
--- a/web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx
+++ b/web/ce/components/workspace/upgrade/paid-plans-upgrade-modal.tsx
@@ -22,7 +22,7 @@ const ONE_PLAN_FEATURES = [
   "OIDC + SAML for SSO",
   "Active Cycles",
   "Real-time collab + public views and page",
-  "Link pages in issues and vice-versa",
+  "Link pages in work items and vice-versa",
   "Time-tracking + limited bulk ops",
   "Docker, Kubernetes and more",
 ];
diff --git a/web/ce/constants/dashboard.ts b/web/ce/constants/dashboard.ts
deleted file mode 100644
index 8872982fc..000000000
--- a/web/ce/constants/dashboard.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-"use client";
-
-// icons
-import { Home, Inbox, PenSquare } from "lucide-react";
-// ui
-import { UserActivityIcon } from "@plane/ui";
-import { Props } from "@/components/icons/types";
-import { TLinkOptions } from "@/constants/dashboard";
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
-// plane web types
-import { TSidebarUserMenuItemKeys } from "@/plane-web/types/dashboard";
-
-export type TSidebarUserMenuItems = {
-  key: TSidebarUserMenuItemKeys;
-  label: string;
-  href: string;
-  access: EUserPermissions[];
-  highlight: (pathname: string, baseUrl: string, options?: TLinkOptions) => boolean;
-  Icon: React.FC<Props>;
-};
-
-export const SIDEBAR_USER_MENU_ITEMS: TSidebarUserMenuItems[] = [
-  {
-    key: "home",
-    label: "Home",
-    href: ``,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/`,
-    Icon: Home,
-  },
-  {
-    key: "your-work",
-    label: "Your work",
-    href: "/profile",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    highlight: (pathname: string, baseUrl: string, options?: TLinkOptions) =>
-      options?.userId ? pathname.includes(`${baseUrl}/profile/${options?.userId}`) : false,
-    Icon: UserActivityIcon,
-  },
-  {
-    key: "notifications",
-    label: "Inbox",
-    href: `/notifications`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/notifications/`),
-    Icon: Inbox,
-  },
-  {
-    key: "drafts",
-    label: "Drafts",
-    href: `/drafts`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/drafts/`),
-    Icon: PenSquare,
-  },
-];
diff --git a/web/ce/constants/editor.ts b/web/ce/constants/editor.ts
new file mode 100644
index 000000000..b9a6d5d38
--- /dev/null
+++ b/web/ce/constants/editor.ts
@@ -0,0 +1,4 @@
+// plane types
+import { TSearchEntities } from "@plane/types";
+
+export const EDITOR_MENTION_TYPES: TSearchEntities[] = ["user_mention"];
diff --git a/web/ce/constants/index.ts b/web/ce/constants/index.ts
index 123db122c..895c18c3d 100644
--- a/web/ce/constants/index.ts
+++ b/web/ce/constants/index.ts
@@ -1,7 +1,4 @@
 export * from "./ai";
 export * from "./estimates";
 export * from "./gantt-chart";
-export * from "./issues";
 export * from "./project";
-export * from "./user-permissions";
-export * from "./workspace";
diff --git a/web/ce/constants/issues.ts b/web/ce/constants/issues.ts
deleted file mode 100644
index dc6ffbcb8..000000000
--- a/web/ce/constants/issues.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { TIssueActivityComment } from "@plane/types";
-
-export enum EActivityFilterType {
-  ACTIVITY = "ACTIVITY",
-  COMMENT = "COMMENT",
-}
-
-export type TActivityFilters = EActivityFilterType;
-
-export const ACTIVITY_FILTER_TYPE_OPTIONS: Record<EActivityFilterType, { label: string }> = {
-  [EActivityFilterType.ACTIVITY]: {
-    label: "Updates",
-  },
-  [EActivityFilterType.COMMENT]: {
-    label: "Comments",
-  },
-};
-
-export const defaultActivityFilters: TActivityFilters[] = [EActivityFilterType.ACTIVITY, EActivityFilterType.COMMENT];
-
-export type TActivityFilterOption = {
-  key: EActivityFilterType;
-  label: string;
-  isSelected: boolean;
-  onClick: () => void;
-};
-
-export const filterActivityOnSelectedFilters = (
-  activity: TIssueActivityComment[],
-  filter: TActivityFilters[]
-): TIssueActivityComment[] =>
-  activity.filter((activity) => filter.includes(activity.activity_type as TActivityFilters));
-
-export const ENABLE_ISSUE_DEPENDENCIES = false;
diff --git a/web/ce/constants/project/settings/features.tsx b/web/ce/constants/project/settings/features.tsx
index b3601e27b..99e6101d5 100644
--- a/web/ce/constants/project/settings/features.tsx
+++ b/web/ce/constants/project/settings/features.tsx
@@ -4,6 +4,7 @@ import { IProject } from "@plane/types";
 import { ContrastIcon, DiceIcon, Intake } from "@plane/ui";
 
 export type TProperties = {
+  key: string;
   property: string;
   title: string;
   description: string;
@@ -23,6 +24,7 @@ export type TFeatureList = {
 
 export type TProjectFeatures = {
   [key: string]: {
+    key: string;
     title: string;
     description: string;
     featureList: TFeatureList;
@@ -31,10 +33,12 @@ export type TProjectFeatures = {
 
 export const PROJECT_FEATURES_LIST: TProjectFeatures = {
   project_features: {
-    title: "Projects and issues",
+    key: "projects_and_issues",
+    title: "Projects and work items",
     description: "Toggle these on or off this project.",
     featureList: {
       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.",
@@ -43,6 +47,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
         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.",
@@ -51,6 +56,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
         isEnabled: true,
       },
       views: {
+        key: "views",
         property: "issue_views_view",
         title: "Views",
         description: "Save sorts, filters, and display options for later or share them.",
@@ -59,6 +65,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
         isEnabled: true,
       },
       pages: {
+        key: "pages",
         property: "page_view",
         title: "Pages",
         description: "Write anything like you write anything.",
@@ -67,9 +74,10 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
         isEnabled: true,
       },
       inbox: {
+        key: "intake",
         property: "inbox_view",
         title: "Intake",
-        description: "Consider and discuss issues before you add them to your project.",
+        description: "Consider and discuss work items before you add them to your project.",
         icon: <Intake className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -77,10 +85,12 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
     },
   },
   project_others: {
+    key: "work_management",
     title: "Work management",
     description: "Available only on some plans as indicated by the label next to the feature below.",
     featureList: {
       is_time_tracking_enabled: {
+        key: "time_tracking",
         property: "is_time_tracking_enabled",
         title: "Time Tracking",
         description: "Log time, see timesheets, and download full CSVs for your entire workspace.",
diff --git a/web/ce/constants/project/settings/tabs.ts b/web/ce/constants/project/settings/tabs.ts
index 4d9207cc6..50bff1115 100644
--- a/web/ce/constants/project/settings/tabs.ts
+++ b/web/ce/constants/project/settings/tabs.ts
@@ -1,14 +1,14 @@
 // icons
+import { EUserPermissions } from "@plane/constants";
 import { SettingIcon } from "@/components/icons/attachment";
 // types
 import { Props } from "@/components/icons/types";
 // constants
-import { EUserPermissions } from "../../user-permissions";
 
 export const PROJECT_SETTINGS = {
   general: {
     key: "general",
-    label: "General",
+    i18n_label: "common.general",
     href: `/settings`,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
@@ -16,7 +16,7 @@ export const PROJECT_SETTINGS = {
   },
   members: {
     key: "members",
-    label: "Members",
+    i18n_label: "members",
     href: `/settings/members`,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
@@ -24,7 +24,7 @@ export const PROJECT_SETTINGS = {
   },
   features: {
     key: "features",
-    label: "Features",
+    i18n_label: "common.features",
     href: `/settings/features`,
     access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/features/`,
@@ -32,7 +32,7 @@ export const PROJECT_SETTINGS = {
   },
   states: {
     key: "states",
-    label: "States",
+    i18n_label: "common.states",
     href: `/settings/states`,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/states/`,
@@ -40,7 +40,7 @@ export const PROJECT_SETTINGS = {
   },
   labels: {
     key: "labels",
-    label: "Labels",
+    i18n_label: "common.labels",
     href: `/settings/labels`,
     access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/labels/`,
@@ -48,7 +48,7 @@ export const PROJECT_SETTINGS = {
   },
   estimates: {
     key: "estimates",
-    label: "Estimates",
+    i18n_label: "common.estimates",
     href: `/settings/estimates`,
     access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/estimates/`,
@@ -56,7 +56,7 @@ export const PROJECT_SETTINGS = {
   },
   automations: {
     key: "automations",
-    label: "Automations",
+    i18n_label: "project_settings.automations.label",
     href: `/settings/automations`,
     access: [EUserPermissions.ADMIN],
     highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/automations/`,
@@ -66,7 +66,7 @@ export const PROJECT_SETTINGS = {
 
 export const PROJECT_SETTINGS_LINKS: {
   key: string;
-  label: string;
+  i18n_label: string;
   href: string;
   access: EUserPermissions[];
   highlight: (pathname: string, baseUrl: string) => boolean;
diff --git a/web/ce/constants/workspace.ts b/web/ce/constants/workspace.ts
deleted file mode 100644
index b976111b5..000000000
--- a/web/ce/constants/workspace.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-// icons
-import { SettingIcon } from "@/components/icons/attachment";
-import { Props } from "@/components/icons/types";
-import { EUserPermissions } from "./user-permissions";
-// constants
-
-export const WORKSPACE_SETTINGS = {
-  general: {
-    key: "general",
-    label: "General",
-    href: `/settings`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/`,
-    Icon: SettingIcon,
-  },
-  members: {
-    key: "members",
-    label: "Members",
-    href: `/settings/members`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/members/`,
-    Icon: SettingIcon,
-  },
-  "billing-and-plans": {
-    key: "billing-and-plans",
-    label: "Billing and plans",
-    href: `/settings/billing`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/billing/`,
-    Icon: SettingIcon,
-  },
-  export: {
-    key: "export",
-    label: "Exports",
-    href: `/settings/exports`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/exports/`,
-    Icon: SettingIcon,
-  },
-  webhooks: {
-    key: "webhooks",
-    label: "Webhooks",
-    href: `/settings/webhooks`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/webhooks/`,
-    Icon: SettingIcon,
-  },
-  "api-tokens": {
-    key: "api-tokens",
-    label: "API tokens",
-    href: `/settings/api-tokens`,
-    access: [EUserPermissions.ADMIN],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/settings/api-tokens/`,
-    Icon: SettingIcon,
-  },
-};
-
-export const WORKSPACE_SETTINGS_LINKS: {
-  key: string;
-  label: string;
-  href: string;
-  access: EUserPermissions[];
-  highlight: (pathname: string, baseUrl: string) => boolean;
-  Icon: React.FC<Props>;
-}[] = [
-  WORKSPACE_SETTINGS["general"],
-  WORKSPACE_SETTINGS["members"],
-  WORKSPACE_SETTINGS["billing-and-plans"],
-  WORKSPACE_SETTINGS["export"],
-  WORKSPACE_SETTINGS["webhooks"],
-  WORKSPACE_SETTINGS["api-tokens"],
-];
diff --git a/web/ce/helpers/command-palette.ts b/web/ce/helpers/command-palette.ts
new file mode 100644
index 000000000..28576735f
--- /dev/null
+++ b/web/ce/helpers/command-palette.ts
@@ -0,0 +1,95 @@
+// types
+import { TCommandPaletteActionList, TCommandPaletteShortcut, TCommandPaletteShortcutList } from "@plane/types";
+// store
+import { store } from "@/lib/store-context";
+
+export const getGlobalShortcutsList: () => TCommandPaletteActionList = () => {
+  const { toggleCreateIssueModal } = store.commandPalette;
+
+  return {
+    c: {
+      title: "Create a new work item",
+      description: "Create a new work item in the current project",
+      action: () => toggleCreateIssueModal(true),
+    },
+  };
+};
+
+export const getWorkspaceShortcutsList: () => TCommandPaletteActionList = () => {
+  const { toggleCreateProjectModal } = store.commandPalette;
+
+  return {
+    p: {
+      title: "Create a new project",
+      description: "Create a new project in the current workspace",
+      action: () => toggleCreateProjectModal(true),
+    },
+  };
+};
+
+export const getProjectShortcutsList: () => TCommandPaletteActionList = () => {
+  const {
+    toggleCreatePageModal,
+    toggleCreateModuleModal,
+    toggleCreateCycleModal,
+    toggleCreateViewModal,
+    toggleBulkDeleteIssueModal,
+  } = store.commandPalette;
+
+  return {
+    d: {
+      title: "Create a new page",
+      description: "Create a new page in the current project",
+      action: () => toggleCreatePageModal({ isOpen: true }),
+    },
+    m: {
+      title: "Create a new module",
+      description: "Create a new module in the current project",
+      action: () => toggleCreateModuleModal(true),
+    },
+    q: {
+      title: "Create a new cycle",
+      description: "Create a new cycle in the current project",
+      action: () => toggleCreateCycleModal(true),
+    },
+    v: {
+      title: "Create a new view",
+      description: "Create a new view in the current project",
+      action: () => toggleCreateViewModal(true),
+    },
+    backspace: {
+      title: "Bulk delete work items",
+      description: "Bulk delete work items in the current project",
+      action: () => toggleBulkDeleteIssueModal(true),
+    },
+    delete: {
+      title: "Bulk delete work items",
+      description: "Bulk delete work items in the current project",
+      action: () => toggleBulkDeleteIssueModal(true),
+    },
+  };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const handleAdditionalKeyDownEvents = (e: KeyboardEvent) => null;
+
+export const getNavigationShortcutsList = (): TCommandPaletteShortcut[] => [
+  { keys: "Ctrl,K", description: "Open command menu" },
+];
+
+export const getCommonShortcutsList = (platform: string): TCommandPaletteShortcut[] => [
+  { keys: "P", description: "Create project" },
+  { keys: "C", description: "Create work item" },
+  { keys: "Q", description: "Create cycle" },
+  { keys: "M", description: "Create module" },
+  { keys: "V", description: "Create view" },
+  { keys: "D", description: "Create page" },
+  { keys: "Delete", description: "Bulk delete work items" },
+  { keys: "Shift,/", description: "Open shortcuts guide" },
+  {
+    keys: platform === "MacOS" ? "Ctrl,control,C" : "Ctrl,Alt,C",
+    description: "Copy work item URL from the work item details page",
+  },
+];
+
+export const getAdditionalShortcutsList = (): TCommandPaletteShortcutList[] => [];
diff --git a/web/ce/helpers/dashboard.helper.ts b/web/ce/helpers/dashboard.helper.ts
deleted file mode 100644
index b2fba63ad..000000000
--- a/web/ce/helpers/dashboard.helper.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// plane web types
-import { TSidebarUserMenuItemKeys } from "@/plane-web/types/dashboard";
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const isUserFeatureEnabled = (featureKey: TSidebarUserMenuItemKeys) => true;
diff --git a/web/ce/helpers/epic-analytics.ts b/web/ce/helpers/epic-analytics.ts
new file mode 100644
index 000000000..43e6ffef0
--- /dev/null
+++ b/web/ce/helpers/epic-analytics.ts
@@ -0,0 +1,15 @@
+import { TEpicAnalyticsGroup } from "@plane/types";
+
+export const updateEpicAnalytics = () => {
+  const updateAnalytics = (
+    workspaceSlug: string,
+    projectId: string,
+    epicId: string,
+    data: {
+      incrementStateGroupCount?: TEpicAnalyticsGroup;
+      decrementStateGroupCount?: TEpicAnalyticsGroup;
+    }
+  ) => {};
+
+  return { updateAnalytics };
+};
diff --git a/web/ce/helpers/issue-action-helper.ts b/web/ce/helpers/issue-action-helper.ts
new file mode 100644
index 000000000..b1644e2aa
--- /dev/null
+++ b/web/ce/helpers/issue-action-helper.ts
@@ -0,0 +1,15 @@
+import { IssueActions } from "@/hooks/use-issues-actions";
+
+export const useTeamIssueActions: () => IssueActions = () => ({
+  fetchIssues: () => Promise.resolve(undefined),
+  fetchNextIssues: () => Promise.resolve(undefined),
+  removeIssue: () => Promise.resolve(undefined),
+  updateFilters: () => Promise.resolve(undefined),
+});
+
+export const useTeamViewIssueActions: () => IssueActions = () => ({
+  fetchIssues: () => Promise.resolve(undefined),
+  fetchNextIssues: () => Promise.resolve(undefined),
+  removeIssue: () => Promise.resolve(undefined),
+  updateFilters: () => Promise.resolve(undefined),
+});
diff --git a/web/ce/hooks/store/index.ts b/web/ce/hooks/store/index.ts
new file mode 100644
index 000000000..1962c9b26
--- /dev/null
+++ b/web/ce/hooks/store/index.ts
@@ -0,0 +1,2 @@
+export * from "./use-page-store";
+export * from "./use-page";
diff --git a/web/ce/hooks/store/use-page-store.ts b/web/ce/hooks/store/use-page-store.ts
new file mode 100644
index 000000000..91bf9306b
--- /dev/null
+++ b/web/ce/hooks/store/use-page-store.ts
@@ -0,0 +1,24 @@
+import { useContext } from "react";
+// context
+import { StoreContext } from "@/lib/store-context";
+// mobx store
+import { 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/web/ce/hooks/store/use-page.ts b/web/ce/hooks/store/use-page.ts
new file mode 100644
index 000000000..c7bd7ceed
--- /dev/null
+++ b/web/ce/hooks/store/use-page.ts
@@ -0,0 +1,23 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/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/web/ce/hooks/use-additional-editor-mention.tsx b/web/ce/hooks/use-additional-editor-mention.tsx
new file mode 100644
index 000000000..58416379f
--- /dev/null
+++ b/web/ce/hooks/use-additional-editor-mention.tsx
@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+// plane editor
+import { TMentionSection } from "@plane/editor";
+// plane types
+import { TSearchEntities, TSearchResponse } from "@plane/types";
+
+export type TAdditionalEditorMentionHandlerArgs = {
+  response: TSearchResponse;
+  sections: TMentionSection[];
+};
+
+export type TAdditionalParseEditorContentArgs = {
+  id: string;
+  entityType: TSearchEntities;
+};
+
+export type TAdditionalParseEditorContentReturnType =
+  | {
+      redirectionPath: string;
+      textContent: string;
+    }
+  | undefined;
+
+export const useAdditionalEditorMention = () => {
+  const updateAdditionalSections = useCallback((args: TAdditionalEditorMentionHandlerArgs) => {
+    const {} = args;
+  }, []);
+
+  const parseAdditionalEditorContent = useCallback(
+    (args: TAdditionalParseEditorContentArgs): TAdditionalParseEditorContentReturnType => {
+      const {} = args;
+      return undefined;
+    },
+    []
+  );
+
+  return {
+    updateAdditionalSections,
+    parseAdditionalEditorContent,
+  };
+};
diff --git a/web/ce/hooks/use-debounced-duplicate-issues.tsx b/web/ce/hooks/use-debounced-duplicate-issues.tsx
index f0325bc12..8028a6191 100644
--- a/web/ce/hooks/use-debounced-duplicate-issues.tsx
+++ b/web/ce/hooks/use-debounced-duplicate-issues.tsx
@@ -1,6 +1,7 @@
 import { 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 }
diff --git a/web/ce/hooks/use-file-size.ts b/web/ce/hooks/use-file-size.ts
index c19df40e5..025c8ddfd 100644
--- a/web/ce/hooks/use-file-size.ts
+++ b/web/ce/hooks/use-file-size.ts
@@ -1,5 +1,5 @@
-// constants
-import { MAX_STATIC_FILE_SIZE } from "@/constants/common";
+// plane imports
+import { MAX_FILE_SIZE } from "@plane/constants";
 // hooks
 import { useInstance } from "@/hooks/store";
 
@@ -12,6 +12,6 @@ export const useFileSize = (): TReturnProps => {
   const { config } = useInstance();
 
   return {
-    maxFileSize: config?.file_size_limit ?? MAX_STATIC_FILE_SIZE,
+    maxFileSize: config?.file_size_limit ?? MAX_FILE_SIZE,
   };
 };
diff --git a/web/ce/hooks/use-issue-embed.tsx b/web/ce/hooks/use-issue-embed.tsx
index 5d02d978f..fcb6a0f3c 100644
--- a/web/ce/hooks/use-issue-embed.tsx
+++ b/web/ce/hooks/use-issue-embed.tsx
@@ -1,12 +1,18 @@
 // editor
 import { TEmbedConfig } from "@plane/editor";
-// types
-import { TPageEmbedType } from "@plane/types";
+// plane types
+import { TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
 // plane web components
 import { IssueEmbedUpgradeCard } from "@/plane-web/components/pages";
 
+export type TIssueEmbedHookProps = {
+  fetchEmbedSuggestions?: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+  projectId?: string;
+  workspaceSlug?: string;
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const useIssueEmbed = (workspaceSlug: string, projectId: string, queryType: TPageEmbedType = "issue") => {
+export const useIssueEmbed = (props: TIssueEmbedHookProps) => {
   const widgetCallback = () => <IssueEmbedUpgradeCard />;
 
   const issueEmbedProps: TEmbedConfig["issue"] = {
diff --git a/web/ce/hooks/use-page-flag.ts b/web/ce/hooks/use-page-flag.ts
new file mode 100644
index 000000000..84dc31c0d
--- /dev/null
+++ b/web/ce/hooks/use-page-flag.ts
@@ -0,0 +1,14 @@
+export type TPageFlagHookArgs = {
+  workspaceSlug: string;
+};
+
+export type TPageFlagHookReturnType = {
+  isMovePageEnabled: boolean;
+};
+
+export const usePageFlag = (args: TPageFlagHookArgs): TPageFlagHookReturnType => {
+  const {} = args;
+  return {
+    isMovePageEnabled: false,
+  };
+};
diff --git a/web/ce/hooks/use-workspace-issue-properties-extended.tsx b/web/ce/hooks/use-workspace-issue-properties-extended.tsx
new file mode 100644
index 000000000..6e9ba79f2
--- /dev/null
+++ b/web/ce/hooks/use-workspace-issue-properties-extended.tsx
@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const useWorkspaceIssuePropertiesExtended = (workspaceSlug: string | string[] | undefined) => {};
diff --git a/web/ce/layouts/project-wrapper.tsx b/web/ce/layouts/project-wrapper.tsx
new file mode 100644
index 000000000..585ed567b
--- /dev/null
+++ b/web/ce/layouts/project-wrapper.tsx
@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+// layouts
+import { ProjectAuthWrapper as CoreProjectAuthWrapper } from "@/layouts/auth-layout";
+
+export type IProjectAuthWrapper = {
+  workspaceSlug: string;
+  projectId: string;
+  children: React.ReactNode;
+};
+
+export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
+  // props
+  const { workspaceSlug, projectId, children } = props;
+
+  return (
+    <CoreProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
+      {children}
+    </CoreProjectAuthWrapper>
+  );
+});
diff --git a/web/ce/layouts/workspace-wrapper.tsx b/web/ce/layouts/workspace-wrapper.tsx
new file mode 100644
index 000000000..fcde83e7f
--- /dev/null
+++ b/web/ce/layouts/workspace-wrapper.tsx
@@ -0,0 +1,15 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+// layouts
+import { WorkspaceAuthWrapper as CoreWorkspaceAuthWrapper } from "@/layouts/auth-layout";
+
+export type IWorkspaceAuthWrapper = {
+  children: React.ReactNode;
+};
+
+export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
+  // props
+  const { children } = props;
+
+  return <CoreWorkspaceAuthWrapper>{children}</CoreWorkspaceAuthWrapper>;
+});
diff --git a/web/ce/services/project/view.service.ts b/web/ce/services/project/view.service.ts
index 6cb76222a..9a6ee12a2 100644
--- a/web/ce/services/project/view.service.ts
+++ b/web/ce/services/project/view.service.ts
@@ -1,5 +1,5 @@
+import { EViewAccess } from "@plane/constants";
 import { TPublishViewSettings } from "@plane/types";
-import { EViewAccess } from "@/constants/views";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { ViewService as CoreViewService } from "@/services/view.service";
 
diff --git a/web/ce/services/workspace.service.ts b/web/ce/services/workspace.service.ts
index 59fe39c69..9dcfb7f6c 100644
--- a/web/ce/services/workspace.service.ts
+++ b/web/ce/services/workspace.service.ts
@@ -1,4 +1,4 @@
-import { EViewAccess } from "@/constants/views";
+import { EViewAccess } from "@plane/constants";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { WorkspaceService as CoreWorkspaceService } from "@/services/workspace.service";
 
diff --git a/web/ce/store/command-palette.store.ts b/web/ce/store/command-palette.store.ts
new file mode 100644
index 000000000..1b6fabf18
--- /dev/null
+++ b/web/ce/store/command-palette.store.ts
@@ -0,0 +1,26 @@
+import { computed, makeObservable } from "mobx";
+// types / constants
+import { BaseCommandPaletteStore, IBaseCommandPaletteStore } from "@/store/base-command-palette.store";
+
+export interface ICommandPaletteStore extends IBaseCommandPaletteStore {
+  // computed
+  isAnyModalOpen: boolean;
+}
+
+export class CommandPaletteStore extends BaseCommandPaletteStore implements ICommandPaletteStore {
+  constructor() {
+    super();
+    makeObservable(this, {
+      // computed
+      isAnyModalOpen: computed,
+    });
+  }
+
+  /**
+   * Checks whether any modal is open or not in the base command palette.
+   * @returns boolean
+   */
+  get isAnyModalOpen(): boolean {
+    return Boolean(super.getCoreModalsState());
+  }
+}
diff --git a/web/ce/store/cycle/index.ts b/web/ce/store/cycle/index.ts
new file mode 100644
index 000000000..d9b3080a8
--- /dev/null
+++ b/web/ce/store/cycle/index.ts
@@ -0,0 +1 @@
+export type { ICycleStore } from "@/store/cycle.store";
diff --git a/web/ce/store/issue/epic/filter.store.ts b/web/ce/store/issue/epic/filter.store.ts
new file mode 100644
index 000000000..a4733c60a
--- /dev/null
+++ b/web/ce/store/issue/epic/filter.store.ts
@@ -0,0 +1,15 @@
+import { IProjectIssuesFilter, ProjectIssuesFilter } from "@/store/issue/project";
+import { IIssueRootStore } from "@/store/issue/root.store";
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export type IProjectEpicsFilter = IProjectIssuesFilter;
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export class ProjectEpicsFilter extends ProjectIssuesFilter implements IProjectEpicsFilter {
+  constructor(_rootStore: IIssueRootStore) {
+    super(_rootStore);
+
+    // root store
+    this.rootIssueStore = _rootStore;
+  }
+}
diff --git a/web/ce/store/issue/epic/index.ts b/web/ce/store/issue/epic/index.ts
new file mode 100644
index 000000000..0fe6c946b
--- /dev/null
+++ b/web/ce/store/issue/epic/index.ts
@@ -0,0 +1,2 @@
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/web/ce/store/issue/epic/issue.store.ts b/web/ce/store/issue/epic/issue.store.ts
new file mode 100644
index 000000000..90ccee84d
--- /dev/null
+++ b/web/ce/store/issue/epic/issue.store.ts
@@ -0,0 +1,14 @@
+import { IProjectIssues, ProjectIssues } from "@/store/issue/project";
+import { IIssueRootStore } from "@/store/issue/root.store";
+import { IProjectEpicsFilter } from "./filter.store";
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+
+export type IProjectEpics = IProjectIssues;
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export class ProjectEpics extends ProjectIssues implements IProjectEpics {
+  constructor(_rootStore: IIssueRootStore, issueFilterStore: IProjectEpicsFilter) {
+    super(_rootStore, issueFilterStore);
+  }
+}
diff --git a/web/ce/store/issue/issue-details/activity.store.ts b/web/ce/store/issue/issue-details/activity.store.ts
index 6c0029c4f..93b925aba 100644
--- a/web/ce/store/issue/issue-details/activity.store.ts
+++ b/web/ce/store/issue/issue-details/activity.store.ts
@@ -7,9 +7,16 @@ import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-import { TIssueActivityComment, TIssueActivity, TIssueActivityMap, TIssueActivityIdMap } from "@plane/types";
+// plane package imports
+import { EIssueServiceType, E_SORT_ORDER, EActivityFilterType } from "@plane/constants";
+import {
+  TIssueActivityComment,
+  TIssueActivity,
+  TIssueActivityMap,
+  TIssueActivityIdMap,
+  TIssueServiceType,
+} from "@plane/types";
 // plane web constants
-import { EActivityFilterType } from "@/plane-web/constants/issues";
 // services
 import { IssueActivityService } from "@/services/issue";
 // store
@@ -29,40 +36,40 @@ export interface IIssueActivityStoreActions {
 
 export interface IIssueActivityStore extends IIssueActivityStoreActions {
   // observables
-  sortOrder: 'asc' | 'desc'
   loader: TActivityLoader;
   activities: TIssueActivityIdMap;
   activityMap: TIssueActivityMap;
   // helper methods
   getActivitiesByIssueId: (issueId: string) => string[] | undefined;
   getActivityById: (activityId: string) => TIssueActivity | undefined;
-  getActivityCommentByIssueId: (issueId: string) => TIssueActivityComment[] | undefined;
-  toggleSortOrder: ()=>void;
+  getActivityCommentByIssueId: (issueId: string, sortOrder: E_SORT_ORDER) => TIssueActivityComment[] | undefined;
 }
 
 export class IssueActivityStore implements IIssueActivityStore {
   // observables
-  sortOrder: "asc" | "desc" = 'asc';
   loader: TActivityLoader = "fetch";
   activities: TIssueActivityIdMap = {};
   activityMap: TIssueActivityMap = {};
 
   // services
+  serviceType;
   issueActivityService;
 
-  constructor(protected store: CoreRootStore) {
+  constructor(
+    protected store: CoreRootStore,
+    serviceType: TIssueServiceType = EIssueServiceType.ISSUES
+  ) {
     makeObservable(this, {
       // observables
-      sortOrder: observable.ref,
       loader: observable.ref,
       activities: observable,
       activityMap: observable,
       // actions
       fetchActivities: action,
-      toggleSortOrder: action
     });
+    this.serviceType = serviceType;
     // services
-    this.issueActivityService = new IssueActivityService();
+    this.issueActivityService = new IssueActivityService(this.serviceType);
   }
 
   // helper methods
@@ -76,13 +83,16 @@ export class IssueActivityStore implements IIssueActivityStore {
     return this.activityMap[activityId] ?? undefined;
   };
 
-  getActivityCommentByIssueId = computedFn((issueId: string) => {
+  getActivityCommentByIssueId = computedFn((issueId: string, sortOrder: E_SORT_ORDER) => {
     if (!issueId) return undefined;
 
     let activityComments: TIssueActivityComment[] = [];
 
+    const currentStore =
+      this.serviceType === EIssueServiceType.EPICS ? this.store.issue.epicDetail : this.store.issue.issueDetail;
+
     const activities = this.getActivitiesByIssueId(issueId) || [];
-    const comments = this.store.issue.issueDetail.comment.getCommentsByIssueId(issueId) || [];
+    const comments = currentStore.comment.getCommentsByIssueId(issueId) || [];
 
     activities.forEach((activityId) => {
       const activity = this.getActivityById(activityId);
@@ -95,7 +105,7 @@ export class IssueActivityStore implements IIssueActivityStore {
     });
 
     comments.forEach((commentId) => {
-      const comment = this.store.issue.issueDetail.comment.getCommentById(commentId);
+      const comment = currentStore.comment.getCommentById(commentId);
       if (!comment) return;
       activityComments.push({
         id: comment.id,
@@ -104,15 +114,11 @@ export class IssueActivityStore implements IIssueActivityStore {
       });
     });
 
-    activityComments = orderBy(activityComments, (e)=>new Date(e.created_at || 0), this.sortOrder);
+    activityComments = orderBy(activityComments, (e) => new Date(e.created_at || 0), sortOrder);
 
     return activityComments;
   });
 
-  toggleSortOrder = ()=>{
-    this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-  }
-
   // actions
   public async fetchActivities(
     workspaceSlug: string,
diff --git a/web/ce/store/issue/team-views/filter.store.ts b/web/ce/store/issue/team-views/filter.store.ts
new file mode 100644
index 000000000..9c33f9405
--- /dev/null
+++ b/web/ce/store/issue/team-views/filter.store.ts
@@ -0,0 +1,12 @@
+import { IProjectViewIssuesFilter, ProjectViewIssuesFilter } from "@/store/issue/project-views";
+import { IIssueRootStore } from "@/store/issue/root.store";
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export type ITeamViewIssuesFilter = IProjectViewIssuesFilter;
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export class TeamViewIssuesFilter extends ProjectViewIssuesFilter implements IProjectViewIssuesFilter {
+  constructor(_rootStore: IIssueRootStore) {
+    super(_rootStore);
+  }
+}
diff --git a/web/ce/store/issue/team-views/index.ts b/web/ce/store/issue/team-views/index.ts
new file mode 100644
index 000000000..0fe6c946b
--- /dev/null
+++ b/web/ce/store/issue/team-views/index.ts
@@ -0,0 +1,2 @@
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/web/ce/store/issue/team-views/issue.store.ts b/web/ce/store/issue/team-views/issue.store.ts
new file mode 100644
index 000000000..328370f85
--- /dev/null
+++ b/web/ce/store/issue/team-views/issue.store.ts
@@ -0,0 +1,13 @@
+import { IProjectViewIssues, ProjectViewIssues } from "@/store/issue/project-views";
+import { IIssueRootStore } from "@/store/issue/root.store";
+import { ITeamViewIssuesFilter } from "./filter.store";
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export type ITeamViewIssues = IProjectViewIssues;
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export class TeamViewIssues extends ProjectViewIssues implements IProjectViewIssues {
+  constructor(_rootStore: IIssueRootStore, teamViewFilterStore: ITeamViewIssuesFilter) {
+    super(_rootStore, teamViewFilterStore);
+  }
+}
diff --git a/web/ce/store/issue/team/filter.store.ts b/web/ce/store/issue/team/filter.store.ts
new file mode 100644
index 000000000..42b2d5dd2
--- /dev/null
+++ b/web/ce/store/issue/team/filter.store.ts
@@ -0,0 +1,12 @@
+import { IProjectIssuesFilter, ProjectIssuesFilter } from "@/store/issue/project";
+import { IIssueRootStore } from "@/store/issue/root.store";
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export type ITeamIssuesFilter = IProjectIssuesFilter;
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export class TeamIssuesFilter extends ProjectIssuesFilter implements IProjectIssuesFilter {
+  constructor(_rootStore: IIssueRootStore) {
+    super(_rootStore);
+  }
+}
diff --git a/web/ce/store/issue/team/index.ts b/web/ce/store/issue/team/index.ts
new file mode 100644
index 000000000..0fe6c946b
--- /dev/null
+++ b/web/ce/store/issue/team/index.ts
@@ -0,0 +1,2 @@
+export * from "./filter.store";
+export * from "./issue.store";
diff --git a/web/ce/store/issue/team/issue.store.ts b/web/ce/store/issue/team/issue.store.ts
new file mode 100644
index 000000000..2e3979436
--- /dev/null
+++ b/web/ce/store/issue/team/issue.store.ts
@@ -0,0 +1,13 @@
+import { IProjectIssues, ProjectIssues } from "@/store/issue/project";
+import { IIssueRootStore } from "@/store/issue/root.store";
+import { ITeamIssuesFilter } from "./filter.store";
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export type ITeamIssues = IProjectIssues;
+
+// @ts-nocheck - This class will never be used, extending similar class to avoid type errors
+export class TeamIssues extends ProjectIssues implements IProjectIssues {
+  constructor(_rootStore: IIssueRootStore, teamIssueFilterStore: ITeamIssuesFilter) {
+    super(_rootStore, teamIssueFilterStore);
+  }
+}
diff --git a/web/ce/store/timeline/base-timeline.store.ts b/web/ce/store/timeline/base-timeline.store.ts
index 3e15d124d..81de55fc4 100644
--- a/web/ce/store/timeline/base-timeline.store.ts
+++ b/web/ce/store/timeline/base-timeline.store.ts
@@ -20,8 +20,8 @@ type BlockData = {
   id: string;
   name: string;
   sort_order: number | null;
-  start_date: string | undefined | null;
-  target_date: string | undefined | null;
+  start_date?: string | undefined | null;
+  target_date?: string | undefined | null;
 };
 
 export interface IBaseTimelineStore {
diff --git a/web/ce/types/dashboard.ts b/web/ce/types/dashboard.ts
deleted file mode 100644
index d615ac4af..000000000
--- a/web/ce/types/dashboard.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type TSidebarUserMenuItemKeys = "home" | "your-work" | "notifications" | "drafts";
diff --git a/web/ce/types/index.ts b/web/ce/types/index.ts
index d18d0137a..105b7e96a 100644
--- a/web/ce/types/index.ts
+++ b/web/ce/types/index.ts
@@ -1,4 +1,3 @@
 export * from "./projects";
 export * from "./issue-types";
 export * from "./gantt-chart";
-export * from "./state.d";
diff --git a/web/ce/types/projects/index.ts b/web/ce/types/projects/index.ts
index 244d8c4df..9fb35777a 100644
--- a/web/ce/types/projects/index.ts
+++ b/web/ce/types/projects/index.ts
@@ -1 +1,2 @@
 export * from "./projects";
+export * from "./project-activity";
diff --git a/web/ce/types/projects/project-activity.ts b/web/ce/types/projects/project-activity.ts
new file mode 100644
index 000000000..bd61cf5ef
--- /dev/null
+++ b/web/ce/types/projects/project-activity.ts
@@ -0,0 +1,21 @@
+import { TProjectBaseActivity } from "@plane/types";
+
+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/web/ce/types/projects/projects.ts b/web/ce/types/projects/projects.ts
index 567c9488d..92c32b65d 100644
--- a/web/ce/types/projects/projects.ts
+++ b/web/ce/types/projects/projects.ts
@@ -1,3 +1,5 @@
-import { IProject } from "@plane/types";
+import { IPartialProject, IProject } from "@plane/types";
 
-export type TProject = IProject;
+export type TPartialProject = IPartialProject;
+
+export type TProject =  TPartialProject & IProject;
diff --git a/web/ce/types/state.d.ts b/web/ce/types/state.d.ts
deleted file mode 100644
index 22309db81..000000000
--- a/web/ce/types/state.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface IStateTransition {
-  transition_state_id: string;
-  actors: string[];
-}
-
-export interface IStateWorkFlow {
-  [transitionId: string]: IStateTransition;
-}
diff --git a/web/core/components/account/auth-forms/auth-header.tsx b/web/core/components/account/auth-forms/auth-header.tsx
index 4f0949aa2..b33c694ba 100644
--- a/web/core/components/account/auth-forms/auth-header.tsx
+++ b/web/core/components/account/auth-forms/auth-header.tsx
@@ -1,5 +1,7 @@
 import { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
 import useSWR from "swr";
+import { useTranslation } from "@plane/i18n";
 import { IWorkspaceMemberInvitation } from "@plane/types";
 // components
 import { LogoSpinner } from "@/components/common";
@@ -21,38 +23,40 @@ type TAuthHeader = {
 const Titles = {
   [EAuthModes.SIGN_IN]: {
     [EAuthSteps.EMAIL]: {
-      header: "Log in or sign up",
+      header: "auth.sign_in.header.step.email.header",
       subHeader: "",
     },
     [EAuthSteps.PASSWORD]: {
-      header: "Log in or sign up",
-      subHeader: "Use your email-password combination to log in.",
+      header: "auth.sign_in.header.step.password.header",
+      subHeader: "auth.sign_in.header.step.password.sub_header",
     },
     [EAuthSteps.UNIQUE_CODE]: {
-      header: "Log in or Sign up",
-      subHeader: "Log in using a unique code sent to the email address above.",
+      header: "auth.sign_in.header.step.unique_code.header",
+      subHeader: "auth.sign_in.header.step.unique_code.sub_header",
     },
   },
   [EAuthModes.SIGN_UP]: {
     [EAuthSteps.EMAIL]: {
-      header: "Sign up",
+      header: "auth.sign_up.header.step.email.header",
       subHeader: "",
     },
     [EAuthSteps.PASSWORD]: {
-      header: "Sign up",
-      subHeader: "Sign up using an email-password combination.",
+      header: "auth.sign_up.header.step.password.header",
+      subHeader: "auth.sign_up.header.step.password.sub_header",
     },
     [EAuthSteps.UNIQUE_CODE]: {
-      header: "Sign up",
-      subHeader: "Sign up using a unique code sent to the email address above.",
+      header: "auth.sign_up.header.step.unique_code.header",
+      subHeader: "auth.sign_up.header.step.unique_code.sub_header",
     },
   },
 };
 
 const workSpaceService = new WorkspaceService();
 
-export const AuthHeader: FC<TAuthHeader> = (props) => {
+export const AuthHeader: FC<TAuthHeader> = observer((props) => {
   const { workspaceSlug, invitationId, invitationEmail, authMode, currentAuthStep, children } = props;
+  // plane imports
+  const { t } = useTranslation();
 
   const { data: invitation, isLoading } = useSWR(
     workspaceSlug && invitationId ? `WORKSPACE_INVITATION_${workspaceSlug}_${invitationId}` : null,
@@ -74,13 +78,12 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
       return {
         header: (
           <div className="relative inline-flex items-center gap-2">
-            Join <WorkspaceLogo logo={workspace?.logo} name={workspace?.name} classNames="w-8 h-9 flex-shrink-0" />{" "}
+            {t("common.join")}{" "}
+            <WorkspaceLogo logo={workspace?.logo_url} name={workspace?.name} classNames="size-9 flex-shrink-0" />{" "}
             {workspace.name}
           </div>
         ),
-        subHeader: `${
-          mode == EAuthModes.SIGN_UP ? "Create an account" : "Sign in"
-        } to start managing work with your team.`,
+        subHeader: mode == EAuthModes.SIGN_UP ? "auth.sign_up.header.label" : "auth.sign_in.header.label",
       };
     }
 
@@ -99,10 +102,12 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
   return (
     <>
       <div className="space-y-1 text-center">
-        <h3 className="text-3xl font-bold text-onboarding-text-100">{header}</h3>
-        <p className="font-medium text-onboarding-text-400">{subHeader}</p>
+        <h3 className="text-3xl font-bold text-onboarding-text-100">
+          {typeof header === "string" ? t(header) : header}
+        </h3>
+        <p className="font-medium text-onboarding-text-400">{t(subHeader)}</p>
       </div>
       {children}
     </>
   );
-};
+});
diff --git a/web/core/components/account/auth-forms/auth-root.tsx b/web/core/components/account/auth-forms/auth-root.tsx
index d3fa45fa7..004e81682 100644
--- a/web/core/components/account/auth-forms/auth-root.tsx
+++ b/web/core/components/account/auth-forms/auth-root.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
+import { useTranslation } from "@plane/i18n";
 import { IEmailCheckData } from "@plane/types";
 // components
 import {
@@ -51,6 +52,8 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
   const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
   const [isExistingEmail, setIsExistingEmail] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { config } = useInstance();
 
diff --git a/web/core/components/account/auth-forms/email.tsx b/web/core/components/account/auth-forms/email.tsx
index f0b88407a..724f52442 100644
--- a/web/core/components/account/auth-forms/email.tsx
+++ b/web/core/components/account/auth-forms/email.tsx
@@ -4,9 +4,9 @@ import { FC, FormEvent, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
 import { CircleAlert, XCircle } from "lucide-react";
-// types
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { IEmailCheckData } from "@plane/types";
-// ui
 import { Button, Input, Spinner } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -22,9 +22,10 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
   // states
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [email, setEmail] = useState(defaultEmail);
-
+  // plane hooks
+  const { t } = useTranslation();
   const emailError = useMemo(
-    () => (email && !checkEmailValidity(email) ? { email: "Email is invalid" } : undefined),
+    () => (email && !checkEmailValidity(email) ? { email: "auth.common.email.errors.invalid" } : undefined),
     [email]
   );
 
@@ -40,14 +41,14 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
 
   const isButtonDisabled = email.length === 0 || Boolean(emailError?.email) || isSubmitting;
 
-  const [isFocused, setIsFocused] = useState(true)
+  const [isFocused, setIsFocused] = useState(true);
   const inputRef = useRef<HTMLInputElement>(null);
 
   return (
     <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
       <div className="space-y-1">
         <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-          Email
+          {t("auth.common.email.label")}
         </label>
         <div
           className={cn(
@@ -55,8 +56,12 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
           )}
           tabIndex={-1}
-          onFocus={() => {setIsFocused(true)}}
-          onBlur={() => {setIsFocused(false)}}
+          onFocus={() => {
+            setIsFocused(true);
+          }}
+          onBlur={() => {
+            setIsFocused(false);
+          }}
         >
           <Input
             id="email"
@@ -64,13 +69,13 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             type="email"
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            placeholder="name@company.com"
+            placeholder={t("auth.common.email.placeholder")}
             className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
             autoComplete="on"
             autoFocus
             ref={inputRef}
           />
-            {email.length > 0 && (
+          {email.length > 0 && (
             <XCircle
               className="h-[46px] w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-xs"
               onClick={() => {
@@ -83,13 +88,13 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
         {emailError?.email && !isFocused && (
           <p className="flex items-center gap-1 text-xs text-red-600 px-0.5">
             <CircleAlert height={12} width={12} />
-            {emailError.email}
+            {t(emailError.email)}
           </p>
         )}
       </div>
       <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-        {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+        {isSubmitting ? <Spinner height="20px" width="20px" /> : t("common.continue")}
       </Button>
     </form>
   );
-});
\ No newline at end of file
+});
diff --git a/web/core/components/account/auth-forms/forgot-password-popover.tsx b/web/core/components/account/auth-forms/forgot-password-popover.tsx
index 31bafce26..4062d9a68 100644
--- a/web/core/components/account/auth-forms/forgot-password-popover.tsx
+++ b/web/core/components/account/auth-forms/forgot-password-popover.tsx
@@ -2,6 +2,8 @@ import { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 import { X } from "lucide-react";
 import { Popover } from "@headlessui/react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
 
 export const ForgotPasswordPopover = () => {
   // popper-js refs
@@ -19,6 +21,8 @@ export const ForgotPasswordPopover = () => {
       },
     ],
   });
+  // plane hooks
+  const { t } = useTranslation();
 
   return (
     <Popover className="relative">
@@ -28,7 +32,7 @@ export const ForgotPasswordPopover = () => {
           ref={setReferenceElement}
           className="text-xs font-medium text-custom-primary-100 outline-none"
         >
-          Forgot your password?
+          {t("auth.common.forgot_password")}
         </button>
       </Popover.Button>
       <Popover.Panel className="fixed z-10">
@@ -40,9 +44,7 @@ export const ForgotPasswordPopover = () => {
             {...attributes.popper}
           >
             <span className="flex-shrink-0">🤥</span>
-            <p className="text-xs">
-              We see that your god hasn{"'"}t enabled SMTP, we will not be able to send a password reset link
-            </p>
+            <p className="text-xs">{t("auth.forgot_password.errors.smtp_not_enabled")}</p>
             <button type="button" className="flex-shrink-0" onClick={() => close()}>
               <X className="h-3 w-3 text-onboarding-text-200" />
             </button>
diff --git a/web/core/components/account/auth-forms/password.tsx b/web/core/components/account/auth-forms/password.tsx
index 088dc3194..979899679 100644
--- a/web/core/components/account/auth-forms/password.tsx
+++ b/web/core/components/account/auth-forms/password.tsx
@@ -5,17 +5,13 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
 import { Eye, EyeOff, Info, X, XCircle } from "lucide-react";
-// ui
+// plane imports
+import { FORGOT_PASSWORD, SIGN_IN_WITH_CODE, SIGN_IN_WITH_PASSWORD, SIGN_UP_WITH_PASSWORD } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { ForgotPasswordPopover, PasswordStrengthMeter } from "@/components/account";
 // constants
-import {
-  FORGOT_PASSWORD,
-  SIGN_IN_WITH_CODE,
-  SIGN_IN_WITH_PASSWORD,
-  SIGN_UP_WITH_PASSWORD,
-} from "@/constants/event-tracker";
 // helpers
 import { EAuthModes, EAuthSteps } from "@/helpers/authentication.helper";
 import { API_BASE_URL } from "@/helpers/common.helper";
@@ -49,6 +45,8 @@ const authService = new AuthService();
 
 export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
   const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode, nextPath } = props;
+  // plane imports
+  const { t } = useTranslation();
   // hooks
   const { captureEvent } = useEventTracker();
   // ref
@@ -92,7 +90,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             href={`/accounts/forgot-password?email=${encodeURIComponent(email)}`}
             className="text-xs font-medium text-custom-primary-100"
           >
-            Forgot your password?
+            {t("auth.common.forgot_password")}
           </Link>
         ) : (
           <ForgotPasswordPopover />
@@ -134,7 +132,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
           <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
             <Info size={16} className="text-red-500" />
           </div>
-          <div className="w-full text-sm font-medium text-red-500">Try setting-up a strong password to proceed</div>
+          <div className="w-full text-sm font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
           <div
             className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-custom-primary-100/80"
             onClick={() => setBannerMessage(false)}
@@ -158,7 +156,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
           if (isPasswordValid) {
             setIsSubmitting(true);
             captureEvent(mode === EAuthModes.SIGN_IN ? SIGN_IN_WITH_PASSWORD : SIGN_UP_WITH_PASSWORD);
-            formRef.current && formRef.current.submit(); // Manually submit the form if the condition is met
+            if (formRef.current) formRef.current.submit(); // Manually submit the form if the condition is met
           } else {
             setBannerMessage(true);
           }
@@ -170,7 +168,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
         {nextPath && <input type="hidden" value={nextPath} name="next_path" />}
         <div className="space-y-1">
           <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
-            Email
+            {t("auth.common.email.label")}
           </label>
           <div
             className={`relative flex items-center rounded-md bg-onboarding-background-200 border border-onboarding-border-100`}
@@ -181,7 +179,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
               type="email"
               value={passwordFormData.email}
               onChange={(e) => handleFormChange("email", e.target.value)}
-              placeholder="name@company.com"
+              placeholder={t("auth.common.email.placeholder")}
               className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
               disabled
             />
@@ -196,7 +194,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
 
         <div className="space-y-1">
           <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-            {mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
+            {mode === EAuthModes.SIGN_IN ? t("auth.common.password.label") : t("auth.common.password.set_password")}
           </label>
           <div className="relative flex items-center rounded-md bg-onboarding-background-200">
             <Input
@@ -204,7 +202,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
               name="password"
               value={passwordFormData.password}
               onChange={(e) => handleFormChange("password", e.target.value)}
-              placeholder="Enter password"
+              placeholder={t("auth.common.password.placeholder")}
               className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
@@ -229,7 +227,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
         {mode === EAuthModes.SIGN_UP && (
           <div className="space-y-1">
             <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-              Confirm password
+              {t("auth.common.password.confirm_password.label")}
             </label>
             <div className="relative flex items-center rounded-md bg-onboarding-background-200">
               <Input
@@ -237,7 +235,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
                 name="confirm_password"
                 value={passwordFormData.confirm_password}
                 onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                placeholder="Confirm password"
+                placeholder={t("auth.common.password.confirm_password.placeholder")}
                 className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
                 onFocus={() => setIsRetryPasswordInputFocused(true)}
                 onBlur={() => setIsRetryPasswordInputFocused(false)}
@@ -256,7 +254,9 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             </div>
             {!!passwordFormData.confirm_password &&
               passwordFormData.password !== passwordFormData.confirm_password &&
-              renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+              renderPasswordMatchError && (
+                <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+              )}
           </div>
         )}
 
@@ -267,9 +267,9 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
                 {isSubmitting ? (
                   <Spinner height="20px" width="20px" />
                 ) : isSMTPConfigured ? (
-                  "Continue"
+                  t("common.continue")
                 ) : (
-                  "Go to workspace"
+                  t("common.go_to_workspace")
                 )}
               </Button>
               {isSMTPConfigured && (
@@ -280,7 +280,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
                   className="w-full"
                   size="lg"
                 >
-                  Sign in with unique code
+                  {t("auth.common.sign_in_with_unique_code")}
                 </Button>
               )}
             </>
diff --git a/web/core/components/account/auth-forms/unique-code.tsx b/web/core/components/account/auth-forms/unique-code.tsx
index 530874eb9..b301f268b 100644
--- a/web/core/components/account/auth-forms/unique-code.tsx
+++ b/web/core/components/account/auth-forms/unique-code.tsx
@@ -2,9 +2,10 @@
 
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
+import { CODE_VERIFIED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button, Input, Spinner } from "@plane/ui";
 // constants
-import { CODE_VERIFIED } from "@/constants/event-tracker";
 // helpers
 import { EAuthModes } from "@/helpers/authentication.helper";
 import { API_BASE_URL } from "@/helpers/common.helper";
@@ -49,6 +50,8 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
   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 }));
@@ -94,7 +97,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
       {nextPath && <input type="hidden" value={nextPath} name="next_path" />}
       <div className="space-y-1">
         <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
-          Email
+          {t("auth.common.email.label")}
         </label>
         <div
           className={`relative flex items-center rounded-md bg-onboarding-background-200 border border-onboarding-border-100`}
@@ -105,7 +108,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             type="email"
             value={uniqueCodeFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
-            placeholder="name@company.com"
+            placeholder={t("auth.common.email.placeholder")}
             className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
             autoComplete="on"
             disabled
@@ -121,20 +124,20 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
 
       <div className="space-y-1">
         <label className="text-sm font-medium text-onboarding-text-300" htmlFor="code">
-          Unique code
+          {t("auth.common.unique_code.label")}
         </label>
         <Input
           name="code"
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
-          placeholder="gets-sets-flys"
+          placeholder={t("auth.common.unique_code.placeholder")}
           className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
           autoFocus
         />
         <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
           <p className="flex items-center gap-1 font-medium text-green-700">
             <CircleCheck height={12} width={12} />
-            Paste the code sent to your email
+            {t("auth.common.unique_code.paste_code")}
           </p>
           <button
             type="button"
@@ -147,17 +150,17 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             disabled={isRequestNewCodeDisabled}
           >
             {resendTimerCode > 0
-              ? `Resend in ${resendTimerCode}s`
+              ? t("auth.common.resend_in", { seconds: resendTimerCode })
               : isRequestingNewCode
-                ? "Requesting new code"
-                : "Resend"}
+                ? t("auth.common.unique_code.requesting_new_code")
+                : t("common.resend")}
           </button>
         </div>
       </div>
 
       <div className="space-y-2.5">
         <Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
-          {isRequestingNewCode ? "Sending code" : isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+          {isRequestingNewCode ? t("auth.common.unique_code.sending_code") : isSubmitting ? <Spinner height="20px" width="20px" /> : t("common.continue")}
         </Button>
       </div>
     </form>
diff --git a/web/core/components/account/deactivate-account-modal.tsx b/web/core/components/account/deactivate-account-modal.tsx
index aa27af466..1132a8d74 100644
--- a/web/core/components/account/deactivate-account-modal.tsx
+++ b/web/core/components/account/deactivate-account-modal.tsx
@@ -3,6 +3,7 @@
 import React, { useState } from "react";
 import { Trash2 } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
@@ -18,6 +19,7 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
   const router = useAppRouter();
   const { isOpen, onClose } = props;
   // hooks
+  const { t } = useTranslation();
   const { deactivateAccount, signOut } = useUser();
 
   // states
@@ -90,11 +92,10 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                       </div>
                       <div>
                         <Dialog.Title as="h3" className="my-4 text-2xl font-medium leading-6 text-custom-text-100">
-                          Deactivate your account?
+                          {t("deactivate_your_account")}
                         </Dialog.Title>
                         <p className="mt-6 list-disc pr-4 text-base font-normal text-custom-text-200">
-                          Once deactivated, you can{"'"}t be assigned issues and be billed for your workspace.To
-                          reactivate your account, you will need an invite to a workspace at this email address.
+                          {t("deactivate_your_account_description")}
                         </p>
                       </div>
                     </div>
@@ -102,10 +103,10 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
                 </div>
                 <div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
                   <Button variant="neutral-primary" onClick={onClose}>
-                    Cancel
+                    {t("cancel")}
                   </Button>
                   <Button variant="danger" onClick={handleDeleteAccount}>
-                    {isDeactivating ? "Deactivating..." : "Confirm"}
+                    {isDeactivating ? t("deactivating") : t("confirm")}
                   </Button>
                 </div>
               </Dialog.Panel>
diff --git a/web/core/components/account/password-strength-meter.tsx b/web/core/components/account/password-strength-meter.tsx
index 342f77efb..1f0abae9c 100644
--- a/web/core/components/account/password-strength-meter.tsx
+++ b/web/core/components/account/password-strength-meter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { FC, useMemo } from "react";
+import { useTranslation } from "@plane/i18n";
 // import { CircleCheck } from "lucide-react";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -17,6 +18,7 @@ type TPasswordStrengthMeter = {
 
 export const PasswordStrengthMeter: FC<TPasswordStrengthMeter> = (props) => {
   const { password, isFocused = false } = props;
+  const { t } = useTranslation();
   // derived values
   const strength = useMemo(() => getPasswordStrength(password), [password]);
   const strengthBars = useMemo(() => {
@@ -24,40 +26,40 @@ export const PasswordStrengthMeter: FC<TPasswordStrengthMeter> = (props) => {
       case E_PASSWORD_STRENGTH.EMPTY: {
         return {
           bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Please enter your password.",
+          text: t("auth.common.password.errors.empty"),
           textColor: "text-custom-text-100",
         };
       }
       case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID: {
         return {
           bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Password length should me more than 8 characters.",
+          text: t("auth.common.password.errors.length"),
           textColor: "text-red-500",
         };
       }
       case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID: {
         return {
           bars: [`bg-red-500`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Password is weak.",
+          text: t("auth.common.password.errors.strength.weak"),
           textColor: "text-red-500",
         };
       }
       case E_PASSWORD_STRENGTH.STRENGTH_VALID: {
         return {
           bars: [`bg-green-500`, `bg-green-500`, `bg-green-500`],
-          text: "Password is strong.",
+          text: t("auth.common.password.errors.strength.strong"),
           textColor: "text-green-500",
         };
       }
       default: {
         return {
           bars: [`bg-custom-text-100`, `bg-custom-text-100`, `bg-custom-text-100`],
-          text: "Please enter your password.",
+          text: t("auth.common.password.errors.empty"),
           textColor: "text-custom-text-100",
         };
       }
     }
-  }, [strength]);
+  }, [strength,t]);
 
   const isPasswordMeterVisible = isFocused ? true : strength === E_PASSWORD_STRENGTH.STRENGTH_VALID ? false : true;
 
diff --git a/web/core/components/analytics/custom-analytics/graph/custom-tooltip.tsx b/web/core/components/analytics/custom-analytics/graph/custom-tooltip.tsx
index 9101f1cf2..853c541e7 100644
--- a/web/core/components/analytics/custom-analytics/graph/custom-tooltip.tsx
+++ b/web/core/components/analytics/custom-analytics/graph/custom-tooltip.tsx
@@ -1,9 +1,10 @@
 // nivo
 import { BarTooltipProps } from "@nivo/bar";
+// plane imports
+import { ANALYTICS_DATE_KEYS } from "@plane/constants";
 import { IAnalyticsParams, IAnalyticsResponse } from "@plane/types";
-import { DATE_KEYS } from "@/constants/analytics";
+// helpers
 import { renderMonthAndYear } from "@/helpers/analytics.helper";
-// types
 
 type Props = {
   datum: BarTooltipProps<any>;
@@ -23,7 +24,7 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
   };
 
   if (params.segment) {
-    if (DATE_KEYS.includes(params.segment)) tooltipValue = renderMonthAndYear(datum.id);
+    if (ANALYTICS_DATE_KEYS.includes(params.segment)) tooltipValue = renderMonthAndYear(datum.id);
     else if (params.segment === "labels__id") {
       const label = analytics.extras.label_details.find((l) => l.labels__id === datum.id);
       tooltipValue = label && label.labels__name ? label.labels__name : "None";
@@ -41,8 +42,8 @@ export const CustomTooltip: React.FC<Props> = ({ datum, analytics, params }) =>
           : "None";
     } else tooltipValue = datum.id;
   } else {
-    if (DATE_KEYS.includes(params.x_axis)) tooltipValue = datum.indexValue;
-    else tooltipValue = datum.id === "count" ? "Issue count" : "Estimate";
+    if (ANALYTICS_DATE_KEYS.includes(params.x_axis)) tooltipValue = datum.indexValue;
+    else tooltipValue = datum.id === "count" ? "Work item count" : "Estimate";
   }
 
   return (
diff --git a/web/core/components/analytics/custom-analytics/graph/index.tsx b/web/core/components/analytics/custom-analytics/graph/index.tsx
index 57531e373..87627bba3 100644
--- a/web/core/components/analytics/custom-analytics/graph/index.tsx
+++ b/web/core/components/analytics/custom-analytics/graph/index.tsx
@@ -32,7 +32,7 @@ export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, param
     let data: number[] = [];
 
     if (params.segment)
-      // find the total no of issues in each segment
+      // find the total no of work items in each segment
       data = Object.keys(analytics.distribution).map((segment) => {
         let totalSegmentIssues = 0;
 
diff --git a/web/core/components/analytics/custom-analytics/main-content.tsx b/web/core/components/analytics/custom-analytics/main-content.tsx
index 8c1f8451f..b990c53bc 100644
--- a/web/core/components/analytics/custom-analytics/main-content.tsx
+++ b/web/core/components/analytics/custom-analytics/main-content.tsx
@@ -46,7 +46,7 @@ export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
           ) : (
             <div className="grid h-full place-items-center p-5">
               <div className="space-y-4 text-custom-text-200">
-                <p className="text-sm">No matching issues found. Try changing the parameters.</p>
+                <p className="text-sm">No matching work items found. Try changing the parameters.</p>
               </div>
             </div>
           )
diff --git a/web/core/components/analytics/custom-analytics/select-bar.tsx b/web/core/components/analytics/custom-analytics/select-bar.tsx
index 8df1e71e1..27cfad236 100644
--- a/web/core/components/analytics/custom-analytics/select-bar.tsx
+++ b/web/core/components/analytics/custom-analytics/select-bar.tsx
@@ -1,12 +1,11 @@
 import { observer } from "mobx-react";
 import { Control, Controller, UseFormSetValue } from "react-hook-form";
-// types
+// plane imports
+import { ANALYTICS_X_AXIS_VALUES } from "@plane/constants";
 import { IAnalyticsParams } from "@plane/types";
-// ui
 import { Row } from "@plane/ui";
 // components
 import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "@/components/analytics";
-import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
 // hooks
 import { useProject } from "@/hooks/store";
 
diff --git a/web/core/components/analytics/custom-analytics/select/y-axis.tsx b/web/core/components/analytics/custom-analytics/select/y-axis.tsx
index c97521c36..42c9145e8 100644
--- a/web/core/components/analytics/custom-analytics/select/y-axis.tsx
+++ b/web/core/components/analytics/custom-analytics/select/y-axis.tsx
@@ -2,10 +2,10 @@
 
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane imports
+import { ANALYTICS_Y_AXIS_VALUES } from "@plane/constants";
 import { TYAxisValues } from "@plane/types";
 import { CustomSelect } from "@plane/ui";
-// constants
-import { ANALYTICS_Y_AXIS_VALUES } from "@/constants/analytics";
 // hooks
 import { useProjectEstimates } from "@/hooks/store";
 // plane web constants
diff --git a/web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx b/web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx
index d70807467..c07867378 100644
--- a/web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx
+++ b/web/core/components/analytics/custom-analytics/sidebar/projects-list.tsx
@@ -1,6 +1,9 @@
 import { observer } from "mobx-react";
 // icons
-import { Contrast, LayoutGrid, Users } from "lucide-react";
+import { Contrast, LayoutGrid, Users, Loader as Spinner } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Loader } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
 // helpers
@@ -10,19 +13,26 @@ import { useProject } from "@/hooks/store";
 
 type Props = {
   projectIds: string[];
+  isLoading: boolean;
+  isUpdating: boolean;
 };
 
 export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((props) => {
-  const { projectIds } = props;
-
-  const { getProjectById } = useProject();
+  const { projectIds, isLoading, isUpdating } = props;
+  // store hooks
+  const { getProjectById, getProjectAnalyticsCountById } = useProject();
+  const { t } = useTranslation();
 
   return (
     <div className="relative flex flex-col gap-4 h-full">
-      <h4 className="font-medium">Selected Projects</h4>
+      <div className="flex gap-2 items-center">
+        <h4 className="font-medium">{t("workspace_analytics.selected_projects")}</h4>
+        {isUpdating && <Spinner className="animate-spin size-3" />}
+      </div>
       <div className="relative space-y-6 overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md">
         {projectIds.map((projectId) => {
           const project = getProjectById(projectId);
+          const projectAnalyticsCount = getProjectAnalyticsCountById(projectId);
 
           if (!project) return;
 
@@ -38,27 +48,37 @@ export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = observer((pro
                 </h5>
               </div>
               <div className="mt-4 w-full space-y-3 px-2">
-                <div className="flex items-center justify-between gap-2 text-xs">
-                  <div className="flex items-center gap-2">
-                    <Users className="text-custom-text-200" size={14} strokeWidth={2} />
-                    <h6>Total members</h6>
-                  </div>
-                  <span className="text-custom-text-200">{project.total_members}</span>
-                </div>
-                <div className="flex items-center justify-between gap-2 text-xs">
-                  <div className="flex items-center gap-2">
-                    <Contrast className="text-custom-text-200" size={14} strokeWidth={2} />
-                    <h6>Total cycles</h6>
-                  </div>
-                  <span className="text-custom-text-200">{project.total_cycles}</span>
-                </div>
-                <div className="flex items-center justify-between gap-2 text-xs">
-                  <div className="flex items-center gap-2">
-                    <LayoutGrid className="text-custom-text-200" size={14} strokeWidth={2} />
-                    <h6>Total modules</h6>
-                  </div>
-                  <span className="text-custom-text-200">{project.total_modules}</span>
-                </div>
+                {isLoading ? (
+                  <Loader className="space-y-3">
+                    <Loader.Item height="16px" />
+                    <Loader.Item height="16px" />
+                    <Loader.Item height="16px" />
+                  </Loader>
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between gap-2 text-xs">
+                      <div className="flex items-center gap-2">
+                        <Users className="text-custom-text-200" size={14} strokeWidth={2} />
+                        <h6>{t("workspace_analytics.total_members")}</h6>
+                      </div>
+                      <span className="text-custom-text-200">{projectAnalyticsCount?.total_members}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2 text-xs">
+                      <div className="flex items-center gap-2">
+                        <Contrast className="text-custom-text-200" size={14} strokeWidth={2} />
+                        <h6>{t("workspace_analytics.total_cycles")}</h6>
+                      </div>
+                      <span className="text-custom-text-200">{projectAnalyticsCount?.total_cycles}</span>
+                    </div>
+                    <div className="flex items-center justify-between gap-2 text-xs">
+                      <div className="flex items-center gap-2">
+                        <LayoutGrid className="text-custom-text-200" size={14} strokeWidth={2} />
+                        <h6>{t("workspace_analytics.total_modules")}</h6>
+                      </div>
+                      <span className="text-custom-text-200">{projectAnalyticsCount?.total_modules}</span>
+                    </div>
+                  </>
+                )}
               </div>
             </div>
           );
diff --git a/web/core/components/analytics/custom-analytics/sidebar/sidebar-header.tsx b/web/core/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
index 9873d08a8..707a14922 100644
--- a/web/core/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
+++ b/web/core/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
@@ -1,9 +1,10 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { NETWORK_CHOICES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Logo } from "@/components/common";
 // constants
-import { NETWORK_CHOICES } from "@/constants/project";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
@@ -16,6 +17,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
   const { getCycleById } = useCycle();
   const { getModuleById } = useModule();
   const { getUserDetails } = useMember();
+  const { t } = useTranslation();
 
   const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
   const moduleDetails = moduleId ? getModuleById(moduleId.toString()) : undefined;
@@ -91,7 +93,7 @@ export const CustomAnalyticsSidebarHeader = observer(() => {
             <div className="mt-4 space-y-4">
               <div className="flex items-center gap-2 text-xs">
                 <h6 className="text-custom-text-200">Network</h6>
-                <span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span>
+                <span>{t(NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.i18n_label ?? "")}</span>
               </div>
             </div>
           </div>
diff --git a/web/core/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/core/components/analytics/custom-analytics/sidebar/sidebar.tsx
index 639a830cd..5df139205 100644
--- a/web/core/components/analytics/custom-analytics/sidebar/sidebar.tsx
+++ b/web/core/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -3,10 +3,11 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { mutate } from "swr";
+import useSWR, { mutate } from "swr";
 // icons
 import { CalendarDays, Download, RefreshCw } from "lucide-react";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "@plane/types";
 // ui
 import { Button, LayersIcon, TOAST_TYPE, setToast } from "@plane/ui";
@@ -30,19 +31,28 @@ type Props = {
 
 const analyticsService = new AnalyticsService();
 
+const PROJECT_ANALYTICS_COUNT_PARAMS = {
+  fields: "total_members,total_cycles,total_modules",
+};
+
 export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const { analytics, params, isProjectLevel = false } = props;
   // router
   const { workspaceSlug, projectId, cycleId, moduleId } = useParams();
   // store hooks
   const { data: currentUser } = useUser();
-  const { workspaceProjectIds, getProjectById } = useProject();
+  const { workspaceProjectIds, getProjectById, fetchProjectAnalyticsCount } = useProject();
   const { getWorkspaceById } = useWorkspace();
-
+  const { t } = useTranslation();
   const { fetchCycleDetails, getCycleById } = useCycle();
   const { fetchModuleDetails, getModuleById } = useModule();
+  // fetch project analytics count
+  const { isLoading: isProjectAnalyticsLoading, isValidating: isProjectAnalyticsUpdating } = useSWR(
+    workspaceSlug ? ["projectAnalyticsCount", workspaceSlug] : null,
+    workspaceSlug ? () => fetchProjectAnalyticsCount(workspaceSlug.toString(), PROJECT_ANALYTICS_COUNT_PARAMS) : null
+  );
 
-  const projectDetails = projectId ? getProjectById(projectId.toString()) ?? undefined : undefined;
+  const projectDetails = projectId ? (getProjectById(projectId.toString()) ?? undefined) : undefined;
 
   const trackExportAnalytics = () => {
     if (!currentUser) return;
@@ -152,7 +162,7 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
         <div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
           <LayersIcon height={14} width={14} />
           {analytics ? analytics.total : "..."}
-          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Issues</div>
+          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>{t("work_items")}</div>
         </div>
         {isProjectLevel && (
           <div className="flex items-center gap-1 rounded-md bg-custom-background-80 px-3 py-1 text-xs text-custom-text-200">
@@ -171,7 +181,11 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
       <div className={cn("h-full w-full overflow-hidden", isProjectLevel ? "hidden" : "block")}>
         <>
           {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
-            <CustomAnalyticsSidebarProjectsList projectIds={selectedProjects} />
+            <CustomAnalyticsSidebarProjectsList
+              projectIds={selectedProjects}
+              isLoading={isProjectAnalyticsLoading}
+              isUpdating={isProjectAnalyticsUpdating}
+            />
           )}
           <CustomAnalyticsSidebarHeader />
         </>
@@ -187,10 +201,10 @@ export const CustomAnalyticsSidebar: React.FC<Props> = observer((props) => {
             mutate(ANALYTICS(workspaceSlug.toString(), params));
           }}
         >
-          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Refresh</div>
+          <div className={cn(isProjectLevel ? "hidden md:block" : "", "capitalize")}>{t("refresh")}</div>
         </Button>
         <Button variant="primary" prependIcon={<Download className="h-3.5 w-3.5" />} onClick={exportAnalytics}>
-          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>Export as CSV</div>
+          <div className={cn(isProjectLevel ? "hidden md:block" : "")}>{t("exporter.csv.short_description")}</div>
         </Button>
       </div>
     </div>
diff --git a/web/core/components/analytics/custom-analytics/table.tsx b/web/core/components/analytics/custom-analytics/table.tsx
index 49039ed02..fd580d727 100644
--- a/web/core/components/analytics/custom-analytics/table.tsx
+++ b/web/core/components/analytics/custom-analytics/table.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import { BarDatum } from "@nivo/bar";
+// plane package imports
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "@plane/constants";
 import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "@plane/types";
 import { PriorityIcon, Tooltip } from "@plane/ui";
 // helpers
-import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "@/constants/analytics";
 import { generateBarColor, generateDisplayName, renderChartDynamicLabel } from "@/helpers/analytics.helper";
 import { cn } from "@/helpers/common.helper";
 
diff --git a/web/core/components/analytics/project-modal/main-content.tsx b/web/core/components/analytics/project-modal/main-content.tsx
index e91282801..cd3813f80 100644
--- a/web/core/components/analytics/project-modal/main-content.tsx
+++ b/web/core/components/analytics/project-modal/main-content.tsx
@@ -1,12 +1,12 @@
 import React, { Fragment } from "react";
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
+// plane package imports
+import { ANALYTICS_TABS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle, IModule, IProject } from "@plane/types";
 // components
 import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
-// types
-import { ANALYTICS_TABS } from "@/constants/analytics";
-// constants
 
 type Props = {
   fullScreen: boolean;
@@ -17,7 +17,7 @@ type Props = {
 
 export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props) => {
   const { fullScreen, cycleDetails, moduleDetails } = props;
-
+  const { t } = useTranslation();
   return (
     <Tab.Group as={React.Fragment}>
       <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200 px-0 md:px-3">
@@ -29,7 +29,7 @@ export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props
                   selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
                 }`}
               >
-                {tab.title}
+                {t(tab.i18n_title)}
                 <div
                   className={`border absolute bottom-0 right-0 left-0 rounded-t-md ${selected ? "border-custom-primary-100" : "border-transparent group-hover:border-custom-border-200"}`}
                 />
diff --git a/web/core/components/analytics/scope-and-demand/demand.tsx b/web/core/components/analytics/scope-and-demand/demand.tsx
index 39a04cf9b..fefdc8fc6 100644
--- a/web/core/components/analytics/scope-and-demand/demand.tsx
+++ b/web/core/components/analytics/scope-and-demand/demand.tsx
@@ -1,52 +1,58 @@
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import { IDefaultAnalyticsResponse, TStateGroups } from "@plane/types";
 // constants
 import { Card } from "@plane/ui";
-import { STATE_GROUPS } from "@/constants/state";
 
 type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;
 };
 
-export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
-  <Card>
-    <div>
-      <h4 className="text-base font-medium text-custom-text-100">Total open tasks</h4>
-      <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
-    </div>
-    <div className="space-y-6 pb-2">
-      {defaultAnalytics?.open_issues_classified.map((group) => {
-        const percentage = ((group.state_count / defaultAnalytics.total_issues) * 100).toFixed(0);
+export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => {
+  const { t } = useTranslation();
 
-        return (
-          <div key={group.state_group} className="space-y-2">
-            <div className="flex items-center justify-between gap-2 text-xs">
-              <div className="flex items-center gap-1">
-                <span
-                  className="h-2 w-2 rounded-full"
+  return (
+    <Card>
+      <div>
+        <h4 className="text-base font-medium text-custom-text-100">{t("workspace_analytics.open_tasks")}</h4>
+        <h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
+      </div>
+      <div className="space-y-6 pb-2">
+        {defaultAnalytics?.open_issues_classified.map((group) => {
+          const percentage = ((group.state_count / defaultAnalytics.total_issues) * 100).toFixed(0);
+
+          return (
+            <div key={group.state_group} className="space-y-2">
+              <div className="flex items-center justify-between gap-2 text-xs">
+                <div className="flex items-center gap-1">
+                  <span
+                    className="h-2 w-2 rounded-full"
+                    style={{
+                      backgroundColor: STATE_GROUPS[group.state_group as TStateGroups].color,
+                    }}
+                  />
+                  <h6 className="capitalize">{group.state_group}</h6>
+                  <span className="ml-1 rounded-3xl bg-custom-background-80 px-2 py-0.5 text-[0.65rem] text-custom-text-200">
+                    {group.state_count}
+                  </span>
+                </div>
+                <p className="text-custom-text-200">{percentage}%</p>
+              </div>
+              <div className="bar relative h-1 w-full rounded bg-custom-background-80">
+                <div
+                  className="absolute left-0 top-0 h-1 rounded duration-300"
                   style={{
+                    width: `${percentage}%`,
                     backgroundColor: STATE_GROUPS[group.state_group as TStateGroups].color,
                   }}
                 />
-                <h6 className="capitalize">{group.state_group}</h6>
-                <span className="ml-1 rounded-3xl bg-custom-background-80 px-2 py-0.5 text-[0.65rem] text-custom-text-200">
-                  {group.state_count}
-                </span>
               </div>
-              <p className="text-custom-text-200">{percentage}%</p>
             </div>
-            <div className="bar relative h-1 w-full rounded bg-custom-background-80">
-              <div
-                className="absolute left-0 top-0 h-1 rounded duration-300"
-                style={{
-                  width: `${percentage}%`,
-                  backgroundColor: STATE_GROUPS[group.state_group as TStateGroups].color,
-                }}
-              />
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  </Card>
-);
+          );
+        })}
+      </div>
+    </Card>
+  );
+};
diff --git a/web/core/components/analytics/scope-and-demand/leaderboard.tsx b/web/core/components/analytics/scope-and-demand/leaderboard.tsx
index 69b1c5d67..76f96be4a 100644
--- a/web/core/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/core/components/analytics/scope-and-demand/leaderboard.tsx
@@ -1,4 +1,5 @@
 // plane ui
+import { useTranslation } from "@plane/i18n";
 import { Card } from "@plane/ui";
 // components
 import { ProfileEmptyState } from "@/components/ui";
@@ -21,45 +22,48 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => (
-  <Card>
-    <h6 className="text-base font-medium">{title}</h6>
-    {users.length > 0 ? (
-      <div className="mt-3 space-y-3">
-        {users.map((user) => (
-          <a
-            key={user?.display_name ?? "None"}
-            href={`/${workspaceSlug}/profile/${user.id}`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-start justify-between gap-4 text-xs"
-          >
-            <div className="flex items-center gap-2">
-              {user.avatar_url && user.avatar_url !== "" ? (
-                <div className="relative h-4 w-4 flex-shrink-0 rounded-full">
-                  <img
-                    src={getFileURL(user.avatar_url)}
-                    className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
-                    alt={user?.display_name ?? "None"}
-                  />
-                </div>
-              ) : (
-                <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 text-[11px] capitalize text-white">
-                  {user?.display_name !== "" ? user?.display_name?.[0] : "?"}
-                </div>
-              )}
-              <span className="break-words text-custom-text-200">
-                {user?.display_name !== "" ? `${user?.display_name}` : "No assignee"}
-              </span>
-            </div>
-            <span className="flex-shrink-0">{user.count}</span>
-          </a>
-        ))}
-      </div>
-    ) : (
-      <div className="px-7 py-4">
-        <ProfileEmptyState title="No Data yet" description={emptyStateMessage} image={emptyUsers} />
-      </div>
-    )}
-  </Card>
-);
+export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <h6 className="text-base font-medium">{title}</h6>
+      {users.length > 0 ? (
+        <div className="mt-3 space-y-3">
+          {users.map((user) => (
+            <a
+              key={user?.display_name ?? "None"}
+              href={`/${workspaceSlug}/profile/${user.id}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-start justify-between gap-4 text-xs"
+            >
+              <div className="flex items-center gap-2">
+                {user.avatar_url && user.avatar_url !== "" ? (
+                  <div className="relative h-4 w-4 flex-shrink-0 rounded-full">
+                    <img
+                      src={getFileURL(user.avatar_url)}
+                      className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
+                      alt={user?.display_name ?? "None"}
+                    />
+                  </div>
+                ) : (
+                  <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 text-[11px] capitalize text-white">
+                    {user?.display_name !== "" ? user?.display_name?.[0] : "?"}
+                  </div>
+                )}
+                <span className="break-words text-custom-text-200">
+                  {user?.display_name !== "" ? `${user?.display_name}` : "No assignee"}
+                </span>
+              </div>
+              <span className="flex-shrink-0">{user.count}</span>
+            </a>
+          ))}
+        </div>
+      ) : (
+        <div className="px-7 py-4">
+          <ProfileEmptyState title={t("no_data_yet")} description={emptyStateMessage} image={emptyUsers} />
+        </div>
+      )}
+    </Card>
+  );
+};
diff --git a/web/core/components/analytics/scope-and-demand/scope-and-demand.tsx b/web/core/components/analytics/scope-and-demand/scope-and-demand.tsx
index 6aac07c6a..ae51727aa 100644
--- a/web/core/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/core/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -2,6 +2,7 @@
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
+import { useTranslation } from "@plane/i18n";
 import { Button, ContentWrapper, Loader } from "@plane/ui";
 // components
 import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "@/components/analytics";
@@ -21,6 +22,7 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
   const { fullScreen = true } = props;
 
   const { workspaceSlug, projectId, cycleId, moduleId } = useParams();
+  const { t } = useTranslation();
 
   const isProjectLevel = projectId ? true : false;
 
@@ -66,8 +68,8 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
                   count: user?.count,
                   id: user?.created_by__id,
                 }))}
-                title="Most issues created"
-                emptyStateMessage="Co-workers and the number of issues created by them appears here."
+                title={t("workspace_analytics.most_work_items_created.title")}
+                emptyStateMessage={t("workspace_analytics.most_work_items_created.empty_state")}
                 workspaceSlug={workspaceSlug?.toString() ?? ""}
               />
               <AnalyticsLeaderBoard
@@ -79,8 +81,8 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
                   count: user?.count,
                   id: user?.assignees__id,
                 }))}
-                title="Most issues closed"
-                emptyStateMessage="Co-workers and the number of issues closed by them appears here."
+                title={t("workspace_analytics.most_work_items_closed.title")}
+                emptyStateMessage={t("workspace_analytics.most_work_items_closed.empty_state")}
                 workspaceSlug={workspaceSlug?.toString() ?? ""}
               />
               <div className={fullScreen ? "md:col-span-2" : ""}>
@@ -99,10 +101,10 @@ export const ScopeAndDemand: React.FC<Props> = (props) => {
       ) : (
         <div className="grid h-full place-items-center p-5">
           <div className="space-y-4 text-custom-text-200">
-            <p className="text-sm">There was some error in fetching the data.</p>
+            <p className="text-sm">{t("workspace_analytics.error")}</p>
             <div className="flex items-center justify-center gap-2">
               <Button variant="primary" onClick={() => mutateDefaultAnalytics()}>
-                Refresh
+                {t("refresh")}
               </Button>
             </div>
           </div>
diff --git a/web/core/components/analytics/scope-and-demand/scope.tsx b/web/core/components/analytics/scope-and-demand/scope.tsx
index 671115097..13cd60d56 100644
--- a/web/core/components/analytics/scope-and-demand/scope.tsx
+++ b/web/core/components/analytics/scope-and-demand/scope.tsx
@@ -1,4 +1,5 @@
 // plane types
+import { useTranslation } from "@plane/i18n";
 import { IDefaultAnalyticsUser } from "@plane/types";
 // plane ui
 import { Card } from "@plane/ui";
@@ -14,82 +15,85 @@ type Props = {
   pendingAssignedIssues: IDefaultAnalyticsUser[];
 };
 
-export const AnalyticsScope: React.FC<Props> = ({ pendingUnAssignedIssuesUser, pendingAssignedIssues }) => (
-  <Card>
-    <div className="divide-y divide-custom-border-200">
-      <div>
-        <div className="flex items-center justify-between">
-          <h6 className="text-base font-medium">Pending issues</h6>
-          {pendingUnAssignedIssuesUser && (
-            <div className="relative flex items-center py-1 px-3 rounded-md gap-2  text-xs text-custom-primary-100  bg-custom-primary-100/10">
-              Unassigned: {pendingUnAssignedIssuesUser.count}
+export const AnalyticsScope: React.FC<Props> = ({ pendingUnAssignedIssuesUser, pendingAssignedIssues }) => {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <div className="divide-y divide-custom-border-200">
+        <div>
+          <div className="flex items-center justify-between">
+            <h6 className="text-base font-medium">{t("workspace_analytics.pending_work_items.title")}</h6>
+            {pendingUnAssignedIssuesUser && (
+              <div className="relative flex items-center py-1 px-3 rounded-md gap-2  text-xs text-custom-primary-100  bg-custom-primary-100/10">
+                {t("unassigned")}: {pendingUnAssignedIssuesUser.count}
+              </div>
+            )}
+          </div>
+
+          {pendingAssignedIssues && pendingAssignedIssues.length > 0 ? (
+            <BarGraph
+              data={pendingAssignedIssues}
+              indexBy="assignees__id"
+              keys={["count"]}
+              height="250px"
+              colors={() => `#f97316`}
+              customYAxisTickValues={pendingAssignedIssues.map((d) => (d.count > 0 ? d.count : 50))}
+              tooltip={(datum) => {
+                const assignee = pendingAssignedIssues.find((a) => a.assignees__id === `${datum.indexValue}`);
+
+                return (
+                  <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+                    <span className="font-medium text-custom-text-200">
+                      {assignee ? assignee.assignees__display_name : "No assignee"}:{" "}
+                    </span>
+                    {datum.value}
+                  </div>
+                );
+              }}
+              axisBottom={{
+                renderTick: (datum) => {
+                  const assignee = pendingAssignedIssues[datum.tickIndex] ?? "";
+
+                  if (assignee && assignee?.assignees__avatar_url && assignee?.assignees__avatar_url !== "")
+                    return (
+                      <g transform={`translate(${datum.x},${datum.y})`}>
+                        <image
+                          x={-8}
+                          y={10}
+                          width={16}
+                          height={16}
+                          xlinkHref={getFileURL(assignee?.assignees__avatar_url)}
+                          style={{ clipPath: "circle(50%)" }}
+                        />
+                      </g>
+                    );
+                  else
+                    return (
+                      <g transform={`translate(${datum.x},${datum.y})`}>
+                        <circle cy={18} r={8} fill="#374151" />
+                        <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
+                          {datum.value ? `${assignee.assignees__display_name}`.toUpperCase()[0] : "?"}
+                        </text>
+                      </g>
+                    );
+                },
+              }}
+              margin={{ top: 20 }}
+              theme={{
+                axis: {},
+              }}
+            />
+          ) : (
+            <div className="px-7 py-4">
+              <ProfileEmptyState
+                title={t("no_data_yet")}
+                description={t("workspace_analytics.pending_work_items.empty_state")}
+                image={emptyBarGraph}
+              />
             </div>
           )}
         </div>
-
-        {pendingAssignedIssues && pendingAssignedIssues.length > 0 ? (
-          <BarGraph
-            data={pendingAssignedIssues}
-            indexBy="assignees__id"
-            keys={["count"]}
-            height="250px"
-            colors={() => `#f97316`}
-            customYAxisTickValues={pendingAssignedIssues.map((d) => (d.count > 0 ? d.count : 50))}
-            tooltip={(datum) => {
-              const assignee = pendingAssignedIssues.find((a) => a.assignees__id === `${datum.indexValue}`);
-
-              return (
-                <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
-                  <span className="font-medium text-custom-text-200">
-                    {assignee ? assignee.assignees__display_name : "No assignee"}:{" "}
-                  </span>
-                  {datum.value}
-                </div>
-              );
-            }}
-            axisBottom={{
-              renderTick: (datum) => {
-                const assignee = pendingAssignedIssues[datum.tickIndex] ?? "";
-
-                if (assignee && assignee?.assignees__avatar_url && assignee?.assignees__avatar_url !== "")
-                  return (
-                    <g transform={`translate(${datum.x},${datum.y})`}>
-                      <image
-                        x={-8}
-                        y={10}
-                        width={16}
-                        height={16}
-                        xlinkHref={getFileURL(assignee?.assignees__avatar_url)}
-                        style={{ clipPath: "circle(50%)" }}
-                      />
-                    </g>
-                  );
-                else
-                  return (
-                    <g transform={`translate(${datum.x},${datum.y})`}>
-                      <circle cy={18} r={8} fill="#374151" />
-                      <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
-                        {datum.value ? `${assignee.assignees__display_name}`.toUpperCase()[0] : "?"}
-                      </text>
-                    </g>
-                  );
-              },
-            }}
-            margin={{ top: 20 }}
-            theme={{
-              axis: {},
-            }}
-          />
-        ) : (
-          <div className="px-7 py-4">
-            <ProfileEmptyState
-              title="No Data yet"
-              description="Analysis of pending issues by co-workers appears here."
-              image={emptyBarGraph}
-            />
-          </div>
-        )}
       </div>
-    </div>
-  </Card>
-);
+    </Card>
+  );
+};
diff --git a/web/core/components/analytics/scope-and-demand/year-wise-issues.tsx b/web/core/components/analytics/scope-and-demand/year-wise-issues.tsx
index b2c5805dd..0f469db70 100644
--- a/web/core/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/core/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -1,4 +1,5 @@
 // ui
+import { useTranslation } from "@plane/i18n";
 import { IDefaultAnalyticsResponse } from "@plane/types";
 import { Card } from "@plane/ui";
 import { LineGraph, ProfileEmptyState } from "@/components/ui";
@@ -12,49 +13,52 @@ type Props = {
   defaultAnalytics: IDefaultAnalyticsResponse;
 };
 
-export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => (
-  <Card>
-    <h1 className="py-3 text-base font-medium">Issues closed in a year</h1>
-    {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
-      <LineGraph
-        data={[
-          {
-            id: "issues_closed",
-            color: "rgb(var(--color-primary-100))",
-            data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
-              x: month.shortTitle,
-              y:
-                defaultAnalytics.issue_completed_month_wise.find((data) => data.month === parseInt(index, 10))?.count ||
-                0,
-            })),
-          },
-        ]}
-        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => data.count)}
-        height="300px"
-        colors={(datum) => datum.color}
-        curve="monotoneX"
-        margin={{ top: 20 }}
-        enableSlices="x"
-        sliceTooltip={(datum) => (
-          <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
-            {datum.slice.points[0].data.yFormatted}
-            <span className="text-custom-text-200"> issues closed in </span>
-            {datum.slice.points[0].data.xFormatted}
-          </div>
-        )}
-        theme={{
-          background: "rgb(var(--color-background-100))",
-        }}
-        enableArea
-      />
-    ) : (
-      <div className="px-7 py-4">
-        <ProfileEmptyState
-          title="No Data yet"
-          description="Close issues to view analysis of the same in the form of a graph."
-          image={emptyGraph}
+export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) => {
+  const { t } = useTranslation();
+  return (
+    <Card>
+      <h1 className="py-3 text-base font-medium">{t("workspace_analytics.work_items_closed_in_a_year.title")}</h1>
+      {defaultAnalytics.issue_completed_month_wise.length > 0 ? (
+        <LineGraph
+          data={[
+            {
+              id: "issues_closed",
+              color: "rgb(var(--color-primary-100))",
+              data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
+                x: t(month.shortTitle),
+                y:
+                  defaultAnalytics.issue_completed_month_wise.find((data) => data.month === parseInt(index, 10))
+                    ?.count || 0,
+              })),
+            },
+          ]}
+          customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => data.count)}
+          height="300px"
+          colors={(datum) => datum.color}
+          curve="monotoneX"
+          margin={{ top: 20 }}
+          enableSlices="x"
+          sliceTooltip={(datum) => (
+            <div className="rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+              {datum.slice.points[0].data.yFormatted}
+              <span className="text-custom-text-200"> {t("workspace_analytics.work_items_closed_in")} </span>
+              {datum.slice.points[0].data.xFormatted}
+            </div>
+          )}
+          theme={{
+            background: "rgb(var(--color-background-100))",
+          }}
+          enableArea
         />
-      </div>
-    )}
-  </Card>
-);
+      ) : (
+        <div className="px-7 py-4">
+          <ProfileEmptyState
+            title={t("no_data_yet")}
+            description={t("workspace_analytics.work_items_closed_in_a_year.empty_state")}
+            image={emptyGraph}
+          />
+        </div>
+      )}
+    </Card>
+  );
+};
diff --git a/web/core/components/api-token/delete-token-modal.tsx b/web/core/components/api-token/delete-token-modal.tsx
index 4e7d15fdf..ecc85a558 100644
--- a/web/core/components/api-token/delete-token-modal.tsx
+++ b/web/core/components/api-token/delete-token-modal.tsx
@@ -4,6 +4,7 @@ import { useState, FC } from "react";
 import { useParams } from "next/navigation";
 import { mutate } from "swr";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IApiToken } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
@@ -26,6 +27,7 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
   const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
   // router params
   const { workspaceSlug } = useParams();
+  const { t } = useTranslation();
 
   const handleClose = () => {
     onClose();
@@ -42,8 +44,8 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Token deleted successfully.",
+          title: t("workspace_settings.settings.api_tokens.delete.success.title"),
+          message: t("workspace_settings.settings.api_tokens.delete.success.message"),
         });
 
         mutate<IApiToken[]>(
@@ -57,8 +59,8 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
       .catch((err) =>
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: err?.message ?? "Something went wrong. Please try again.",
+          title: t("workspace_settings.settings.api_tokens.delete.error.title"),
+          message: err?.message ?? t("workspace_settings.settings.api_tokens.delete.error.message"),
         })
       )
       .finally(() => setDeleteLoading(false));
@@ -70,12 +72,8 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
       handleSubmit={handleDeletion}
       isSubmitting={deleteLoading}
       isOpen={isOpen}
-      title="Delete API token"
-      content={
-        <>
-          Any application using this token will no longer have the access to Plane data. This action cannot be undone.
-        </>
-      }
+      title={t("workspace_settings.settings.api_tokens.delete.title")}
+      content={<>{t("workspace_settings.settings.api_tokens.delete.description")} </>}
     />
   );
 };
diff --git a/web/core/components/api-token/modal/form.tsx b/web/core/components/api-token/modal/form.tsx
index 18ade7f2a..17e14ae56 100644
--- a/web/core/components/api-token/modal/form.tsx
+++ b/web/core/components/api-token/modal/form.tsx
@@ -5,6 +5,7 @@ import { add } from "date-fns";
 import { Controller, useForm } from "react-hook-form";
 import { Calendar } from "lucide-react";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IApiToken } from "@plane/types";
 // ui
 import { Button, CustomSelect, Input, TextArea, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
@@ -76,6 +77,8 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
     reset,
     watch,
   } = useForm<IApiToken>({ 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
@@ -115,19 +118,21 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-5 p-5">
-        <h3 className="text-xl font-medium text-custom-text-200">Create token</h3>
+        <h3 className="text-xl font-medium text-custom-text-200">
+          {t("workspace_settings.settings.api_tokens.create_token")}
+        </h3>
         <div className="space-y-3">
           <div className="space-y-1">
             <Controller
               control={control}
               name="label"
               rules={{
-                required: "Title is required",
+                required: t("title_is_required"),
                 maxLength: {
                   value: 255,
-                  message: "Title should be less than 255 characters",
+                  message: t("title_should_be_less_than_255_characters"),
                 },
-                validate: (val) => val.trim() !== "" || "Title is required",
+                validate: (val) => val.trim() !== "" || t("title_is_required"),
               }}
               render={({ field: { value, onChange } }) => (
                 <Input
@@ -135,7 +140,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors.label)}
-                  placeholder="Title"
+                  placeholder={t("title")}
                   className="w-full text-base"
                 />
               )}
@@ -150,7 +155,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                 value={value}
                 onChange={onChange}
                 hasError={Boolean(errors.description)}
-                placeholder="Description"
+                placeholder={t("description")}
                 className="w-full text-base resize-none min-h-24"
               />
             )}
@@ -229,14 +234,16 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
           <div className="flex cursor-pointer items-center justify-center">
             <ToggleSwitch value={neverExpires} onChange={() => {}} size="sm" />
           </div>
-          <span className="text-xs">Never expires</span>
+          <span className="text-xs">{t("workspace_settings.settings.api_tokens.never_expires")}</span>
         </div>
         <div className="flex items-center gap-2">
           <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-            Cancel
+            {t("cancel")}
           </Button>
           <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-            {isSubmitting ? "Generating" : "Generate token"}
+            {isSubmitting
+              ? t("workspace_settings.settings.api_tokens.generating")
+              : t("workspace_settings.settings.api_tokens.generate_token")}
           </Button>
         </div>
       </div>
diff --git a/web/core/components/api-token/modal/generated-token-details.tsx b/web/core/components/api-token/modal/generated-token-details.tsx
index 8f0a62c3a..da833cefb 100644
--- a/web/core/components/api-token/modal/generated-token-details.tsx
+++ b/web/core/components/api-token/modal/generated-token-details.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Copy } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { IApiToken } from "@plane/types";
 // ui
 import { Button, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
@@ -19,12 +20,13 @@ type Props = {
 export const GeneratedTokenDetails: React.FC<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: "Success!",
-        message: "Token copied to clipboard.",
+        title: `${t("success")}!`,
+        message: t("workspace_setting.token_copied"),
       })
     );
   };
@@ -32,11 +34,8 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
   return (
     <div className="w-full p-5">
       <div className="w-full space-y-3 text-wrap">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">Key created</h3>
-        <p className="text-sm text-custom-text-400">
-          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.
-        </p>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{t("workspace_settings.key_created")}</h3>
+        <p className="text-sm text-custom-text-400">{t("workspace_settings.copy_key")}</p>
       </div>
       <button
         type="button"
@@ -53,7 +52,7 @@ export const GeneratedTokenDetails: React.FC<Props> = (props) => {
           {tokenDetails.expired_at ? `Expires ${renderFormattedDate(tokenDetails.expired_at)}` : "Never expires"}
         </p>
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-          Close
+          {t("close")}
         </Button>
       </div>
     </div>
diff --git a/web/core/components/archives/archive-tabs-list.tsx b/web/core/components/archives/archive-tabs-list.tsx
index d1daeb77f..5bba6cc20 100644
--- a/web/core/components/archives/archive-tabs-list.tsx
+++ b/web/core/components/archives/archive-tabs-list.tsx
@@ -2,11 +2,33 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
-// constants
-import { ARCHIVES_TAB_LIST } from "@/constants/archives";
+// types
+import { IProject } from "@plane/types";
 // hooks
 import { useProject } from "@/hooks/store";
 
+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: FC = observer(() => {
   // router
   const { workspaceSlug, projectId } = useParams();
diff --git a/web/core/components/auth-screens/project/join-project.tsx b/web/core/components/auth-screens/project/join-project.tsx
index 4ec94acab..b815f8738 100644
--- a/web/core/components/auth-screens/project/join-project.tsx
+++ b/web/core/components/auth-screens/project/join-project.tsx
@@ -16,7 +16,7 @@ export const JoinProject: React.FC = () => {
   const [isJoiningProject, setIsJoiningProject] = useState(false);
   // store hooks
   const { joinProject } = useUserPermissions();
-  const { fetchProjects } = useProject();
+  const { fetchProjectDetails } = useProject();
 
   const { workspaceSlug, projectId } = useParams();
 
@@ -26,7 +26,7 @@ export const JoinProject: React.FC = () => {
     setIsJoiningProject(true);
 
     joinProject(workspaceSlug.toString(), projectId.toString())
-      .then(() => fetchProjects(workspaceSlug.toString()))
+      .then(() => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()))
       .finally(() => setIsJoiningProject(false));
   };
 
diff --git a/web/core/components/automation/auto-archive-automation.tsx b/web/core/components/automation/auto-archive-automation.tsx
index 8ef488da5..018f69fd4 100644
--- a/web/core/components/automation/auto-archive-automation.tsx
+++ b/web/core/components/automation/auto-archive-automation.tsx
@@ -2,18 +2,19 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { ArchiveRestore } from "lucide-react";
 // types
+import { PROJECT_AUTOMATION_MONTHS,EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IProject } from "@plane/types";
 // ui
 import { CustomSelect, Loader, ToggleSwitch } from "@plane/ui";
 // component
 import { SelectMonthModal } from "@/components/automation";
 // constants
-import { PROJECT_AUTOMATION_MONTHS } from "@/constants/project";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
@@ -23,19 +24,22 @@ const initialValues: Partial<IProject> = { archive_in: 1 };
 
 export const AutoArchiveAutomation: React.FC<Props> = observer((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,
-    currentProjectDetails?.workspace_detail?.slug,
+    workspaceSlug?.toString(),
     currentProjectDetails?.id
-  );
+);
 
   return (
     <>
@@ -53,9 +57,9 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
               <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-custom-text-100" />
             </div>
             <div className="">
-              <h4 className="text-sm font-medium">Auto-archive closed issues</h4>
+              <h4 className="text-sm font-medium">{t("project_settings.automations.auto-archive.title")}</h4>
               <p className="text-sm tracking-tight text-custom-text-200">
-                Plane will auto archive issues that have been completed or canceled.
+                {t("project_settings.automations.auto-archive.description")}
               </p>
             </div>
           </div>
@@ -75,7 +79,9 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
           currentProjectDetails.archive_in !== 0 && (
             <div className="mx-6">
               <div className="flex w-full items-center justify-between gap-2 rounded border border-custom-border-200 bg-custom-background-90 px-5 py-4">
-                <div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
+                <div className="w-1/2 text-sm font-medium">
+                  {t("project_settings.automations.auto-archive.duration")}
+                </div>
                 <div className="w-1/2">
                   <CustomSelect
                     value={currentProjectDetails?.archive_in}
@@ -90,8 +96,8 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                   >
                     <>
                       {PROJECT_AUTOMATION_MONTHS.map((month) => (
-                        <CustomSelect.Option key={month.label} value={month.value}>
-                          <span className="text-sm">{month.label}</span>
+                        <CustomSelect.Option key={month.i18n_label} value={month.value}>
+                          <span className="text-sm">{t(month.i18n_label, { month: month.value })}</span>
                         </CustomSelect.Option>
                       ))}
 
@@ -100,7 +106,7 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                         className="flex w-full select-none items-center rounded px-1 py-1.5 text-sm text-custom-text-200 hover:bg-custom-background-80"
                         onClick={() => setmonthModal(true)}
                       >
-                        Customize time range
+                        {t("customize_time_range")}
                       </button>
                     </>
                   </CustomSelect>
diff --git a/web/core/components/automation/auto-close-automation.tsx b/web/core/components/automation/auto-close-automation.tsx
index dce5764d4..da674644d 100644
--- a/web/core/components/automation/auto-close-automation.tsx
+++ b/web/core/components/automation/auto-close-automation.tsx
@@ -2,19 +2,20 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 // icons
 import { ArchiveX } from "lucide-react";
 // types
+import { PROJECT_AUTOMATION_MONTHS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IProject } from "@plane/types";
 // ui
 import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon, Loader } from "@plane/ui";
 // component
 import { SelectMonthModal } from "@/components/automation";
 // constants
-import { PROJECT_AUTOMATION_MONTHS } from "@/constants/project";
 // hooks
 import { useProject, useProjectState, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
@@ -22,12 +23,15 @@ type Props = {
 
 export const AutoCloseAutomation: React.FC<Props> = observer((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;
 
@@ -59,7 +63,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
   const isAdmin = allowPermissions(
     [EUserPermissions.ADMIN],
     EUserPermissionsLevel.PROJECT,
-    currentProjectDetails?.workspace_detail?.slug,
+    workspaceSlug?.toString(),
     currentProjectDetails?.id
   );
 
@@ -79,9 +83,9 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
               <ArchiveX className="h-4 w-4 flex-shrink-0 text-red-500" />
             </div>
             <div className="">
-              <h4 className="text-sm font-medium">Auto-close issues</h4>
+              <h4 className="text-sm font-medium">{t("project_settings.automations.auto-close.title")}</h4>
               <p className="text-sm tracking-tight text-custom-text-200">
-                Plane will automatically close issues that haven{"'"}t been completed or canceled.
+                {t("project_settings.automations.auto-close.description")}
               </p>
             </div>
           </div>
@@ -102,7 +106,9 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
             <div className="mx-6">
               <div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
                 <div className="flex w-full items-center justify-between gap-2 px-5 py-4">
-                  <div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
+                  <div className="w-1/2 text-sm font-medium">
+                    {t("project_settings.automations.auto-close.duration")}
+                  </div>
                   <div className="w-1/2">
                     <CustomSelect
                       value={currentProjectDetails?.close_in}
@@ -117,8 +123,8 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                     >
                       <>
                         {PROJECT_AUTOMATION_MONTHS.map((month) => (
-                          <CustomSelect.Option key={month.label} value={month.value}>
-                            {month.label}
+                          <CustomSelect.Option key={month.i18n_label} value={month.value}>
+                            {t(month.i18n_label, { month: month.value })}
                           </CustomSelect.Option>
                         ))}
                         <button
@@ -126,7 +132,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                           className="flex w-full select-none items-center rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80"
                           onClick={() => setmonthModal(true)}
                         >
-                          Customize time range
+                          {t("customize_time_range")}
                         </button>
                       </>
                     </CustomSelect>
@@ -134,7 +140,9 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                 </div>
 
                 <div className="flex w-full items-center justify-between gap-2 px-5 py-4">
-                  <div className="w-1/2 text-sm font-medium">Auto-close status</div>
+                  <div className="w-1/2 text-sm font-medium">
+                    {t("project_settings.automations.auto-close.auto_close_status")}
+                  </div>
                   <div className="w-1/2 ">
                     <CustomSearchSelect
                       value={currentProjectDetails?.default_state ?? defaultState}
@@ -159,7 +167,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                           )}
                           {selectedOption?.name
                             ? selectedOption.name
-                            : (currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>)}
+                            : (currentDefaultState?.name ?? <span className="text-custom-text-200">{t("state")}</span>)}
                         </div>
                       }
                       onChange={(val: string) => {
diff --git a/web/core/components/automation/select-month-modal.tsx b/web/core/components/automation/select-month-modal.tsx
index 9a0ebb05f..b35b9885e 100644
--- a/web/core/components/automation/select-month-modal.tsx
+++ b/web/core/components/automation/select-month-modal.tsx
@@ -93,7 +93,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     id="close_in"
                                     name="close_in"
                                     type="number"
-                                    value={value.toString()}
+                                    value={value?.toString()}
                                     onChange={onChange}
                                     ref={ref}
                                     hasError={Boolean(errors.close_in)}
@@ -127,7 +127,7 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
                                     id="archive_in"
                                     name="archive_in"
                                     type="number"
-                                    value={value.toString()}
+                                    value={value?.toString()}
                                     onChange={onChange}
                                     ref={ref}
                                     hasError={Boolean(errors.archive_in)}
diff --git a/web/core/components/command-palette/actions/issue-actions/actions-list.tsx b/web/core/components/command-palette/actions/issue-actions/actions-list.tsx
index 6c1c01aca..6fa28cdce 100644
--- a/web/core/components/command-palette/actions/issue-actions/actions-list.tsx
+++ b/web/core/components/command-palette/actions/issue-actions/actions-list.tsx
@@ -7,12 +7,10 @@ import { LinkIcon, Signal, Trash2, UserMinus2, UserPlus2, Users } from "lucide-r
 import { TIssue } from "@plane/types";
 // hooks
 import { DoubleCircleIcon, TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useCommandPalette, useIssues, useUser } from "@/hooks/store";
+import { useCommandPalette, useIssueDetail, useUser } from "@/hooks/store";
 
 type Props = {
   closePalette: () => void;
@@ -26,13 +24,14 @@ type Props = {
 export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
   const { closePalette, issueDetails, pages, setPages, setPlaceholder, setSearchTerm } = props;
   // router
-  const { workspaceSlug, projectId, issueId } = useParams();
+  const { workspaceSlug } = useParams();
   // hooks
-  const {
-    issues: { updateIssue },
-  } = useIssues(EIssuesStoreType.PROJECT);
+  const { updateIssue } = useIssueDetail();
   const { toggleCommandPaletteModal, toggleDeleteIssueModal } = useCommandPalette();
   const { data: currentUser } = useUser();
+  // derived values
+  const issueId = issueDetails?.id;
+  const projectId = issueDetails?.project_id;
 
   const handleUpdateIssue = async (formData: Partial<TIssue>) => {
     if (!workspaceSlug || !projectId || !issueDetails) return;
@@ -66,21 +65,15 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
     const url = new URL(window.location.href);
     copyTextToClipboard(url.href)
       .then(() => {
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Copied to clipboard",
-        });
+        setToast({ type: TOAST_TYPE.SUCCESS, title: "Copied to clipboard" });
       })
       .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Some error occurred",
-        });
+        setToast({ type: TOAST_TYPE.ERROR, title: "Some error occurred" });
       });
   };
 
   return (
-    <Command.Group heading="Issue actions">
+    <Command.Group heading="Work item actions">
       <Command.Item
         onSelect={() => {
           setPlaceholder("Change state...");
@@ -144,7 +137,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
       <Command.Item onSelect={deleteIssue} className="focus:outline-none">
         <div className="flex items-center gap-2 text-custom-text-200">
           <Trash2 className="h-3.5 w-3.5" />
-          Delete issue
+          Delete work item
         </div>
       </Command.Item>
       <Command.Item
@@ -156,7 +149,7 @@ export const CommandPaletteIssueActions: React.FC<Props> = observer((props) => {
       >
         <div className="flex items-center gap-2 text-custom-text-200">
           <LinkIcon className="h-3.5 w-3.5" />
-          Copy issue URL
+          Copy work item URL
         </div>
       </Command.Item>
     </Command.Group>
diff --git a/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx b/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx
index 319adf8f2..4e43ef887 100644
--- a/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx
+++ b/web/core/components/command-palette/actions/issue-actions/change-assignee.tsx
@@ -8,56 +8,55 @@ import { Check } from "lucide-react";
 import { TIssue } from "@plane/types";
 // plane ui
 import { Avatar } from "@plane/ui";
-// constants
-import { EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
-import { useIssues, useMember } from "@/hooks/store";
+import { useIssueDetail, useMember } from "@/hooks/store";
 
-type Props = {
-  closePalette: () => void;
-  issue: TIssue;
-};
+type Props = { closePalette: () => void; issue: TIssue };
 
 export const ChangeIssueAssignee: React.FC<Props> = observer((props) => {
   const { closePalette, issue } = props;
   // router params
-  const { workspaceSlug, projectId } = useParams();
+  const { workspaceSlug } = useParams();
   // store
+  const { updateIssue } = useIssueDetail();
   const {
-    issues: { updateIssue },
-  } = useIssues(EIssuesStoreType.PROJECT);
-  const {
-    project: { projectMemberIds, getProjectMemberDetails },
+    project: { getProjectMemberIds, getProjectMemberDetails },
   } = useMember();
+  // derived values
+  const projectId = issue?.project_id ?? "";
+  const projectMemberIds = getProjectMemberIds(projectId);
 
   const options =
-    projectMemberIds?.map((userId) => {
-      const memberDetails = getProjectMemberDetails(userId);
+    projectMemberIds
+      ?.map((userId) => {
+        if (!projectId) return;
+        const memberDetails = getProjectMemberDetails(userId, projectId.toString());
 
-      return {
-        value: `${memberDetails?.member?.id}`,
-        query: `${memberDetails?.member?.display_name}`,
-        content: (
-          <>
-            <div className="flex items-center gap-2">
-              <Avatar
-                name={memberDetails?.member?.display_name}
-                src={getFileURL(memberDetails?.member?.avatar_url ?? "")}
-                showTooltip={false}
-              />
-              {memberDetails?.member?.display_name}
-            </div>
-            {issue.assignee_ids.includes(memberDetails?.member?.id ?? "") && (
-              <div>
-                <Check className="h-3 w-3" />
+        return {
+          value: `${memberDetails?.member?.id}`,
+          query: `${memberDetails?.member?.display_name}`,
+          content: (
+            <>
+              <div className="flex items-center gap-2">
+                <Avatar
+                  name={memberDetails?.member?.display_name}
+                  src={getFileURL(memberDetails?.member?.avatar_url ?? "")}
+                  showTooltip={false}
+                />
+                {memberDetails?.member?.display_name}
               </div>
-            )}
-          </>
-        ),
-      };
-    }) ?? [];
+              {issue.assignee_ids.includes(memberDetails?.member?.id ?? "") && (
+                <div>
+                  <Check className="h-3 w-3" />
+                </div>
+              )}
+            </>
+          ),
+        };
+      })
+      .filter((o) => o !== undefined) ?? [];
 
   const handleUpdateIssue = async (formData: Partial<TIssue>) => {
     if (!workspaceSlug || !projectId || !issue) return;
@@ -80,15 +79,18 @@ export const ChangeIssueAssignee: React.FC<Props> = observer((props) => {
 
   return (
     <>
-      {options.map((option) => (
-        <Command.Item
-          key={option.value}
-          onSelect={() => handleIssueAssignees(option.value)}
-          className="focus:outline-none"
-        >
-          {option.content}
-        </Command.Item>
-      ))}
+      {options.map(
+        (option) =>
+          option && (
+            <Command.Item
+              key={option.value}
+              onSelect={() => handleIssueAssignees(option.value)}
+              className="focus:outline-none"
+            >
+              {option.content}
+            </Command.Item>
+          )
+      )}
     </>
   );
 });
diff --git a/web/core/components/command-palette/actions/issue-actions/change-priority.tsx b/web/core/components/command-palette/actions/issue-actions/change-priority.tsx
index 5bd8ce850..9e2a874a2 100644
--- a/web/core/components/command-palette/actions/issue-actions/change-priority.tsx
+++ b/web/core/components/command-palette/actions/issue-actions/change-priority.tsx
@@ -1,30 +1,30 @@
-"use client"; ``
+"use client";
 
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Check } from "lucide-react";
+// plane constants
+import { ISSUE_PRIORITIES } from "@plane/constants";
+// plane types
 import { TIssue, TIssuePriorities } from "@plane/types";
 // mobx store
 import { PriorityIcon } from "@plane/ui";
-import { EIssuesStoreType, ISSUE_PRIORITIES } from "@/constants/issue";
-import { useIssues } from "@/hooks/store";
+import { useIssueDetail } from "@/hooks/store";
 // ui
 // types
 // constants
 
-type Props = {
-  closePalette: () => void;
-  issue: TIssue;
-};
+type Props = { closePalette: () => void; issue: TIssue };
 
 export const ChangeIssuePriority: React.FC<Props> = observer((props) => {
   const { closePalette, issue } = props;
   // router params
-  const { workspaceSlug, projectId } = useParams();
-  const {
-    issues: { updateIssue },
-  } = useIssues(EIssuesStoreType.PROJECT);
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { updateIssue } = useIssueDetail();
+  // derived values
+  const projectId = issue?.project_id;
 
   const submitChanges = async (formData: Partial<TIssue>) => {
     if (!workspaceSlug || !projectId || !issue) return;
diff --git a/web/core/components/command-palette/actions/issue-actions/change-state.tsx b/web/core/components/command-palette/actions/issue-actions/change-state.tsx
index 5d512f4ac..154b578b9 100644
--- a/web/core/components/command-palette/actions/issue-actions/change-state.tsx
+++ b/web/core/components/command-palette/actions/issue-actions/change-state.tsx
@@ -1,32 +1,25 @@
 "use client";
 
-import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// hooks
-import { Check } from "lucide-react";
+// plane imports
 import { TIssue } from "@plane/types";
-import { Spinner, StateGroupIcon } from "@plane/ui";
-import { EIssuesStoreType } from "@/constants/issue";
-import { useProjectState, useIssues } from "@/hooks/store";
-// ui
-// icons
-// types
+// store hooks
+import { useIssueDetail } from "@/hooks/store";
+// plane web imports
+import { ChangeWorkItemStateList } from "@/plane-web/components/command-palette/actions/work-item-actions";
 
-type Props = {
-  closePalette: () => void;
-  issue: TIssue;
-};
+type Props = { closePalette: () => void; issue: TIssue };
 
 export const ChangeIssueState: React.FC<Props> = observer((props) => {
   const { closePalette, issue } = props;
   // router params
-  const { workspaceSlug, projectId } = useParams();
+  const { workspaceSlug } = useParams();
   // store hooks
-  const {
-    issues: { updateIssue },
-  } = useIssues(EIssuesStoreType.PROJECT);
-  const { projectStates } = useProjectState();
+  const { updateIssue } = useIssueDetail();
+  // derived values
+  const projectId = issue?.project_id;
+  const currentStateId = issue?.state_id;
 
   const submitChanges = async (formData: Partial<TIssue>) => {
     if (!workspaceSlug || !projectId || !issue) return;
@@ -43,24 +36,10 @@ export const ChangeIssueState: React.FC<Props> = observer((props) => {
   };
 
   return (
-    <>
-      {projectStates ? (
-        projectStates.length > 0 ? (
-          projectStates.map((state) => (
-            <Command.Item key={state.id} onSelect={() => handleIssueState(state.id)} className="focus:outline-none">
-              <div className="flex items-center space-x-3">
-                <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
-                <p>{state.name}</p>
-              </div>
-              <div>{state.id === issue.state_id && <Check className="h-3 w-3" />}</div>
-            </Command.Item>
-          ))
-        ) : (
-          <div className="text-center">No states found</div>
-        )
-      ) : (
-        <Spinner />
-      )}
-    </>
+    <ChangeWorkItemStateList
+      projectId={projectId}
+      currentStateId={currentStateId}
+      handleStateChange={handleIssueState}
+    />
   );
 });
diff --git a/web/core/components/command-palette/actions/search-results.tsx b/web/core/components/command-palette/actions/search-results.tsx
index dba61ecc3..8d67635ba 100644
--- a/web/core/components/command-palette/actions/search-results.tsx
+++ b/web/core/components/command-palette/actions/search-results.tsx
@@ -28,6 +28,7 @@ export const CommandPaletteSearchResults: React.FC<Props> = (props) => {
         const section = (results.results as any)[key];
         const currentSection = commandGroups[key];
 
+        if (!currentSection) return null;
         if (section.length > 0) {
           return (
             <Command.Group key={key} heading={`${currentSection.title} search`}>
diff --git a/web/core/components/command-palette/actions/theme-actions.tsx b/web/core/components/command-palette/actions/theme-actions.tsx
index 2ae81d3f3..9df95c00a 100644
--- a/web/core/components/command-palette/actions/theme-actions.tsx
+++ b/web/core/components/command-palette/actions/theme-actions.tsx
@@ -5,9 +5,10 @@ import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Settings } from "lucide-react";
+// plane imports
+import { THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { THEME_OPTIONS } from "@/constants/themes";
 // hooks
 import { useUserProfile } from "@/hooks/store";
 
@@ -20,6 +21,7 @@ export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
   const { setTheme } = useTheme();
   // hooks
   const { updateUserTheme } = useUserProfile();
+  const { t } = useTranslation();
   // states
   const [mounted, setMounted] = useState(false);
 
@@ -53,7 +55,7 @@ export const CommandPaletteThemeActions: FC<Props> = observer((props) => {
         >
           <div className="flex items-center gap-2 text-custom-text-200">
             <Settings className="h-4 w-4 text-custom-text-200" />
-            {theme.label}
+            {t(theme.i18n_label)}
           </div>
         </Command.Item>
       ))}
diff --git a/web/core/components/command-palette/actions/workspace-settings-actions.tsx b/web/core/components/command-palette/actions/workspace-settings-actions.tsx
index dee51c1b6..670788a33 100644
--- a/web/core/components/command-palette/actions/workspace-settings-actions.tsx
+++ b/web/core/components/command-palette/actions/workspace-settings-actions.tsx
@@ -4,13 +4,14 @@ import { Command } from "cmdk";
 // hooks
 import Link from "next/link";
 import { useParams } from "next/navigation";
-
+import { WORKSPACE_SETTINGS_LINKS, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { SettingIcon } from "@/components/icons";
 // hooks
 import { useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane wev constants
-import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-import { WORKSPACE_SETTINGS_LINKS } from "@/plane-web/constants/workspace";
 // plane web helpers
 import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
 
@@ -25,6 +26,7 @@ export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) =
   // router params
   const { workspaceSlug } = useParams();
   // mobx store
+  const { t } = useTranslation();
   const { allowPermissions } = useUserPermissions();
   // derived values
 
@@ -46,8 +48,8 @@ export const CommandPaletteWorkspaceSettingsActions: React.FC<Props> = (props) =
             >
               <Link href={`/${workspaceSlug}${setting.href}`}>
                 <div className="flex items-center gap-2 text-custom-text-200">
-                  <setting.Icon className="h-4 w-4 text-custom-text-200" />
-                  {setting.label}
+                  <SettingIcon className="h-4 w-4 text-custom-text-200" />
+                  {t(setting.i18n_label)}
                 </div>
               </Link>
             </Command.Item>
diff --git a/web/core/components/command-palette/command-modal.tsx b/web/core/components/command-palette/command-modal.tsx
index b80b0dfe1..7fdc96f5a 100644
--- a/web/core/components/command-palette/command-modal.tsx
+++ b/web/core/components/command-palette/command-modal.tsx
@@ -5,12 +5,14 @@ import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-import { FolderPlus, Search, Settings } from "lucide-react";
+import { CommandIcon, FolderPlus, Search, Settings, X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
-// types
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IWorkspaceSearchResults } from "@plane/types";
-// ui
-import { LayersIcon, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { LayersIcon, Loader, ToggleSwitch } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import {
   ChangeIssueAssignee,
@@ -23,34 +25,33 @@ import {
   CommandPaletteThemeActions,
   CommandPaletteWorkspaceSettingsActions,
 } from "@/components/command-palette";
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-// fetch-keys
-import { ISSUE_DETAILS } from "@/constants/fetch-keys";
+import { SimpleEmptyState } from "@/components/empty-state";
 // helpers
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useUser, useUserPermissions } from "@/hooks/store";
+import {
+  useCommandPalette,
+  useEventTracker,
+  useIssueDetail,
+  useProject,
+  useUser,
+  useUserPermissions,
+} from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import useDebounce from "@/hooks/use-debounce";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { IssueIdentifier } from "@/plane-web/components/issues";
 // plane web services
 import { WorkspaceService } from "@/plane-web/services";
-// services
-import { IssueService } from "@/services/issue";
-import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
 
 const workspaceService = new WorkspaceService();
-const issueService = new IssueService();
 
 export const CommandModal: React.FC = observer(() => {
-  // hooks
-  const { workspaceProjectIds } = useProject();
-  const { isMobile } = usePlatformOS();
-  const { canPerformAnyCreateAction } = useUser();
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, projectId: routerProjectId, workItem } = useParams();
   // states
   const [placeholder, setPlaceholder] = useState("Type a command or search...");
   const [resultsCount, setResultsCount] = useState(0);
@@ -58,46 +59,61 @@ export const CommandModal: React.FC = observer(() => {
   const [isSearching, setIsSearching] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [results, setResults] = useState<IWorkspaceSearchResults>({
-    results: {
-      workspace: [],
-      project: [],
-      issue: [],
-      cycle: [],
-      module: [],
-      issue_view: [],
-      page: [],
-    },
+    results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [] },
   });
   const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
   const [pages, setPages] = useState<string[]>([]);
+  const [searchInIssue, setSearchInIssue] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // hooks
+  const {
+    issue: { getIssueById },
+    fetchIssueWithIdentifier,
+  } = useIssueDetail();
+  const { workspaceProjectIds } = useProject();
+  const { platform, isMobile } = usePlatformOS();
+  const { canPerformAnyCreateAction } = useUser();
   const { isCommandPaletteOpen, toggleCommandPaletteModal, toggleCreateIssueModal, toggleCreateProjectModal } =
     useCommandPalette();
   const { allowPermissions } = useUserPermissions();
   const { setTrackElement } = useEventTracker();
+  const projectIdentifier = workItem?.toString().split("-")[0];
+  const sequence_id = workItem?.toString().split("-")[1];
+  // fetch work item details using identifier
+  const { data: workItemDetailsSWR } = useSWR(
+    workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
+    workspaceSlug && workItem
+      ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
+      : null
+  );
 
-  // router
-  const router = useAppRouter();
-  // router params
-  const { workspaceSlug, projectId, issueId } = useParams();
-
+  // derived values
+  const issueDetails = workItemDetailsSWR ? getIssueById(workItemDetailsSWR?.id) : null;
+  const issueId = issueDetails?.id;
+  const projectId = issueDetails?.project_id ?? routerProjectId;
   const page = pages[pages.length - 1];
-
   const debouncedSearchTerm = useDebounce(searchTerm, 500);
-
   const { baseTabIndex } = getTabIndex(undefined, isMobile);
-
   const canPerformWorkspaceActions = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.WORKSPACE
   );
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/search" });
 
-  // TODO: update this to mobx store
-  const { data: issueDetails } = useSWR(
-    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId.toString()) : null,
-    workspaceSlug && projectId && issueId
-      ? () => issueService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString())
-      : null
-  );
+  useEffect(() => {
+    if (issueDetails && isCommandPaletteOpen) {
+      setSearchInIssue(true);
+    }
+  }, [issueDetails, isCommandPaletteOpen]);
+
+  useEffect(() => {
+    if (!projectId && !isWorkspaceLevel) {
+      setIsWorkspaceLevel(true);
+    } else {
+      setIsWorkspaceLevel(false);
+    }
+  }, [projectId]);
 
   const closePalette = () => {
     toggleCommandPaletteModal(false);
@@ -136,15 +152,7 @@ export const CommandModal: React.FC = observer(() => {
           });
       } else {
         setResults({
-          results: {
-            workspace: [],
-            project: [],
-            issue: [],
-            cycle: [],
-            module: [],
-            issue_view: [],
-            page: [],
-          },
+          results: { workspace: [], project: [], issue: [], cycle: [], module: [], issue_view: [], page: [] },
         });
         setIsLoading(false);
         setIsSearching(false);
@@ -155,7 +163,16 @@ export const CommandModal: React.FC = observer(() => {
 
   return (
     <Transition.Root show={isCommandPaletteOpen} afterLeave={() => setSearchTerm("")} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={() => closePalette()}>
+      <Dialog
+        as="div"
+        className="relative z-30"
+        onClose={() => {
+          closePalette();
+          if (searchInIssue) {
+            setSearchInIssue(true);
+          }
+        }}
+      >
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -179,22 +196,57 @@ export const CommandModal: React.FC = observer(() => {
               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 w-full max-w-2xl transform items-center justify-center divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
+              <Dialog.Panel className="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-custom-border-200 divide-opacity-10 rounded-lg bg-custom-background-100 shadow-custom-shadow-md transition-all">
                 <div className="w-full max-w-2xl">
                   <Command
                     filter={(value, search) => {
                       if (value.toLowerCase().includes(search.toLowerCase())) return 1;
                       return 0;
                     }}
-                    onKeyDown={(e) => {
-                      // when search term is not empty, esc should clear the search term
-                      if (e.key === "Escape" && searchTerm) setSearchTerm("");
+                    shouldFilter={searchTerm.length > 0}
+                    onKeyDown={(e: any) => {
+                      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        closePalette();
+                        return;
+                      }
 
-                      // when user tries to close the modal with esc
-                      if (e.key === "Escape" && !page && !searchTerm) closePalette();
+                      if (e.key === "Tab") {
+                        e.preventDefault();
+                        const commandList = document.querySelector("[cmdk-list]");
+                        const items = commandList?.querySelectorAll("[cmdk-item]") || [];
+                        const selectedItem = commandList?.querySelector('[aria-selected="true"]');
+                        if (items.length === 0) return;
+
+                        const currentIndex = Array.from(items).indexOf(selectedItem as Element);
+                        let nextIndex;
+
+                        if (e.shiftKey) {
+                          nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                        } else {
+                          nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                        }
+
+                        const nextItem = items[nextIndex] as HTMLElement;
+                        if (nextItem) {
+                          nextItem.setAttribute("aria-selected", "true");
+                          selectedItem?.setAttribute("aria-selected", "false");
+                          nextItem.focus();
+                          nextItem.scrollIntoView({ behavior: "smooth", block: "nearest" });
+                        }
+                      }
+
+                      if (e.key === "Escape" && searchTerm) {
+                        e.preventDefault();
+                        setSearchTerm("");
+                      }
+
+                      if (e.key === "Escape" && !page && !searchTerm) {
+                        e.preventDefault();
+                        closePalette();
+                      }
 
-                      // Escape goes to previous page
-                      // Backspace goes to previous page when search is empty
                       if (e.key === "Escape" || (e.key === "Backspace" && !searchTerm)) {
                         e.preventDefault();
                         setPages((pages) => pages.slice(0, -1));
@@ -202,49 +254,40 @@ export const CommandModal: React.FC = observer(() => {
                       }
                     }}
                   >
-                    <div
-                      className={`flex gap-4 p-3 pb-0 sm:items-center ${
-                        issueDetails ? "flex-col justify-between sm:flex-row" : "justify-end"
-                      }`}
-                    >
-                      {issueDetails && (
-                        <div className="flex gap-2 items-center overflow-hidden truncate rounded-md bg-custom-background-80 p-2 text-xs font-medium text-custom-text-200">
-                          {issueDetails.project_id && (
-                            <IssueIdentifier
-                              issueId={issueDetails.id}
-                              projectId={issueDetails.project_id}
-                              textContainerClassName="text-xs font-medium text-custom-text-200"
-                            />
-                          )}
-                          {issueDetails.name}
-                        </div>
-                      )}
-                      {projectId && (
-                        <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
-                          <div className="flex flex-shrink-0 cursor-pointer items-center gap-1 self-end text-xs sm:self-center">
-                            <button
-                              type="button"
-                              onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                              className="flex-shrink-0"
-                            >
-                              Workspace Level
-                            </button>
-                            <ToggleSwitch
-                              value={isWorkspaceLevel}
-                              onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                            />
-                          </div>
-                        </Tooltip>
-                      )}
-                    </div>
-                    <div className="relative">
-                      <Search
-                        className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-custom-text-200"
-                        aria-hidden="true"
-                        strokeWidth={2}
-                      />
+                    <div className="relative flex items-center px-4 border-0 border-b border-custom-border-200">
+                      <div className="flex items-center gap-2 flex-shrink-0">
+                        <Search
+                          className="h-4 w-4 text-custom-text-200 flex-shrink-0"
+                          aria-hidden="true"
+                          strokeWidth={2}
+                        />
+                        {searchInIssue && issueDetails && (
+                          <>
+                            <span className="flex items-center text-sm">Update in:</span>
+                            <span className="flex items-center gap-1 rounded px-1.5 py-1 text-sm bg-custom-primary-100/10 ">
+                              {issueDetails.project_id && (
+                                <IssueIdentifier
+                                  issueId={issueDetails.id}
+                                  projectId={issueDetails.project_id}
+                                  textContainerClassName="text-sm text-custom-primary-200"
+                                />
+                              )}
+                              <X
+                                size={12}
+                                strokeWidth={2}
+                                className="flex-shrink-0 cursor-pointer"
+                                onClick={() => {
+                                  setSearchInIssue(false);
+                                }}
+                              />
+                            </span>
+                          </>
+                        )}
+                      </div>
                       <Command.Input
-                        className="w-full border-0 border-b border-custom-border-200 bg-transparent p-4 pl-11 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+                        className={cn(
+                          "w-full bg-transparent p-4 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
+                        )}
                         placeholder={placeholder}
                         value={searchTerm}
                         onValueChange={(e) => setSearchTerm(e)}
@@ -268,7 +311,7 @@ export const CommandModal: React.FC = observer(() => {
 
                       {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
                         <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
-                          <EmptyState type={EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE} layout="screen-simple" />
+                          <SimpleEmptyState title={t("command_k.empty_state.search.title")} assetPath={resolvedPath} />
                         </div>
                       )}
 
@@ -290,7 +333,7 @@ export const CommandModal: React.FC = observer(() => {
                       {!page && (
                         <>
                           {/* issue actions */}
-                          {issueId && (
+                          {issueId && issueDetails && searchInIssue && (
                             <CommandPaletteIssueActions
                               closePalette={closePalette}
                               issueDetails={issueDetails}
@@ -304,7 +347,7 @@ export const CommandModal: React.FC = observer(() => {
                             workspaceProjectIds &&
                             workspaceProjectIds.length > 0 &&
                             canPerformAnyCreateAction && (
-                              <Command.Group heading="Issue">
+                              <Command.Group heading="Work item">
                                 <Command.Item
                                   onSelect={() => {
                                     closePalette();
@@ -315,7 +358,7 @@ export const CommandModal: React.FC = observer(() => {
                                 >
                                   <div className="flex items-center gap-2 text-custom-text-200">
                                     <LayersIcon className="h-3.5 w-3.5" />
-                                    Create new issue
+                                    Create new work item
                                   </div>
                                   <kbd>C</kbd>
                                 </Command.Item>
@@ -416,6 +459,29 @@ export const CommandModal: React.FC = observer(() => {
                     </Command.List>
                   </Command>
                 </div>
+                {/* Bottom overlay */}
+                <div className="w-full flex items-center justify-between px-4 py-2 border-t border-custom-border-200 bg-custom-background-90/80 rounded-b-lg">
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-custom-text-300">Actions</span>
+                    <div className="flex items-center gap-1">
+                      <div className="grid h-6 min-w-[1.5rem] place-items-center rounded bg-custom-background-80 border-[0.5px] border-custom-border-200 px-1.5 text-[10px] text-custom-text-200">
+                        {platform === "MacOS" ? <CommandIcon className="h-2.5 w-2.5 text-custom-text-200" /> : "Ctrl"}
+                      </div>
+                      <kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded bg-custom-background-80 border-[0.5px] border-custom-border-200 px-1.5 text-[10px] text-custom-text-200">
+                        K
+                      </kbd>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-custom-text-300">Workspace Level</span>
+                    <ToggleSwitch
+                      value={isWorkspaceLevel}
+                      onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
+                      disabled={!projectId}
+                      size="sm"
+                    />
+                  </div>
+                </div>
               </Dialog.Panel>
             </Transition.Child>
           </div>
diff --git a/web/core/components/command-palette/command-palette.tsx b/web/core/components/command-palette/command-palette.tsx
index c38266c40..9399c52f5 100644
--- a/web/core/components/command-palette/command-palette.tsx
+++ b/web/core/components/command-palette/command-palette.tsx
@@ -2,100 +2,85 @@
 
 import React, { useCallback, useEffect, FC, useMemo } from "react";
 import { observer } from "mobx-react";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { CommandModal, ShortcutsModal } from "@/components/command-palette";
-import { BulkDeleteIssuesModal } from "@/components/core";
-import { CycleCreateUpdateModal } from "@/components/cycles";
-import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
-import { CreateUpdateModuleModal } from "@/components/modules";
-import { CreatePageModal } from "@/components/pages";
-import { CreateProjectModal } from "@/components/project";
-import { CreateUpdateProjectViewModal } from "@/components/views";
-// constants
-import { ISSUE_DETAILS } from "@/constants/fetch-keys";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useEventTracker, useUser, useAppTheme, useCommandPalette, useUserPermissions } from "@/hooks/store";
-import { useAppRouter } from "@/hooks/use-app-router";
-import { useIssuesStore } from "@/hooks/use-issue-layout-store";
+import {
+  useEventTracker,
+  useUser,
+  useAppTheme,
+  useCommandPalette,
+  useUserPermissions,
+  useIssueDetail,
+} from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-// services
-import { IssueService } from "@/services/issue";
-
-// services
-const issueService = new IssueService();
+// plane web components
+import {
+  IssueLevelModals,
+  ProjectLevelModals,
+  WorkspaceLevelModals,
+} from "@/plane-web/components/command-palette/modals";
+// plane web constants
+// plane web helpers
+import {
+  getGlobalShortcutsList,
+  getProjectShortcutsList,
+  getWorkspaceShortcutsList,
+  handleAdditionalKeyDownEvents,
+} from "@/plane-web/helpers/command-palette";
 
 export const CommandPalette: FC = observer(() => {
-  // router
-  const router = useAppRouter();
   // router params
-  const { workspaceSlug, projectId, issueId, cycleId, moduleId } = useParams();
-  // pathname
-  const pathname = usePathname();
+  const { workspaceSlug, projectId: paramsProjectId, workItem } = useParams();
   // store hooks
+  const { fetchIssueWithIdentifier } = useIssueDetail();
   const { toggleSidebar } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { platform } = usePlatformOS();
-  const {
-    data: currentUser,
-    // canPerformProjectMemberActions,
-    // canPerformWorkspaceMemberActions,
-    canPerformAnyCreateAction,
-    // canPerformProjectAdminActions,
-  } = useUser();
-  const {
-    issues: { removeIssue },
-  } = useIssuesStore();
-  const {
-    toggleCommandPaletteModal,
-    isCreateIssueModalOpen,
-    toggleCreateIssueModal,
-    isCreateCycleModalOpen,
-    toggleCreateCycleModal,
-    createPageModal,
-    toggleCreatePageModal,
-    isCreateProjectModalOpen,
-    toggleCreateProjectModal,
-    isCreateModuleModalOpen,
-    toggleCreateModuleModal,
-    isCreateViewModalOpen,
-    toggleCreateViewModal,
-    isShortcutModalOpen,
-    toggleShortcutModal,
-    isBulkDeleteIssueModalOpen,
-    toggleBulkDeleteIssueModal,
-    isDeleteIssueModalOpen,
-    toggleDeleteIssueModal,
-    isAnyModalOpen,
-  } = useCommandPalette();
+  const { data: currentUser, canPerformAnyCreateAction } = useUser();
+  const { toggleCommandPaletteModal, isShortcutModalOpen, toggleShortcutModal, isAnyModalOpen } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
 
+  // derived values
+  const projectIdentifier = workItem?.toString().split("-")[0];
+  const sequence_id = workItem?.toString().split("-")[1];
+
   const { data: issueDetails } = useSWR(
-    workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId as string) : null,
-    workspaceSlug && projectId && issueId
-      ? () => issueService.retrieve(workspaceSlug as string, projectId as string, issueId as string)
+    workspaceSlug && workItem ? `ISSUE_DETAIL_${workspaceSlug}_${projectIdentifier}_${sequence_id}` : null,
+    workspaceSlug && workItem
+      ? () => fetchIssueWithIdentifier(workspaceSlug.toString(), projectIdentifier, sequence_id)
       : null
   );
 
-  // derived values
+  const issueId = issueDetails?.id;
+  const projectId = paramsProjectId?.toString() ?? issueDetails?.project_id;
+
   const canPerformWorkspaceMemberActions = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.WORKSPACE
   );
   const canPerformProjectMemberActions = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    EUserPermissionsLevel.PROJECT
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    projectId
+  );
+  const canPerformProjectAdminActions = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug?.toString(),
+    projectId
   );
-  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
 
   const copyIssueUrlToClipboard = useCallback(() => {
-    if (!issueId) return;
+    if (!workItem) return;
 
     const url = new URL(window.location.href);
     copyTextToClipboard(url.href)
@@ -111,7 +96,7 @@ export const CommandPalette: FC = observer(() => {
           title: "Some error occurred",
         });
       });
-  }, [issueId]);
+  }, [workItem]);
 
   // auth
   const performProjectCreateActions = useCallback(
@@ -170,62 +155,11 @@ export const CommandPalette: FC = observer(() => {
     project: Record<string, { title: string; description: string; action: () => void }>;
   } = useMemo(
     () => ({
-      global: {
-        c: {
-          title: "Create a new issue",
-          description: "Create a new issue in the current project",
-          action: () => toggleCreateIssueModal(true),
-        },
-      },
-      workspace: {
-        p: {
-          title: "Create a new project",
-          description: "Create a new project in the current workspace",
-          action: () => toggleCreateProjectModal(true),
-        },
-      },
-      project: {
-        d: {
-          title: "Create a new page",
-          description: "Create a new page in the current project",
-          action: () => toggleCreatePageModal({ isOpen: true }),
-        },
-        m: {
-          title: "Create a new module",
-          description: "Create a new module in the current project",
-          action: () => toggleCreateModuleModal(true),
-        },
-        q: {
-          title: "Create a new cycle",
-          description: "Create a new cycle in the current project",
-          action: () => toggleCreateCycleModal(true),
-        },
-        v: {
-          title: "Create a new view",
-          description: "Create a new view in the current project",
-          action: () => toggleCreateViewModal(true),
-        },
-        backspace: {
-          title: "Bulk delete issues",
-          description: "Bulk delete issues in the current project",
-          action: () => toggleBulkDeleteIssueModal(true),
-        },
-        delete: {
-          title: "Bulk delete issues",
-          description: "Bulk delete issues in the current project",
-          action: () => toggleBulkDeleteIssueModal(true),
-        },
-      },
+      global: getGlobalShortcutsList(),
+      workspace: getWorkspaceShortcutsList(),
+      project: getProjectShortcutsList(),
     }),
-    [
-      toggleBulkDeleteIssueModal,
-      toggleCreateCycleModal,
-      toggleCreateIssueModal,
-      toggleCreateModuleModal,
-      toggleCreatePageModal,
-      toggleCreateProjectModal,
-      toggleCreateViewModal,
-    ]
+    []
   );
 
   const handleKeyDown = useCallback(
@@ -296,6 +230,8 @@ export const CommandPalette: FC = observer(() => {
           shortcutsList.project[keyPressed].action();
         }
       }
+      // Additional keydown events
+      handleAdditionalKeyDownEvents(e);
     },
     [
       copyIssueUrlToClipboard,
@@ -320,75 +256,16 @@ export const CommandPalette: FC = observer(() => {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [handleKeyDown]);
 
-  const isDraftIssue = pathname?.includes("draft-issues") || false;
-
   if (!currentUser) return null;
 
   return (
     <>
       <ShortcutsModal isOpen={isShortcutModalOpen} onClose={() => toggleShortcutModal(false)} />
-      {workspaceSlug && (
-        <CreateProjectModal
-          isOpen={isCreateProjectModalOpen}
-          onClose={() => toggleCreateProjectModal(false)}
-          workspaceSlug={workspaceSlug.toString()}
-        />
-      )}
+      {workspaceSlug && <WorkspaceLevelModals workspaceSlug={workspaceSlug.toString()} />}
       {workspaceSlug && projectId && (
-        <>
-          <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
-          />
-        </>
+        <ProjectLevelModals workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
       )}
-
-      <CreateUpdateIssueModal
-        isOpen={isCreateIssueModalOpen}
-        onClose={() => toggleCreateIssueModal(false)}
-        data={cycleId ? { cycle_id: cycleId.toString() } : moduleId ? { module_ids: [moduleId.toString()] } : undefined}
-        isDraft={isDraftIssue}
-      />
-
-      {workspaceSlug && projectId && issueId && issueDetails && (
-        <DeleteIssueModal
-          handleClose={() => toggleDeleteIssueModal(false)}
-          isOpen={isDeleteIssueModalOpen}
-          data={issueDetails}
-          onSubmit={async () => {
-            await removeIssue(workspaceSlug.toString(), projectId.toString(), issueId.toString());
-            router.push(`/${workspaceSlug}/projects/${projectId}/issues`);
-          }}
-        />
-      )}
-
-      <BulkDeleteIssuesModal
-        isOpen={isBulkDeleteIssueModalOpen}
-        onClose={() => toggleBulkDeleteIssueModal(false)}
-        user={currentUser}
-      />
+      <IssueLevelModals projectId={projectId} issueId={issueId} />
       <CommandModal />
     </>
   );
diff --git a/web/core/components/command-palette/helpers.tsx b/web/core/components/command-palette/helpers.tsx
index 99c8c310e..05885ebbd 100644
--- a/web/core/components/command-palette/helpers.tsx
+++ b/web/core/components/command-palette/helpers.tsx
@@ -11,6 +11,8 @@ import {
 } from "@plane/types";
 // ui
 import { ContrastIcon, DiceIcon } from "@plane/ui";
+// helpers
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
 
@@ -48,8 +50,14 @@ export const commandGroups: {
       </div>
     ),
     path: (issue: IWorkspaceIssueSearchResult) =>
-      `/${issue?.workspace__slug}/projects/${issue?.project_id}/issues/${issue?.id}`,
-    title: "Issues",
+      generateWorkItemLink({
+        workspaceSlug: issue?.workspace__slug,
+        projectId: issue?.project_id,
+        issueId: issue?.id,
+        projectIdentifier: issue.project__identifier,
+        sequenceId: issue?.sequence_id,
+      }),
+    title: "Work items",
   },
   issue_view: {
     icon: <Layers className="h-3 w-3" />,
diff --git a/web/core/components/command-palette/shortcuts-modal/commands-list.tsx b/web/core/components/command-palette/shortcuts-modal/commands-list.tsx
index e72e92e0b..570cb02fa 100644
--- a/web/core/components/command-palette/shortcuts-modal/commands-list.tsx
+++ b/web/core/components/command-palette/shortcuts-modal/commands-list.tsx
@@ -3,6 +3,12 @@ import { Command } from "lucide-react";
 import { substringMatch } from "@/helpers/string.helper";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web helpers
+import {
+  getAdditionalShortcutsList,
+  getCommonShortcutsList,
+  getNavigationShortcutsList,
+} from "@/plane-web/helpers/command-palette";
 
 type Props = {
   searchQuery: string;
@@ -16,26 +22,14 @@ export const ShortcutCommandsList: React.FC<Props> = (props) => {
     {
       key: "navigation",
       title: "Navigation",
-      shortcuts: [{ keys: "Ctrl,K", description: "Open command menu" }],
+      shortcuts: getNavigationShortcutsList(),
     },
     {
       key: "common",
       title: "Common",
-      shortcuts: [
-        { keys: "P", description: "Create project" },
-        { keys: "C", description: "Create issue" },
-        { keys: "Q", description: "Create cycle" },
-        { keys: "M", description: "Create module" },
-        { keys: "V", description: "Create view" },
-        { keys: "D", description: "Create page" },
-        { keys: "Delete", description: "Bulk delete issues" },
-        { keys: "Shift,/", description: "Open shortcuts guide" },
-        {
-          keys: platform === "MacOS" ? "Ctrl,control,C" : "Ctrl,Alt,C",
-          description: "Copy issue URL from the issue details page",
-        },
-      ],
+      shortcuts: getCommonShortcutsList(platform),
     },
+    ...getAdditionalShortcutsList(),
   ];
 
   const filteredShortcuts = KEYBOARD_SHORTCUTS.map((category) => {
@@ -69,7 +63,11 @@ export const ShortcutCommandsList: React.FC<Props> = (props) => {
                           <div key={key} className="flex items-center gap-1">
                             {key === "Ctrl" ? (
                               <div className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">
-                                { platform === "MacOS" ? <Command className="h-2.5 w-2.5 text-custom-text-200" /> : 'Ctrl'}
+                                {platform === "MacOS" ? (
+                                  <Command className="h-2.5 w-2.5 text-custom-text-200" />
+                                ) : (
+                                  "Ctrl"
+                                )}
                               </div>
                             ) : (
                               <kbd className="grid h-6 min-w-[1.5rem] place-items-center rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-1.5 text-[10px] text-custom-text-200">
diff --git a/web/core/components/common/access-field.tsx b/web/core/components/common/access-field.tsx
index dd7606a3a..f2c50934d 100644
--- a/web/core/components/common/access-field.tsx
+++ b/web/core/components/common/access-field.tsx
@@ -1,44 +1,53 @@
 import { LucideIcon } from "lucide-react";
-import { cn } from "@plane/editor";
+// plane ui
+import { useTranslation } from "@plane/i18n";
 import { Tooltip } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 
 type Props = {
   onChange: (value: number) => void;
   value: number;
   accessSpecifiers: {
     key: number;
-    label: string;
+    i18n_label?: string;
+    label?: string;
     icon: LucideIcon;
   }[];
   isMobile?: boolean;
 };
 
+// TODO: Remove label once i18n is done
 export const 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 border-[1px] border-custom-border-200 p-1">
-      {accessSpecifiers.map((access, index) => (
-        <Tooltip key={access.key} tooltipContent={access.label} isMobile={isMobile}>
-          <button
-            type="button"
-            onClick={() => onChange(access.key)}
-            className={cn(
-              "flex-shrink-0 relative flex justify-center items-center w-5 h-5 rounded-sm p-1 transition-all",
-              value === access.key ? "bg-custom-background-80" : "hover:bg-custom-background-80"
-            )}
-            tabIndex={2 + index}
-          >
-            <access.icon
+      {accessSpecifiers.map((access, index) => {
+        const label = access.i18n_label ? t(access.i18n_label) : access.label;
+        return (
+          <Tooltip key={access.key} tooltipContent={label} isMobile={isMobile}>
+            <button
+              type="button"
+              onClick={() => onChange(access.key)}
               className={cn(
-                "h-3.5 w-3.5 transition-all",
-                value === access.key ? "text-custom-text-100" : "text-custom-text-400"
+                "flex-shrink-0 relative flex justify-center items-center w-5 h-5 rounded-sm p-1 transition-all",
+                value === access.key ? "bg-custom-background-80" : "hover:bg-custom-background-80"
               )}
-              strokeWidth={2}
-            />
-          </button>
-        </Tooltip>
-      ))}
+              tabIndex={2 + index}
+            >
+              <access.icon
+                className={cn(
+                  "h-3.5 w-3.5 transition-all",
+                  value === access.key ? "text-custom-text-100" : "text-custom-text-400"
+                )}
+                strokeWidth={2}
+              />
+            </button>
+          </Tooltip>
+        );
+      })}
     </div>
   );
 };
diff --git a/web/core/components/common/activity/activity-block.tsx b/web/core/components/common/activity/activity-block.tsx
new file mode 100644
index 000000000..61c1a0b7b
--- /dev/null
+++ b/web/core/components/common/activity/activity-block.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { Network } from "lucide-react";
+// types
+import { TWorkspaceBaseActivity } from "@plane/types";
+// ui
+import { Tooltip } from "@plane/ui";
+// helpers
+import { renderFormattedTime, renderFormattedDate, calculateTimeAgo } from "@/helpers/date-time.helper";
+// hooks
+import { usePlatformOS } from "@/hooks/use-platform-os";
+// local components
+import { User } from "./user";
+
+type TActivityBlockComponent = {
+  icon?: ReactNode;
+  activity: TWorkspaceBaseActivity;
+  ends: "top" | "bottom" | undefined;
+  children: ReactNode;
+  customUserName?: string;
+};
+
+export const ActivityBlockComponent: FC<TActivityBlockComponent> = (props) => {
+  const { icon, activity, ends, children, customUserName } = props;
+  // hooks
+  const { isMobile } = usePlatformOS();
+
+  if (!activity) return <></>;
+  return (
+    <div
+      className={`relative flex items-start gap-2 text-xs ${
+        ends === "top" ? `pb-3` : ends === "bottom" ? `pt-3` : `py-3`
+      }`}
+    >
+      <div className="flex-shrink-0 ring-6 w-7 h-7 rounded-full overflow-hidden flex justify-center items-start mt-0.5 z-[4] text-custom-text-200">
+        {icon ? icon : <Network className="w-3.5 h-3.5" />}
+      </div>
+      <div className="w-full text-custom-text-200">
+        <div className="line-clamp-2">
+          <User activity={activity} customUserName={customUserName} /> {children}
+        </div>
+        <div className="mt-1">
+          <Tooltip
+            isMobile={isMobile}
+            tooltipContent={`${renderFormattedDate(activity.created_at)}, ${renderFormattedTime(activity.created_at)}`}
+          >
+            <span className="whitespace-nowrap text-custom-text-350 font-medium cursor-help">
+              {calculateTimeAgo(activity.created_at)}
+            </span>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/core/components/common/activity/activity-item.tsx b/web/core/components/common/activity/activity-item.tsx
new file mode 100644
index 000000000..643d89738
--- /dev/null
+++ b/web/core/components/common/activity/activity-item.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+
+import { TProjectActivity } from "@/plane-web/types";
+import { ActivityBlockComponent } from "./activity-block";
+import { iconsMap, messages } from "./helper";
+
+type TActivityItem = {
+  activity: TProjectActivity;
+  showProject?: boolean;
+  ends?: "top" | "bottom" | undefined;
+};
+
+export const ActivityItem: FC<TActivityItem> = observer((props) => {
+  const { activity, showProject = true, 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/web/core/components/common/activity/helper.tsx b/web/core/components/common/activity/helper.tsx
new file mode 100644
index 000000000..b3d16e7d0
--- /dev/null
+++ b/web/core/components/common/activity/helper.tsx
@@ -0,0 +1,281 @@
+import { ReactNode } from "react";
+import {
+  Signal,
+  RotateCcw,
+  Network,
+  Link as LinkIcon,
+  Calendar,
+  Tag,
+  Inbox,
+  AlignLeft,
+  Users,
+  Paperclip,
+  Type,
+  Triangle,
+  FileText,
+  Globe,
+  Hash,
+  Clock,
+  Bell,
+  LayoutGrid,
+  GitBranch,
+  Timer,
+  ListTodo,
+  Layers,
+} from "lucide-react";
+
+// components
+import { ArchiveIcon, DoubleCircleIcon, ContrastIcon, DiceIcon, Intake } from "@plane/ui";
+import { store } from "@/lib/store-context";
+import { TProjectActivity } from "@/plane-web/types";
+
+type ActivityIconMap = {
+  [key: string]: ReactNode;
+};
+export const iconsMap: ActivityIconMap = {
+  priority: <Signal size={14} className="text-custom-text-200" />,
+  archived_at: <ArchiveIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  restored: <RotateCcw className="h-3.5 w-3.5 text-custom-text-200" />,
+  link: <LinkIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  start_date: <Calendar className="h-3.5 w-3.5 text-custom-text-200" />,
+  target_date: <Calendar className="h-3.5 w-3.5 text-custom-text-200" />,
+  label: <Tag className="h-3.5 w-3.5 text-custom-text-200" />,
+  inbox: <Inbox className="h-3.5 w-3.5 text-custom-text-200" />,
+  description: <AlignLeft className="h-3.5 w-3.5 text-custom-text-200" />,
+  assignee: <Users className="h-3.5 w-3.5 text-custom-text-200" />,
+  attachment: <Paperclip className="h-3.5 w-3.5 text-custom-text-200" />,
+  name: <Type className="h-3.5 w-3.5 text-custom-text-200" />,
+  state: <DoubleCircleIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
+  estimate: <Triangle size={14} className="text-custom-text-200" />,
+  cycle: <ContrastIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
+  module: <DiceIcon className="h-4 w-4 flex-shrink-0 text-custom-text-200" />,
+  page: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
+  network: <Globe className="h-3.5 w-3.5 text-custom-text-200" />,
+  identifier: <Hash className="h-3.5 w-3.5 text-custom-text-200" />,
+  timezone: <Clock className="h-3.5 w-3.5 text-custom-text-200" />,
+  is_project_updates_enabled: <Bell className="h-3.5 w-3.5 text-custom-text-200" />,
+  is_epic_enabled: <LayoutGrid className="h-3.5 w-3.5 text-custom-text-200" />,
+  is_workflow_enabled: <GitBranch className="h-3.5 w-3.5 text-custom-text-200" />,
+  is_time_tracking_enabled: <Timer className="h-3.5 w-3.5 text-custom-text-200" />,
+  is_issue_type_enabled: <ListTodo className="h-3.5 w-3.5 text-custom-text-200" />,
+  default: <Network className="h-3.5 w-3.5 text-custom-text-200" />,
+  module_view: <DiceIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  cycle_view: <ContrastIcon className="h-3.5 w-3.5 text-custom-text-200" />,
+  issue_views_view: <Layers className="h-3.5 w-3.5 text-custom-text-200" />,
+  page_view: <FileText className="h-3.5 w-3.5 text-custom-text-200" />,
+  intake_view: <Intake className="h-3.5 w-3.5 text-custom-text-200" />,
+};
+
+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-custom-text-100">{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-custom-text-100">{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-custom-text-100">{newValue}</span>
+              </>
+            ) : (
+              "removed the start date"
+            )}
+          </>
+        ),
+      };
+    case "target_date":
+      return {
+        message: (
+          <>
+            {newValue ? (
+              <>
+                set the target date to <span className="font-medium text-custom-text-100">{newValue}</span>
+              </>
+            ) : (
+              "removed the target date"
+            )}
+          </>
+        ),
+      };
+    case "state":
+      return {
+        message: (
+          <>
+            set the state to <span className="font-medium text-custom-text-100">{newValue || "none"}</span>
+          </>
+        ),
+      };
+    case "estimate":
+      return {
+        message: (
+          <>
+            {newValue ? (
+              <>
+                set the estimate point to <span className="font-medium text-custom-text-100">{newValue}</span>
+              </>
+            ) : (
+              <>
+                removed the estimate point
+                {oldValue && (
+                  <>
+                    {" "}
+                    <span className="font-medium text-custom-text-100">{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-custom-text-100"
+              >
+                {activity.new_value}
+              </a>
+            ) : (
+              <span className="font-medium text-custom-text-100">{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-custom-text-100">
+              {verb === "removed" ? oldValue : newValue || "Unknown module"}
+            </span>
+          </>
+        ),
+      };
+    case "labels":
+      return {
+        message: (
+          <>
+            {verb} the label{" "}
+            <span className="font-medium text-custom-text-100">{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-custom-text-100">{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-custom-text-100">{newValue || "none"}</span>
+          </>
+        ),
+      };
+    case "timezone":
+      return {
+        message: (
+          <>
+            changed project timezone to{" "}
+            <span className="font-medium text-custom-text-100">{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/web/core/components/common/activity/index.ts b/web/core/components/common/activity/index.ts
new file mode 100644
index 000000000..8ab32d3d9
--- /dev/null
+++ b/web/core/components/common/activity/index.ts
@@ -0,0 +1 @@
+export * from "./activity-item";
diff --git a/web/core/components/common/activity/user.tsx b/web/core/components/common/activity/user.tsx
new file mode 100644
index 000000000..c82ab3616
--- /dev/null
+++ b/web/core/components/common/activity/user.tsx
@@ -0,0 +1,37 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+// types
+import { TWorkspaceBaseActivity } from "@plane/types";
+// store hooks
+import { useMember, useWorkspace } from "@/hooks/store";
+
+type TUser = {
+  activity: TWorkspaceBaseActivity;
+  customUserName?: string;
+};
+
+export const User: FC<TUser> = observer((props) => {
+  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="text-custom-text-100 font-medium">{customUserName || "Plane"}</span>
+      ) : (
+        <Link
+          href={`/${workspaceDetail?.slug}/profile/${actorDetail?.id}`}
+          className="hover:underline text-custom-text-100 font-medium"
+        >
+          {actorDetail?.display_name}
+        </Link>
+      )}
+    </>
+  );
+});
diff --git a/web/core/components/common/applied-filters/date.tsx b/web/core/components/common/applied-filters/date.tsx
index 0f5680c48..9dcde53a4 100644
--- a/web/core/components/common/applied-filters/date.tsx
+++ b/web/core/components/common/applied-filters/date.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
 // icons
 import { X } from "lucide-react";
-// constants
-import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
+// plane constants
+import { DATE_BEFORE_FILTER_OPTIONS } from "@plane/constants";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
diff --git a/web/core/components/common/filters/created-at.tsx b/web/core/components/common/filters/created-at.tsx
index 9baf391be..b1c23f70a 100644
--- a/web/core/components/common/filters/created-at.tsx
+++ b/web/core/components/common/filters/created-at.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-// components
+// plane constants
+import { DATE_BEFORE_FILTER_OPTIONS } from "@plane/constants";
 import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
 // helpers
 import { isInDateFormat } from "@/helpers/date-time.helper";
 
diff --git a/web/core/components/common/index.ts b/web/core/components/common/index.ts
index 28b732388..1f9a42440 100644
--- a/web/core/components/common/index.ts
+++ b/web/core/components/common/index.ts
@@ -5,3 +5,4 @@ export * from "./logo-spinner";
 export * from "./logo";
 export * from "./pro-icon";
 export * from "./count-chip";
+export * from "./activity";
diff --git a/web/core/components/common/latest-feature-block.tsx b/web/core/components/common/latest-feature-block.tsx
index a108e05bf..35aacddcf 100644
--- a/web/core/components/common/latest-feature-block.tsx
+++ b/web/core/components/common/latest-feature-block.tsx
@@ -28,7 +28,7 @@ export const LatestFeatureBlock = () => {
         <div className="h-[90%]">
           <Image
             src={latestFeatures}
-            alt="Plane Issues"
+            alt="Plane Work items"
             className={`-mt-2 ml-10 h-full rounded-md ${
               resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
             }`}
diff --git a/web/core/components/core/activity.tsx b/web/core/components/core/activity.tsx
index 9a06b336b..218697795 100644
--- a/web/core/components/core/activity.tsx
+++ b/web/core/components/core/activity.tsx
@@ -24,6 +24,7 @@ import { IIssueActivity } from "@plane/types";
 import { Tooltip, BlockedIcon, BlockerIcon, RelatedIcon, LayersIcon, DiceIcon, Intake } from "@plane/ui";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
 import { useLabel } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -34,17 +35,23 @@ export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
   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
-      tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}
+      tooltipContent={activity?.issue_detail ? activity.issue_detail.name : "This work item has been deleted"}
       isMobile={isMobile}
     >
       {activity?.issue_detail ? (
         <a
           aria-disabled={activity.issue === null}
-          href={`${`/${workspaceSlug ?? activity.workspace_detail?.slug}/projects/${activity.project}/issues/${
-            activity.issue
-          }`}`}
+          href={workItemLink}
           target={activity.issue === null ? "_self" : "_blank"}
           rel={activity.issue === null ? "" : "noopener noreferrer"}
           className="inline items-center gap-1 font-medium text-custom-text-100 hover:underline"
@@ -54,7 +61,7 @@ export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
         </a>
       ) : (
         <span className="inline-flex items-center gap-1 font-medium text-custom-text-100 whitespace-nowrap">
-          {" an Issue"}{" "}
+          {" a work item"}{" "}
         </span>
       )}
     </Tooltip>
@@ -100,20 +107,20 @@ const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; works
 
 const inboxActivityMessage = {
   declined: {
-    showIssue: "declined issue",
-    noIssue: "declined this issue from intake.",
+    showIssue: "declined work item",
+    noIssue: "declined this work item from intake.",
   },
   snoozed: {
-    showIssue: "snoozed issue",
-    noIssue: "snoozed this issue.",
+    showIssue: "snoozed work item",
+    noIssue: "snoozed this work item.",
   },
   accepted: {
-    showIssue: "accepted issue",
-    noIssue: "accepted this issue from intake.",
+    showIssue: "accepted work item",
+    noIssue: "accepted this work item from intake.",
   },
   markedDuplicate: {
-    showIssue: "declined issue",
-    noIssue: "declined this issue from intake by marking a duplicate issue.",
+    showIssue: "declined work item",
+    noIssue: "declined this work item from intake by marking a duplicate work item.",
   },
 };
 
@@ -128,7 +135,7 @@ const getInboxUserActivityMessage = (activity: IIssueActivity, showIssue: boolea
     case "2":
       return showIssue ? inboxActivityMessage.markedDuplicate.showIssue : inboxActivityMessage.markedDuplicate.noIssue;
     default:
-      return "updated intake issue status.";
+      return "updated intake work item status.";
   }
 };
 
@@ -393,7 +400,7 @@ const activityDetails: {
         return (
           <>
             <span className="flex-shrink-0">
-              added {showIssue ? <IssueLink activity={activity} /> : "this issue"}{" "}
+              added {showIssue ? <IssueLink activity={activity} /> : "this work item"}{" "}
               <span className="whitespace-nowrap">to the cycle</span>{" "}
             </span>
             <a
@@ -442,7 +449,7 @@ const activityDetails: {
       if (activity.verb === "created")
         return (
           <>
-            added {showIssue ? <IssueLink activity={activity} /> : "this issue"} to the module{" "}
+            added {showIssue ? <IssueLink activity={activity} /> : "this work item"} to the module{" "}
             <a
               href={`/${workspaceSlug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
@@ -551,7 +558,7 @@ const activityDetails: {
       if (activity.old_value === "")
         return (
           <>
-            marked that {showIssue ? <IssueLink activity={activity} /> : "this issue"} relates to{" "}
+            marked that {showIssue ? <IssueLink activity={activity} /> : "this work item"} relates to{" "}
             <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
           </>
         );
@@ -570,14 +577,14 @@ const activityDetails: {
       if (activity.old_value === "")
         return (
           <>
-            marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is blocking issue{" "}
+            marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} is blocking work item{" "}
             <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
-            removed the blocking issue{" "}
+            removed the blocking work item{" "}
             <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
           </>
         );
@@ -589,14 +596,14 @@ const activityDetails: {
       if (activity.old_value === "")
         return (
           <>
-            marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} is being blocked by{" "}
+            marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} is being blocked by{" "}
             <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
-            removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} being blocked by issue{" "}
+            removed {showIssue ? <IssueLink activity={activity} /> : "this work item"} being blocked by work item{" "}
             <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
           </>
         );
@@ -608,14 +615,14 @@ const activityDetails: {
       if (activity.old_value === "")
         return (
           <>
-            marked {showIssue ? <IssueLink activity={activity} /> : "this issue"} as duplicate of{" "}
+            marked {showIssue ? <IssueLink activity={activity} /> : "this work item"} as duplicate of{" "}
             <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.new_value}</span>.
           </>
         );
       else
         return (
           <>
-            removed {showIssue ? <IssueLink activity={activity} /> : "this issue"} as a duplicate of{" "}
+            removed {showIssue ? <IssueLink activity={activity} /> : "this work item"} as a duplicate of{" "}
             <span className="font-medium text-custom-text-100 whitespace-nowrap">{activity.old_value}</span>.
           </>
         );
@@ -709,7 +716,7 @@ const activityDetails: {
             <IssueLink activity={activity} />
           </>
         )}
-        {activity.verb === "2" && ` from intake by marking a duplicate issue.`}
+        {activity.verb === "2" && ` from intake by marking a duplicate work item.`}
       </>
     ),
     icon: <Intake className="size-3 text-custom-text-200" aria-hidden="true" />,
diff --git a/web/core/components/core/content-overflow-HOC.tsx b/web/core/components/core/content-overflow-HOC.tsx
new file mode 100644
index 000000000..f8089c34b
--- /dev/null
+++ b/web/core/components/core/content-overflow-HOC.tsx
@@ -0,0 +1,156 @@
+import { ReactNode, 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((props: IContentOverflowWrapper) => {
+  const {
+    children,
+    maxHeight = 625,
+    buttonClassName = "text-sm font-medium text-custom-primary-100",
+    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();
+    };
+  }, [contentRef?.current]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const handleTransitionEnd = () => {
+      setIsTransitioning(false);
+    };
+
+    containerRef.current.addEventListener("transitionend", handleTransitionEnd);
+
+    return () => {
+      containerRef.current?.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",
+            `bg-gradient-to-t from-custom-background-100 to-transparent flex flex-col items-center justify-end`,
+            "text-center",
+            {
+              "absolute h-[100px] opacity-100": !showAll,
+              "absolute h-[30px] opacity-70": showAll,
+            }
+          )}
+          style={{
+            pointerEvents: isTransitioning ? "none" : "auto",
+          }}
+        >
+          {customButton || (
+            <button
+              className={cn(
+                "gap-1 w-full text-custom-primary-100 text-sm font-medium transition-opacity duration-300",
+                buttonClassName
+              )}
+              onClick={handleToggle}
+              disabled={isTransitioning}
+            >
+              {showAll ? t("show_less") : t("show_all")}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/core/components/core/filters/date-filter-modal.tsx b/web/core/components/core/filters/date-filter-modal.tsx
index 9fa63ad64..a1c76da4b 100644
--- a/web/core/components/core/filters/date-filter-modal.tsx
+++ b/web/core/components/core/filters/date-filter-modal.tsx
@@ -1,17 +1,14 @@
 "use client";
 import { Fragment } from "react";
-
-import { DayPicker } from "react-day-picker";
 import { Controller, useForm } from "react-hook-form";
 
 import { X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 
-import { Button } from "@plane/ui";
+import { Button, Calendar } from "@plane/ui";
 
 import { renderFormattedPayloadDate, renderFormattedDate, getDate } from "@/helpers/date-time.helper";
 import { DateFilterSelect } from "./date-filter-select";
-
 type Props = {
   title: string;
   handleClose: () => void;
@@ -96,7 +93,11 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                         const dateValue = getDate(value);
                         const date2Value = getDate(watch("date2"));
                         return (
-                          <DayPicker
+                          <Calendar
+                            classNames={{
+                              root: ` border border-custom-border-200 p-3 rounded-md`,
+                            }}
+                            captionLayout="dropdown"
                             selected={dateValue}
                             defaultMonth={dateValue}
                             onSelect={(date) => {
@@ -105,7 +106,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                             }}
                             mode="single"
                             disabled={date2Value ? [{ after: date2Value }] : undefined}
-                            className="border border-custom-border-200 p-3 rounded-md"
                           />
                         );
                       }}
@@ -118,7 +118,11 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                           const dateValue = getDate(value);
                           const date1Value = getDate(watch("date1"));
                           return (
-                            <DayPicker
+                            <Calendar
+                              classNames={{
+                                root: ` border border-custom-border-200 p-3 rounded-md`,
+                              }}
+                              captionLayout="dropdown"
                               selected={dateValue}
                               defaultMonth={dateValue}
                               onSelect={(date) => {
@@ -127,7 +131,6 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
                               }}
                               mode="single"
                               disabled={date1Value ? [{ before: date1Value }] : undefined}
-                              className="border border-custom-border-200 p-3 rounded-md"
                             />
                           );
                         }}
diff --git a/web/core/components/core/image-picker-popover.tsx b/web/core/components/core/image-picker-popover.tsx
index bef7b4df0..b3bf73588 100644
--- a/web/core/components/core/image-picker-popover.tsx
+++ b/web/core/components/core/image-picker-popover.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useState, useRef, useCallback } from "react";
+import React, { useState, useRef, useCallback } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
@@ -8,14 +8,13 @@ import { useDropzone } from "react-dropzone";
 import { Control, Controller } from "react-hook-form";
 import useSWR from "swr";
 import { Tab, Popover } from "@headlessui/react";
-// plane helpers
+// plane imports
+import { MAX_FILE_SIZE } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // plane types
 import { EFileAssetType } from "@plane/types/src/enums";
 // ui
 import { Button, Input, Loader } from "@plane/ui";
-// constants
-import { MAX_STATIC_FILE_SIZE } from "@/constants/common";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
@@ -92,7 +91,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
     accept: {
       "image/*": [".png", ".jpg", ".jpeg", ".webp"],
     },
-    maxSize: MAX_STATIC_FILE_SIZE,
+    maxSize: MAX_FILE_SIZE,
   });
 
   const handleSubmit = async () => {
@@ -131,12 +130,6 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
     }
   };
 
-  useEffect(() => {
-    if (!unsplashImages || value !== null) return;
-
-    onChange(unsplashImages[0]?.urls.regular);
-  }, [value, onChange, unsplashImages]);
-
   const handleClose = () => {
     if (isOpen) setIsOpen(false);
   };
diff --git a/web/core/components/core/list/list-item.tsx b/web/core/components/core/list/list-item.tsx
index 930f630cc..07bfc0992 100644
--- a/web/core/components/core/list/list-item.tsx
+++ b/web/core/components/core/list/list-item.tsx
@@ -8,6 +8,7 @@ import { cn } from "@/helpers/common.helper";
 import { useAppRouter } from "@/hooks/use-app-router";
 
 interface IListItemProps {
+  id?: string;
   title: string;
   itemLink: string;
   onItemClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
@@ -18,13 +19,16 @@ interface IListItemProps {
   parentRef: React.RefObject<HTMLDivElement>;
   disableLink?: boolean;
   className?: string;
+  itemClassName?: string;
   actionItemContainerClassName?: string;
   isSidebarOpen?: boolean;
   quickActionElement?: JSX.Element;
+  preventDefaultNProgress?: boolean;
 }
 
 export const ListItem: FC<IListItemProps> = (props) => {
   const {
+    id,
     title,
     prependTitleElement,
     appendTitleElement,
@@ -38,6 +42,8 @@ export const ListItem: FC<IListItemProps> = (props) => {
     actionItemContainerClassName = "",
     isSidebarOpen = false,
     quickActionElement,
+    itemClassName = "",
+    preventDefaultNProgress = false,
   } = props;
 
   // router
@@ -54,20 +60,19 @@ export const ListItem: FC<IListItemProps> = (props) => {
       <Row
         className={cn(
           "group min-h-[52px] flex w-full flex-col items-center justify-between gap-3 py-4 text-sm border-b border-custom-border-200 bg-custom-background-100 hover:bg-custom-background-90 ",
-          {
-            "xl:gap-5 xl:py-0 xl:flex-row": isSidebarOpen,
-            "lg:gap-5 lg:py-0 lg:flex-row": !isSidebarOpen,
-          },
+          { "xl:gap-5 xl:py-0 xl:flex-row": isSidebarOpen, "lg:gap-5 lg:py-0 lg:flex-row": !isSidebarOpen },
           className
         )}
       >
-        <div className="relative flex w-full items-center justify-between gap-3 overflow-hidden">
+        <div className={cn("relative flex w-full items-center justify-between gap-3 overflow-hidden", 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-nprogress={preventDefaultNProgress}
           >
             <div className="flex items-center gap-4 truncate">
               {prependTitleElement && <span className="flex items-center flex-shrink-0">{prependTitleElement}</span>}
diff --git a/web/core/components/core/modals/bulk-delete-issues-modal.tsx b/web/core/components/core/modals/bulk-delete-issues-modal.tsx
index 1d397a315..642a59bbc 100644
--- a/web/core/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/core/components/core/modals/bulk-delete-issues-modal.tsx
@@ -6,19 +6,18 @@ import { useParams } from "next/navigation";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Search } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
-// types
+// plane imports
+import { EIssuesStoreType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ISearchIssueResponse, IUser } from "@plane/types";
-// ui
 import { Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EIssuesStoreType } from "@/constants/issue";
+import { SimpleEmptyState } from "@/components/empty-state";
 // hooks
 import { useIssues } from "@/hooks/store";
 import useDebounce from "@/hooks/use-debounce";
 // services
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { ProjectService } from "@/services/project";
 // local components
 import { BulkDeleteIssuesModalItem } from "./bulk-delete-issues-modal-item";
@@ -39,16 +38,19 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
   const { isOpen, onClose } = props;
   // router params
   const { workspaceSlug, projectId } = useParams();
-  // hooks
-  const {
-    issues: { removeBulkIssues },
-  } = useIssues(EIssuesStoreType.PROJECT);
   // states
   const [query, setQuery] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
   const [isSearching, setIsSearching] = useState(false);
-
+  // hooks
+  const {
+    issues: { removeBulkIssues },
+  } = useIssues(EIssuesStoreType.PROJECT);
+  const { t } = useTranslation();
+  // derived values
   const debouncedSearchTerm: string = useDebounce(query, 500);
+  const searchResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/search" });
+  const issuesResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/issues" });
 
   useEffect(() => {
     if (!isOpen || !workspaceSlug || !projectId) return;
@@ -88,7 +90,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: "Please select at least one issue.",
+        message: "Please select at least one work item.",
       });
       return;
     }
@@ -100,7 +102,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
-          message: "Issues deleted successfully!",
+          message: "Work items deleted successfully!",
         });
         handleClose();
       })
@@ -117,7 +119,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
     issues.length > 0 ? (
       <li className="p-2">
         {query === "" && (
-          <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select issues to delete</h2>
+          <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select work items to delete</h2>
         )}
         <ul className="text-sm text-custom-text-200">
           {issues.map((issue) => (
@@ -131,12 +133,11 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
       </li>
     ) : (
       <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
-        <EmptyState
-          type={
-            query === "" ? EmptyStateType.ISSUE_RELATION_EMPTY_STATE : EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE
-          }
-          layout="screen-simple"
-        />
+        {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>
     );
 
@@ -203,7 +204,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
                         Cancel
                       </Button>
                       <Button variant="danger" size="sm" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
-                        {isSubmitting ? "Deleting..." : "Delete selected issues"}
+                        {isSubmitting ? "Deleting..." : "Delete selected work items"}
                       </Button>
                     </div>
                   )}
diff --git a/web/core/components/core/modals/existing-issues-list-modal.tsx b/web/core/components/core/modals/existing-issues-list-modal.tsx
index 659dd7bfb..bd6db1f19 100644
--- a/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -3,11 +3,14 @@
 import React, { useEffect, useState } from "react";
 import { Rocket, Search, X } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { ISearchIssueResponse, TProjectIssuesSearchParams } from "@plane/types";
 // ui
 import { Button, Loader, ToggleSwitch, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
 import useDebounce from "@/hooks/use-debounce";
@@ -33,6 +36,8 @@ type Props = {
 const projectService = new ProjectService();
 
 export const ExistingIssuesListModal: React.FC<Props> = (props) => {
+  const { t } = useTranslation();
+
   const {
     workspaceSlug,
     projectId,
@@ -66,8 +71,8 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
     if (selectedIssues.length === 0) {
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Please select at least one issue.",
+        title: t("toast.error"),
+        message: t("issue.select.error"),
       });
 
       return;
@@ -140,7 +145,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                     />
                     <Combobox.Input
                       className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0"
-                      placeholder="Type to search..."
+                      placeholder={t("common.search.placeholder")}
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                       tabIndex={baseTabIndex}
@@ -174,7 +179,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                       </div>
                     ) : (
                       <div className="w-min whitespace-nowrap rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
-                        No issues selected
+                        {t("issue.select.empty")}
                       </div>
                     )}
                     {workspaceLevelToggle && (
@@ -193,7 +198,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                             onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
                             className="flex-shrink-0"
                           >
-                            Workspace Level
+                            {t("common.workspace_level")}
                           </button>
                         </div>
                       </Tooltip>
@@ -204,6 +209,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                     static
                     className="vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto"
                   >
+                    {/* TODO: Translate here */}
                     {searchTerm !== "" && (
                       <h5 className="mx-2 text-[0.825rem] text-custom-text-200">
                         Search results for{" "}
@@ -269,7 +275,13 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                                     <span className="truncate">{issue.name}</span>
                                   </div>
                                   <a
-                                    href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+                                    href={generateWorkItemLink({
+                                      workspaceSlug,
+                                      projectId: issue?.project_id,
+                                      issueId: issue?.id,
+                                      projectIdentifier: issue.project__identifier,
+                                      sequenceId: issue?.sequence_id,
+                                    })}
                                     target="_blank"
                                     className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
                                     rel="noopener noreferrer"
@@ -288,11 +300,11 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
                 </Combobox>
                 <div className="flex items-center justify-end gap-2 p-3">
                   <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
+                    {t("common.cancel")}
                   </Button>
                   {selectedIssues.length > 0 && (
                     <Button variant="primary" size="sm" onClick={onSubmit} loading={isSubmitting}>
-                      {isSubmitting ? "Adding..." : "Add selected issues"}
+                      {isSubmitting ? t("common.adding") : t("issue.select.add_selected")}
                     </Button>
                   )}
                 </div>
diff --git a/web/core/components/core/modals/gpt-assistant-popover.tsx b/web/core/components/core/modals/gpt-assistant-popover.tsx
index 0056977ed..676da4624 100644
--- a/web/core/components/core/modals/gpt-assistant-popover.tsx
+++ b/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -6,12 +6,15 @@ import { Controller, useForm } from "react-hook-form"; // services
 import { usePopper } from "react-popper";
 import { AlertCircle } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
+// plane editor
+import { EditorReadOnlyRefApi } from "@plane/editor";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { RichTextReadOnlyEditor } from "@/components/editor/rich-text-editor/rich-text-read-only-editor";
 // services
 import { AIService } from "@/services/ai.service";
+const aiService = new AIService();
 
 type Props = {
   isOpen: boolean;
@@ -22,6 +25,7 @@ type Props = {
   prompt?: string;
   button: JSX.Element;
   className?: string;
+  workspaceId: string;
   workspaceSlug: string;
   projectId: string;
 };
@@ -31,8 +35,6 @@ type FormData = {
   task: string;
 };
 
-const aiService = new AIService();
-
 export const GptAssistantPopover: React.FC<Props> = (props) => {
   const {
     isOpen,
@@ -43,6 +45,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
     prompt,
     button,
     className = "",
+    workspaceId,
     workspaceSlug,
     projectId,
   } = props;
@@ -51,7 +54,8 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   const [invalidResponse, setInvalidResponse] = useState(false);
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const editorRef = useRef<any>(null);
+  // refs
+  const editorRef = useRef<EditorReadOnlyRefApi>(null);
   const responseRef = useRef<any>(null);
   // popper
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
@@ -188,7 +192,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
   return (
     <Popover as="div" className={`relative w-min text-left`}>
       <Popover.Button as={Fragment}>
-        <button ref={setReferenceElement} className="flex items-center">
+        <button ref={setReferenceElement} className="flex items-center" tabIndex={-1}>
           {button}
         </button>
       </Popover.Button>
@@ -218,6 +222,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
                   initialValue={prompt}
                   containerClassName="-m-3"
                   ref={editorRef}
+                  workspaceId={workspaceId}
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
                 />
@@ -230,6 +235,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
                   id="ai-assistant-response"
                   initialValue={`<p>${response}</p>`}
                   ref={responseRef}
+                  workspaceId={workspaceId}
                   workspaceSlug={workspaceSlug}
                   projectId={projectId}
                 />
diff --git a/web/core/components/core/modals/issue-search-modal-empty-state.tsx b/web/core/components/core/modals/issue-search-modal-empty-state.tsx
index 578d39a60..20646efb1 100644
--- a/web/core/components/core/modals/issue-search-modal-empty-state.tsx
+++ b/web/core/components/core/modals/issue-search-modal-empty-state.tsx
@@ -1,10 +1,10 @@
 import React from "react";
-// components
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { ISearchIssueResponse } from "@plane/types";
-import { EmptyState } from "@/components/empty-state";
-// types
-import { EmptyStateType } from "@/constants/empty-state";
-// constants
+// components
+import { SimpleEmptyState } from "@/components/empty-state";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 interface EmptyStateProps {
   issues: ISearchIssueResponse[];
@@ -19,18 +19,28 @@ export const IssueSearchModalEmptyState: React.FC<EmptyStateProps> = ({
   debouncedSearchTerm,
   isSearching,
 }) => {
-  const renderEmptyState = (type: EmptyStateType) => (
-    <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
-      <EmptyState type={type} layout="screen-simple" />
-    </div>
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const searchResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/search" });
+  const issuesResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/issues" });
+
+  const EmptyStateContainer = ({ children }: { children: React.ReactNode }) => (
+    <div className="flex flex-col items-center justify-center px-3 py-8 text-center">{children}</div>
   );
 
-  const emptyState =
-    issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && !isSearching
-      ? renderEmptyState(EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE)
-      : issues.length === 0
-        ? renderEmptyState(EmptyStateType.ISSUE_RELATION_EMPTY_STATE)
-        : null;
-
-  return emptyState;
+  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/web/core/components/core/modals/user-image-upload-modal.tsx b/web/core/components/core/modals/user-image-upload-modal.tsx
index ad7a4daac..286f36415 100644
--- a/web/core/components/core/modals/user-image-upload-modal.tsx
+++ b/web/core/components/core/modals/user-image-upload-modal.tsx
@@ -5,12 +5,10 @@ import { observer } from "mobx-react";
 import { useDropzone } from "react-dropzone";
 import { UserCircle2 } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
-// plane types
+// plane imports
+import { MAX_FILE_SIZE } from "@plane/constants";
 import { EFileAssetType } from "@plane/types/src/enums";
-// hooks
 import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { MAX_STATIC_FILE_SIZE } from "@/constants/common";
 // helpers
 import { getAssetIdFromUrl, getFileURL } from "@/helpers/file.helper";
 import { checkURLValidity } from "@/helpers/string.helper";
@@ -40,7 +38,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
     accept: {
       "image/*": [".png", ".jpg", ".jpeg", ".webp"],
     },
-    maxSize: MAX_STATIC_FILE_SIZE,
+    maxSize: MAX_FILE_SIZE,
     multiple: false,
   });
 
diff --git a/web/core/components/core/modals/workspace-image-upload-modal.tsx b/web/core/components/core/modals/workspace-image-upload-modal.tsx
index cc7248a62..df0248c84 100644
--- a/web/core/components/core/modals/workspace-image-upload-modal.tsx
+++ b/web/core/components/core/modals/workspace-image-upload-modal.tsx
@@ -5,12 +5,10 @@ import { useParams } from "next/navigation";
 import { useDropzone } from "react-dropzone";
 import { UserCircle2 } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
-// plane types
+// plane imports
+import { MAX_FILE_SIZE } from "@plane/constants";
 import { EFileAssetType } from "@plane/types/src/enums";
-// hooks
 import { Button } from "@plane/ui";
-// constants
-import { MAX_STATIC_FILE_SIZE } from "@/constants/common";
 // helpers
 import { getAssetIdFromUrl, getFileURL } from "@/helpers/file.helper";
 import { checkURLValidity } from "@/helpers/string.helper";
@@ -48,7 +46,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
     accept: {
       "image/*": [".png", ".jpg", ".jpeg", ".webp"],
     },
-    maxSize: MAX_STATIC_FILE_SIZE,
+    maxSize: MAX_FILE_SIZE,
     multiple: false,
   });
 
diff --git a/web/core/components/core/sidebar/progress-chart.tsx b/web/core/components/core/sidebar/progress-chart.tsx
index 25dd3fee5..bb4eeb493 100644
--- a/web/core/components/core/sidebar/progress-chart.tsx
+++ b/web/core/components/core/sidebar/progress-chart.tsx
@@ -48,7 +48,7 @@ const ProgressChart: React.FC<Props> = ({
   endDate,
   totalIssues,
   className = "",
-  plotTitle = "issues",
+  plotTitle = "work items",
 }) => {
   const chartData = Object.keys(distribution ?? []).map((key) => ({
     currentDate: renderFormattedDateWithoutYear(key),
diff --git a/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx b/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
index fb847ec17..7dc398812 100644
--- a/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
+++ b/web/core/components/core/sidebar/sidebar-menu-hamburger-toggle.tsx
@@ -1,20 +1,20 @@
 "use client";
 
-import { FC } from "react";
 import { observer } from "mobx-react";
 import { Menu } from "lucide-react";
 import { useAppTheme } from "@/hooks/store";
 
-export const SidebarHamburgerToggle: FC = observer(() => {
+export const SidebarHamburgerToggle = observer(() => {
   // store hooks
   const { toggleSidebar } = useAppTheme();
 
   return (
-    <div
-      className="group flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded bg-custom-background-80 transition-all hover:bg-custom-background-90 md:hidden"
+    <button
+      type="button"
+      className="group flex-shrink-0 size-7 grid place-items-center rounded bg-custom-background-80 transition-all hover:bg-custom-background-90 md:hidden"
       onClick={() => toggleSidebar()}
     >
-      <Menu size={14} className="text-custom-text-200 transition-all group-hover:text-custom-text-100" />
-    </div>
+      <Menu className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
+    </button>
   );
 });
diff --git a/web/core/components/core/sidebar/single-progress-stats.tsx b/web/core/components/core/sidebar/single-progress-stats.tsx
index 25f976d84..047d8bc04 100644
--- a/web/core/components/core/sidebar/single-progress-stats.tsx
+++ b/web/core/components/core/sidebar/single-progress-stats.tsx
@@ -21,8 +21,8 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
     } ${selected ? "bg-custom-background-90" : ""}`}
     onClick={onClick}
   >
-    <div className="w-1/2">{title}</div>
-    <div className="flex w-1/2 items-center justify-end gap-1 px-2">
+    <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)}%
diff --git a/web/core/components/core/theme/custom-theme-selector.tsx b/web/core/components/core/theme/custom-theme-selector.tsx
index da9034393..d66fbe82f 100644
--- a/web/core/components/core/theme/custom-theme-selector.tsx
+++ b/web/core/components/core/theme/custom-theme-selector.tsx
@@ -1,29 +1,16 @@
 "use client";
 
+import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IUserTheme } from "@plane/types";
 // ui
 import { Button, InputColorPicker, setPromiseToast } from "@plane/ui";
 // hooks
 import { useUserProfile } from "@/hooks/store";
 
-const inputRules = {
-  minLength: {
-    value: 7,
-    message: "Enter a valid hex code of 6 characters",
-  },
-  maxLength: {
-    value: 7,
-    message: "Enter a valid hex code of 6 characters",
-  },
-  pattern: {
-    value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
-    message: "Enter a valid hex code of 6 characters",
-  },
-};
-
 type TCustomThemeSelector = {
   applyThemeChange: (theme: Partial<IUserTheme>) => void;
 };
@@ -32,7 +19,7 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
   const { applyThemeChange } = props;
   // hooks
   const { data: userProfile, updateUserTheme } = useUserProfile();
-
+  const { t } = useTranslation();
   const {
     control,
     formState: { errors, isSubmitting },
@@ -51,6 +38,24 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
     },
   });
 
+  const inputRules = useMemo(
+    () => ({
+      minLength: {
+        value: 7,
+        message: t("enter_a_valid_hex_code_of_6_characters"),
+      },
+      maxLength: {
+        value: 7,
+        message: t("enter_a_valid_hex_code_of_6_characters"),
+      },
+      pattern: {
+        value: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+        message: t("enter_a_valid_hex_code_of_6_characters"),
+      },
+    }),
+    [t] // Empty dependency array since these rules never change
+  );
+
   const handleUpdateTheme = async (formData: Partial<IUserTheme>) => {
     const payload: IUserTheme = {
       background: formData.background,
@@ -66,14 +71,14 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
 
     const updateCurrentUserThemePromise = updateUserTheme(payload);
     setPromiseToast(updateCurrentUserThemePromise, {
-      loading: "Updating theme...",
+      loading: t("updating_theme"),
       success: {
-        title: "Success!",
-        message: () => "Theme updated successfully!",
+        title: t("success"),
+        message: () => t("theme_updated_successfully"),
       },
       error: {
-        title: "Error!",
-        message: () => "Failed to Update the theme",
+        title: t("error"),
+        message: () => t("failed_to_update_the_theme"),
       },
     });
 
@@ -91,16 +96,16 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
   return (
     <form onSubmit={handleSubmit(handleUpdateTheme)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-semibold text-custom-text-100">Customize your theme</h3>
+        <h3 className="text-lg font-semibold text-custom-text-100">{t("customize_your_theme")}</h3>
         <div className="space-y-4">
           <div className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Background color</h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("background_color")}</h3>
               <div className="w-full">
                 <Controller
                   control={control}
                   name="background"
-                  rules={{ ...inputRules, required: "Background color is required" }}
+                  rules={{ ...inputRules, required: t("background_color_is_required") }}
                   render={({ field: { value, onChange } }) => (
                     <InputColorPicker
                       name="background"
@@ -121,12 +126,12 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Text color</h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("text_color")}</h3>
               <div className="w-full">
                 <Controller
                   control={control}
                   name="text"
-                  rules={{ ...inputRules, required: "Text color is required" }}
+                  rules={{ ...inputRules, required: t("text_color_is_required") }}
                   render={({ field: { value, onChange } }) => (
                     <InputColorPicker
                       name="text"
@@ -147,12 +152,12 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Primary(Theme) color</h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("primary_color")}</h3>
               <div className="w-full">
                 <Controller
                   control={control}
                   name="primary"
-                  rules={{ ...inputRules, required: "Primary color is required" }}
+                  rules={{ ...inputRules, required: t("primary_color_is_required") }}
                   render={({ field: { value, onChange } }) => (
                     <InputColorPicker
                       name="primary"
@@ -173,12 +178,12 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar background color</h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("sidebar_background_color")}</h3>
               <div className="w-full">
                 <Controller
                   control={control}
                   name="sidebarBackground"
-                  rules={{ ...inputRules, required: "Sidebar background color is required" }}
+                  rules={{ ...inputRules, required: t("sidebar_background_color_is_required") }}
                   render={({ field: { value, onChange } }) => (
                     <InputColorPicker
                       name="sidebarBackground"
@@ -201,12 +206,12 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar text color</h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">{t("sidebar_text_color")}</h3>
               <div className="w-full">
                 <Controller
                   control={control}
                   name="sidebarText"
-                  rules={{ ...inputRules, required: "Sidebar text color is required" }}
+                  rules={{ ...inputRules, required: t("sidebar_text_color_is_required") }}
                   render={({ field: { value, onChange } }) => (
                     <InputColorPicker
                       name="sidebarText"
@@ -230,7 +235,7 @@ export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((pro
       </div>
       <div className="mt-5 flex justify-end gap-2">
         <Button variant="primary" type="submit" loading={isSubmitting}>
-          {isSubmitting ? "Creating Theme..." : "Set Theme"}
+          {isSubmitting ? t("creating_theme") : t("set_theme")}
         </Button>
       </div>
     </form>
diff --git a/web/core/components/core/theme/theme-switch.tsx b/web/core/components/core/theme/theme-switch.tsx
index b79e2104e..1a188fa03 100644
--- a/web/core/components/core/theme/theme-switch.tsx
+++ b/web/core/components/core/theme/theme-switch.tsx
@@ -1,9 +1,11 @@
 "use client";
 
 import { FC } from "react";
+// plane imports
+import { I_THEME_OPTION, THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // constants
 import { CustomSelect } from "@plane/ui";
-import { THEME_OPTIONS, I_THEME_OPTION } from "@/constants/themes";
 // ui
 
 type Props = {
@@ -13,7 +15,7 @@ type Props = {
 
 export const ThemeSwitch: FC<Props> = (props) => {
   const { value, onChange } = props;
-
+  const { t } = useTranslation();
   return (
     <CustomSelect
       value={value}
@@ -40,10 +42,10 @@ export const ThemeSwitch: FC<Props> = (props) => {
                 }}
               />
             </div>
-            {value.label}
+            {t(value.key)}
           </div>
         ) : (
-          "Select your theme"
+          t("select_your_theme")
         )
       }
       onChange={onChange}
@@ -72,7 +74,7 @@ export const ThemeSwitch: FC<Props> = (props) => {
                 }}
               />
             </div>
-            {themeOption.label}
+            {t(themeOption.key)}
           </div>
         </CustomSelect.Option>
       ))}
diff --git a/web/core/components/cycles/active-cycle/cycle-stats.tsx b/web/core/components/cycles/active-cycle/cycle-stats.tsx
index 6fcdaebd5..f932415c3 100644
--- a/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -6,17 +6,16 @@ import { observer } from "mobx-react";
 import { CalendarCheck } from "lucide-react";
 // headless ui
 import { Tab } from "@headlessui/react";
-// types
+// plane imports
+import { EIssuesStoreType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle, IIssueFilterOptions } from "@plane/types";
 // ui
 import { Tooltip, Loader, PriorityIcon, Avatar } from "@plane/ui";
 // components
 import { SingleProgressStats } from "@/components/core";
 import { StateDropdown } from "@/components/dropdowns";
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EIssuesStoreType } from "@/constants/issue";
+import { SimpleEmptyState } from "@/components/empty-state";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate, renderFormattedDateWithoutYear } from "@/helpers/date-time.helper";
@@ -26,6 +25,7 @@ import { useIssueDetail, useIssues } from "@/hooks/store";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import useLocalStorage from "@/hooks/use-local-storage";
 // plane web components
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { IssueIdentifier } from "@/plane-web/components/issues";
 // store
 import { ActiveCycleIssueDetails } from "@/store/issue/cycle";
@@ -41,11 +41,18 @@ export type ActiveCycleStatsProps = {
 
 export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
   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);
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const priorityResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/priority" });
+  const assigneesResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/assignee" });
+  const labelsResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/label" });
 
   const currentValue = (tab: string | null) => {
     switch (tab) {
@@ -119,7 +126,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
               )
             }
           >
-            Priority Issues
+            {t("project_cycles.active_cycle.priority_issue")}
           </Tab>
           <Tab
             className={({ selected }) =>
@@ -132,7 +139,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
               )
             }
           >
-            Assignees
+            {t("project_cycles.active_cycle.assignees")}
           </Tab>
           <Tab
             className={({ selected }) =>
@@ -145,7 +152,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
               )
             }
           >
-            Labels
+            {t("project_cycles.active_cycle.labels")}
           </Tab>
         </Tab.List>
 
@@ -231,10 +238,9 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                   </>
                 ) : (
                   <div className="flex items-center justify-center h-full w-full">
-                    <EmptyState
-                      type={EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE}
-                      layout="screen-simple"
-                      size="sm"
+                    <SimpleEmptyState
+                      title={t("active_cycle.empty_state.priority_issue.title")}
+                      assetPath={priorityResolvedPath}
                     />
                   </div>
                 )
@@ -283,7 +289,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                             <div className="h-5 w-5 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
                               <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                             </div>
-                            <span>No assignee</span>
+                            <span>{t("no_assignee")}</span>
                           </div>
                         }
                         completed={assignee.completed_issues}
@@ -293,10 +299,9 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                 })
               ) : (
                 <div className="flex items-center justify-center h-full w-full">
-                  <EmptyState
-                    type={EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE}
-                    layout="screen-simple"
-                    size="sm"
+                  <SimpleEmptyState
+                    title={t("active_cycle.empty_state.assignee.title")}
+                    assetPath={assigneesResolvedPath}
                   />
                 </div>
               )
@@ -315,14 +320,14 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                   <SingleProgressStats
                     key={label.label_id ?? `no-label-${index}`}
                     title={
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-2 truncate">
                         <span
-                          className="block h-3 w-3 rounded-full"
+                          className="block h-3 w-3 rounded-full flex-shrink-0"
                           style={{
                             backgroundColor: label.color ?? "#000000",
                           }}
                         />
-                        <span className="text-xs">{label.label_name ?? "No labels"}</span>
+                        <span className="text-xs text-ellipsis truncate">{label.label_name ?? "No labels"}</span>
                       </div>
                     }
                     completed={label.completed_issues}
@@ -336,7 +341,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                 ))
               ) : (
                 <div className="flex items-center justify-center h-full w-full">
-                  <EmptyState type={EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE} layout="screen-simple" size="sm" />
+                  <SimpleEmptyState title={t("active_cycle.empty_state.label.title")} assetPath={labelsResolvedPath} />
                 </div>
               )
             ) : (
diff --git a/web/core/components/cycles/active-cycle/productivity.tsx b/web/core/components/cycles/active-cycle/productivity.tsx
index 74957af03..613355c7e 100644
--- a/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/web/core/components/cycles/active-cycle/productivity.tsx
@@ -1,16 +1,17 @@
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { ICycle, TCycleEstimateType } from "@plane/types";
 import { Loader } from "@plane/ui";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
-import { EmptyState } from "@/components/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 // constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { useCycle, useProjectEstimates } from "@/hooks/store";
+import { useCycle } from "@/hooks/store";
 // plane web constants
-import { EEstimateSystem } from "@/plane-web/constants/estimates";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { EstimateTypeDropdown } from "../dropdowns/estimate-type-dropdown";
 
 export type ActiveCycleProductivityProps = {
@@ -21,11 +22,13 @@ export type ActiveCycleProductivityProps = {
 
 export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observer((props) => {
   const { workspaceSlug, projectId, cycle } = props;
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { getEstimateTypeByCycleId, setEstimateType } = useCycle();
-
   // derived values
   const estimateType: TCycleEstimateType = (cycle && getEstimateTypeByCycleId(cycle.id)) || "issues";
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/chart" });
 
   const onChange = async (value: TCycleEstimateType) => {
     if (!workspaceSlug || !projectId || !cycle || !cycle.id) return;
@@ -40,7 +43,9 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
     <div className="flex flex-col min-h-[17rem] gap-5 px-3.5 py-4 bg-custom-background-100 border border-custom-border-200 rounded-lg">
       <div className="relative flex items-center justify-between gap-4">
         <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle?.id}`}>
-          <h3 className="text-base text-custom-text-300 font-semibold">Issue burndown</h3>
+          <h3 className="text-base text-custom-text-300 font-semibold">
+            {t("project_cycles.active_cycle.issue_burndown")}
+          </h3>
         </Link>
         <EstimateTypeDropdown value={estimateType} onChange={onChange} cycleId={cycle.id} projectId={projectId} />
       </div>
@@ -53,17 +58,17 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
                 <div className="flex items-center gap-3 text-custom-text-300">
                   <div className="flex items-center justify-center gap-1">
                     <span className="h-2 w-2 rounded-full bg-[#A9BBD0]" />
-                    <span>Ideal</span>
+                    <span>{t("project_cycles.active_cycle.ideal")}</span>
                   </div>
                   <div className="flex items-center justify-center gap-1">
                     <span className="h-2 w-2 rounded-full bg-[#4C8FFF]" />
-                    <span>Current</span>
+                    <span>{t("project_cycles.active_cycle.current")}</span>
                   </div>
                 </div>
                 {estimateType === "points" ? (
                   <span>{`Pending points - ${cycle.backlog_estimate_points + cycle.unstarted_estimate_points + cycle.started_estimate_points}`}</span>
                 ) : (
-                  <span>{`Pending issues - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}</span>
+                  <span>{`Pending work items - ${cycle.backlog_issues + cycle.unstarted_issues + cycle.started_issues}`}</span>
                 )}
               </div>
 
@@ -84,7 +89,7 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
                         startDate={cycle.start_date ?? ""}
                         endDate={cycle.end_date ?? ""}
                         totalIssues={cycle.total_issues || 0}
-                        plotTitle={"issues"}
+                        plotTitle={"work items"}
                       />
                     )}
                   </Fragment>
@@ -95,7 +100,7 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
         ) : (
           <>
             <div className="flex items-center justify-center h-full w-full">
-              <EmptyState type={EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE} layout="screen-simple" size="sm" />
+              <SimpleEmptyState title={t("active_cycle.empty_state.chart.title")} assetPath={resolvedPath} />
             </div>
           </>
         )}
diff --git a/web/core/components/cycles/active-cycle/progress.tsx b/web/core/components/cycles/active-cycle/progress.tsx
index f75c51526..c2f0174f6 100644
--- a/web/core/components/cycles/active-cycle/progress.tsx
+++ b/web/core/components/cycles/active-cycle/progress.tsx
@@ -2,17 +2,16 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-// types
+// plane package imports
+import { PROGRESS_STATE_GROUPS_DETAILS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle, IIssueFilterOptions } from "@plane/types";
-// ui
 import { LinearProgressIndicator, Loader } from "@plane/ui";
 // components
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { PROGRESS_STATE_GROUPS_DETAILS } from "@/constants/common";
-import { EmptyStateType } from "@/constants/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 // hooks
 import { useProjectState } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export type ActiveCycleProgressProps = {
   cycle: ICycle | null;
@@ -23,9 +22,10 @@ export type ActiveCycleProgressProps = {
 
 export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props) => {
   const { handleFiltersUpdate, cycle } = props;
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { groupedProjectStates } = useProjectState();
-
   // derived values
   const progressIndicatorData = PROGRESS_STATE_GROUPS_DETAILS.map((group, index) => ({
     id: index,
@@ -41,16 +41,17 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
         backlog: cycle?.backlog_issues,
       }
     : {};
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/active-cycle/progress" });
 
   return cycle && cycle.hasOwnProperty("started_issues") ? (
     <div className="flex flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-custom-background-100 border border-custom-border-200 rounded-lg">
       <div className="flex flex-col gap-3">
         <div className="flex items-center justify-between gap-4">
-          <h3 className="text-base text-custom-text-300 font-semibold">Progress</h3>
+          <h3 className="text-base text-custom-text-300 font-semibold">{t("project_cycles.active_cycle.progress")}</h3>
           {cycle.total_issues > 0 && (
             <span className="flex gap-1 text-sm text-custom-text-400 font-medium whitespace-nowrap rounded-sm px-3 py-1 ">
               {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
-                cycle.completed_issues + cycle.cancelled_issues > 1 ? "Issues" : "Issue"
+                cycle.completed_issues + cycle.cancelled_issues > 1 ? "Work items" : "Work item"
               } closed`}
             </span>
           )}
@@ -83,7 +84,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
                       <span className="text-custom-text-300 capitalize font-medium w-16">{group}</span>
                     </div>
                     <span className="text-custom-text-300">{`${groupedIssues[group]} ${
-                      groupedIssues[group] > 1 ? "Issues" : "Issue"
+                      groupedIssues[group] > 1 ? "Work items" : "Work item"
                     }`}</span>
                   </div>
                 </div>
@@ -94,7 +95,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
             <span className="flex items-center gap-2 text-sm text-custom-text-300">
               <span>
                 {`${cycle.cancelled_issues} cancelled ${
-                  cycle.cancelled_issues > 1 ? "issues are" : "issue is"
+                  cycle.cancelled_issues > 1 ? "work items are" : "work item is"
                 } excluded from this report.`}{" "}
               </span>
             </span>
@@ -102,7 +103,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
         </div>
       ) : (
         <div className="flex items-center justify-center h-full w-full">
-          <EmptyState type={EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE} layout="screen-simple" size="sm" />
+          <SimpleEmptyState title={t("active_cycle.empty_state.progress.title")} assetPath={resolvedPath} />
         </div>
       )}
     </div>
diff --git a/web/core/components/cycles/active-cycle/use-cycles-details.ts b/web/core/components/cycles/active-cycle/use-cycles-details.ts
index cd148705b..2bfe9951e 100644
--- a/web/core/components/cycles/active-cycle/use-cycles-details.ts
+++ b/web/core/components/cycles/active-cycle/use-cycles-details.ts
@@ -2,9 +2,9 @@ import { useCallback } from "react";
 import isEqual from "lodash/isEqual";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import { IIssueFilterOptions } from "@plane/types";
 import { CYCLE_ISSUES_WITH_PARAMS } from "@/constants/fetch-keys";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useCycle, useIssues } from "@/hooks/store";
 
 interface IActiveCycleDetails {
@@ -30,21 +30,23 @@ const useCyclesDetails = (props: IActiveCycleDetails) => {
 
   // fetch cycle details
   useSWR(
-    workspaceSlug && projectId && cycle ? `PROJECT_ACTIVE_CYCLE_${projectId}_PROGRESS` : null,
-    workspaceSlug && projectId && cycle ? () => fetchActiveCycleProgress(workspaceSlug, projectId, cycle.id) : null,
+    workspaceSlug && projectId && cycle?.id ? `PROJECT_ACTIVE_CYCLE_${projectId}_PROGRESS` : null,
+    workspaceSlug && projectId && cycle?.id ? () => fetchActiveCycleProgress(workspaceSlug, projectId, cycle.id) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   useSWR(
-    workspaceSlug && projectId && cycle && !cycle?.distribution ? `PROJECT_ACTIVE_CYCLE_${projectId}_DURATION` : null,
-    workspaceSlug && projectId && cycle && !cycle?.distribution
+    workspaceSlug && projectId && cycle?.id && !cycle?.distribution
+      ? `PROJECT_ACTIVE_CYCLE_${projectId}_DURATION`
+      : null,
+    workspaceSlug && projectId && cycle?.id && !cycle?.distribution
       ? () => fetchActiveCycleAnalytics(workspaceSlug, projectId, cycle.id, "issues")
       : null
   );
   useSWR(
-    workspaceSlug && projectId && cycle && !cycle?.estimate_distribution
+    workspaceSlug && projectId && cycle?.id && !cycle?.estimate_distribution
       ? `PROJECT_ACTIVE_CYCLE_${projectId}_ESTIMATE_DURATION`
       : null,
-    workspaceSlug && projectId && cycle && !cycle?.estimate_distribution
+    workspaceSlug && projectId && cycle?.id && !cycle?.estimate_distribution
       ? () => fetchActiveCycleAnalytics(workspaceSlug, projectId, cycle.id, "points")
       : null
   );
diff --git a/web/core/components/cycles/analytics-sidebar/issue-progress.tsx b/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
index d9725d1d6..47f9df5e5 100644
--- a/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
+++ b/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -7,11 +7,12 @@ import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { ChevronUp, ChevronDown } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle, IIssueFilterOptions, TCyclePlotType, TProgressSnapshot } from "@plane/types";
 // components
 import { CycleProgressStats } from "@/components/cycles";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { getDate } from "@/helpers/date-time.helper";
 // hooks
@@ -30,7 +31,7 @@ type Options = {
 };
 
 export const cycleEstimateOptions: Options[] = [
-  { value: "issues", label: "Issues" },
+  { value: "issues", label: "Work items" },
   { value: "points", label: "Points" },
 ];
 export const cycleChartOptions: Options[] = [
@@ -63,6 +64,7 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
   const {
     issuesFilter: { issueFilters, updateFilters },
   } = useIssues(EIssuesStoreType.CYCLE);
+  const { t } = useTranslation();
 
   // derived values
   const cycleDetails = validateCycleSnapshot(getCycleById(cycleId));
@@ -138,7 +140,9 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
             {isCycleDateValid ? (
               <div className="relative w-full flex justify-between items-center gap-2">
                 <Disclosure.Button className="relative flex items-center gap-2 w-full">
-                  <div className="font-medium text-custom-text-200 text-sm">Progress</div>
+                  <div className="font-medium text-custom-text-200 text-sm">
+                    {t("project_cycles.active_cycle.progress")}
+                  </div>
                 </Disclosure.Button>
                 <Disclosure.Button className="ml-auto">
                   {open ? (
@@ -150,7 +154,9 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
               </div>
             ) : (
               <div className="relative w-full flex justify-between items-center gap-2">
-                <div className="font-medium text-custom-text-200 text-sm">Progress</div>
+                <div className="font-medium text-custom-text-200 text-sm">
+                  {t("project_cycles.active_cycle.progress")}
+                </div>
               </div>
             )}
 
diff --git a/web/core/components/cycles/analytics-sidebar/progress-stats.tsx b/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
index 069ccb2ff..4f13b8612 100644
--- a/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
+++ b/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
@@ -4,6 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { Tab } from "@headlessui/react";
+import { useTranslation } from "@plane/i18n";
 import {
   IIssueFilterOptions,
   IIssueFilters,
@@ -73,6 +74,7 @@ type TStateStatComponent = {
 
 export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) => {
   const { distribution, isEditable, filters, handleFiltersUpdate } = props;
+  const { t } = useTranslation();
   return (
     <div>
       {distribution && distribution.length > 0 ? (
@@ -104,7 +106,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
                     <div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
                       <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                     </div>
-                    <span>No assignee</span>
+                    <span>{t("no_assignee")}</span>
                   </div>
                 }
                 completed={assignee?.completed ?? 0}
@@ -117,7 +119,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
           <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
             <Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
           </div>
-          <h6 className="text-base text-custom-text-300">No assignees yet</h6>
+          <h6 className="text-base text-custom-text-300">{t("no_assignee")}</h6>
         </div>
       )}
     </div>
@@ -126,6 +128,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
 
 export const LabelStatComponent = observer((props: TLabelStatComponent) => {
   const { distribution, isEditable, filters, handleFiltersUpdate } = props;
+  const { t } = useTranslation();
   return (
     <div>
       {distribution && distribution.length > 0 ? (
@@ -135,14 +138,14 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
               <SingleProgressStats
                 key={label.id}
                 title={
-                  <div className="flex items-center gap-2">
+                  <div className="flex items-center gap-2 truncate">
                     <span
-                      className="block h-3 w-3 rounded-full"
+                      className="block h-3 w-3 rounded-full flex-shrink-0"
                       style={{
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-xs">{label.title ?? "No labels"}</span>
+                    <span className="text-xs text-ellipsis truncate">{label.title ?? t("no_labels_yet")}</span>
                   </div>
                 }
                 completed={label.completed}
@@ -165,7 +168,7 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-xs">{label.title ?? "No labels"}</span>
+                    <span className="text-xs">{label.title ?? t("no_labels_yet")}</span>
                   </div>
                 }
                 completed={label.completed}
@@ -179,7 +182,7 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
           <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
             <Image src={emptyLabel} className="h-12 w-12" alt="empty label" />
           </div>
-          <h6 className="text-base text-custom-text-300">No labels yet</h6>
+          <h6 className="text-base text-custom-text-300">{t("no_labels_yet")}</h6>
         </div>
       )}
     </div>
@@ -222,15 +225,15 @@ export const StateStatComponent = observer((props: TStateStatComponent) => {
 const progressStats = [
   {
     key: "stat-states",
-    title: "States",
+    i18n_title: "common.states",
   },
   {
     key: "stat-assignees",
-    title: "Assignees",
+    i18n_title: "common.assignees",
   },
   {
     key: "stat-labels",
-    title: "Labels",
+    i18n_title: "common.labels",
   },
 ];
 
@@ -267,6 +270,7 @@ export const CycleProgressStats: FC<TCycleProgressStats> = observer((props) => {
     `cycle-analytics-tab-${cycleId}`,
     "stat-assignees"
   );
+  const { t } = useTranslation();
   // derived values
   const currentTabIndex = (tab: string): number => progressStats.findIndex((stat) => stat.key === tab);
 
@@ -337,7 +341,7 @@ export const CycleProgressStats: FC<TCycleProgressStats> = observer((props) => {
               key={stat.key}
               onClick={() => setCycleTab(stat.key)}
             >
-              {stat.title}
+              {t(stat.i18n_title)}
             </Tab>
           ))}
         </Tab.List>
diff --git a/web/core/components/cycles/analytics-sidebar/root.tsx b/web/core/components/cycles/analytics-sidebar/root.tsx
index fd8c984a6..b709c0e63 100644
--- a/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -2,7 +2,6 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // ui
 import { Loader } from "@plane/ui";
 // components
@@ -13,19 +12,19 @@ import useCyclesDetails from "../active-cycle/use-cycles-details";
 type Props = {
   handleClose: () => void;
   isArchived?: boolean;
-  cycleId?: string;
+  cycleId: string;
+  projectId: string;
+  workspaceSlug: string;
 };
 
 export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
-  const { handleClose, isArchived } = props;
-  // router
-  const { workspaceSlug, projectId, cycleId } = useParams();
+  const { handleClose, isArchived, projectId, workspaceSlug, cycleId } = props;
 
   // store hooks
   const { cycle: cycleDetails } = useCyclesDetails({
-    workspaceSlug: workspaceSlug.toString(),
-    projectId: projectId.toString(),
-    cycleId: cycleId?.toString() || props.cycleId,
+    workspaceSlug,
+    projectId,
+    cycleId,
   });
 
   if (!cycleDetails)
@@ -47,21 +46,17 @@ export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
     <div className="relative pb-2">
       <div className="flex flex-col gap-5 w-full">
         <CycleSidebarHeader
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
           cycleDetails={cycleDetails}
           isArchived={isArchived}
           handleClose={handleClose}
         />
-        <CycleSidebarDetails projectId={projectId.toString()} cycleDetails={cycleDetails} />
+        <CycleSidebarDetails projectId={projectId} cycleDetails={cycleDetails} />
       </div>
 
       {workspaceSlug && projectId && cycleDetails?.id && (
-        <CycleAnalyticsProgress
-          workspaceSlug={workspaceSlug.toString()}
-          projectId={projectId.toString()}
-          cycleId={cycleDetails?.id}
-        />
+        <CycleAnalyticsProgress workspaceSlug={workspaceSlug} projectId={projectId} cycleId={cycleDetails?.id} />
       )}
     </div>
   );
diff --git a/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx b/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
index c60b5dae9..eaa460f7a 100644
--- a/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
+++ b/web/core/components/cycles/analytics-sidebar/sidebar-details.tsx
@@ -4,6 +4,7 @@ import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { LayersIcon, SquareUser, Users } from "lucide-react";
 // plane types
+import { useTranslation } from "@plane/i18n";
 import { ICycle } from "@plane/types";
 // plane ui
 import { Avatar, AvatarGroup, TextArea } from "@plane/ui";
@@ -24,6 +25,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
   // hooks
   const { getUserDetails } = useMember();
   const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
+  const { t } = useTranslation();
 
   const areEstimateEnabled = projectId && areEstimateEnabledByProjectId(projectId.toString());
   const cycleStatus = cycleDetails?.status?.toLocaleLowerCase();
@@ -32,10 +34,10 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
   const issueCount =
     isCompleted && !isEmpty(cycleDetails?.progress_snapshot)
       ? cycleDetails?.progress_snapshot?.total_issues === 0
-        ? "0 Issue"
+        ? `0 ${t("common.work_item")}`
         : `${cycleDetails?.progress_snapshot?.completed_issues}/${cycleDetails?.progress_snapshot?.total_issues}`
       : cycleDetails?.total_issues === 0
-        ? "0 Issue"
+        ? `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;
@@ -51,10 +53,10 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
   const issueEstimatePointCount =
     isCompleted && !isEmpty(cycleDetails?.progress_snapshot)
       ? cycleDetails?.progress_snapshot.total_issues === 0
-        ? "0 Issue"
+        ? `0 ${t("common.work_item")}`
         : `${cycleDetails?.progress_snapshot.completed_estimate_points}/${cycleDetails?.progress_snapshot.total_estimate_points}`
       : cycleDetails?.total_issues === 0
-        ? "0 Issue"
+        ? `0 ${t("common.work_item")}`
         : `${cycleDetails?.completed_estimate_points}/${cycleDetails?.total_estimate_points}`;
   return (
     <div className="flex flex-col gap-5 w-full">
@@ -70,7 +72,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
         <div className="flex items-center justify-start gap-1">
           <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
             <SquareUser className="h-4 w-4" />
-            <span className="text-base">Lead</span>
+            <span className="text-base">{t("lead")}</span>
           </div>
           <div className="flex w-3/5 items-center rounded-sm">
             <div className="flex items-center gap-2.5">
@@ -83,7 +85,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
         <div className="flex items-center justify-start gap-1">
           <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
             <Users className="h-4 w-4" />
-            <span className="text-base">Members</span>
+            <span className="text-base">{t("members")}</span>
           </div>
           <div className="flex w-3/5 items-center rounded-sm">
             <div className="flex items-center gap-2.5">
@@ -104,7 +106,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
                   </AvatarGroup>
                 </>
               ) : (
-                <span className="px-1.5 text-sm text-custom-text-300">No assignees</span>
+                <span className="px-1.5 text-sm text-custom-text-300">{t("no_assignee")}</span>
               )}
             </div>
           </div>
@@ -113,7 +115,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
         <div className="flex items-center justify-start gap-1">
           <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
             <LayersIcon className="h-4 w-4" />
-            <span className="text-base">Issues</span>
+            <span className="text-base">{t("work_items")}</span>
           </div>
           <div className="flex w-3/5 items-center">
             <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
@@ -127,7 +129,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
               <LayersIcon className="h-4 w-4" />
-              <span className="text-base">Points</span>
+              <span className="text-base">{t("points")}</span>
             </div>
             <div className="flex w-3/5 items-center">
               <span className="px-1.5 text-sm text-custom-text-300">{issueEstimatePointCount}</span>
diff --git a/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx b/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
index af645804e..c8d4cc487 100644
--- a/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
+++ b/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -5,14 +5,13 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { ArchiveIcon, ArchiveRestoreIcon, ChevronRight, EllipsisIcon, LinkIcon, Trash2 } from "lucide-react";
 // types
+import { CYCLE_STATUS, CYCLE_UPDATED, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle } from "@plane/types";
 // ui
 import { CustomMenu, setToast, TOAST_TYPE } from "@plane/ui";
 // components
 import { DateRangeDropdown } from "@/components/dropdowns";
-// constants
-import { CYCLE_STATUS } from "@/constants/cycle";
-import { CYCLE_UPDATED } from "@/constants/event-tracker";
 // helpers
 import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
@@ -20,7 +19,6 @@ import { copyUrlToClipboard } from "@/helpers/string.helper";
 import { useCycle, useEventTracker, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // services
 import { CycleService } from "@/services/cycle.service";
 // local components
@@ -53,6 +51,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
   const { allowPermissions } = useUserPermissions();
   const { updateCycleDetails, restoreCycle } = useCycle();
   const { setTrackElement, captureCycleEvent } = useEventTracker();
+  const { t } = useTranslation();
 
   // form info
   const { control, reset } = useForm({
@@ -71,16 +70,16 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Restore success",
-          message: "Your cycle can be found in project cycles.",
+          title: t("project_cycles.action.restore.success.title"),
+          message: t("project_cycles.action.restore.success.description"),
         });
         router.push(`/${workspaceSlug.toString()}/projects/${projectId.toString()}/archives/cycles`);
       })
       .catch(() =>
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Cycle could not be restored. Please try again.",
+          title: t("project_cycles.action.restore.failed.title"),
+          message: t("project_cycles.action.restore.failed.description"),
         })
       );
   };
@@ -90,14 +89,14 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Link Copied!",
-          message: "Cycle link copied to clipboard.",
+          title: t("common.link_copied"),
+          message: t("common.link_copied_to_clipboard"),
         });
       })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Some error occurred",
+          title: t("common.errors.default.message"),
         });
       });
   };
@@ -167,15 +166,14 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
       submitChanges(payload, "date_range");
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Success!",
-        message: "Cycle updated successfully.",
+        title: t("project_cycles.action.update.success.title"),
+        message: t("project_cycles.action.update.success.description"),
       });
     } 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, you can do that by removing both the dates.",
+        title: t("project_cycles.action.update.failed.title"),
+        message: t("project_cycles.action.update.error.already_exists"),
       });
       reset({ ...cycleDetails });
     }
@@ -232,15 +230,15 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
                   {isCompleted ? (
                     <div className="flex items-center gap-2">
                       <ArchiveIcon className="h-3 w-3" />
-                      Archive cycle
+                      {t("common.archive")}
                     </div>
                   ) : (
                     <div className="flex items-start gap-2">
                       <ArchiveIcon className="h-3 w-3" />
                       <div className="-mt-1">
-                        <p>Archive cycle</p>
+                        <p>{t("common.archive")}</p>
                         <p className="text-xs text-custom-text-400">
-                          Only completed cycles <br /> can be archived.
+                          {t("project_cycles.only_completed_cycles_can_be_archived")}
                         </p>
                       </div>
                     </div>
@@ -251,7 +249,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
                 <CustomMenu.MenuItem onClick={handleRestoreCycle}>
                   <span className="flex items-center justify-start gap-2">
                     <ArchiveRestoreIcon className="h-3 w-3" />
-                    <span>Restore cycle</span>
+                    <span>{t("project_cycles.action.restore.title")}</span>
                   </span>
                 </CustomMenu.MenuItem>
               )}
@@ -264,7 +262,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
                 >
                   <span className="flex items-center justify-start gap-2">
                     <Trash2 className="h-3 w-3" />
-                    <span>Delete cycle</span>
+                    <span>{t("delete")}</span>
                   </span>
                 </CustomMenu.MenuItem>
               )}
@@ -283,7 +281,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
                 backgroundColor: `${currentCycle.color}20`,
               }}
             >
-              {currentCycle.title}
+              {t(currentCycle.i18n_title)}
             </span>
           )}
         </div>
diff --git a/web/core/components/cycles/applied-filters/date.tsx b/web/core/components/cycles/applied-filters/date.tsx
index 488eef12c..c2ee47be5 100644
--- a/web/core/components/cycles/applied-filters/date.tsx
+++ b/web/core/components/cycles/applied-filters/date.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // helpers
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
 // constants
diff --git a/web/core/components/cycles/applied-filters/root.tsx b/web/core/components/cycles/applied-filters/root.tsx
index 9fa74c393..b53f0ab4d 100644
--- a/web/core/components/cycles/applied-filters/root.tsx
+++ b/web/core/components/cycles/applied-filters/root.tsx
@@ -1,12 +1,13 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TCycleFilters } from "@plane/types";
 // hooks
 import { Tag } from "@plane/ui";
 import { AppliedDateFilters, AppliedStatusFilters } from "@/components/cycles";
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
 import { useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 // components
 // helpers
@@ -26,6 +27,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
   // store hooks
   const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
 
   if (!appliedFilters) return null;
 
@@ -77,7 +79,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
       {isEditingAllowed && (
         <button type="button" onClick={handleClearAllFilters}>
           <Tag>
-            Clear all
+            {t("common.clear_all")}
             <X size={12} strokeWidth={2} />
           </Tag>
         </button>
diff --git a/web/core/components/cycles/applied-filters/status.tsx b/web/core/components/cycles/applied-filters/status.tsx
index d46b56503..7bb219251 100644
--- a/web/core/components/cycles/applied-filters/status.tsx
+++ b/web/core/components/cycles/applied-filters/status.tsx
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
-import { CYCLE_STATUS } from "@/constants/cycle";
+import { CYCLE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { cn } from "@/helpers/common.helper";
 
 type Props = {
@@ -11,6 +12,7 @@ type Props = {
 
 export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
 
   return (
     <>
@@ -25,7 +27,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
               statusDetails?.textColor
             )}
           >
-            {statusDetails?.title}
+            {statusDetails && t(statusDetails?.i18n_title)}
             {editable && (
               <button
                 type="button"
diff --git a/web/core/components/cycles/archived-cycles/root.tsx b/web/core/components/cycles/archived-cycles/root.tsx
index 06f61b66f..165b5e4aa 100644
--- a/web/core/components/cycles/archived-cycles/root.tsx
+++ b/web/core/components/cycles/archived-cycles/root.tsx
@@ -2,28 +2,31 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// types
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { TCycleFilters } from "@plane/types";
 // components
 import { ArchivedCyclesView, CycleAppliedFiltersList } from "@/components/cycles";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { CycleModuleListLayout } from "@/components/ui";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useCycle, useCycleFilter } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
   // 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;
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/archived/empty-cycles" });
 
   useSWR(
     workspaceSlug && projectId ? `ARCHIVED_CYCLES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
@@ -64,7 +67,11 @@ export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
       )}
       {totalArchivedCycles === 0 ? (
         <div className="h-full place-items-center">
-          <EmptyState type={EmptyStateType.PROJECT_ARCHIVED_NO_CYCLES} />
+          <DetailedEmptyState
+            title={t("project_cycles.empty_state.archived.title")}
+            description={t("project_cycles.empty_state.archived.description")}
+            assetPath={resolvedPath}
+          />
         </div>
       ) : (
         <div className="relative h-full w-full overflow-auto">
diff --git a/web/core/components/cycles/cycle-peek-overview.tsx b/web/core/components/cycles/cycle-peek-overview.tsx
index 759569cfa..187425b8d 100644
--- a/web/core/components/cycles/cycle-peek-overview.tsx
+++ b/web/core/components/cycles/cycle-peek-overview.tsx
@@ -9,12 +9,13 @@ import { useAppRouter } from "@/hooks/use-app-router";
 import { CycleDetailsSidebar } from "./";
 
 type Props = {
-  projectId: string;
+  projectId?: string;
   workspaceSlug: string;
   isArchived?: boolean;
 };
 
-export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
+export const CyclePeekOverview: React.FC<Props> = observer((props) => {
+  const { projectId: propsProjectId, workspaceSlug, isArchived } = props;
   // router
   const router = useAppRouter();
   const pathname = usePathname();
@@ -23,22 +24,25 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
   // refs
   const ref = React.useRef(null);
   // store hooks
-  const { fetchCycleDetails, fetchArchivedCycleDetails } = useCycle();
+  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}`);
+    router.push(`${pathname}?${query}`, {}, { showProgressBar: false });
   };
 
   useEffect(() => {
-    if (!peekCycle) return;
+    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 && (
+      {peekCycle && projectId && (
         <div
           ref={ref}
           className="flex h-full w-full max-w-[21.5rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-custom-border-100 bg-custom-sidebar-background-100 px-4 duration-300 fixed md:relative right-0 z-[9]"
@@ -47,7 +51,13 @@ export const CyclePeekOverview: React.FC<Props> = observer(({ projectId, workspa
               "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} cycleId={peekCycle} />
+          <CycleDetailsSidebar
+            handleClose={handleClose}
+            isArchived={isArchived}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+            cycleId={peekCycle}
+          />
         </div>
       )}
     </>
diff --git a/web/core/components/cycles/cycles-view-header.tsx b/web/core/components/cycles/cycles-view-header.tsx
index c3139bc87..fe5b942db 100644
--- a/web/core/components/cycles/cycles-view-header.tsx
+++ b/web/core/components/cycles/cycles-view-header.tsx
@@ -5,6 +5,7 @@ import { ListFilter, Search, X } from "lucide-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
+import { useTranslation } from "@plane/i18n";
 import { TCycleFilters } from "@plane/types";
 // components
 import { CycleFiltersSelection } from "@/components/cycles";
@@ -25,6 +26,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
   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
@@ -114,7 +116,7 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
       </div>
       <FiltersDropdown
         icon={<ListFilter className="h-3 w-3" />}
-        title="Filters"
+        title={t("common.filters")}
         placement="bottom-end"
         isFiltersApplied={isFiltersApplied}
       >
diff --git a/web/core/components/cycles/cycles-view.tsx b/web/core/components/cycles/cycles-view.tsx
index dea455412..ef6c9d136 100644
--- a/web/core/components/cycles/cycles-view.tsx
+++ b/web/core/components/cycles/cycles-view.tsx
@@ -2,6 +2,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 // components
+import { useTranslation } from "@plane/i18n";
 import { CyclesList } from "@/components/cycles";
 // ui
 import { CycleModuleListLayout } from "@/components/ui";
@@ -21,6 +22,7 @@ export const CyclesView: FC<ICyclesView> = observer((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);
@@ -39,11 +41,11 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
             className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
             alt="No matching cycles"
           />
-          <h5 className="mb-1 mt-7 text-xl font-medium">No matching cycles</h5>
+          <h5 className="mb-1 mt-7 text-xl font-medium">{t("project_cycles.no_matching_cycles")}</h5>
           <p className="text-base text-custom-text-400">
             {searchQuery.trim() === ""
-              ? "Remove the filters to see all cycles"
-              : "Remove the search criteria to see all cycles"}
+              ? t("project_cycles.remove_filters_to_see_all_cycles")
+              : t("project_cycles.remove_search_criteria_to_see_all_cycles")}
           </p>
         </div>
       </div>
diff --git a/web/core/components/cycles/delete-modal.tsx b/web/core/components/cycles/delete-modal.tsx
index f89a1cea7..210b1a13a 100644
--- a/web/core/components/cycles/delete-modal.tsx
+++ b/web/core/components/cycles/delete-modal.tsx
@@ -4,12 +4,12 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 // types
+import { PROJECT_ERROR_MESSAGES, CYCLE_DELETED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { CYCLE_DELETED } from "@/constants/event-tracker";
-import { PROJECT_ERROR_MESSAGES } from "@/constants/project";
 // hooks
 import { useEventTracker, useCycle } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -29,6 +29,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
   // store hooks
   const { captureCycleEvent } = useEventTracker();
   const { deleteCycle } = useCycle();
+  const { t } = useTranslation();
   // router
   const router = useAppRouter();
   const { cycleId } = useParams();
@@ -59,9 +60,9 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
             ? PROJECT_ERROR_MESSAGES.permissionError
             : PROJECT_ERROR_MESSAGES.cycleDeleteError;
           setToast({
-            title: currentError.title,
+            title: t(currentError.i18n_title),
             type: TOAST_TYPE.ERROR,
-            message: currentError.message,
+            message: currentError.i18n_message && t(currentError.i18n_message),
           });
           captureCycleEvent({
             eventName: CYCLE_DELETED,
diff --git a/web/core/components/cycles/dropdowns/filters/end-date.tsx b/web/core/components/cycles/dropdowns/filters/end-date.tsx
index e5b4a7a86..f9b7d2f37 100644
--- a/web/core/components/cycles/dropdowns/filters/end-date.tsx
+++ b/web/core/components/cycles/dropdowns/filters/end-date.tsx
@@ -1,11 +1,11 @@
 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";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+
 // helpers
 import { isInDateFormat } from "@/helpers/date-time.helper";
 
diff --git a/web/core/components/cycles/dropdowns/filters/start-date.tsx b/web/core/components/cycles/dropdowns/filters/start-date.tsx
index 9bfd8f2d8..eb2032edb 100644
--- a/web/core/components/cycles/dropdowns/filters/start-date.tsx
+++ b/web/core/components/cycles/dropdowns/filters/start-date.tsx
@@ -1,11 +1,11 @@
 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";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+
 // helpers
 import { isInDateFormat } from "@/helpers/date-time.helper";
 
@@ -17,7 +17,6 @@ type Props = {
 
 export const FilterStartDate: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleUpdate, searchQuery } = props;
-
   const [previewEnabled, setPreviewEnabled] = useState(true);
   const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
 
diff --git a/web/core/components/cycles/dropdowns/filters/status.tsx b/web/core/components/cycles/dropdowns/filters/status.tsx
index b2ca62b51..0e24a2a21 100644
--- a/web/core/components/cycles/dropdowns/filters/status.tsx
+++ b/web/core/components/cycles/dropdowns/filters/status.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { CYCLE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TCycleGroups } from "@plane/types";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
 // types
-import { CYCLE_STATUS } from "@/constants/cycle";
 // constants
 
 type Props = {
@@ -17,7 +18,8 @@ export const FilterStatus: React.FC<Props> = observer((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()));
 
@@ -36,7 +38,7 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
                 key={status.value}
                 isChecked={appliedFilters?.includes(status.value) ? true : false}
                 onClick={() => handleUpdate(status.value)}
-                title={status.title}
+                title={t(status.i18n_title)}
               />
             ))
           ) : (
diff --git a/web/core/components/cycles/form.tsx b/web/core/components/cycles/form.tsx
index 660d33cdb..c5c9c9186 100644
--- a/web/core/components/cycles/form.tsx
+++ b/web/core/components/cycles/form.tsx
@@ -2,14 +2,16 @@
 
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
 // types
+import { useTranslation } from "@plane/i18n";
 import { ICycle } from "@plane/types";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 // components
 import { DateRangeDropdown, ProjectDropdown } from "@/components/dropdowns";
 // constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { shouldRenderProject } from "@/helpers/project.helper";
@@ -34,6 +36,7 @@ const defaultValues: Partial<ICycle> = {
 
 export const CycleForm: React.FC<Props> = (props) => {
   const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data, isMobile = false } = props;
+  const { t } = useTranslation();
   // form data
   const {
     formState: { errors, isSubmitting, dirtyFields },
@@ -75,6 +78,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                       onChange(val);
                       setActiveProject(val);
                     }}
+                    multiple={false}
                     buttonVariant="border-with-text"
                     renderCondition={(project) => shouldRenderProject(project)}
                     tabIndex={getIndex("cover_image")}
@@ -83,7 +87,9 @@ export const CycleForm: React.FC<Props> = (props) => {
               )}
             />
           )}
-          <h3 className="text-xl font-medium text-custom-text-200">{status ? "Update" : "Create"} cycle</h3>
+          <h3 className="text-xl font-medium text-custom-text-200">
+            {status ? t("project_cycles.update_cycle") : t("project_cycles.create_cycle")}
+          </h3>
         </div>
         <div className="space-y-3">
           <div className="space-y-1">
@@ -91,17 +97,17 @@ export const CycleForm: React.FC<Props> = (props) => {
               name="name"
               control={control}
               rules={{
-                required: "Title is required",
+                required: t("title_is_required"),
                 maxLength: {
                   value: 255,
-                  message: "Title should be less than 255 characters",
+                  message: t("title_should_be_less_than_255_characters"),
                 },
               }}
               render={({ field: { value, onChange } }) => (
                 <Input
                   name="name"
                   type="text"
-                  placeholder="Title"
+                  placeholder={t("title")}
                   className="w-full text-base"
                   value={value}
                   inputSize="md"
@@ -121,7 +127,7 @@ export const CycleForm: React.FC<Props> = (props) => {
               render={({ field: { value, onChange } }) => (
                 <TextArea
                   name="description"
-                  placeholder="Description"
+                  placeholder={t("description")}
                   className="w-full text-base resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   value={value}
@@ -170,10 +176,16 @@ export const CycleForm: React.FC<Props> = (props) => {
       </div>
       <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          Cancel
+          {t("common.cancel")}
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
-          {data ? (isSubmitting ? "Updating" : "Update Cycle") : isSubmitting ? "Creating" : "Create Cycle"}
+          {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/web/core/components/cycles/list/cycle-list-item-action.tsx b/web/core/components/cycles/list/cycle-list-item-action.tsx
index 989e0436e..f44b9bd6c 100644
--- a/web/core/components/cycles/list/cycle-list-item-action.tsx
+++ b/web/core/components/cycles/list/cycle-list-item-action.tsx
@@ -1,31 +1,42 @@
 "use client";
 
-import React, { FC, MouseEvent, useEffect } from "react";
+import React, { FC, MouseEvent, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { usePathname, useSearchParams } from "next/navigation";
+import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, Users } from "lucide-react";
 // types
+import { CYCLE_FAVORITED, CYCLE_UNFAVORITED, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ICycle, TCycleGroups } from "@plane/types";
 // ui
-import { Avatar, AvatarGroup, FavoriteStar, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@plane/ui";
+import {
+  Avatar,
+  AvatarGroup,
+  FavoriteStar,
+  LayersIcon,
+  TOAST_TYPE,
+  Tooltip,
+  TransferIcon,
+  setPromiseToast,
+  setToast,
+} from "@plane/ui";
 // components
-import { CycleQuickActions } from "@/components/cycles";
+import { CycleQuickActions, TransferIssuesModal } from "@/components/cycles";
 import { DateRangeDropdown } from "@/components/dropdowns";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 // constants
-import { CYCLE_STATUS } from "@/constants/cycle";
-import { CYCLE_FAVORITED, CYCLE_UNFAVORITED } from "@/constants/event-tracker";
 // helpers
-import { findHowManyDaysLeft, getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
 import { generateQueryParams } from "@/helpers/router.helper";
 import { useCycle, useEventTracker, useMember, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web components
+import { CycleAdditionalActions } from "@/plane-web/components/cycles";
 // plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // services
 import { CycleService } from "@/services/cycle.service";
 
@@ -47,8 +58,13 @@ const defaultValues: Partial<ICycle> = {
 
 export const CycleListItemAction: FC<Props> = observer((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();
   // router
   const router = useAppRouter();
   const searchParams = useSearchParams();
@@ -67,13 +83,22 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
 
   // 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 isEditingAllowed = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    EUserPermissionsLevel.PROJECT
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
   );
   const renderIcon = Boolean(cycleDetails.start_date) || Boolean(cycleDetails.end_date);
-  const currentCycle = CYCLE_STATUS.find((status) => status.value === cycleStatus);
-  const daysLeft = findHowManyDaysLeft(cycleDetails.end_date) ?? 0;
 
   // handlers
   const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
@@ -91,14 +116,14 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
     );
 
     setPromiseToast(addToFavoritePromise, {
-      loading: "Adding cycle to favorites...",
+      loading: t("project_cycles.action.favorite.loading"),
       success: {
-        title: "Success!",
-        message: () => "Cycle added to favorites.",
+        title: t("project_cycles.action.favorite.success.title"),
+        message: () => t("project_cycles.action.favorite.success.description"),
       },
       error: {
-        title: "Error!",
-        message: () => "Couldn't add the cycle to favorites. Please try again.",
+        title: t("project_cycles.action.favorite.failed.title"),
+        message: () => t("project_cycles.action.favorite.failed.description"),
       },
     });
   };
@@ -120,14 +145,14 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
     });
 
     setPromiseToast(removeFromFavoritePromise, {
-      loading: "Removing cycle from favorites...",
+      loading: t("project_cycles.action.unfavorite.loading"),
       success: {
-        title: "Success!",
-        message: () => "Cycle removed from favorites.",
+        title: t("project_cycles.action.unfavorite.success.title"),
+        message: () => t("project_cycles.action.unfavorite.success.description"),
       },
       error: {
-        title: "Error!",
-        message: () => "Couldn't remove the cycle from favorites. Please try again.",
+        title: t("project_cycles.action.unfavorite.failed.title"),
+        message: () => t("project_cycles.action.unfavorite.failed.description"),
       },
     });
   };
@@ -141,7 +166,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
     try {
       const res = await cycleService.cycleDateCheck(workspaceSlug as string, projectId as string, payload);
       return res.status;
-    } catch (err) {
+    } catch {
       return false;
     }
   };
@@ -167,15 +192,14 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
       submitChanges(payload);
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Success!",
-        message: "Cycle updated successfully.",
+        title: t("project_cycles.action.update.success.title"),
+        message: t("project_cycles.action.update.success.description"),
       });
     } 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, you can do that by removing both the dates.",
+        title: t("project_cycles.action.update.failed.title"),
+        message: t("project_cycles.action.update.error.already_exists"),
       });
       reset({ ...cycleDetails });
     }
@@ -201,22 +225,47 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
 
     const query = generateQueryParams(searchParams, ["peekCycle"]);
     if (searchParams.has("peekCycle") && searchParams.get("peekCycle") === cycleId) {
-      router.push(`${pathname}?${query}`);
+      router.push(`${pathname}?${query}`, {}, { showProgressBar: false });
     } else {
-      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`);
+      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`, {}, { showProgressBar: false });
     }
   };
 
   return (
     <>
+      <TransferIssuesModal
+        handleClose={() => setTransferIssuesModal(false)}
+        isOpen={transferIssuesModal}
+        cycleId={cycleId.toString()}
+      />
       <button
         onClick={openCycleOverview}
         className={`z-[1] flex text-custom-primary-200 text-xs gap-1 flex-shrink-0 ${isMobile || (isActive && !searchParams.has("peekCycle")) ? "flex" : "hidden group-hover:flex"}`}
       >
         <Eye className="h-4 w-4 my-auto  text-custom-primary-200" />
-        <span>More details</span>
+        <span>{t("project_cycles.more_details")}</span>
       </button>
 
+      {showIssueCount && (
+        <div className="flex items-center gap-1">
+          <LayersIcon className="h-4 w-4 text-custom-text-300" />
+          <span className="text-xs text-custom-text-300">{cycleDetails.total_issues}</span>
+        </div>
+      )}
+
+      <CycleAdditionalActions cycleId={cycleId} projectId={projectId} />
+      {showTransferIssues && (
+        <div
+          className="px-2 h-6  text-custom-primary-200 flex items-center gap-1 cursor-pointer"
+          onClick={() => {
+            setTransferIssuesModal(true);
+          }}
+        >
+          <TransferIcon className="fill-custom-primary-200 w-4" />
+          <span>Transfer {transferableIssuesCount} work items</span>
+        </div>
+      )}
+
       {!isActive && (
         <Controller
           control={control}
diff --git a/web/core/components/cycles/list/cycle-list-project-group-header.tsx b/web/core/components/cycles/list/cycle-list-project-group-header.tsx
new file mode 100644
index 000000000..d663eca0d
--- /dev/null
+++ b/web/core/components/cycles/list/cycle-list-project-group-header.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+import { ChevronRight } from "lucide-react";
+// icons
+import { Row, Logo } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { useProject } from "@/hooks/store/use-project";
+
+type Props = {
+  projectId: string;
+  count?: number;
+  showCount?: boolean;
+  isExpanded?: boolean;
+};
+
+export const CycleListProjectGroupHeader: FC<Props> = observer((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 items-center gap-2 flex-shrink-0 py-2.5">
+      <ChevronRight
+        className={cn("h-4 w-4 text-custom-sidebar-text-300 duration-300 ", {
+          "rotate-90": isExpanded,
+        })}
+        strokeWidth={2}
+      />
+      <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="inline-block line-clamp-1 truncate font-medium text-custom-text-100">{project.name}</div>
+        {showCount && <div className="pl-2 text-sm font-medium text-custom-text-300">{`${count ?? "0"}`}</div>}
+      </div>
+    </Row>
+  );
+});
diff --git a/web/core/components/cycles/list/cycles-list-item.tsx b/web/core/components/cycles/list/cycles-list-item.tsx
index 8d531216a..aad2f6922 100644
--- a/web/core/components/cycles/list/cycles-list-item.tsx
+++ b/web/core/components/cycles/list/cycles-list-item.tsx
@@ -4,13 +4,14 @@ import { FC, MouseEvent, useRef } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useSearchParams } from "next/navigation";
 // icons
-import { Check, Info } from "lucide-react";
+import { Check } from "lucide-react";
 // types
 import type { TCycleGroups } from "@plane/types";
 // ui
 import { CircularProgressIndicator } from "@plane/ui";
 // components
 import { ListItem } from "@/components/core/list";
+import { CycleQuickActions } from "@/components/cycles/";
 import { CycleListItemAction } from "@/components/cycles/list";
 // helpers
 import { generateQueryParams } from "@/helpers/router.helper";
@@ -18,7 +19,6 @@ import { generateQueryParams } from "@/helpers/router.helper";
 import { useCycle } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { CycleQuickActions } from "../quick-actions";
 
 type TCyclesListItem = {
   cycleId: string;
@@ -72,9 +72,9 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
 
     const query = generateQueryParams(searchParams, ["peekCycle"]);
     if (searchParams.has("peekCycle") && searchParams.get("peekCycle") === cycleId) {
-      router.push(`${pathname}?${query}`);
+      router.push(`${pathname}?${query}`, {}, { showProgressBar: false });
     } else {
-      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`);
+      router.push(`${pathname}?${query && `${query}&`}peekCycle=${cycleId}`, {}, { showProgressBar: false });
     }
   };
 
diff --git a/web/core/components/cycles/list/index.ts b/web/core/components/cycles/list/index.ts
index 4eebc5779..25419a056 100644
--- a/web/core/components/cycles/list/index.ts
+++ b/web/core/components/cycles/list/index.ts
@@ -3,3 +3,4 @@ export * from "./cycles-list-map";
 export * from "./root";
 export * from "./cycle-list-item-action";
 export * from "./cycle-list-group-header";
+export * from "./cycle-list-project-group-header";
diff --git a/web/core/components/cycles/list/root.tsx b/web/core/components/cycles/list/root.tsx
index 1531b88aa..49e3fcbe3 100644
--- a/web/core/components/cycles/list/root.tsx
+++ b/web/core/components/cycles/list/root.tsx
@@ -2,6 +2,7 @@ import React, { FC } 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";
 import { CycleListGroupHeader, CyclePeekOverview, CyclesListMap } from "@/components/cycles";
@@ -18,6 +19,7 @@ export interface ICyclesList {
 
 export const CyclesList: FC<ICyclesList> = observer((props) => {
   const { completedCycleIds, upcomingCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props;
+  const { t } = useTranslation();
 
   return (
     <ContentWrapper variant={ERowVariant.HUGGING} className="flex-row">
@@ -36,7 +38,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
                   <>
                     <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
                       <CycleListGroupHeader
-                        title="Upcoming cycle"
+                        title={t("project_cycles.upcoming_cycle.label")}
                         type="upcoming"
                         count={upcomingCycleIds.length}
                         showCount
@@ -55,7 +57,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
                 <>
                   <Disclosure.Button className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 cursor-pointer">
                     <CycleListGroupHeader
-                      title="Completed cycle"
+                      title={t("project_cycles.completed_cycle.label")}
                       type="completed"
                       count={completedCycleIds.length}
                       showCount
diff --git a/web/core/components/cycles/modal.tsx b/web/core/components/cycles/modal.tsx
index f8b1590c4..a12193559 100644
--- a/web/core/components/cycles/modal.tsx
+++ b/web/core/components/cycles/modal.tsx
@@ -1,15 +1,16 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
+import { format } from "date-fns";
 import { mutate } from "swr";
 // types
+import { CYCLE_CREATED, CYCLE_UPDATED } from "@plane/constants";
 import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { CycleForm } from "@/components/cycles";
 // constants
-import { CYCLE_CREATED, CYCLE_UPDATED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useCycle, useProject } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
@@ -131,8 +132,8 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
     if (payload.start_date && payload.end_date) {
       if (data?.start_date && data?.end_date)
         isDateValid = await dateChecker(payload.project_id ?? projectId, {
-          start_date: payload.start_date,
-          end_date: payload.end_date,
+          start_date: format(payload.start_date, "yyyy-MM-dd"),
+          end_date: format(payload.end_date, "yyyy-MM-dd"),
           cycle_id: data.id,
         });
       else
diff --git a/web/core/components/cycles/quick-actions.tsx b/web/core/components/cycles/quick-actions.tsx
index 49f78cb5c..ff69d447d 100644
--- a/web/core/components/cycles/quick-actions.tsx
+++ b/web/core/components/cycles/quick-actions.tsx
@@ -6,6 +6,8 @@ import { observer } from "mobx-react";
 // icons
 import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ArchiveCycleModal, CycleCreateUpdateModal, CycleDeleteModal } from "@/components/cycles";
@@ -15,7 +17,7 @@ import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useCycle, useEventTracker, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useEndCycle, EndCycleModal } from "@/plane-web/components/cycles";
 
 type Props = {
   parentRef: React.RefObject<HTMLElement>;
@@ -36,10 +38,15 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
   const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
   const { getCycleById, restoreCycle } = useCycle();
+  const { t } = useTranslation();
   // derived values
   const cycleDetails = getCycleById(cycleId);
   const isArchived = !!cycleDetails?.archived_at;
   const isCompleted = cycleDetails?.status?.toLowerCase() === "completed";
+  const isCurrentCycle = cycleDetails?.status?.toLowerCase() === "current";
+  const transferrableIssuesCount = cycleDetails
+    ? cycleDetails.total_issues - (cycleDetails.cancelled_issues + cycleDetails.completed_issues)
+    : 0;
   // auth
   const isEditingAllowed = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -48,13 +55,15 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
     projectId
   );
 
+  const { isEndCycleModalOpen, setEndCycleModalOpen, endCycleContextMenu } = useEndCycle(isCurrentCycle);
+
   const cycleLink = `${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`;
   const handleCopyText = () =>
     copyUrlToClipboard(cycleLink).then(() => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "Cycle link copied to clipboard.",
+        title: t("common.link_copied"),
+        message: t("common.link_copied_to_clipboard"),
       });
     });
   const handleOpenInNewTab = () => window.open(`/${cycleLink}`, "_blank");
@@ -71,16 +80,16 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Restore success",
-          message: "Your cycle can be found in project cycles.",
+          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: "Error!",
-          message: "Cycle could not be restored. Please try again.",
+          title: t("project_cycles.action.restore.failed.title"),
+          message: t("project_cycles.action.restore.failed.description"),
         })
       );
 
@@ -92,7 +101,7 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "edit",
-      title: "Edit",
+      title: t("edit"),
       icon: Pencil,
       action: handleEditCycle,
       shouldRender: isEditingAllowed && !isCompleted && !isArchived,
@@ -100,22 +109,22 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
     {
       key: "open-new-tab",
       action: handleOpenInNewTab,
-      title: "Open in new tab",
+      title: t("open_in_new_tab"),
       icon: ExternalLink,
       shouldRender: !isArchived,
     },
     {
       key: "copy-link",
       action: handleCopyText,
-      title: "Copy link",
+      title: t("copy_link"),
       icon: LinkIcon,
       shouldRender: !isArchived,
     },
     {
       key: "archive",
       action: handleArchiveCycle,
-      title: "Archive",
-      description: isCompleted ? undefined : "Only completed cycles can\nbe archived.",
+      title: t("archive"),
+      description: isCompleted ? undefined : t("project_cycles.only_completed_cycles_can_be_archived"),
       icon: ArchiveIcon,
       className: "items-start",
       iconClassName: "mt-1",
@@ -125,19 +134,21 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
     {
       key: "restore",
       action: handleRestoreCycle,
-      title: "Restore",
+      title: t("restore"),
       icon: ArchiveRestoreIcon,
       shouldRender: isEditingAllowed && isArchived,
     },
     {
       key: "delete",
       action: handleDeleteCycle,
-      title: "Delete",
+      title: t("delete"),
       icon: Trash2,
       shouldRender: isEditingAllowed && !isCompleted && !isArchived,
     },
   ];
 
+  if (endCycleContextMenu) MENU_ITEMS.splice(3, 0, endCycleContextMenu);
+
   return (
     <>
       {cycleDetails && (
@@ -163,10 +174,21 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
             workspaceSlug={workspaceSlug}
             projectId={projectId}
           />
+          {isCurrentCycle && (
+            <EndCycleModal
+              isOpen={isEndCycleModalOpen}
+              handleClose={() => setEndCycleModalOpen(false)}
+              cycleId={cycleId}
+              projectId={projectId}
+              workspaceSlug={workspaceSlug}
+              transferrableIssuesCount={transferrableIssuesCount}
+              cycleName={cycleDetails.name}
+            />
+          )}
         </div>
       )}
       <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
-      <CustomMenu ellipsis placement="bottom-end" closeOnSelect>
+      <CustomMenu ellipsis placement="bottom-end" closeOnSelect maxHeight="lg">
         {MENU_ITEMS.map((item) => {
           if (item.shouldRender === false) return null;
           return (
diff --git a/web/core/components/cycles/transfer-issues-modal.tsx b/web/core/components/cycles/transfer-issues-modal.tsx
index ae9cf3dac..6259a2bca 100644
--- a/web/core/components/cycles/transfer-issues-modal.tsx
+++ b/web/core/components/cycles/transfer-issues-modal.tsx
@@ -8,8 +8,8 @@ import { Dialog, Transition } from "@headlessui/react";
 // hooks
 // ui
 //icons
+import { EIssuesStoreType } from "@plane/constants";
 import { ContrastIcon, TransferIcon, TOAST_TYPE, setToast } from "@plane/ui";
-import { EIssuesStoreType } from "@/constants/issue";
 import { useCycle, useIssues } from "@/hooks/store";
 //icons
 // constants
@@ -17,42 +17,58 @@ import { useCycle, useIssues } from "@/hooks/store";
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
+  cycleId: string;
 };
 
 export const TransferIssuesModal: React.FC<Props> = observer((props) => {
-  const { isOpen, handleClose } = props;
+  const { isOpen, handleClose, cycleId } = props;
   // states
   const [query, setQuery] = useState("");
 
   // store hooks
-  const { currentProjectIncompleteCycleIds, getCycleById } = useCycle();
+  const { currentProjectIncompleteCycleIds, getCycleById, fetchActiveCycleProgress } = useCycle();
   const {
     issues: { transferIssuesFromCycle },
   } = useIssues(EIssuesStoreType.CYCLE);
 
-  const { workspaceSlug, projectId, cycleId } = useParams();
+  const { workspaceSlug, projectId } = useParams();
 
-  const transferIssue = async (payload: any) => {
+  const transferIssue = async (payload: { new_cycle_id: string }) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
-    // TODO: import transferIssuesFromCycle from store
     await transferIssuesFromCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), payload)
-      .then(() => {
+      .then(async () => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
-          message: "Issues have been transferred successfully",
+          message: "Work items have been transferred successfully",
         });
+        await getCycleDetails(payload.new_cycle_id);
       })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: "Issues cannot be transfer. Please try again.",
+          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);
 
@@ -96,9 +112,9 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
               <Dialog.Panel className="relative transform rounded-lg bg-custom-background-100 py-5 text-left shadow-custom-shadow-md transition-all sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
-                    <div className="flex items-center gap-3">
-                      <TransferIcon className="h-4 w-4" color="#495057" />
-                      <h4 className="text-xl font-medium text-custom-text-100">Transfer Issues</h4>
+                    <div className="flex items-center gap-1">
+                      <TransferIcon className="w-5 fill-custom-text-100" />
+                      <h4 className="text-xl font-medium text-custom-text-100">Transfer work items</h4>
                     </div>
                     <button onClick={handleClose}>
                       <X className="h-4 w-4" />
@@ -107,7 +123,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                   <div className="flex items-center gap-2 border-b border-custom-border-200 px-5 pb-3">
                     <Search className="h-4 w-4 text-custom-text-200" />
                     <input
-                      className="bg-custom-background-90 outline-none"
+                      className="outline-none text-sm"
                       placeholder="Search for a cycle..."
                       onChange={(e) => setQuery(e.target.value)}
                       value={query}
@@ -148,7 +164,7 @@ export const TransferIssuesModal: React.FC<Props> = observer((props) => {
                         <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
                           <AlertCircle className="h-3.5 w-3.5 text-custom-text-200" />
                           <span className="text-center text-custom-text-200">
-                            You don’t have any current cycle. Please create one to transfer the issues.
+                            You don’t have any current cycle. Please create one to transfer the work items.
                           </span>
                         </div>
                       )
diff --git a/web/core/components/cycles/transfer-issues.tsx b/web/core/components/cycles/transfer-issues.tsx
index 016736e01..bf5be1e74 100644
--- a/web/core/components/cycles/transfer-issues.tsx
+++ b/web/core/components/cycles/transfer-issues.tsx
@@ -27,7 +27,7 @@ export const TransferIssues: React.FC<Props> = (props) => {
             onClick={handleClick}
             disabled={disabled}
           >
-            Transfer Issues
+            Transfer work items
           </Button>
         </div>
       )}
diff --git a/web/core/components/dashboard/project-empty-state.tsx b/web/core/components/dashboard/project-empty-state.tsx
index c8cba817a..eb06d21be 100644
--- a/web/core/components/dashboard/project-empty-state.tsx
+++ b/web/core/components/dashboard/project-empty-state.tsx
@@ -3,10 +3,10 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
 // ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { Button } from "@plane/ui";
 // hooks
 import { useCommandPalette, useEventTracker, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // assets
 import ProjectEmptyStateImage from "@/public/empty-state/onboarding/dashboard-light.webp";
 
@@ -23,7 +23,7 @@ export const DashboardProjectEmptyState = observer(() => {
     <div className="mx-auto flex h-full flex-col justify-center space-y-4 lg:w-3/5">
       <h4 className="text-xl font-semibold">Overview of your projects, activity, and metrics</h4>
       <p className="text-custom-text-300">
-        Welcome to Plane, we are excited to have you here. Create your first project and track your issues, and this
+        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.
       </p>
diff --git a/web/core/components/dashboard/widgets/assigned-issues.tsx b/web/core/components/dashboard/widgets/assigned-issues.tsx
index 30bfbdad1..cc2b74314 100644
--- a/web/core/components/dashboard/widgets/assigned-issues.tsx
+++ b/web/core/components/dashboard/widgets/assigned-issues.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { Tab } from "@headlessui/react";
+import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@plane/constants";
 import { TAssignedIssuesWidgetFilters, TAssignedIssuesWidgetResponse } from "@plane/types";
 // hooks
 import { Card } from "@plane/ui";
@@ -13,7 +14,6 @@ import {
   WidgetLoader,
   WidgetProps,
 } from "@/components/dashboard/widgets";
-import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@/constants/dashboard";
 import { getCustomDates, getRedirectionFilters, getTabKey } from "@/helpers/dashboard.helper";
 import { useDashboard } from "@/hooks/store";
 // components
diff --git a/web/core/components/dashboard/widgets/created-issues.tsx b/web/core/components/dashboard/widgets/created-issues.tsx
index 083318d31..47dc6c268 100644
--- a/web/core/components/dashboard/widgets/created-issues.tsx
+++ b/web/core/components/dashboard/widgets/created-issues.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { Tab } from "@headlessui/react";
+import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@plane/constants";
 import { TCreatedIssuesWidgetFilters, TCreatedIssuesWidgetResponse } from "@plane/types";
 // hooks
 import { Card } from "@plane/ui";
@@ -13,7 +14,6 @@ import {
   WidgetLoader,
   WidgetProps,
 } from "@/components/dashboard/widgets";
-import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@/constants/dashboard";
 import { getCustomDates, getRedirectionFilters, getTabKey } from "@/helpers/dashboard.helper";
 import { useDashboard } from "@/hooks/store";
 // components
diff --git a/web/core/components/dashboard/widgets/dropdowns/duration-filter.tsx b/web/core/components/dashboard/widgets/dropdowns/duration-filter.tsx
index 419cff64b..2a897de82 100644
--- a/web/core/components/dashboard/widgets/dropdowns/duration-filter.tsx
+++ b/web/core/components/dashboard/widgets/dropdowns/duration-filter.tsx
@@ -3,11 +3,11 @@
 import { useState } from "react";
 import { ChevronDown } from "lucide-react";
 // components
+import { DURATION_FILTER_OPTIONS, EDurationFilters } from "@plane/constants";
 import { CustomMenu } from "@plane/ui";
 import { DateFilterModal } from "@/components/core";
 // ui
 // helpers
-import { DURATION_FILTER_OPTIONS, EDurationFilters } from "@/constants/dashboard";
 import { getDurationFilterDropdownLabel } from "@/helpers/dashboard.helper";
 // constants
 
diff --git a/web/core/components/dashboard/widgets/empty-states/assigned-issues.tsx b/web/core/components/dashboard/widgets/empty-states/assigned-issues.tsx
index c9a25cfd3..169547846 100644
--- a/web/core/components/dashboard/widgets/empty-states/assigned-issues.tsx
+++ b/web/core/components/dashboard/widgets/empty-states/assigned-issues.tsx
@@ -1,10 +1,35 @@
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { TIssuesListTypes } from "@plane/types";
-// types
-import { ASSIGNED_ISSUES_EMPTY_STATES } from "@/constants/dashboard";
-// constants
+import CompletedIssuesDark from "@/public/empty-state/dashboard/dark/completed-issues.svg";
+import OverdueIssuesDark from "@/public/empty-state/dashboard/dark/overdue-issues.svg";
+import UpcomingIssuesDark from "@/public/empty-state/dashboard/dark/upcoming-issues.svg";
+import CompletedIssuesLight from "@/public/empty-state/dashboard/light/completed-issues.svg";
+import OverdueIssuesLight from "@/public/empty-state/dashboard/light/overdue-issues.svg";
+import UpcomingIssuesLight from "@/public/empty-state/dashboard/light/upcoming-issues.svg";
 
+export const ASSIGNED_ISSUES_EMPTY_STATES = {
+  pending: {
+    title: "Work items assigned to you that are pending\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
+  upcoming: {
+    title: "Upcoming work items assigned to\nyou will show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
+  overdue: {
+    title: "Work items assigned to you that are past\ntheir due date will show up here.",
+    darkImage: OverdueIssuesDark,
+    lightImage: OverdueIssuesLight,
+  },
+  completed: {
+    title: "Work items assigned to you that you have\nmarked Completed will show up here.",
+    darkImage: CompletedIssuesDark,
+    lightImage: CompletedIssuesLight,
+  },
+};
 type Props = {
   type: TIssuesListTypes;
 };
@@ -22,7 +47,7 @@ export const AssignedIssuesEmptyState: React.FC<Props> = (props) => {
   return (
     <div className="text-center space-y-6 flex flex-col items-center">
       <div className="h-24 w-24">
-        <Image src={image} className="w-full h-full" alt="Assigned issues" />
+        <Image src={image} className="w-full h-full" alt="Assigned work items" />
       </div>
       <p className="text-sm font-medium text-custom-text-300 whitespace-pre-line">{typeDetails.title}</p>
     </div>
diff --git a/web/core/components/dashboard/widgets/empty-states/created-issues.tsx b/web/core/components/dashboard/widgets/empty-states/created-issues.tsx
index bc812de35..49a96f1fb 100644
--- a/web/core/components/dashboard/widgets/empty-states/created-issues.tsx
+++ b/web/core/components/dashboard/widgets/empty-states/created-issues.tsx
@@ -1,9 +1,35 @@
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { TIssuesListTypes } from "@plane/types";
-// types
-import { CREATED_ISSUES_EMPTY_STATES } from "@/constants/dashboard";
-// constants
+import CompletedIssuesDark from "@/public/empty-state/dashboard/dark/completed-issues.svg";
+import OverdueIssuesDark from "@/public/empty-state/dashboard/dark/overdue-issues.svg";
+import UpcomingIssuesDark from "@/public/empty-state/dashboard/dark/upcoming-issues.svg";
+import CompletedIssuesLight from "@/public/empty-state/dashboard/light/completed-issues.svg";
+import OverdueIssuesLight from "@/public/empty-state/dashboard/light/overdue-issues.svg";
+import UpcomingIssuesLight from "@/public/empty-state/dashboard/light/upcoming-issues.svg";
+
+export const CREATED_ISSUES_EMPTY_STATES = {
+  pending: {
+    title: "Work items created by you that are pending\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
+  upcoming: {
+    title: "Upcoming work items you created\nwill show up here.",
+    darkImage: UpcomingIssuesDark,
+    lightImage: UpcomingIssuesLight,
+  },
+  overdue: {
+    title: "Work items created by you that are past their\ndue date will show up here.",
+    darkImage: OverdueIssuesDark,
+    lightImage: OverdueIssuesLight,
+  },
+  completed: {
+    title: "Work items created by you that you have\nmarked completed will show up here.",
+    darkImage: CompletedIssuesDark,
+    lightImage: CompletedIssuesLight,
+  },
+};
 
 type Props = {
   type: TIssuesListTypes;
@@ -21,7 +47,7 @@ export const CreatedIssuesEmptyState: React.FC<Props> = (props) => {
   return (
     <div className="text-center space-y-6 flex flex-col items-center">
       <div className="h-24 w-24">
-        <Image src={image} className="w-full h-full" alt="Assigned issues" />
+        <Image src={image} className="w-full h-full" alt="Assigned work items" />
       </div>
       <p className="text-sm font-medium text-custom-text-300 whitespace-pre-line">{typeDetails.title}</p>
     </div>
diff --git a/web/core/components/dashboard/widgets/empty-states/issues-by-priority.tsx b/web/core/components/dashboard/widgets/empty-states/issues-by-priority.tsx
index 262c68d69..7f70d3bf3 100644
--- a/web/core/components/dashboard/widgets/empty-states/issues-by-priority.tsx
+++ b/web/core/components/dashboard/widgets/empty-states/issues-by-priority.tsx
@@ -13,10 +13,10 @@ export const IssuesByPriorityEmptyState = () => {
   return (
     <div className="text-center space-y-6 flex flex-col items-center">
       <div className="h-24 w-24">
-        <Image src={image} className="w-full h-full" alt="Issues by state group" />
+        <Image src={image} className="w-full h-full" alt="Work items by state group" />
       </div>
       <p className="text-sm font-medium text-custom-text-300">
-        Issues assigned to you, broken down by
+        Work items assigned to you, broken down by
         <br />
         priority will show up here.
       </p>
diff --git a/web/core/components/dashboard/widgets/empty-states/issues-by-state-group.tsx b/web/core/components/dashboard/widgets/empty-states/issues-by-state-group.tsx
index ad7ac82b8..69d4761e5 100644
--- a/web/core/components/dashboard/widgets/empty-states/issues-by-state-group.tsx
+++ b/web/core/components/dashboard/widgets/empty-states/issues-by-state-group.tsx
@@ -13,10 +13,10 @@ export const IssuesByStateGroupEmptyState = () => {
   return (
     <div className="text-center space-y-6 flex flex-col items-center">
       <div className="h-24 w-24">
-        <Image src={image} className="w-full h-full" alt="Issues by state group" />
+        <Image src={image} className="w-full h-full" alt="Work items by state group" />
       </div>
       <p className="text-sm font-medium text-custom-text-300">
-        Issue assigned to you, broken down by state,
+        Work items assigned to you, broken down by state,
         <br />
         will show up here.
       </p>
diff --git a/web/core/components/dashboard/widgets/empty-states/recent-activity.tsx b/web/core/components/dashboard/widgets/empty-states/recent-activity.tsx
index 6daeae5a7..f25f39920 100644
--- a/web/core/components/dashboard/widgets/empty-states/recent-activity.tsx
+++ b/web/core/components/dashboard/widgets/empty-states/recent-activity.tsx
@@ -13,10 +13,10 @@ export const RecentActivityEmptyState = () => {
   return (
     <div className="text-center space-y-6 flex flex-col items-center">
       <div className="h-24 w-24">
-        <Image src={image} className="w-full h-full" alt="Issues by state group" />
+        <Image src={image} className="w-full h-full" alt="Work items by state group" />
       </div>
       <p className="text-sm font-medium text-custom-text-300">
-        All your issue activities across
+        All your work items activities across
         <br />
         projects will show up here.
       </p>
diff --git a/web/core/components/dashboard/widgets/issue-panels/issue-list-item.tsx b/web/core/components/dashboard/widgets/issue-panels/issue-list-item.tsx
index a54fd312d..75471c6fd 100644
--- a/web/core/components/dashboard/widgets/issue-panels/issue-list-item.tsx
+++ b/web/core/components/dashboard/widgets/issue-panels/issue-list-item.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import isToday from "date-fns/isToday";
+import { isToday } from "date-fns/isToday";
 import { observer } from "mobx-react";
 // types
 import { TIssue, TWidgetIssue } from "@plane/types";
@@ -9,6 +9,7 @@ import { Avatar, AvatarGroup, ControlLink, PriorityIcon } from "@plane/ui";
 // helpers
 import { findTotalDaysInRange, getDate, renderFormattedDate } from "@/helpers/date-time.helper";
 import { getFileURL } from "@/helpers/file.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
 import { useIssueDetail, useMember, useProject } from "@/hooks/store";
 // plane web components
@@ -41,9 +42,17 @@ export const AssignedUpcomingIssueListItem: React.FC<IssueListItemProps> = obser
 
   const targetDate = getDate(issueDetails.target_date);
 
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issueDetails?.project_id,
+    issueId: issueDetails?.id,
+    projectIdentifier: projectDetails?.identifier,
+    sequenceId: issueDetails?.sequence_id,
+  });
+
   return (
     <ControlLink
-      href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`}
+      href={workItemLink}
       onClick={() => onClick(issueDetails)}
       className="grid grid-cols-12 gap-1 rounded px-3 py-2 hover:bg-custom-background-80"
     >
@@ -101,9 +110,17 @@ export const AssignedOverdueIssueListItem: React.FC<IssueListItemProps> = observ
 
   const dueBy = findTotalDaysInRange(getDate(issueDetails.target_date), new Date(), false) ?? 0;
 
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issueDetails?.project_id,
+    issueId: issueDetails?.id,
+    projectIdentifier: projectDetails?.identifier,
+    sequenceId: issueDetails?.sequence_id,
+  });
+
   return (
     <ControlLink
-      href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`}
+      href={workItemLink}
       onClick={() => onClick(issueDetails)}
       className="grid grid-cols-12 gap-1 rounded px-3 py-2 hover:bg-custom-background-80"
     >
@@ -154,9 +171,17 @@ export const AssignedCompletedIssueListItem: React.FC<IssueListItemProps> = obse
 
   const projectDetails = getProjectById(issueDetails.project_id);
 
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issueDetails?.project_id,
+    issueId: issueDetails?.id,
+    projectIdentifier: projectDetails?.identifier,
+    sequenceId: issueDetails?.sequence_id,
+  });
+
   return (
     <ControlLink
-      href={`/${workspaceSlug}/projects/${issueDetails.project_id}/issues/${issueDetails.id}`}
+      href={workItemLink}
       onClick={() => onClick(issueDetails)}
       className="grid grid-cols-12 gap-1 rounded px-3 py-2 hover:bg-custom-background-80"
     >
@@ -193,9 +218,17 @@ export const CreatedUpcomingIssueListItem: React.FC<IssueListItemProps> = observ
   const projectDetails = getProjectById(issue.project_id);
   const targetDate = getDate(issue.target_date);
 
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier: projectDetails?.identifier,
+    sequenceId: issue?.sequence_id,
+  });
+
   return (
     <ControlLink
-      href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+      href={workItemLink}
       onClick={() => onClick(issue)}
       className="grid grid-cols-12 gap-1 rounded px-3 py-2 hover:bg-custom-background-80"
     >
@@ -253,9 +286,17 @@ export const CreatedOverdueIssueListItem: React.FC<IssueListItemProps> = observe
 
   const dueBy: number = findTotalDaysInRange(getDate(issue.target_date), new Date(), false) ?? 0;
 
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier: projectDetails?.identifier,
+    sequenceId: issue?.sequence_id,
+  });
+
   return (
     <ControlLink
-      href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+      href={workItemLink}
       onClick={() => onClick(issue)}
       className="grid grid-cols-12 gap-1 rounded px-3 py-2 hover:bg-custom-background-80"
     >
@@ -311,9 +352,17 @@ export const CreatedCompletedIssueListItem: React.FC<IssueListItemProps> = obser
 
   const projectDetails = getProjectById(issue.project_id);
 
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug,
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier: projectDetails?.identifier,
+    sequenceId: issue?.sequence_id,
+  });
+
   return (
     <ControlLink
-      href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+      href={workItemLink}
       onClick={() => onClick(issue)}
       className="grid grid-cols-12 gap-1 rounded px-3 py-2 hover:bg-custom-background-80"
     >
diff --git a/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx b/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
index 2b31d8f27..925e2ee9a 100644
--- a/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
+++ b/web/core/components/dashboard/widgets/issue-panels/issues-list.tsx
@@ -83,7 +83,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
                   "col-span-9": type === "created" && tab === "completed",
                 })}
               >
-                Issues
+                Work items
                 <span className="flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-medium rounded-xl px-2 flex items-center text-center justify-center">
                   {widgetStats.count}
                 </span>
@@ -126,7 +126,7 @@ export const WidgetIssuesList: React.FC<WidgetIssuesListProps> = (props) => {
             "w-min my-3 mx-auto py-1 px-2 text-xs hover:bg-custom-primary-100/20"
           )}
         >
-          View all issues
+          View all work items
         </Link>
       )}
     </>
diff --git a/web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx b/web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx
index d2b7df8ed..9df044c37 100644
--- a/web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx
+++ b/web/core/components/dashboard/widgets/issue-panels/tabs-list.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
-import { TIssuesListTypes } from "@plane/types";
 // helpers
-import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@/constants/dashboard";
+import { EDurationFilters, FILTERED_ISSUES_TABS_LIST, UNFILTERED_ISSUES_TABS_LIST } from "@plane/constants";
+import { TIssuesListTypes } from "@plane/types";
 import { cn } from "@/helpers/common.helper";
 // types
 // constants
diff --git a/web/core/components/dashboard/widgets/issues-by-priority.tsx b/web/core/components/dashboard/widgets/issues-by-priority.tsx
index 9da47bc84..ac6788120 100644
--- a/web/core/components/dashboard/widgets/issues-by-priority.tsx
+++ b/web/core/components/dashboard/widgets/issues-by-priority.tsx
@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // types
+import { EDurationFilters } from "@plane/constants";
 import { TIssuesByPriorityWidgetFilters, TIssuesByPriorityWidgetResponse } from "@plane/types";
 // components
 import { Card } from "@plane/ui";
@@ -13,7 +14,6 @@ import {
 } from "@/components/dashboard/widgets";
 import { IssuesByPriorityGraph } from "@/components/graphs";
 // constants
-import { EDurationFilters } from "@/constants/dashboard";
 // helpers
 import { getCustomDates } from "@/helpers/dashboard.helper";
 // hooks
diff --git a/web/core/components/dashboard/widgets/issues-by-state-group.tsx b/web/core/components/dashboard/widgets/issues-by-state-group.tsx
index 53437ca11..fec4204cf 100644
--- a/web/core/components/dashboard/widgets/issues-by-state-group.tsx
+++ b/web/core/components/dashboard/widgets/issues-by-state-group.tsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
+import { linearGradientDef } from "@nivo/core";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // types
+import { EDurationFilters, STATE_GROUPS } from "@plane/constants";
 import { TIssuesByStateGroupsWidgetFilters, TIssuesByStateGroupsWidgetResponse, TStateGroups } from "@plane/types";
 // components
 import { Card } from "@plane/ui";
@@ -12,9 +14,6 @@ import {
   WidgetProps,
 } from "@/components/dashboard/widgets";
 import { PieGraph } from "@/components/ui";
-// constants
-import { EDurationFilters, STATE_GROUP_GRAPH_COLORS, STATE_GROUP_GRAPH_GRADIENTS } from "@/constants/dashboard";
-import { STATE_GROUPS } from "@/constants/state";
 // helpers
 import { getCustomDates } from "@/helpers/dashboard.helper";
 // hooks
@@ -23,6 +22,37 @@ import { useAppRouter } from "@/hooks/use-app-router";
 
 const WIDGET_KEY = "issues_by_state_groups";
 
+export const STATE_GROUP_GRAPH_COLORS: Record<TStateGroups, string> = {
+  backlog: "#CDCED6",
+  unstarted: "#80838D",
+  started: "#FFC53D",
+  completed: "#3E9B4F",
+  cancelled: "#E5484D",
+};
+// colors for work items by state group widget graph arcs
+export const STATE_GROUP_GRAPH_GRADIENTS = [
+  linearGradientDef("gradientBacklog", [
+    { offset: 0, color: "#DEDEDE" },
+    { offset: 100, color: "#BABABE" },
+  ]),
+  linearGradientDef("gradientUnstarted", [
+    { offset: 0, color: "#D4D4D4" },
+    { offset: 100, color: "#878796" },
+  ]),
+  linearGradientDef("gradientStarted", [
+    { offset: 0, color: "#FFD300" },
+    { offset: 100, color: "#FAE270" },
+  ]),
+  linearGradientDef("gradientCompleted", [
+    { offset: 0, color: "#0E8B1B" },
+    { offset: 100, color: "#37CB46" },
+  ]),
+  linearGradientDef("gradientCanceled", [
+    { offset: 0, color: "#C90004" },
+    { offset: 100, color: "#FF7679" },
+  ]),
+];
+
 export const IssuesByStateGroupWidget: React.FC<WidgetProps> = observer((props) => {
   const { dashboardId, workspaceSlug } = props;
   // states
diff --git a/web/core/components/dashboard/widgets/overview-stats.tsx b/web/core/components/dashboard/widgets/overview-stats.tsx
index 622001027..20421f33b 100644
--- a/web/core/components/dashboard/widgets/overview-stats.tsx
+++ b/web/core/components/dashboard/widgets/overview-stats.tsx
@@ -30,25 +30,25 @@ export const OverviewStatsWidget: React.FC<WidgetProps> = observer((props) => {
   const STATS_LIST = [
     {
       key: "assigned",
-      title: "Issues assigned",
+      title: "Work items assigned",
       count: widgetStats?.assigned_issues_count,
       link: `/${workspaceSlug}/workspace-views/assigned`,
     },
     {
       key: "overdue",
-      title: "Issues overdue",
+      title: "Work items overdue",
       count: widgetStats?.pending_issues_count,
       link: `/${workspaceSlug}/workspace-views/assigned/?state_group=backlog,unstarted,started&target_date=${today};before`,
     },
     {
       key: "created",
-      title: "Issues created",
+      title: "Work items created",
       count: widgetStats?.created_issues_count,
       link: `/${workspaceSlug}/workspace-views/created`,
     },
     {
       key: "completed",
-      title: "Issues completed",
+      title: "Work items completed",
       count: widgetStats?.completed_issues_count,
       link: `/${workspaceSlug}/workspace-views/assigned?state_group=completed`,
     },
diff --git a/web/core/components/dashboard/widgets/recent-activity.tsx b/web/core/components/dashboard/widgets/recent-activity.tsx
index dd21815cc..84ac985e1 100644
--- a/web/core/components/dashboard/widgets/recent-activity.tsx
+++ b/web/core/components/dashboard/widgets/recent-activity.tsx
@@ -40,7 +40,7 @@ export const RecentActivityWidget: React.FC<WidgetProps> = observer((props) => {
   return (
     <Card>
       <Link href={redirectionLink} className="text-lg font-semibold text-custom-text-300 hover:underline mb-4">
-        Your issue activities
+        Your work item activities
       </Link>
       {widgetStats.length > 0 ? (
         <div className="mt-4 space-y-6">
diff --git a/web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx b/web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
index 2dc1f0d3d..415809e04 100644
--- a/web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
+++ b/web/core/components/dashboard/widgets/recent-collaborators/collaborators-list.tsx
@@ -47,7 +47,7 @@ const CollaboratorListItem: React.FC<CollaboratorListItemProps> = observer((prop
         {isCurrentUser ? "You" : userDetails?.display_name}
       </h6>
       <p className="mt-2 text-sm">
-        {issueCount} active issue{issueCount > 1 ? "s" : ""}
+        {issueCount} active work items{issueCount > 1 ? "s" : ""}
       </p>
     </Link>
   );
diff --git a/web/core/components/dashboard/widgets/recent-projects.tsx b/web/core/components/dashboard/widgets/recent-projects.tsx
index 525590871..3e9c4e257 100644
--- a/web/core/components/dashboard/widgets/recent-projects.tsx
+++ b/web/core/components/dashboard/widgets/recent-projects.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { Plus } from "lucide-react";
 // plane types
+import { PROJECT_BACKGROUND_COLORS, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { TRecentProjectsWidgetResponse } from "@plane/types";
 // plane ui
 import { Avatar, AvatarGroup, Card } from "@plane/ui";
@@ -12,13 +13,18 @@ import { Avatar, AvatarGroup, Card } from "@plane/ui";
 import { Logo } from "@/components/common";
 import { WidgetLoader, WidgetProps } from "@/components/dashboard/widgets";
 // constants
-import { PROJECT_BACKGROUND_COLORS } from "@/constants/dashboard";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
-import { useEventTracker, useDashboard, useProject, useCommandPalette, useUserPermissions } from "@/hooks/store";
+import {
+  useEventTracker,
+  useDashboard,
+  useProject,
+  useCommandPalette,
+  useUserPermissions,
+  useMember,
+} from "@/hooks/store";
 // plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const WIDGET_KEY = "recent_projects";
 
@@ -31,6 +37,8 @@ const ProjectListItem: React.FC<ProjectListItemProps> = observer((props) => {
   const { projectId, workspaceSlug } = props;
   // store hooks
   const { getProjectById } = useProject();
+  const { getUserDetails } = useMember();
+  // derived values
   const projectDetails = getProjectById(projectId);
 
   const randomBgColor = PROJECT_BACKGROUND_COLORS[Math.floor(Math.random() * PROJECT_BACKGROUND_COLORS.length)];
@@ -52,13 +60,13 @@ const ProjectListItem: React.FC<ProjectListItemProps> = observer((props) => {
         </h6>
         <div className="mt-2">
           <AvatarGroup>
-            {projectDetails.members?.map((member) => (
-              <Avatar
-                key={member.member_id}
-                src={getFileURL(member.member__avatar_url)}
-                name={member.member__display_name}
-              />
-            ))}
+            {projectDetails.members?.map((memberId) => {
+              const userDetails = getUserDetails(memberId);
+              if (!userDetails) return null;
+              return (
+                <Avatar key={userDetails.id} src={getFileURL(userDetails.avatar_url)} name={userDetails.display_name} />
+              );
+            })}
           </AvatarGroup>
         </div>
       </div>
diff --git a/web/core/components/dropdowns/cycle/cycle-options.tsx b/web/core/components/dropdowns/cycle/cycle-options.tsx
index cd4f4d997..69baa558c 100644
--- a/web/core/components/dropdowns/cycle/cycle-options.tsx
+++ b/web/core/components/dropdowns/cycle/cycle-options.tsx
@@ -8,6 +8,8 @@ import { usePopper } from "react-popper";
 // components
 import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // icon
 import { TCycleGroups } from "@plane/types";
 // ui
@@ -31,10 +33,13 @@ type CycleOptionsProps = {
   placement: Placement | undefined;
   isOpen: boolean;
   canRemoveCycle: boolean;
+  currentCycleId?: string;
 };
 
 export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
-  const { projectId, isOpen, referenceElement, placement, canRemoveCycle } = props;
+  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);
@@ -68,6 +73,7 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
 
   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;
   });
 
@@ -101,11 +107,11 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
   if (canRemoveCycle) {
     options?.unshift({
       value: null,
-      query: "No cycle",
+      query: t("cycle.no_cycle"),
       content: (
         <div className="flex items-center gap-2">
           <ContrastIcon className="h-3 w-3 flex-shrink-0" />
-          <span className="flex-grow truncate">No cycle</span>
+          <span className="flex-grow truncate">{t("cycle.no_cycle")}</span>
         </div>
       ),
     });
@@ -130,7 +136,7 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
             className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search"
+            placeholder={t("common.search.label")}
             displayValue={(assigned: any) => assigned?.name}
             onKeyDown={searchInputKeyDown}
           />
@@ -157,10 +163,10 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
                 </Combobox.Option>
               ))
             ) : (
-              <p className="px-1.5 py-1 italic text-custom-text-400">No matches found</p>
+              <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-custom-text-400">Loading...</p>
+            <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
           )}
         </div>
       </div>
diff --git a/web/core/components/dropdowns/cycle/index.tsx b/web/core/components/dropdowns/cycle/index.tsx
index 9eb20ba2d..f06b1956d 100644
--- a/web/core/components/dropdowns/cycle/index.tsx
+++ b/web/core/components/dropdowns/cycle/index.tsx
@@ -3,6 +3,7 @@
 import { ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { ChevronDown } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ComboDropDown, ContrastIcon } from "@plane/ui";
 // helpers
@@ -26,6 +27,7 @@ type Props = TDropdownProps & {
   value: string | null;
   canRemoveCycle?: boolean;
   renderByDefault?: boolean;
+  currentCycleId?: string;
 };
 
 export const CycleDropdown: React.FC<Props> = observer((props) => {
@@ -49,7 +51,10 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     value,
     canRemoveCycle = true,
     renderByDefault = true,
+    currentCycleId,
   } = props;
+  // i18n
+  const { t } = useTranslation();
   // states
 
   const [isOpen, setIsOpen] = useState(false);
@@ -85,6 +90,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
           )}
           onClick={handleOnClick}
           disabled={disabled}
+          tabIndex={tabIndex}
         >
           {button}
         </button>
@@ -102,11 +108,12 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
           )}
           onClick={handleOnClick}
           disabled={disabled}
+          tabIndex={tabIndex}
         >
           <DropdownButton
             className={buttonClassName}
             isActive={isOpen}
-            tooltipHeading="Cycle"
+            tooltipHeading={t("common.cycle")}
             tooltipContent={selectedName ?? placeholder}
             showTooltip={showTooltip}
             variant={buttonVariant}
@@ -129,7 +136,6 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
     <ComboDropDown
       as="div"
       ref={dropdownRef}
-      tabIndex={tabIndex}
       className={cn("h-full", className)}
       value={value}
       onChange={dropdownOnChange}
@@ -145,6 +151,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
           placement={placement}
           referenceElement={referenceElement}
           canRemoveCycle={canRemoveCycle}
+          currentCycleId={currentCycleId}
         />
       )}
     </ComboDropDown>
diff --git a/web/core/components/dropdowns/date-range.tsx b/web/core/components/dropdowns/date-range.tsx
index 453215e99..7d73216a4 100644
--- a/web/core/components/dropdowns/date-range.tsx
+++ b/web/core/components/dropdowns/date-range.tsx
@@ -2,12 +2,12 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
-import { DateRange, DayPicker, Matcher } from "react-day-picker";
+import { DateRange, Matcher } from "react-day-picker";
 import { usePopper } from "react-popper";
-import { ArrowRight, CalendarDays } from "lucide-react";
+import { ArrowRight, CalendarCheck2, CalendarDays } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // ui
-import { Button, ComboDropDown } from "@plane/ui";
+import { ComboDropDown, Calendar } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
@@ -33,7 +33,6 @@ type Props = {
     from?: boolean;
     to?: boolean;
   };
-  icon?: React.ReactNode;
   minDate?: Date;
   maxDate?: Date;
   onSelect: (range: DateRange | undefined) => void;
@@ -50,25 +49,22 @@ type Props = {
     to: Date | undefined;
   };
   renderByDefault?: boolean;
+  renderPlaceholder?: boolean;
 };
 
 export const DateRangeDropdown: React.FC<Props> = (props) => {
   const {
-    applyButtonText = "Apply changes",
-    bothRequired = true,
     buttonClassName,
     buttonContainerClassName,
     buttonFromDateClassName,
     buttonToDateClassName,
     buttonVariant,
-    cancelButtonText = "Cancel",
     className,
     disabled = false,
     hideIcon = {
       from: true,
       to: true,
     },
-    icon = <CalendarDays className="h-3 w-3 flex-shrink-0" />,
     minDate,
     maxDate,
     onSelect,
@@ -77,11 +73,11 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
       to: "Add date",
     },
     placement,
-    required = false,
     showTooltip = false,
     tabIndex,
     value,
     renderByDefault = true,
+    renderPlaceholder = true,
   } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -166,15 +162,15 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
         <span
           className={cn("h-full flex items-center justify-center gap-1 rounded-sm flex-grow", buttonFromDateClassName)}
         >
-          {!hideIcon.from && icon}
-          {dateRange.from ? renderFormattedDate(dateRange.from) : placeholder.from}
+          {!hideIcon.from && <CalendarDays className="h-3 w-3 flex-shrink-0" />}
+          {dateRange.from ? renderFormattedDate(dateRange.from) : renderPlaceholder ? placeholder.from : ""}
         </span>
         <ArrowRight className="h-3 w-3 flex-shrink-0" />
         <span
           className={cn("h-full flex items-center justify-center gap-1 rounded-sm flex-grow", buttonToDateClassName)}
         >
-          {!hideIcon.to && icon}
-          {dateRange.to ? renderFormattedDate(dateRange.to) : placeholder.to}
+          {!hideIcon.to && <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+          {dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
         </span>
       </DropdownButton>
     </button>
@@ -198,16 +194,17 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
           <div
-            className="my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3"
+            className="my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden"
             ref={setPopperElement}
             style={styles.popper}
             {...attributes.popper}
           >
-            <DayPicker
+            <Calendar
+              captionLayout="dropdown"
+              classNames={{ root: `p-3 rounded-md` }}
               selected={dateRange}
               onSelect={(val) => {
-                // if both the dates are not required, immediately call onSelect
-                if (!bothRequired) onSelect(val);
+                onSelect(val);
                 setDateRange({
                   from: val?.from ?? undefined,
                   to: val?.to ?? undefined,
@@ -216,37 +213,8 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
               mode="range"
               disabled={disabledDays}
               showOutsideDays
+              fixedWeeks
               initialFocus
-              footer={
-                bothRequired && (
-                  <div className="grid grid-cols-2 items-center gap-3.5 pt-6 relative">
-                    <div className="absolute left-0 top-1 h-[0.5px] w-full border-t-[0.5px] border-custom-border-300" />
-                    <Button
-                      variant="neutral-primary"
-                      onClick={() => {
-                        setDateRange({
-                          from: undefined,
-                          to: undefined,
-                        });
-                        handleClose();
-                      }}
-                    >
-                      {cancelButtonText}
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        onSelect(dateRange);
-                        handleClose();
-                      }}
-                      // if required, both the dates should be selected
-                      // if not required, either both or none of the dates should be selected
-                      disabled={required ? !(dateRange.from && dateRange.to) : !!dateRange.from !== !!dateRange.to}
-                    >
-                      {applyButtonText}
-                    </Button>
-                  </div>
-                )
-              }
             />
           </div>
         </Combobox.Options>
diff --git a/web/core/components/dropdowns/date.tsx b/web/core/components/dropdowns/date.tsx
index bca7ed52c..83a5e7b36 100644
--- a/web/core/components/dropdowns/date.tsx
+++ b/web/core/components/dropdowns/date.tsx
@@ -1,11 +1,11 @@
 import React, { useRef, useState } from "react";
-import { DayPicker, Matcher } from "react-day-picker";
+import { Matcher } from "react-day-picker";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { CalendarDays, X } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // ui
-import { ComboDropDown } from "@plane/ui";
+import { ComboDropDown, Calendar } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedDate, getDate } from "@/helpers/date-time.helper";
@@ -166,14 +166,16 @@ export const DateDropdown: React.FC<Props> = (props) => {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "my-1 bg-custom-background-100 shadow-custom-shadow-rg rounded-md overflow-hidden p-3 z-20",
+                "my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-20",
                 optionsClassName
               )}
               ref={setPopperElement}
               style={styles.popper}
               {...attributes.popper}
             >
-              <DayPicker
+              <Calendar
+                captionLayout="dropdown"
+                classNames={{ root: `p-3 rounded-md` }}
                 selected={getDate(value)}
                 defaultMonth={getDate(value)}
                 onSelect={(date) => {
@@ -183,6 +185,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
                 initialFocus
                 disabled={disabledDays}
                 mode="single"
+                fixedWeeks
               />
             </div>
           </Combobox.Options>,
diff --git a/web/core/components/dropdowns/layout.tsx b/web/core/components/dropdowns/layout.tsx
index 2557e57a2..5864f4a29 100644
--- a/web/core/components/dropdowns/layout.tsx
+++ b/web/core/components/dropdowns/layout.tsx
@@ -1,36 +1,48 @@
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { Check } from "lucide-react";
-// plane packages
-import { cn } from "@plane/editor";
+// plane constants
+import { EIssueLayoutTypes, ISSUE_LAYOUT_MAP } from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
+// plane ui
 import { Dropdown } from "@plane/ui";
-// constants
-import { EIssueLayoutTypes, ISSUE_LAYOUT_MAP } from "@/constants/issue";
+// plane utils
+import { cn } from "@plane/utils";
+// components
+import { IssueLayoutIcon } from "@/components/issues";
 
 type TLayoutDropDown = {
   onChange: (value: EIssueLayoutTypes) => void;
   value: EIssueLayoutTypes;
+  disabledLayouts?: EIssueLayoutTypes[];
 };
 
 export const LayoutDropDown = observer((props: TLayoutDropDown) => {
-  const { onChange, value = EIssueLayoutTypes.LIST } = props;
+  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(
     () =>
-      Object.values(ISSUE_LAYOUT_MAP).map((issueLayout) => ({
+      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 gap-2 items-center text-custom-text-200">
-        <dropdownValue.icon strokeWidth={2} className={`size-3.5 text-custom-text-200`} />
-        <span className="font-medium text-xs">{dropdownValue.label}</span>
+        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-custom-text-200`} />
+        <span className="font-medium text-xs">{t(dropdownValue.i18n_label)}</span>
       </div>
     );
   }, []);
@@ -41,8 +53,8 @@ export const LayoutDropDown = observer((props: TLayoutDropDown) => {
     return (
       <div className={cn("flex gap-2 items-center text-custom-text-200 w-full justify-between")}>
         <div className="flex gap-2 items-center">
-          <dropdownValue.icon strokeWidth={2} className={`size-3 text-custom-text-200`} />
-          <span className="font-medium text-xs">{dropdownValue.label}</span>
+          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-custom-text-200`} />
+          <span className="font-medium text-xs">{t(dropdownValue.i18n_label)}</span>
         </div>
         {props.selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
       </div>
diff --git a/web/core/components/dropdowns/member/avatar.tsx b/web/core/components/dropdowns/member/avatar.tsx
index 0a7a92d43..0b2189f65 100644
--- a/web/core/components/dropdowns/member/avatar.tsx
+++ b/web/core/components/dropdowns/member/avatar.tsx
@@ -4,6 +4,8 @@ import { observer } from "mobx-react";
 import { LucideIcon, Users } from "lucide-react";
 // plane ui
 import { Avatar, AvatarGroup } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
@@ -13,17 +15,18 @@ type AvatarProps = {
   showTooltip: boolean;
   userIds: string | string[] | null;
   icon?: LucideIcon;
+  size?: "sm" | "md" | "base" | "lg" | number;
 };
 
 export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
-  const { showTooltip, userIds, icon: Icon } = props;
+  const { showTooltip, userIds, icon: Icon, size = "md" } = props;
   // store hooks
   const { getUserDetails } = useMember();
 
   if (Array.isArray(userIds)) {
     if (userIds.length > 0)
       return (
-        <AvatarGroup size="md" showTooltip={!showTooltip}>
+        <AvatarGroup size={size} showTooltip={!showTooltip}>
           {userIds.map((userId) => {
             const userDetails = getUserDetails(userId);
 
@@ -39,12 +42,12 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
         <Avatar
           src={getFileURL(userDetails?.avatar_url ?? "")}
           name={userDetails?.display_name}
-          size="md"
+          size={size}
           showTooltip={!showTooltip}
         />
       );
     }
   }
 
-  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className="h-3 w-3 mx-[4px] flex-shrink-0" />;
+  return Icon ? <Icon className="h-3 w-3 flex-shrink-0" /> : <Users className={cn("h-3 w-3 mx-[4px] flex-shrink-0")} />;
 });
diff --git a/web/core/components/dropdowns/member/index.tsx b/web/core/components/dropdowns/member/index.tsx
index f905bc27b..d86d31534 100644
--- a/web/core/components/dropdowns/member/index.tsx
+++ b/web/core/components/dropdowns/member/index.tsx
@@ -1,6 +1,7 @@
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { ChevronDown, LucideIcon } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ComboDropDown } from "@plane/ui";
 // helpers
@@ -23,9 +24,11 @@ type Props = {
   onClose?: () => void;
   renderByDefault?: boolean;
   optionsClassName?: string;
+  memberIds?: string[];
 } & MemberDropdownProps;
 
 export const MemberDropdown: React.FC<Props> = observer((props) => {
+  const { t } = useTranslation();
   const {
     button,
     buttonClassName,
@@ -40,7 +43,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     multiple,
     onChange,
     onClose,
-    placeholder = "Members",
+    placeholder = t("members"),
     tooltipContent,
     placement,
     projectId,
@@ -50,6 +53,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     value,
     icon,
     renderByDefault = true,
+    memberIds,
   } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -86,7 +90,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
         if (value.length === 1) {
           return getUserDetails(value[0])?.display_name || placeholder;
         } else {
-          return showUserDetails ? `${value.length} members` : "";
+          return showUserDetails ? `${value.length} ${t("members").toLocaleLowerCase()}` : "";
         }
       } else {
         return placeholder;
@@ -109,6 +113,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
           className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
           onClick={handleOnClick}
           disabled={disabled}
+          tabIndex={tabIndex}
         >
           {button}
         </button>
@@ -126,12 +131,15 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
           )}
           onClick={handleOnClick}
           disabled={disabled}
+          tabIndex={tabIndex}
         >
           <DropdownButton
             className={cn("text-xs", buttonClassName)}
             isActive={isOpen}
             tooltipHeading={placeholder}
-            tooltipContent={tooltipContent ?? `${value?.length ?? 0} assignee${value?.length !== 1 ? "s" : ""}`}
+            tooltipContent={
+              tooltipContent ?? `${value?.length ?? 0} ${value?.length !== 1 ? t("assignees") : t("assignee")}`
+            }
             showTooltip={showTooltip}
             variant={buttonVariant}
             renderToolTipByDefault={renderByDefault}
@@ -155,7 +163,6 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     <ComboDropDown
       as="div"
       ref={dropdownRef}
-      tabIndex={tabIndex}
       className={cn("h-full", className)}
       onChange={dropdownOnChange}
       onKeyDown={handleKeyDown}
@@ -165,6 +172,7 @@ export const MemberDropdown: React.FC<Props> = observer((props) => {
     >
       {isOpen && (
         <MemberOptions
+          memberIds={memberIds}
           optionsClassName={optionsClassName}
           isOpen={isOpen}
           projectId={projectId}
diff --git a/web/core/components/dropdowns/member/member-options.tsx b/web/core/components/dropdowns/member/member-options.tsx
index a2283fa4b..085aa8324 100644
--- a/web/core/components/dropdowns/member/member-options.tsx
+++ b/web/core/components/dropdowns/member/member-options.tsx
@@ -8,6 +8,8 @@ import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
 import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+import { EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // plane ui
 import { Avatar } from "@plane/ui";
 // helpers
@@ -18,6 +20,7 @@ import { useUser, useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 interface Props {
+  memberIds?: string[];
   className?: string;
   optionsClassName?: string;
   projectId?: string;
@@ -27,17 +30,18 @@ interface Props {
 }
 
 export const MemberOptions: React.FC<Props> = observer((props: Props) => {
-  const { projectId, referenceElement, placement, isOpen, optionsClassName = "" } = props;
+  const { memberIds: propsMemberIds, projectId, referenceElement, placement, isOpen, optionsClassName = "" } = props;
   // states
   const [query, setQuery] = useState("");
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   // refs
   const inputRef = useRef<HTMLInputElement | null>(null);
   // store hooks
+  const { t } = useTranslation();
   const { workspaceSlug } = useParams();
   const {
     getUserDetails,
-    project: { getProjectMemberIds, fetchProjectMembers },
+    project: { getProjectMemberIds, fetchProjectMembers, getProjectMemberDetails },
     workspace: { workspaceMemberIds },
   } = useMember();
   const { data: currentUser } = useUser();
@@ -64,7 +68,7 @@ export const MemberOptions: React.FC<Props> = observer((props: Props) => {
     }
   }, [isOpen, isMobile]);
 
-  const memberIds = projectId ? getProjectMemberIds(projectId) : workspaceMemberIds;
+  const memberIds = propsMemberIds ? propsMemberIds : projectId ? getProjectMemberIds(projectId) : workspaceMemberIds;
   const onOpen = () => {
     if (!memberIds && workspaceSlug && projectId) fetchProjectMembers(workspaceSlug.toString(), projectId);
   };
@@ -76,23 +80,32 @@ export const MemberOptions: React.FC<Props> = observer((props: Props) => {
     }
   };
 
-  const options = memberIds?.map((userId) => {
-    const userDetails = getUserDetails(userId);
+  const options = memberIds
+    ?.map((userId) => {
+      const userDetails = getUserDetails(userId);
+      if (projectId) {
+        const role = getProjectMemberDetails(userId, projectId)?.role;
+        const isGuest = role === EUserPermissions.GUEST;
+        if (isGuest) return;
+      }
 
-    return {
-      value: userId,
-      query: `${userDetails?.display_name} ${userDetails?.first_name} ${userDetails?.last_name}`,
-      content: (
-        <div className="flex items-center gap-2">
-          <Avatar name={userDetails?.display_name} src={getFileURL(userDetails?.avatar_url ?? "")} />
-          <span className="flex-grow truncate">{currentUser?.id === userId ? "You" : userDetails?.display_name}</span>
-        </div>
-      ),
-    };
-  });
+      return {
+        value: userId,
+        query: `${userDetails?.display_name} ${userDetails?.first_name} ${userDetails?.last_name}`,
+        content: (
+          <div className="flex items-center gap-2">
+            <Avatar name={userDetails?.display_name} src={getFileURL(userDetails?.avatar_url ?? "")} />
+            <span className="flex-grow truncate">
+              {currentUser?.id === userId ? t("you") : userDetails?.display_name}
+            </span>
+          </div>
+        ),
+      };
+    })
+    .filter((o) => !!o);
 
   const filteredOptions =
-    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+    query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase()));
 
   return createPortal(
     <Combobox.Options data-prevent-outside-click static>
@@ -115,7 +128,7 @@ export const MemberOptions: React.FC<Props> = observer((props: Props) => {
             className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search"
+            placeholder={t("search")}
             displayValue={(assigned: any) => assigned?.name}
             onKeyDown={searchInputKeyDown}
           />
@@ -123,29 +136,32 @@ export const MemberOptions: React.FC<Props> = observer((props: Props) => {
         <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
           {filteredOptions ? (
             filteredOptions.length > 0 ? (
-              filteredOptions.map((option) => (
-                <Combobox.Option
-                  key={option.value}
-                  value={option.value}
-                  className={({ active, selected }) =>
-                    `flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
-                      active ? "bg-custom-background-80" : ""
-                    } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                  }
-                >
-                  {({ selected }) => (
-                    <>
-                      <span className="flex-grow truncate">{option.content}</span>
-                      {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-                    </>
-                  )}
-                </Combobox.Option>
-              ))
+              filteredOptions.map(
+                (option) =>
+                  option && (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      className={({ active, selected }) =>
+                        `flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          <span className="flex-grow truncate">{option.content}</span>
+                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  )
+              )
             ) : (
-              <p className="px-1.5 py-1 italic text-custom-text-400">No matching results</p>
+              <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-custom-text-400">Loading...</p>
+            <p className="px-1.5 py-1 italic text-custom-text-400">{t("loading")}</p>
           )}
         </div>
       </div>
diff --git a/web/core/components/dropdowns/module/index.tsx b/web/core/components/dropdowns/module/index.tsx
index b4f20256b..f9233e0b2 100644
--- a/web/core/components/dropdowns/module/index.tsx
+++ b/web/core/components/dropdowns/module/index.tsx
@@ -3,6 +3,8 @@
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { ChevronDown, X } from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ComboDropDown, DiceIcon, Tooltip } from "@plane/ui";
 // helpers
@@ -185,6 +187,8 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     value,
     renderByDefault = true,
   } = props;
+  // i18n
+  const { t } = useTranslation();
   // states
   const [isOpen, setIsOpen] = useState(false);
   // refs
@@ -235,6 +239,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
           )}
           onClick={handleOnClick}
           disabled={disabled}
+          tabIndex={tabIndex}
         >
           {button}
         </button>
@@ -252,11 +257,12 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
           )}
           onClick={handleOnClick}
           disabled={disabled}
+          tabIndex={tabIndex}
         >
           <DropdownButton
             className={buttonClassName}
             isActive={isOpen}
-            tooltipHeading="Module"
+            tooltipHeading={t("common.module")}
             tooltipContent={
               Array.isArray(value)
                 ? `${value
@@ -292,7 +298,6 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
     <ComboDropDown
       as="div"
       ref={dropdownRef}
-      tabIndex={tabIndex}
       className={cn("h-full", className)}
       onKeyDown={handleKeyDown}
       button={comboButton}
diff --git a/web/core/components/dropdowns/module/module-options.tsx b/web/core/components/dropdowns/module/module-options.tsx
index 2d8d55d28..d2d3f909d 100644
--- a/web/core/components/dropdowns/module/module-options.tsx
+++ b/web/core/components/dropdowns/module/module-options.tsx
@@ -7,6 +7,8 @@ import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Check, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 //components
 import { DiceIcon } from "@plane/ui";
 //store
@@ -35,6 +37,8 @@ interface Props {
 
 export const ModuleOptions = observer((props: Props) => {
   const { projectId, isOpen, referenceElement, placement, multiple } = props;
+  // i18n
+  const { t } = useTranslation();
   // states
   const [query, setQuery] = useState("");
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -97,11 +101,11 @@ export const ModuleOptions = observer((props: Props) => {
   if (!multiple)
     options?.unshift({
       value: null,
-      query: "No module",
+      query: t("module.no_module"),
       content: (
         <div className="flex items-center gap-2">
           <DiceIcon className="h-3 w-3 flex-shrink-0" />
-          <span className="flex-grow truncate">No module</span>
+          <span className="flex-grow truncate">{t("module.no_module")}</span>
         </div>
       ),
     });
@@ -125,7 +129,7 @@ export const ModuleOptions = observer((props: Props) => {
             className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search"
+            placeholder={t("common.search.label")}
             displayValue={(assigned: any) => assigned?.name}
             onKeyDown={searchInputKeyDown}
           />
@@ -157,10 +161,10 @@ export const ModuleOptions = observer((props: Props) => {
                 </Combobox.Option>
               ))
             ) : (
-              <p className="px-1.5 py-1 italic text-custom-text-400">No matching results</p>
+              <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.search.no_matching_results")}</p>
             )
           ) : (
-            <p className="px-1.5 py-1 italic text-custom-text-400">Loading...</p>
+            <p className="px-1.5 py-1 italic text-custom-text-400">{t("common.loading")}</p>
           )}
         </div>
       </div>
diff --git a/web/core/components/dropdowns/priority.tsx b/web/core/components/dropdowns/priority.tsx
index ee1167915..dfc0ff071 100644
--- a/web/core/components/dropdowns/priority.tsx
+++ b/web/core/components/dropdowns/priority.tsx
@@ -5,12 +5,12 @@ import { useTheme } from "next-themes";
 import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, SignalHigh } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import { TIssuePriorities } from "@plane/types";
 // ui
 import { ComboDropDown, PriorityIcon, Tooltip } from "@plane/ui";
-// constants
-import { ISSUE_PRIORITIES } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -71,11 +71,12 @@ const BorderButton = (props: ButtonProps) => {
   };
 
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
 
   return (
     <Tooltip
-      tooltipHeading="Priority"
-      tooltipContent={priorityDetails?.title ?? "None"}
+      tooltipHeading={t("priority")}
+      tooltipContent={priorityDetails?.title ?? t("common.none")}
       disabled={!showTooltip}
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
@@ -153,11 +154,12 @@ const BackgroundButton = (props: ButtonProps) => {
   };
 
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
 
   return (
     <Tooltip
-      tooltipHeading="Priority"
-      tooltipContent={priorityDetails?.title ?? "None"}
+      tooltipHeading={t("priority")}
+      tooltipContent={t(priorityDetails?.key ?? "none")}
       disabled={!showTooltip}
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
@@ -201,7 +203,9 @@ const BackgroundButton = (props: ButtonProps) => {
           ) : (
             <SignalHigh className="size-3" />
           ))}
-        {!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
+        {!hideText && (
+          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+        )}
         {dropdownArrow && (
           <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
@@ -236,11 +240,12 @@ const TransparentButton = (props: ButtonProps) => {
   };
 
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
 
   return (
     <Tooltip
-      tooltipHeading="Priority"
-      tooltipContent={priorityDetails?.title ?? "None"}
+      tooltipHeading={t("priority")}
+      tooltipContent={priorityDetails?.title ?? t("common.none")}
       disabled={!showTooltip}
       isMobile={isMobile}
       renderByDefault={renderToolTipByDefault}
@@ -285,7 +290,9 @@ const TransparentButton = (props: ButtonProps) => {
           ) : (
             <SignalHigh className="size-3" />
           ))}
-        {!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
+        {!hideText && (
+          <span className="flex-grow truncate">{priorityDetails?.title ?? t("common.priority") ?? placeholder}</span>
+        )}
         {dropdownArrow && (
           <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
         )}
@@ -295,6 +302,8 @@ const TransparentButton = (props: ButtonProps) => {
 };
 
 export const PriorityDropdown: React.FC<Props> = (props) => {
+  //hooks
+  const { t } = useTranslation();
   const {
     button,
     buttonClassName,
@@ -308,7 +317,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     highlightUrgent = true,
     onChange,
     onClose,
-    placeholder = "Priority",
+    placeholder = t("common.priority"),
     placement,
     showTooltip = false,
     tabIndex,
@@ -336,6 +345,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       },
     ],
   });
+
   // next-themes
   // TODO: remove this after new theming implementation
   const { resolvedTheme } = useTheme();
@@ -384,6 +394,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
           className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
           onClick={handleOnClick}
           disabled={disabled}
+          tabIndex={tabIndex}
         >
           {button}
         </button>
@@ -401,6 +412,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
           )}
           onClick={handleOnClick}
           disabled={disabled}
+          tabIndex={tabIndex}
         >
           <ButtonToRender
             priority={value ?? undefined}
@@ -425,7 +437,6 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
     <ComboDropDown
       as="div"
       ref={dropdownRef}
-      tabIndex={tabIndex}
       className={cn(
         "h-full",
         {
@@ -456,7 +467,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
+                placeholder={t("search")}
                 displayValue={(assigned: any) => assigned?.name}
                 onKeyDown={searchInputKeyDown}
               />
@@ -482,7 +493,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                   </Combobox.Option>
                 ))
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
               )}
             </div>
           </div>
diff --git a/web/core/components/dropdowns/project.tsx b/web/core/components/dropdowns/project.tsx
index 3f973cd16..88c13bdb9 100644
--- a/web/core/components/dropdowns/project.tsx
+++ b/web/core/components/dropdowns/project.tsx
@@ -1,9 +1,10 @@
-import { Fragment, ReactNode, useRef, useState } from "react";
+import { ReactNode, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search } from "lucide-react";
+import { Briefcase, Check, ChevronDown, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // ui
+import { useTranslation } from "@plane/i18n";
 import { ComboDropDown } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
@@ -25,12 +26,21 @@ type Props = TDropdownProps & {
   button?: ReactNode;
   dropdownArrow?: boolean;
   dropdownArrowClassName?: string;
-  onChange: (val: string) => void;
   onClose?: () => void;
   renderCondition?: (project: TProject) => boolean;
-  value: string | null;
   renderByDefault?: boolean;
-};
+} & (
+    | {
+        multiple: false;
+        onChange: (val: string) => void;
+        value: string | null;
+      }
+    | {
+        multiple: true;
+        onChange: (val: string[]) => void;
+        value: string[];
+      }
+  );
 
 export const ProjectDropdown: React.FC<Props> = observer((props) => {
   const {
@@ -43,6 +53,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
     dropdownArrow = false,
     dropdownArrowClassName = "",
     hideIcon = false,
+    multiple,
     onChange,
     onClose,
     placeholder = "Project",
@@ -76,7 +87,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
   });
   // store hooks
   const { joinedProjectIds, getProjectById } = useProject();
-
+  const { t } = useTranslation();
   const options = joinedProjectIds?.map((projectId) => {
     const projectDetails = getProjectById(projectId);
     if (renderCondition && projectDetails && !renderCondition(projectDetails)) return;
@@ -99,8 +110,6 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
   const filteredOptions =
     query === "" ? options : options?.filter((o) => o?.query.toLowerCase().includes(query.toLowerCase()));
 
-  const selectedProject = value ? getProjectById(value) : null;
-
   const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
     dropdownRef,
     inputRef,
@@ -111,9 +120,44 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
     setQuery,
   });
 
-  const dropdownOnChange = (val: string) => {
+  const dropdownOnChange = (val: string & string[]) => {
     onChange(val);
-    handleClose();
+    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 = (projectDetails: TProject) => (
+      <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+        <Logo logo={projectDetails.logo_props} 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 ? renderIcon(projectDetails) : null;
+            })
+          ) : (
+            <Briefcase className="size-3 text-custom-text-300" />
+          )}
+        </div>
+      );
+    } else {
+      const projectDetails = getProjectById(value);
+      return projectDetails ? renderIcon(projectDetails) : null;
+    }
   };
 
   const comboButton = (
@@ -147,18 +191,14 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
             className={buttonClassName}
             isActive={isOpen}
             tooltipHeading="Project"
-            tooltipContent={selectedProject?.name ?? placeholder}
+            tooltipContent={value?.length ? `${value.length} project${value.length !== 1 ? "s" : ""}` : placeholder}
             showTooltip={showTooltip}
             variant={buttonVariant}
             renderToolTipByDefault={renderByDefault}
           >
-            {!hideIcon && selectedProject && (
-              <span className="grid place-items-center flex-shrink-0 h-4 w-4">
-                <Logo logo={selectedProject.logo_props} size={12} />
-              </span>
-            )}
+            {!hideIcon && getProjectIcon(value)}
             {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-              <span className="flex-grow truncate max-w-40">{selectedProject?.name ?? placeholder}</span>
+              <span className="flex-grow truncate max-w-40">{getDisplayName(value, placeholder)}</span>
             )}
             {dropdownArrow && (
               <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -181,6 +221,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
       onKeyDown={handleKeyDown}
       button={comboButton}
       renderByDefault={renderByDefault}
+      multiple={multiple}
     >
       {isOpen && (
         <Combobox.Options className="fixed z-10" static>
@@ -198,7 +239,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
+                placeholder={t("search")}
                 displayValue={(assigned: any) => assigned?.name}
                 onKeyDown={searchInputKeyDown}
               />
@@ -228,10 +269,10 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
                     );
                   })
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                  <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-custom-text-400 italic py-1 px-1.5">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/web/core/components/dropdowns/state.tsx b/web/core/components/dropdowns/state.tsx
index 86d8d8052..1ac0fe25f 100644
--- a/web/core/components/dropdowns/state.tsx
+++ b/web/core/components/dropdowns/state.tsx
@@ -6,6 +6,7 @@ import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { ChevronDown, Search } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ComboDropDown, Spinner, StateGroupIcon } from "@plane/ui";
 // helpers
@@ -34,6 +35,7 @@ type Props = TDropdownProps & {
   renderByDefault?: boolean;
   stateIds?: string[];
   filterAvailableStateIds?: boolean;
+  isForWorkItemCreation?: boolean;
 };
 
 export const StateDropdown: React.FC<Props> = observer((props) => {
@@ -58,6 +60,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     renderByDefault = true,
     stateIds,
     filterAvailableStateIds = true,
+    isForWorkItemCreation = false,
   } = props;
   // states
   const [query, setQuery] = useState("");
@@ -82,6 +85,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     ],
   });
   // store hooks
+  const { t } = useTranslation();
   const { workspaceSlug } = useParams();
   const { fetchProjectStates, getProjectStates, getStateById } = useProjectState();
   const statesList = stateIds
@@ -96,7 +100,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     content: (
       <div className="flex items-center gap-2">
         <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
-        <span className="flex-grow truncate">{state?.name}</span>
+        <span className="flex-grow truncate text-left">{state?.name}</span>
       </div>
     ),
   }));
@@ -139,11 +143,13 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
           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(
@@ -160,8 +166,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
           <DropdownButton
             className={buttonClassName}
             isActive={isOpen}
-            tooltipHeading="State"
-            tooltipContent={selectedState?.name ?? "State"}
+            tooltipHeading={t("state")}
+            tooltipContent={selectedState?.name ?? t("state")}
             showTooltip={showTooltip}
             variant={buttonVariant}
             renderToolTipByDefault={renderByDefault}
@@ -178,7 +184,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                   />
                 )}
                 {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
-                  <span className="flex-grow truncate">{selectedState?.name ?? "State"}</span>
+                  <span className="flex-grow truncate text-left">{selectedState?.name ?? t("state")}</span>
                 )}
                 {dropdownArrow && (
                   <ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -195,7 +201,6 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
     <ComboDropDown
       as="div"
       ref={dropdownRef}
-      tabIndex={tabIndex}
       className={cn("h-full", className)}
       value={stateValue}
       onChange={dropdownOnChange}
@@ -220,7 +225,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 value={query}
                 onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
+                placeholder={t("common.search.label")}
                 displayValue={(assigned: any) => assigned?.name}
                 onKeyDown={searchInputKeyDown}
               />
@@ -236,13 +241,14 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
                       filterAvailableStateIds={filterAvailableStateIds}
                       selectedValue={value}
                       className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5"
+                      isForWorkItemCreation={isForWorkItemCreation}
                     />
                   ))
                 ) : (
-                  <p className="px-1.5 py-1 italic text-custom-text-400">No matches found</p>
+                  <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="px-1.5 py-1 italic text-custom-text-400">Loading...</p>
+                <p className="px-1.5 py-1 italic text-custom-text-400">{t("loading")}</p>
               )}
             </div>
           </div>
diff --git a/web/core/components/editor/embeds/index.ts b/web/core/components/editor/embeds/index.ts
new file mode 100644
index 000000000..8146e94d9
--- /dev/null
+++ b/web/core/components/editor/embeds/index.ts
@@ -0,0 +1 @@
+export * from "./mentions";
diff --git a/web/core/components/editor/embeds/mentions/index.ts b/web/core/components/editor/embeds/mentions/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/web/core/components/editor/embeds/mentions/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/core/components/editor/embeds/mentions/root.tsx b/web/core/components/editor/embeds/mentions/root.tsx
new file mode 100644
index 000000000..9ea5ef6fb
--- /dev/null
+++ b/web/core/components/editor/embeds/mentions/root.tsx
@@ -0,0 +1,17 @@
+// plane editor
+import { TMentionComponentProps } from "@plane/editor";
+// plane web components
+import { EditorAdditionalMentionsRoot } from "@/plane-web/components/editor";
+// local components
+import { EditorUserMention } from "./user";
+
+export const EditorMentionsRoot: React.FC<TMentionComponentProps> = (props) => {
+  const { entity_identifier, entity_name } = props;
+
+  switch (entity_name) {
+    case "user_mention":
+      return <EditorUserMention id={entity_identifier} />;
+    default:
+      return <EditorAdditionalMentionsRoot {...props} />;
+  }
+};
diff --git a/web/core/components/editor/embeds/mentions/user.tsx b/web/core/components/editor/embeds/mentions/user.tsx
new file mode 100644
index 000000000..a8e4a4b0b
--- /dev/null
+++ b/web/core/components/editor/embeds/mentions/user.tsx
@@ -0,0 +1,99 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+// plane imports
+import { ROLE } from "@plane/constants";
+// plane ui
+import { Avatar } from "@plane/ui";
+// constants
+// helpers
+import { cn } from "@/helpers/common.helper";
+import { getFileURL } from "@/helpers/file.helper";
+// hooks
+import { useMember, useUser } from "@/hooks/store";
+
+type Props = {
+  id: string;
+};
+
+export const EditorUserMention: React.FC<Props> = observer((props) => {
+  const { id } = props;
+  // router
+  const { projectId } = useParams();
+  // states
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLAnchorElement | null>(null);
+  // params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+  const {
+    getUserDetails,
+    project: { getProjectMemberDetails },
+  } = useMember();
+  // popper-js refs
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // 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 px-1 py-0.5 rounded bg-custom-background-80 text-custom-text-300 no-underline">
+        @deactivated user
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "not-prose group/user-mention inline px-1 py-0.5 rounded bg-custom-primary-100/20 text-custom-primary-100 no-underline",
+        {
+          "bg-yellow-500/20 text-yellow-500": id === currentUser?.id,
+        }
+      )}
+    >
+      <Link href={profileLink} ref={setReferenceElement}>
+        @{userDetails?.display_name}
+      </Link>
+      <div
+        className="top-full left-0 z-10 min-w-60 bg-custom-background-90 shadow-custom-shadow-rg rounded-lg p-4 opacity-0 pointer-events-none group-hover/user-mention:opacity-100 group-hover/user-mention:pointer-events-auto transition-opacity"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        <div className="flex items-center gap-3">
+          <div className="flex-shrink-0 size-10 grid place-items-center">
+            <Avatar
+              src={getFileURL(userDetails?.avatar_url ?? "")}
+              name={userDetails?.display_name}
+              size={40}
+              className="text-xl"
+              showTooltip={false}
+            />
+          </div>
+          <div>
+            <Link href={profileLink} className="not-prose font-medium text-custom-text-100 text-sm hover:underline">
+              {userDetails?.first_name} {userDetails?.last_name}
+            </Link>
+            {roleDetails && <p className="text-custom-text-200 text-xs">{ROLE[roleDetails]}</p>}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/components/editor/index.ts b/web/core/components/editor/index.ts
index 0b14bd135..674bbdf15 100644
--- a/web/core/components/editor/index.ts
+++ b/web/core/components/editor/index.ts
@@ -1,3 +1,5 @@
+export * from "./embeds";
 export * from "./lite-text-editor";
 export * from "./pdf";
 export * from "./rich-text-editor";
+export * from "./sticky-editor";
diff --git a/web/core/components/editor/lite-text-editor/lite-text-editor.tsx b/web/core/components/editor/lite-text-editor/lite-text-editor.tsx
index 0fe75904d..63de65bc6 100644
--- a/web/core/components/editor/lite-text-editor/lite-text-editor.tsx
+++ b/web/core/components/editor/lite-text-editor/lite-text-editor.tsx
@@ -1,21 +1,22 @@
-import React from "react";
-// editor
-import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef } from "@plane/editor";
-// types
-import { IUserLite } from "@plane/types";
+import React, { useState } from "react";
+// plane constants
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
+// plane editor
+import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef, TFileHandler } from "@plane/editor";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // components
-import { IssueCommentToolbar } from "@/components/editor";
-// constants
-import { EIssueCommentAccessSpecifier } from "@/constants/issue";
+import { EditorMentionsRoot, IssueCommentToolbar } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
-import { getEditorFileHandlers } from "@/helpers/editor.helper";
 import { isCommentEmpty } from "@/helpers/string.helper";
 // hooks
-import { useMember, useMention, useUser } from "@/hooks/store";
+import { useEditorConfig, useEditorMention } from "@/hooks/editor";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
-import { useFileSize } from "@/plane-web/hooks/use-file-size";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+const workspaceService = new WorkspaceService();
 
 interface LiteTextEditorWrapperProps
   extends Omit<ILiteTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
@@ -27,44 +28,44 @@ interface LiteTextEditorWrapperProps
   showAccessSpecifier?: boolean;
   showSubmitButton?: boolean;
   isSubmitting?: boolean;
-  uploadFile: (file: File) => Promise<string>;
+  showToolbarInitially?: boolean;
+  uploadFile: TFileHandler["upload"];
+  issue_id?: string;
 }
 
 export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
+  const { t } = useTranslation();
   const {
     containerClassName,
     workspaceSlug,
     workspaceId,
     projectId,
+    issue_id,
     accessSpecifier,
     handleAccessChange,
     showAccessSpecifier = false,
     showSubmitButton = true,
     isSubmitting = false,
-    placeholder = "Add comment...",
+    showToolbarInitially = true,
+    placeholder = t("issue.comments.placeholder"),
     uploadFile,
     ...rest
   } = props;
-  // store hooks
-  const { data: currentUser } = useUser();
-  const {
-    getUserDetails,
-    project: { getProjectMemberIds },
-  } = useMember();
+  // states
+  const [isFocused, setIsFocused] = useState(showToolbarInitially);
   // editor flaggings
   const { liteTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
-  // derived values
-  const projectMemberIds = getProjectMemberIds(projectId);
-  const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
-  // use-mention
-  const { mentionHighlights, mentionSuggestions } = useMention({
-    workspaceSlug,
-    projectId,
-    members: projectMemberDetails,
-    user: currentUser ?? undefined,
+  // use editor mention
+  const { fetchMentions } = useEditorMention({
+    searchEntity: async (payload) =>
+      await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+        ...payload,
+        project_id: projectId?.toString() ?? "",
+        issue_id: issue_id,
+      }),
   });
-  // file size
-  const { maxFileSize } = useFileSize();
+  // 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;
   }
@@ -73,43 +74,57 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
   const editorRef = isMutableRefObject<EditorRefApi>(ref) ? ref.current : null;
 
   return (
-    <div className="border border-custom-border-200 rounded p-3 space-y-3">
+    <div
+      className={cn("relative border border-custom-border-200 rounded p-3")}
+      onFocus={() => !showToolbarInitially && setIsFocused(true)}
+      onBlur={() => !showToolbarInitially && setIsFocused(false)}
+    >
       <LiteTextEditorWithRef
         ref={ref}
         disabledExtensions={disabledExtensions}
         fileHandler={getEditorFileHandlers({
-          maxFileSize,
           projectId,
           uploadFile,
           workspaceId,
           workspaceSlug,
         })}
         mentionHandler={{
-          highlights: mentionHighlights,
-          suggestions: mentionSuggestions,
+          searchCallback: async (query) => {
+            const res = await fetchMentions(query);
+            if (!res) throw new Error("Failed in fetching mentions");
+            return res;
+          },
+          renderComponent: (props) => <EditorMentionsRoot {...props} />,
         }}
         placeholder={placeholder}
         containerClassName={cn(containerClassName, "relative")}
         {...rest}
       />
-      <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}
-      />
+      <div
+        className={cn(
+          "transition-all duration-300 ease-out origin-top overflow-hidden",
+          isFocused ? "max-h-[200px] opacity-100 scale-y-100 mt-3" : "max-h-0 opacity-0 scale-y-0 invisible"
+        )}
+      >
+        <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}
+        />
+      </div>
     </div>
   );
 });
diff --git a/web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx b/web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx
index 1f1edad7d..007e2a37b 100644
--- a/web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx
+++ b/web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx
@@ -1,11 +1,12 @@
 import React from "react";
-// editor
+// plane editor
 import { EditorReadOnlyRefApi, ILiteTextReadOnlyEditor, LiteTextReadOnlyEditorWithRef } from "@plane/editor";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
-import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
-import { useMention, useUser } from "@/hooks/store";
+import { useEditorConfig } from "@/hooks/editor";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 
@@ -13,19 +14,17 @@ type LiteTextReadOnlyEditorWrapperProps = Omit<
   ILiteTextReadOnlyEditor,
   "disabledExtensions" | "fileHandler" | "mentionHandler"
 > & {
+  workspaceId: string;
   workspaceSlug: string;
   projectId: string;
 };
 
 export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, LiteTextReadOnlyEditorWrapperProps>(
-  ({ workspaceSlug, projectId, ...props }, ref) => {
-    // store hooks
-    const { data: currentUser } = useUser();
-    const { mentionHighlights } = useMention({
-      user: currentUser,
-    });
+  ({ workspaceId, workspaceSlug, projectId, ...props }, ref) => {
     // editor flaggings
     const { liteTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
+    // editor config
+    const { getReadOnlyEditorFileHandlers } = useEditorConfig();
 
     return (
       <LiteTextReadOnlyEditorWithRef
@@ -33,10 +32,11 @@ export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Lit
         disabledExtensions={disabledExtensions}
         fileHandler={getReadOnlyEditorFileHandlers({
           projectId,
+          workspaceId,
           workspaceSlug,
         })}
         mentionHandler={{
-          highlights: mentionHighlights,
+          renderComponent: (props) => <EditorMentionsRoot {...props} />,
         }}
         {...props}
         // overriding the containerClassName to add relative class passed
diff --git a/web/core/components/editor/lite-text-editor/toolbar.tsx b/web/core/components/editor/lite-text-editor/toolbar.tsx
index 1951a3170..818e35fae 100644
--- a/web/core/components/editor/lite-text-editor/toolbar.tsx
+++ b/web/core/components/editor/lite-text-editor/toolbar.tsx
@@ -2,13 +2,15 @@
 
 import React, { useEffect, useState, useCallback } from "react";
 import { Globe2, Lock, LucideIcon } from "lucide-react";
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
 // editor
 import { EditorRefApi } from "@plane/editor";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Button, Tooltip } from "@plane/ui";
 // constants
 import { TOOLBAR_ITEMS, ToolbarMenuItem } from "@/constants/editor";
-import { EIssueCommentAccessSpecifier } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -46,6 +48,7 @@ const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
 const toolbarItems = TOOLBAR_ITEMS.lite;
 
 export const IssueCommentToolbar: React.FC<Props> = (props) => {
+  const { t } = useTranslation();
   const {
     accessSpecifier,
     executeCommand,
@@ -57,7 +60,6 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
     showSubmitButton,
     editorRef,
   } = props;
-
   // State to manage active states of toolbar items
   const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
 
@@ -86,6 +88,9 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
     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 bg-custom-background-90 overflow-x-scroll">
       {showAccessSpecifier && (
@@ -166,10 +171,10 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
               variant="primary"
               className="px-2.5 py-1.5 text-xs"
               onClick={handleSubmit}
-              disabled={isCommentEmpty}
+              disabled={isSubmitButtonDisabled}
               loading={isSubmitting}
             >
-              Comment
+              {t("common.comment")}
             </Button>
           </div>
         )}
diff --git a/web/core/components/editor/rich-text-editor/rich-text-editor.tsx b/web/core/components/editor/rich-text-editor/rich-text-editor.tsx
index 908ac5022..a43906d04 100644
--- a/web/core/components/editor/rich-text-editor/rich-text-editor.tsx
+++ b/web/core/components/editor/rich-text-editor/rich-text-editor.tsx
@@ -1,62 +1,55 @@
 import React, { forwardRef } from "react";
 // editor
-import { EditorRefApi, IRichTextEditor, RichTextEditorWithRef } from "@plane/editor";
-// types
-import { IUserLite } from "@plane/types";
+import { EditorRefApi, IRichTextEditor, RichTextEditorWithRef, TFileHandler } from "@plane/editor";
+// plane types
+import { TSearchEntityRequestPayload, TSearchResponse } from "@plane/types";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
-import { getEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
-import { useMember, useMention, useUser } from "@/hooks/store";
+import { useEditorConfig, useEditorMention } from "@/hooks/editor";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
-import { useFileSize } from "@/plane-web/hooks/use-file-size";
 
 interface RichTextEditorWrapperProps
   extends Omit<IRichTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
+  searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
   workspaceSlug: string;
   workspaceId: string;
-  projectId: string;
-  uploadFile: (file: File) => Promise<string>;
+  projectId?: string;
+  uploadFile: TFileHandler["upload"];
 }
 
 export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
-  const { containerClassName, workspaceSlug, workspaceId, projectId, uploadFile, ...rest } = props;
-  // store hooks
-  const { data: currentUser } = useUser();
-  const {
-    getUserDetails,
-    project: { getProjectMemberIds },
-  } = useMember();
+  const { containerClassName, workspaceSlug, workspaceId, projectId, searchMentionCallback, uploadFile, ...rest } =
+    props;
   // editor flaggings
   const { richTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
-  // derived values
-  const projectMemberIds = getProjectMemberIds(projectId);
-  const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
-  // use-mention
-  const { mentionHighlights, mentionSuggestions } = useMention({
-    workspaceSlug,
-    projectId,
-    members: projectMemberDetails,
-    user: currentUser ?? undefined,
+  // use editor mention
+  const { fetchMentions } = useEditorMention({
+    searchEntity: async (payload) => await searchMentionCallback(payload),
   });
-  // file size
-  const { maxFileSize } = useFileSize();
+  // editor config
+  const { getEditorFileHandlers } = useEditorConfig();
 
   return (
     <RichTextEditorWithRef
       ref={ref}
       disabledExtensions={disabledExtensions}
       fileHandler={getEditorFileHandlers({
-        maxFileSize,
         projectId,
         uploadFile,
         workspaceId,
         workspaceSlug,
       })}
       mentionHandler={{
-        highlights: mentionHighlights,
-        suggestions: mentionSuggestions,
+        searchCallback: async (query) => {
+          const res = await fetchMentions(query);
+          if (!res) throw new Error("Failed in fetching mentions");
+          return res;
+        },
+        renderComponent: (props) => <EditorMentionsRoot {...props} />,
       }}
       {...rest}
       containerClassName={cn("relative pl-3", containerClassName)}
diff --git a/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx b/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
index a9067641f..950f655cb 100644
--- a/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
+++ b/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
@@ -1,11 +1,12 @@
 import React from "react";
 // editor
 import { EditorReadOnlyRefApi, IRichTextReadOnlyEditor, RichTextReadOnlyEditorWithRef } from "@plane/editor";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
-import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
-import { useMention } from "@/hooks/store";
+import { useEditorConfig } from "@/hooks/editor";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 
@@ -13,15 +14,17 @@ type RichTextReadOnlyEditorWrapperProps = Omit<
   IRichTextReadOnlyEditor,
   "disabledExtensions" | "fileHandler" | "mentionHandler"
 > & {
+  workspaceId: string;
   workspaceSlug: string;
   projectId?: string;
 };
 
 export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, RichTextReadOnlyEditorWrapperProps>(
-  ({ workspaceSlug, projectId, ...props }, ref) => {
-    const { mentionHighlights } = useMention({});
+  ({ workspaceId, workspaceSlug, projectId, ...props }, ref) => {
     // editor flaggings
     const { richTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
+    // editor config
+    const { getReadOnlyEditorFileHandlers } = useEditorConfig();
 
     return (
       <RichTextReadOnlyEditorWithRef
@@ -29,10 +32,11 @@ export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, Ric
         disabledExtensions={disabledExtensions}
         fileHandler={getReadOnlyEditorFileHandlers({
           projectId,
+          workspaceId,
           workspaceSlug,
         })}
         mentionHandler={{
-          highlights: mentionHighlights,
+          renderComponent: (props) => <EditorMentionsRoot {...props} />,
         }}
         {...props}
         // overriding the containerClassName to add relative class passed
diff --git a/web/core/components/editor/sticky-editor/color-palette.tsx b/web/core/components/editor/sticky-editor/color-palette.tsx
new file mode 100644
index 000000000..a4fe05b77
--- /dev/null
+++ b/web/core/components/editor/sticky-editor/color-palette.tsx
@@ -0,0 +1,78 @@
+import { TSticky } from "@plane/types";
+
+export const STICKY_COLORS_LIST: {
+  key: string;
+  label: string;
+  backgroundColor: string;
+}[] = [
+  {
+    key: "gray",
+    label: "Gray",
+    backgroundColor: "rgba(var(--color-background-90))",
+  },
+  {
+    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 const ColorPalette = (props: TProps) => {
+  const { handleUpdate } = props;
+  return (
+    <div className="absolute z-10 bottom-5 left-0 w-56 shadow p-2 rounded-md bg-custom-background-100 mb-2">
+      <div className="text-sm font-semibold text-custom-text-400 mb-2">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 hover:ring-2 hover:ring-custom-primary focus:outline-none focus:ring-2 focus:ring-custom-primary transition-all"
+            style={{
+              backgroundColor: color.backgroundColor,
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/web/core/components/editor/sticky-editor/editor.tsx b/web/core/components/editor/sticky-editor/editor.tsx
new file mode 100644
index 000000000..de20e8902
--- /dev/null
+++ b/web/core/components/editor/sticky-editor/editor.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+// plane constants
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
+// plane editor
+import { EditorRefApi, ILiteTextEditor, LiteTextEditorWithRef, TFileHandler } from "@plane/editor";
+// components
+import { TSticky } from "@plane/types";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useEditorConfig } from "@/hooks/editor";
+// plane web hooks
+import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
+import { StickyEditorToolbar } from "./toolbar";
+
+interface StickyEditorWrapperProps
+  extends Omit<ILiteTextEditor, "disabledExtensions" | "fileHandler" | "mentionHandler"> {
+  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"];
+  parentClassName?: string;
+  handleColorChange: (data: Partial<TSticky>) => Promise<void>;
+  handleDelete: () => void;
+}
+
+export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperProps>((props, ref) => {
+  const {
+    containerClassName,
+    workspaceSlug,
+    workspaceId,
+    projectId,
+    handleDelete,
+    handleColorChange,
+    showToolbarInitially = true,
+    showToolbar = true,
+    parentClassName = "",
+    uploadFile,
+    ...rest
+  } = props;
+  // states
+  const [isFocused, setIsFocused] = useState(showToolbarInitially);
+  // editor flaggings
+  const { liteTextEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
+  // 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 border border-custom-border-200 rounded", parentClassName)}
+      onFocus={() => !showToolbarInitially && setIsFocused(true)}
+      onBlur={() => !showToolbarInitially && setIsFocused(false)}
+    >
+      <LiteTextEditorWithRef
+        ref={ref}
+        disabledExtensions={[...disabledExtensions, "enter-key"]}
+        fileHandler={getEditorFileHandlers({
+          projectId,
+          uploadFile,
+          workspaceId,
+          workspaceSlug,
+        })}
+        mentionHandler={{
+          renderComponent: () => <></>,
+        }}
+        containerClassName={cn(containerClassName, "relative")}
+        {...rest}
+      />
+      {showToolbar && (
+        <div
+          className={cn("transition-all duration-300 ease-out origin-top px-4 h-[60px]", {
+            "max-h-[60px] opacity-100 scale-y-100": isFocused,
+            "max-h-0 opacity-0 scale-y-0 invisible": !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/web/core/components/editor/sticky-editor/index.ts b/web/core/components/editor/sticky-editor/index.ts
new file mode 100644
index 000000000..f73ee92ef
--- /dev/null
+++ b/web/core/components/editor/sticky-editor/index.ts
@@ -0,0 +1,2 @@
+export * from "./editor";
+export * from "./toolbar";
diff --git a/web/core/components/editor/sticky-editor/toolbar.tsx b/web/core/components/editor/sticky-editor/toolbar.tsx
new file mode 100644
index 000000000..c92f7448d
--- /dev/null
+++ b/web/core/components/editor/sticky-editor/toolbar.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import React, { useEffect, useState, useCallback } from "react";
+import { Palette, Trash2 } from "lucide-react";
+// editor
+import { EditorRefApi } from "@plane/editor";
+// ui
+import { useOutsideClickDetector } from "@plane/hooks";
+import { TSticky } from "@plane/types";
+import { Tooltip } from "@plane/ui";
+// constants
+import { TOOLBAR_ITEMS, ToolbarMenuItem } from "@/constants/editor";
+// helpers
+import { cn } from "@/helpers/common.helper";
+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 const StickyEditorToolbar: React.FC<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 w-full justify-between h-full">
+      <div className="flex my-auto gap-4" ref={colorPaletteRef}>
+        {/* color palette */}
+        {showColorPalette && <ColorPalette handleUpdate={handleColorChange} />}
+        <Tooltip
+          tooltipContent={
+            <p className="flex flex-col gap-1 text-center text-xs">
+              <span className="font-medium">Background color</span>
+            </p>
+          }
+        >
+          <button
+            type="button"
+            onClick={() => setShowColorPalette(!showColorPalette)}
+            className="flex text-custom-text-100/50"
+          >
+            <Palette className="size-4 my-auto" />
+          </button>
+        </Tooltip>
+
+        <div className="flex w-fit items-stretch justify-between gap-4 rounded p-1 my-auto">
+          <div className="flex items-stretch my-auto 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}
+                      tooltipContent={
+                        <p className="flex flex-col gap-1 text-center text-xs">
+                          <span className="font-medium">{item.name}</span>
+                          {item.shortcut && <kbd className="text-custom-text-400">{item.shortcut.join(" + ")}</kbd>}
+                        </p>
+                      }
+                    >
+                      <button
+                        type="button"
+                        onClick={() => executeCommand(item)}
+                        className={cn(
+                          "grid place-items-center aspect-square rounded-sm p-0.5 text-custom-text-100/50",
+                          {}
+                        )}
+                      >
+                        <item.icon
+                          className={cn("h-3.5 w-3.5", {
+                            "font-extrabold": isItemActive,
+                          })}
+                          strokeWidth={2.5}
+                        />
+                      </button>
+                    </Tooltip>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+      {/* delete action */}
+      <Tooltip
+        tooltipContent={
+          <p className="flex flex-col gap-1 text-center text-xs">
+            <span className="font-medium">Delete</span>
+          </p>
+        }
+      >
+        <button type="button" onClick={handleDelete} className="my-auto text-custom-text-100/50">
+          <Trash2 className="size-4" />
+        </button>
+      </Tooltip>
+    </div>
+  );
+};
diff --git a/web/core/components/empty-state/detailed-empty-state-root.tsx b/web/core/components/empty-state/detailed-empty-state-root.tsx
new file mode 100644
index 000000000..b90503682
--- /dev/null
+++ b/web/core/components/empty-state/detailed-empty-state-root.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+// ui
+import { Button } from "@plane/ui/src/button";
+// utils
+import { cn } from "@plane/utils";
+
+type EmptyStateSize = "sm" | "md" | "lg";
+
+type ButtonConfig = {
+  text: string;
+  prependIcon?: React.ReactNode;
+  appendIcon?: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+};
+
+type Props = {
+  title: string;
+  description?: string;
+  assetPath?: string;
+  size?: EmptyStateSize;
+  primaryButton?: ButtonConfig;
+  secondaryButton?: ButtonConfig;
+  customPrimaryButton?: React.ReactNode;
+  customSecondaryButton?: React.ReactNode;
+};
+
+const sizeClasses = {
+  sm: "md:min-w-[24rem] max-w-[45rem]",
+  md: "md:min-w-[28rem] max-w-[50rem]",
+  lg: "md:min-w-[30rem] max-w-[60rem]",
+} as const;
+
+const CustomButton = ({
+  config,
+  variant,
+  size,
+}: {
+  config: ButtonConfig;
+  variant: "primary" | "neutral-primary";
+  size: EmptyStateSize;
+}) => (
+  <Button
+    variant={variant}
+    size={size}
+    onClick={config.onClick}
+    prependIcon={config.prependIcon}
+    appendIcon={config.appendIcon}
+    disabled={config.disabled}
+  >
+    {config.text}
+  </Button>
+);
+
+export const DetailedEmptyState: React.FC<Props> = observer((props) => {
+  const {
+    title,
+    description,
+    size = "lg",
+    primaryButton,
+    secondaryButton,
+    customPrimaryButton,
+    customSecondaryButton,
+    assetPath,
+  } = props;
+
+  const hasButtons = primaryButton || secondaryButton || customPrimaryButton || customSecondaryButton;
+
+  return (
+    <div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5">
+      <div className={cn("flex flex-col gap-5", sizeClasses[size])}>
+        <div className="flex flex-col gap-1.5 flex-shrink">
+          <h3 className={cn("text-xl font-semibold", { "font-medium": !description })}>{title}</h3>
+          {description && <p className="text-sm">{description}</p>}
+        </div>
+
+        {assetPath && (
+          <Image src={assetPath} alt={title} width={384} height={250} layout="responsive" lazyBoundary="100%" />
+        )}
+
+        {hasButtons && (
+          <div className="relative flex items-center justify-center gap-2 flex-shrink-0 w-full">
+            {/* primary button */}
+            {customPrimaryButton ??
+              (primaryButton?.text && <CustomButton config={primaryButton} variant="primary" size={size} />)}
+            {/* secondary button */}
+            {customSecondaryButton ??
+              (secondaryButton?.text && (
+                <CustomButton config={secondaryButton} variant="neutral-primary" size={size} />
+              ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/components/empty-state/empty-state.tsx b/web/core/components/empty-state/empty-state.tsx
deleted file mode 100644
index 883faab38..000000000
--- a/web/core/components/empty-state/empty-state.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import Image from "next/image";
-import Link from "next/link";
-
-import { useTheme } from "next-themes";
-// hooks
-// components
-import { Button, TButtonVariant } from "@plane/ui";
-// constant
-import { EMPTY_STATE_DETAILS, EmptyStateType } from "@/constants/empty-state";
-// helpers
-import { cn } from "@/helpers/common.helper";
-import { useUserPermissions } from "@/hooks/store";
-import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-import { ComicBoxButton } from "./comic-box-button";
-
-export type EmptyStateProps = {
-  type: EmptyStateType;
-  size?: "sm" | "md" | "lg";
-  layout?: "screen-detailed" | "screen-simple";
-  additionalPath?: string;
-  primaryButtonOnClick?: () => void;
-  primaryButtonLink?: string;
-  secondaryButtonOnClick?: () => void;
-};
-
-export const EmptyState: React.FC<EmptyStateProps> = observer((props) => {
-  const {
-    type,
-    size = "lg",
-    layout = "screen-detailed",
-    additionalPath = "",
-    primaryButtonOnClick,
-    primaryButtonLink,
-    secondaryButtonOnClick,
-  } = props;
-  // store
-  const { allowPermissions } = useUserPermissions();
-  // theme
-  const { resolvedTheme } = useTheme();
-
-  // if empty state type is not found
-  if (!EMPTY_STATE_DETAILS[type]) return null;
-
-  // current empty state details
-  const { key, title, description, path, primaryButton, secondaryButton, accessType, access } =
-    EMPTY_STATE_DETAILS[type];
-  // resolved empty state path
-  const resolvedEmptyStatePath = `${additionalPath && additionalPath !== "" ? `${path}${additionalPath}` : path}-${
-    resolvedTheme === "light" ? "light" : "dark"
-  }.webp`;
-  // permission
-  const isEditingAllowed =
-    access &&
-    accessType &&
-    allowPermissions(
-      access,
-      accessType === "workspace" ? EUserPermissionsLevel.WORKSPACE : EUserPermissionsLevel.PROJECT
-    );
-  const anyButton = primaryButton || secondaryButton;
-
-  // primary button
-  const renderPrimaryButton = () => {
-    if (!primaryButton) return null;
-
-    const commonProps = {
-      size: size,
-      variant: "primary" as TButtonVariant,
-      prependIcon: primaryButton.icon,
-      onClick: primaryButtonOnClick ? primaryButtonOnClick : undefined,
-      disabled: !isEditingAllowed,
-    };
-
-    if (primaryButton.comicBox) {
-      return (
-        <ComicBoxButton
-          label={primaryButton.text}
-          icon={primaryButton.icon}
-          title={primaryButton.comicBox?.title}
-          description={primaryButton.comicBox?.description}
-          onClick={primaryButtonOnClick}
-          disabled={!isEditingAllowed}
-        />
-      );
-    } else if (primaryButtonLink) {
-      return (
-        <Link href={primaryButtonLink}>
-          <Button {...commonProps}>{primaryButton.text}</Button>
-        </Link>
-      );
-    } else {
-      return <Button {...commonProps}>{primaryButton.text}</Button>;
-    }
-  };
-  // secondary button
-  const renderSecondaryButton = () => {
-    if (!secondaryButton) return null;
-
-    return (
-      <Button
-        size={size}
-        variant="neutral-primary"
-        prependIcon={secondaryButton.icon}
-        onClick={secondaryButtonOnClick}
-        disabled={!isEditingAllowed}
-      >
-        {secondaryButton.text}
-      </Button>
-    );
-  };
-
-  return (
-    <>
-      {layout === "screen-detailed" && (
-        <div className="flex items-center justify-center min-h-full min-w-full overflow-y-auto py-10 md:px-20 px-5">
-          <div
-            className={cn("flex flex-col gap-5", {
-              "md:min-w-[24rem] max-w-[45rem]": size === "sm",
-              "md:min-w-[30rem] max-w-[60rem]": size === "lg",
-            })}
-          >
-            <div className="flex flex-col gap-1.5 flex-shrink">
-              {description ? (
-                <>
-                  <h3 className="text-xl font-semibold">{title}</h3>
-                  <p className="text-sm">{description}</p>
-                </>
-              ) : (
-                <h3 className="text-xl font-medium">{title}</h3>
-              )}
-            </div>
-
-            {path && (
-              <Image
-                src={resolvedEmptyStatePath}
-                alt={key || "button image"}
-                width={384}
-                height={250}
-                layout="responsive"
-                lazyBoundary="100%"
-              />
-            )}
-
-            {anyButton && (
-              <>
-                <div className="relative flex items-center justify-center gap-2 flex-shrink-0 w-full">
-                  {renderPrimaryButton()}
-                  {renderSecondaryButton()}
-                </div>
-              </>
-            )}
-          </div>
-        </div>
-      )}
-      {layout === "screen-simple" && (
-        <div className="text-center flex flex-col gap-2.5 items-center">
-          <div className={`${size === "sm" ? "h-24 w-24" : "h-28 w-28"}`}>
-            <Image
-              src={resolvedEmptyStatePath}
-              alt={key || "button image"}
-              width={size === "sm" ? 78 : 96}
-              height={size === "sm" ? 78 : 96}
-              layout="responsive"
-              lazyBoundary="100%"
-            />
-          </div>
-          {description ? (
-            <>
-              <h3 className="text-lg font-medium text-custom-text-300 whitespace-pre-line">{title}</h3>
-              <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">{description}</p>
-            </>
-          ) : (
-            <h3 className="text-sm font-medium text-custom-text-400 whitespace-pre-line">{title}</h3>
-          )}
-        </div>
-      )}
-    </>
-  );
-});
diff --git a/web/core/components/empty-state/index.ts b/web/core/components/empty-state/index.ts
index 57e63c1bb..3ba1c3ad3 100644
--- a/web/core/components/empty-state/index.ts
+++ b/web/core/components/empty-state/index.ts
@@ -1,3 +1,5 @@
-export * from "./empty-state";
 export * from "./helper";
 export * from "./comic-box-button";
+export * from "./detailed-empty-state-root";
+export * from "./simple-empty-state-root";
+export * from "./section-empty-state-root";
diff --git a/web/core/components/empty-state/section-empty-state-root.tsx b/web/core/components/empty-state/section-empty-state-root.tsx
new file mode 100644
index 000000000..67c458a20
--- /dev/null
+++ b/web/core/components/empty-state/section-empty-state-root.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { FC } from "react";
+
+type Props = {
+  icon: React.ReactNode;
+  title: string;
+  description?: string;
+  actionElement?: React.ReactNode;
+};
+
+export const SectionEmptyState: FC<Props> = (props) => {
+  const { title, description, icon, actionElement } = props;
+  return (
+    <div className="flex flex-col gap-4 items-center justify-center rounded-md border border-custom-border-200 p-10">
+      <div className="flex flex-col items-center gap-2">
+        <div className="flex items-center justify-center size-8 bg-custom-background-80 rounded">{icon}</div>
+        <span className="text-sm font-medium">{title}</span>
+        {description && <span className="text-xs text-custom-text-300">{description}</span>}
+      </div>
+      {actionElement && <>{actionElement}</>}
+    </div>
+  );
+};
diff --git a/web/core/components/empty-state/simple-empty-state-root.tsx b/web/core/components/empty-state/simple-empty-state-root.tsx
new file mode 100644
index 000000000..ce00a143f
--- /dev/null
+++ b/web/core/components/empty-state/simple-empty-state-root.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import Image from "next/image";
+// 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-sm text-custom-text-400": !hasDescription,
+    "text-lg text-custom-text-300": hasDescription,
+  });
+
+export const SimpleEmptyState = observer((props: Props) => {
+  const { title, description, size = "sm", assetPath } = props;
+
+  return (
+    <div className="text-center flex flex-col gap-2.5 items-center">
+      {assetPath && (
+        <div className={sizeConfig[size].container}>
+          <Image
+            src={assetPath}
+            alt={title}
+            height={sizeConfig[size].dimensions}
+            width={sizeConfig[size].dimensions}
+            layout="responsive"
+            lazyBoundary="100%"
+          />
+        </div>
+      )}
+
+      <h3 className={getTitleClassName(!!description)}>{title}</h3>
+
+      {description && <p className="text-base font-medium text-custom-text-400 whitespace-pre-line">{description}</p>}
+    </div>
+  );
+});
diff --git a/web/core/components/estimates/delete/modal.tsx b/web/core/components/estimates/delete/modal.tsx
index 5ad704249..0ab68d8ce 100644
--- a/web/core/components/estimates/delete/modal.tsx
+++ b/web/core/components/estimates/delete/modal.tsx
@@ -63,8 +63,8 @@ export const DeleteEstimateModal: FC<TDeleteEstimateModal> = observer((props) =>
         <div className="px-5">
           <div className="text-base text-custom-text-200">
             Deleting the estimate <span className="font-bold text-custom-text-100">{estimate?.name}</span>
-            &nbsp;system will remove it from all issues permanently. This action cannot be undone. If you add estimates
-            again, you will need to update all the issues.
+            &nbsp;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>
 
diff --git a/web/core/components/estimates/empty-screen.tsx b/web/core/components/estimates/empty-screen.tsx
index e3e59a477..0155e2519 100644
--- a/web/core/components/estimates/empty-screen.tsx
+++ b/web/core/components/estimates/empty-screen.tsx
@@ -3,6 +3,7 @@
 import { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
 // public images
 import EstimateEmptyDarkImage from "@/public/empty-state/estimates/dark.svg";
@@ -17,6 +18,8 @@ export const EstimateEmptyScreen: FC<TEstimateEmptyScreen> = (props) => {
   const { onButtonClick } = props;
   const { resolvedTheme } = useTheme();
 
+  const { t } = useTranslation();
+
   const emptyScreenImage = resolvedTheme === "light" ? EstimateEmptyLightImage : EstimateEmptyDarkImage;
 
   return (
@@ -31,13 +34,13 @@ export const EstimateEmptyScreen: FC<TEstimateEmptyScreen> = (props) => {
         />
       </div>
       <div className="space-y-1.5">
-        <h3 className="text-xl font-semibold text-custom-text-100">No estimate systems yet</h3>
-        <p className="text-sm text-custom-text-300">
-          Create a set of estimates to communicate the amount of work per issue.
-        </p>
+        <h3 className="text-xl font-semibold text-custom-text-100">
+          {t("project_settings.empty_state.estimates.title")}
+        </h3>
+        <p className="text-sm text-custom-text-300">{t("project_settings.empty_state.estimates.description")}</p>
       </div>
       <div>
-        <Button onClick={onButtonClick}>Add estimate system</Button>
+        <Button onClick={onButtonClick}>{t("project_settings.empty_state.estimates.primary_button")}</Button>
       </div>
     </div>
   );
diff --git a/web/core/components/estimates/root.tsx b/web/core/components/estimates/root.tsx
index 873ed4100..56a8f5efa 100644
--- a/web/core/components/estimates/root.tsx
+++ b/web/core/components/estimates/root.tsx
@@ -2,6 +2,7 @@ import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // components
+import { useTranslation } from "@plane/i18n";
 import {
   EstimateLoaderScreen,
   EstimateEmptyScreen,
@@ -31,6 +32,8 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
   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)
@@ -44,7 +47,7 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
         <div className="space-y-2">
           {/* header */}
           <div className="flex flex-col items-start border-b border-custom-border-100 pb-3.5">
-            <h3 className="text-xl font-medium leading-normal">Estimates</h3>
+            <h3 className="text-xl font-medium leading-normal">{t("common.estimates")}</h3>
           </div>
 
           {/* current active estimate section */}
@@ -53,10 +56,8 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
               {/* estimates activated deactivated section */}
               <div className="relative border-b border-custom-border-200 pb-4 flex justify-between items-center gap-3">
                 <div className="space-y-1">
-                  <h3 className="text-lg font-medium text-custom-text-100">Enable estimates for my project</h3>
-                  <p className="text-sm text-custom-text-200">
-                    They help you in communicating complexity and workload of the team.
-                  </p>
+                  <h3 className="text-lg font-medium text-custom-text-100">{t("project_settings.estimates.title")}</h3>
+                  <p className="text-sm text-custom-text-200">{t("project_settings.estimates.description")}</p>
                 </div>
                 <EstimateDisableSwitch workspaceSlug={workspaceSlug} projectId={projectId} isAdmin={isAdmin} />
               </div>
diff --git a/web/core/components/exporter/export-modal.tsx b/web/core/components/exporter/export-modal.tsx
index 0c3d6cf0b..05519d377 100644
--- a/web/core/components/exporter/export-modal.tsx
+++ b/web/core/components/exporter/export-modal.tsx
@@ -6,6 +6,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Dialog, Transition } from "@headlessui/react";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IUser, IImporterService } from "@plane/types";
 // ui
 import { Button, CustomSearchSelect, TOAST_TYPE, setToast } from "@plane/ui";
@@ -36,6 +37,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
   // store hooks
   const { workspaceProjectIds, getProjectById } = useProject();
   const { projectsWithCreatePermissions } = useUser();
+  const { t } = useTranslation();
 
   const wsProjectIdsWithCreatePermisisons = projectsWithCreatePermissions
     ? intersection(workspaceProjectIds, Object.keys(projectsWithCreatePermissions))
@@ -77,18 +79,18 @@ export const Exporter: React.FC<Props> = observer((props) => {
           setExportLoading(false);
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Export Successful",
-            message: `You will be able to download the exported ${
-              provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""
-            } from the previous export.`,
+            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: "Error!",
-            message: "Export was unsuccessful. Please try again.",
+            title: t("error"),
+            message: t("workspace_settings.settings.exports.modal.toasts.error.message"),
           });
         });
     }
@@ -131,7 +133,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">
-                        Export to{" "}
+                        {t("workspace_settings.settings.exports.modal.title")}{" "}
                         {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
                       </h3>
                     </span>
@@ -165,11 +167,13 @@ export const Exporter: React.FC<Props> = observer((props) => {
                     className="flex max-w-min cursor-pointer items-center gap-2"
                   >
                     <input type="checkbox" checked={multiple} onChange={() => setMultiple(!multiple)} />
-                    <div className="whitespace-nowrap text-sm">Export the data into separate files</div>
+                    <div className="whitespace-nowrap text-sm">
+                      {t("workspace_settings.settings.exports.export_separate_files")}
+                    </div>
                   </div>
                   <div className="flex justify-end gap-2">
                     <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
+                      {t("cancel")}
                     </Button>
                     <Button
                       variant="primary"
@@ -178,7 +182,9 @@ export const Exporter: React.FC<Props> = observer((props) => {
                       disabled={exportLoading}
                       loading={exportLoading}
                     >
-                      {exportLoading ? "Exporting..." : "Export"}
+                      {exportLoading
+                        ? `${t("workspace_settings.settings.exports.exporting")}...`
+                        : t("workspace_settings.settings.exports.title")}
                     </Button>
                   </div>
                 </div>
diff --git a/web/core/components/exporter/guide.tsx b/web/core/components/exporter/guide.tsx
index 7ee289995..1dfd90010 100644
--- a/web/core/components/exporter/guide.tsx
+++ b/web/core/components/exporter/guide.tsx
@@ -8,25 +8,44 @@ import { useParams, useSearchParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 // icons
 import { MoveLeft, MoveRight, RefreshCw } from "lucide-react";
-// ui
+// plane imports
+import { EXPORTERS_LIST, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { Exporter, SingleExport } from "@/components/exporter";
 import { ImportExportSettingsLoader } from "@/components/ui";
 // constants
-import { EmptyStateType } from "@/constants/empty-state";
 import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
-import { EXPORTERS_LIST } from "@/constants/workspace";
 // hooks
 import { useProject, useUser, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// services images
+import CSVLogo from "@/public/services/csv.svg";
+import ExcelLogo from "@/public/services/excel.svg";
+import JSONLogo from "@/public/services/json.svg";
 // services
 import { IntegrationService } from "@/services/integrations";
 
 const integrationService = new IntegrationService();
 
+const getExporterLogo = (provider: string) => {
+  switch (provider) {
+    case "csv":
+      return CSVLogo;
+    case "excel":
+      return ExcelLogo;
+    case "xlsx":
+      return ExcelLogo;
+    case "json":
+      return JSONLogo;
+    default:
+      return "";
+  }
+};
+
 const IntegrationGuide = observer(() => {
   // states
   const [refreshing, setRefreshing] = useState(false);
@@ -37,11 +56,14 @@ const IntegrationGuide = observer(() => {
   const { workspaceSlug } = useParams();
   const searchParams = useSearchParams();
   const provider = searchParams.get("provider");
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { data: currentUser, canPerformAnyCreateAction } = useUser();
   const { allowPermissions } = useUserPermissions();
-
   const { workspaceProjectIds } = useProject();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/exports" });
 
   const { data: exporterServices } = useSWR(
     workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
@@ -87,11 +109,16 @@ const IntegrationGuide = observer(() => {
                 <div className="flex w-full items-start justify-between gap-4">
                   <div className="item-center flex gap-2.5">
                     <div className="relative h-10 w-10 flex-shrink-0">
-                      <Image src={service.logo} layout="fill" objectFit="cover" alt={`${service.title} Logo`} />
+                      <Image
+                        src={getExporterLogo(service?.provider)}
+                        layout="fill"
+                        objectFit="cover"
+                        alt={`${t(service.i18n_title)} Logo`}
+                      />
                     </div>
                     <div>
-                      <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
-                      <p className="text-sm tracking-tight text-custom-text-200">{service.description}</p>
+                      <h3 className="flex items-center gap-4 text-sm font-medium">{t(service.i18n_title)}</h3>
+                      <p className="text-sm tracking-tight text-custom-text-200">{t(service.i18n_description)}</p>
                     </div>
                   </div>
                   <div className="flex-shrink-0">
@@ -102,7 +129,7 @@ const IntegrationGuide = observer(() => {
                           className="capitalize"
                           disabled={!isAdmin && (!hasProjects || !canPerformAnyCreateAction)}
                         >
-                          {service.type}
+                          {t(service.type)}
                         </Button>
                       </span>
                     </Link>
@@ -114,7 +141,9 @@ const IntegrationGuide = observer(() => {
           <div>
             <div className="flex items-center justify-between border-b border-custom-border-100 pb-3.5 pt-7">
               <div className="flex items-center gap-2">
-                <h3 className="flex gap-2 text-xl font-medium">Previous exports</h3>
+                <h3 className="flex gap-2 text-xl font-medium">
+                  {t("workspace_settings.settings.exports.previous_exports")}
+                </h3>
 
                 <button
                   type="button"
@@ -122,7 +151,7 @@ const IntegrationGuide = observer(() => {
                   onClick={handleRefresh}
                 >
                   <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
-                  {refreshing ? "Refreshing..." : "Refresh status"}
+                  {refreshing ? `${t("refreshing")}...` : t("refresh_status")}
                 </button>
               </div>
               <div className="flex items-center gap-2 text-xs">
@@ -136,7 +165,7 @@ const IntegrationGuide = observer(() => {
                   }`}
                 >
                   <MoveLeft className="h-4 w-4" />
-                  <div className="pr-1">Prev</div>
+                  <div className="pr-1">{t("prev")}</div>
                 </button>
                 <button
                   disabled={!exporterServices?.next_page_results}
@@ -147,7 +176,7 @@ const IntegrationGuide = observer(() => {
                       : "cursor-not-allowed opacity-75"
                   }`}
                 >
-                  <div className="pl-1">Next</div>
+                  <div className="pl-1">{t("next")}</div>
                   <MoveRight className="h-4 w-4" />
                 </button>
               </div>
@@ -164,7 +193,11 @@ const IntegrationGuide = observer(() => {
                   </div>
                 ) : (
                   <div className="flex h-full w-full items-center justify-center">
-                    <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_EXPORT} size="sm" />
+                    <DetailedEmptyState
+                      title={t("workspace_settings.empty_state.exports.title")}
+                      description={t("workspace_settings.empty_state.exports.description")}
+                      assetPath={resolvedPath}
+                    />
                   </div>
                 )
               ) : (
diff --git a/web/core/components/gantt-chart/chart/header.tsx b/web/core/components/gantt-chart/chart/header.tsx
index 5a8f4bb65..7eb858be3 100644
--- a/web/core/components/gantt-chart/chart/header.tsx
+++ b/web/core/components/gantt-chart/chart/header.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import { Expand, Shrink } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 // plane
 import { Row } from "@plane/ui";
 // components
@@ -23,6 +24,7 @@ type Props = {
 };
 
 export const GanttChartHeader: React.FC<Props> = observer((props) => {
+  const { t } = useTranslation();
   const { blockIds, fullScreenMode, handleChartView, handleToday, loaderTitle, toggleFullScreenMode, showToday } =
     props;
   // chart hook
@@ -35,7 +37,7 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
     >
       <div className="ml-auto">
         <div className="ml-auto text-sm font-medium">
-          {blockIds ? `${blockIds.length} ${loaderTitle}` : "Loading..."}
+          {blockIds ? `${blockIds.length} ${loaderTitle}` : t("common.loading")}
         </div>
       </div>
 
@@ -49,7 +51,7 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
             })}
             onClick={() => handleChartView(chartView?.key)}
           >
-            {chartView?.title}
+            {t(chartView?.i18n_title)}
           </div>
         ))}
       </div>
@@ -60,7 +62,7 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
           className="rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
           onClick={handleToday}
         >
-          Today
+          {t("common.today")}
         </button>
       )}
 
diff --git a/web/core/components/gantt-chart/chart/main-content.tsx b/web/core/components/gantt-chart/chart/main-content.tsx
index b9582d21c..63e01c54e 100644
--- a/web/core/components/gantt-chart/chart/main-content.tsx
+++ b/web/core/components/gantt-chart/chart/main-content.tsx
@@ -56,6 +56,7 @@ type Props = {
     targetDate?: Date
   ) => ChartDataType | undefined;
   quickAdd?: React.JSX.Element | undefined;
+  isEpic?: boolean;
 };
 
 export const GanttChartMainContent: React.FC<Props> = observer((props) => {
@@ -79,6 +80,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
     updateCurrentViewRenderPayload,
     quickAdd,
     updateBlockDates,
+    isEpic = false,
   } = props;
   // refs
   const ganttContainerRef = useRef<HTMLDivElement>(null);
@@ -159,7 +161,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
         entities={{
           [GANTT_SELECT_GROUP]: blockIds ?? [],
         }}
-        disabled={!isBulkOperationsEnabled}
+        disabled={!isBulkOperationsEnabled || isEpic}
       >
         {(helpers) => (
           <>
@@ -187,6 +189,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
                 title={title}
                 quickAdd={quickAdd}
                 selectionHelpers={helpers}
+                isEpic={isEpic}
               />
               <div className="relative min-h-full h-max flex-shrink-0 flex-grow">
                 <ActiveChartView />
@@ -208,7 +211,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
                       selectionHelpers={helpers}
                       ganttContainerRef={ganttContainerRef}
                     />
-                    <TimelineDependencyPaths />
+                    <TimelineDependencyPaths isEpic={isEpic} />
                     <TimelineDraggablePath />
                     <GanttChartBlocksList
                       blockIds={blockIds}
diff --git a/web/core/components/gantt-chart/chart/root.tsx b/web/core/components/gantt-chart/chart/root.tsx
index fa525f13a..03e63e7a5 100644
--- a/web/core/components/gantt-chart/chart/root.tsx
+++ b/web/core/components/gantt-chart/chart/root.tsx
@@ -41,6 +41,7 @@ type ChartViewRootProps = {
   canLoadMoreBlocks?: boolean;
   quickAdd?: React.JSX.Element | undefined;
   showToday: boolean;
+  isEpic?: boolean;
 };
 
 const timelineViewHelpers = {
@@ -71,6 +72,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
     quickAdd,
     showToday,
     updateBlockDates,
+    isEpic = false,
   } = props;
   // states
   const [itemsContainerWidth, setItemsContainerWidth] = useState(0);
@@ -204,6 +206,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
         updateCurrentViewRenderPayload={updateCurrentViewRenderPayload}
         quickAdd={quickAdd}
         updateBlockDates={updateBlockDates}
+        isEpic={isEpic}
       />
     </div>
   );
diff --git a/web/core/components/gantt-chart/chart/views/quarter.tsx b/web/core/components/gantt-chart/chart/views/quarter.tsx
index 421d0bdfe..ee1a11c57 100644
--- a/web/core/components/gantt-chart/chart/views/quarter.tsx
+++ b/web/core/components/gantt-chart/chart/views/quarter.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-// Plane
-import { cn } from "@plane/editor";
+// plane utils
+import { cn } from "@plane/utils";
 // hooks
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 //
diff --git a/web/core/components/gantt-chart/chart/views/week.tsx b/web/core/components/gantt-chart/chart/views/week.tsx
index 2096acbc2..7c38d97ee 100644
--- a/web/core/components/gantt-chart/chart/views/week.tsx
+++ b/web/core/components/gantt-chart/chart/views/week.tsx
@@ -1,7 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
-// Plane
-import { cn } from "@plane/editor";
+// plane utils
+import { cn } from "@plane/utils";
 // hooks
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 //
diff --git a/web/core/components/gantt-chart/data/index.ts b/web/core/components/gantt-chart/data/index.ts
index dc8840330..6db8dda65 100644
--- a/web/core/components/gantt-chart/data/index.ts
+++ b/web/core/components/gantt-chart/data/index.ts
@@ -63,7 +63,7 @@ export const datePreview = (date: Date, includeTime: boolean = false) => {
 export const VIEWS_LIST: ChartDataType[] = [
   {
     key: "week",
-    title: "Week",
+    i18n_title: "common.week",
     data: {
       startDate: new Date(),
       currentDate: new Date(),
@@ -74,7 +74,7 @@ export const VIEWS_LIST: ChartDataType[] = [
   },
   {
     key: "month",
-    title: "Month",
+    i18n_title: "common.month",
     data: {
       startDate: new Date(),
       currentDate: new Date(),
@@ -85,7 +85,7 @@ export const VIEWS_LIST: ChartDataType[] = [
   },
   {
     key: "quarter",
-    title: "Quarter",
+    i18n_title: "common.quarter",
     data: {
       startDate: new Date(),
       currentDate: new Date(),
diff --git a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
index b5f0de5c1..99b96e786 100644
--- a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
+++ b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-// Plane
-import { cn } from "@plane/editor";
+// plane utils
+import { cn } from "@plane/utils";
 //helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 //hooks
diff --git a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
index bb262875b..8370a7630 100644
--- a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
+++ b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
-// Plane
-import { cn } from "@plane/editor";
+// plane utils
+import { cn } from "@plane/utils";
 //helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 //hooks
diff --git a/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts b/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
index e6a1a887e..c96a25725 100644
--- a/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
+++ b/web/core/components/gantt-chart/helpers/blockResizables/use-gantt-resizable.ts
@@ -1,6 +1,6 @@
 import { useRef, useState } from "react";
 // Plane
-import { setToast } from "@plane/ui";
+import { setToast, TOAST_TYPE } from "@plane/ui";
 // hooks
 import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 //
@@ -103,7 +103,7 @@ export const useGanttResizable = (
       const deltaWidth = Math.round((width - (block.position?.width ?? 0)) / dayWidth) * dayWidth;
 
       // call update blockPosition
-      if (deltaWidth || deltaLeft) updateBlockPosition(block.id, deltaLeft, deltaWidth, dragDirection !== "move");
+      if (deltaWidth || deltaLeft) updateBlockPosition(block.id, deltaLeft, deltaWidth);
     };
 
     // remove event listeners and call updateBlockDates
@@ -119,10 +119,14 @@ export const useGanttResizable = (
         (dragDirection === "left" && !block.start_date) || (dragDirection === "right" && !block.target_date);
 
       try {
-        const blockUpdates = getUpdatedPositionAfterDrag(block.id, shouldUpdateHalfBlock, dragDirection !== "move");
-        updateBlockDates && updateBlockDates(blockUpdates);
-      } catch (e) {
-        setToast;
+        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);
diff --git a/web/core/components/gantt-chart/root.tsx b/web/core/components/gantt-chart/root.tsx
index 81f064e2f..3ed21d144 100644
--- a/web/core/components/gantt-chart/root.tsx
+++ b/web/core/components/gantt-chart/root.tsx
@@ -26,6 +26,7 @@ type GanttChartRootProps = {
   bottomSpacing?: boolean;
   showAllBlocks?: boolean;
   showToday?: boolean;
+  isEpic?: boolean;
 };
 
 export const GanttChartRoot: FC<GanttChartRootProps> = observer((props) => {
@@ -50,6 +51,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = observer((props) => {
     showToday = true,
     quickAdd,
     updateBlockDates,
+    isEpic = false,
   } = props;
 
   const { setBlockIds } = useTimeLineChartStore();
@@ -81,6 +83,7 @@ export const GanttChartRoot: FC<GanttChartRootProps> = observer((props) => {
       quickAdd={quickAdd}
       showToday={showToday}
       updateBlockDates={updateBlockDates}
+      isEpic={isEpic}
     />
   );
 });
diff --git a/web/core/components/gantt-chart/sidebar/issues/block.tsx b/web/core/components/gantt-chart/sidebar/issues/block.tsx
index bb286c280..c0218aceb 100644
--- a/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -19,10 +19,11 @@ type Props = {
   enableSelection: boolean;
   isDragging: boolean;
   selectionHelpers?: TSelectionHelper;
+  isEpic?: boolean;
 };
 
 export const IssuesSidebarBlock = observer((props: Props) => {
-  const { block, enableSelection, isDragging, selectionHelpers } = props;
+  const { block, enableSelection, isDragging, selectionHelpers, isEpic = false } = props;
   // store hooks
   const { updateActiveBlockId, isBlockActive, getNumberOfDaysFromPosition } = useTimeLineChartStore();
   const { getIsIssuePeeked } = useIssueDetail();
@@ -73,7 +74,7 @@ export const IssuesSidebarBlock = observer((props: Props) => {
         )}
         <div className="flex h-full flex-grow items-center justify-between gap-2 truncate">
           <div className="flex-grow truncate">
-            <IssueGanttSidebarBlock issueId={block.data.id} />
+            <IssueGanttSidebarBlock issueId={block.data.id} isEpic={isEpic} />
           </div>
           {duration && (
             <div className="flex-shrink-0 text-sm text-custom-text-200">
diff --git a/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx b/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
index b2f6b8792..d2e5557ff 100644
--- a/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -29,6 +29,7 @@ type Props = {
   enableSelection: boolean;
   showAllBlocks?: boolean;
   selectionHelpers?: TSelectionHelper;
+  isEpic?: boolean;
 };
 
 export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
@@ -42,6 +43,7 @@ export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
     ganttContainerRef,
     showAllBlocks = false,
     selectionHelpers,
+    isEpic = false,
   } = props;
 
   const { getBlockById } = useTimeLineChart(ETimeLineTypeType.ISSUE);
@@ -101,6 +103,7 @@ export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
                       enableSelection={enableSelection}
                       isDragging={isDragging}
                       selectionHelpers={selectionHelpers}
+                      isEpic={isEpic}
                     />
                   )}
                 </GanttDnDHOC>
diff --git a/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx b/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
index daa2cf973..182fcefac 100644
--- a/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -1,9 +1,14 @@
 "use client";
 
+import { observer } from "mobx-react";
 // ui
 import { Loader } from "@plane/ui";
 // components
-import { ChartDataType, IBlockUpdateData, IGanttBlock } from "@/components/gantt-chart";
+import { IBlockUpdateData } from "@/components/gantt-chart";
+// hooks
+import { useTimeLineChart } from "@/hooks/use-timeline-chart";
+//
+import { ETimeLineTypeType } from "../../contexts";
 import { GanttDnDHOC } from "../gantt-dnd-HOC";
 import { handleOrderChange } from "../utils";
 import { ModulesSidebarBlock } from "./block";
@@ -12,13 +17,14 @@ import { ModulesSidebarBlock } from "./block";
 type Props = {
   title: string;
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
-  getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock;
   blockIds: string[];
   enableReorder: boolean;
 };
 
-export const ModuleGanttSidebar: React.FC<Props> = (props) => {
-  const { blockUpdateHandler, blockIds, getBlockById, enableReorder } = props;
+export const ModuleGanttSidebar: React.FC<Props> = observer((props) => {
+  const { blockUpdateHandler, blockIds, enableReorder } = props;
+
+  const { getBlockById } = useTimeLineChart(ETimeLineTypeType.MODULE);
 
   const handleOnDrop = (
     draggingBlockId: string | undefined,
@@ -52,4 +58,4 @@ export const ModuleGanttSidebar: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+});
diff --git a/web/core/components/gantt-chart/sidebar/root.tsx b/web/core/components/gantt-chart/sidebar/root.tsx
index 31c9137cc..7f6866ad6 100644
--- a/web/core/components/gantt-chart/sidebar/root.tsx
+++ b/web/core/components/gantt-chart/sidebar/root.tsx
@@ -1,5 +1,6 @@
 import { RefObject } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 // components
 import { Row, ERowVariant } from "@plane/ui";
 import { MultipleSelectGroupAction } from "@/components/core";
@@ -23,9 +24,11 @@ type Props = {
   title: string;
   quickAdd?: React.JSX.Element | undefined;
   selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
 };
 
 export const GanttChartSidebar: React.FC<Props> = observer((props) => {
+  const { t } = useTranslation();
   const {
     blockIds,
     blockUpdateHandler,
@@ -38,6 +41,7 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
     title,
     quickAdd,
     selectionHelpers,
+    isEpic = false,
   } = props;
 
   const isGroupSelectionEmpty = selectionHelpers.isGroupSelected(GANTT_SELECT_GROUP) === "empty";
@@ -75,7 +79,7 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
           )}
           <h6>{title}</h6>
         </div>
-        <h6>Duration</h6>
+        <h6>{t("common.duration")}</h6>
       </Row>
 
       <Row variant={ERowVariant.HUGGING} className="min-h-full h-max bg-custom-background-100 overflow-hidden">
@@ -90,6 +94,7 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
             ganttContainerRef,
             loadMoreBlocks,
             selectionHelpers,
+            isEpic,
           })}
       </Row>
       {quickAdd ? quickAdd : null}
diff --git a/web/core/components/gantt-chart/types/index.ts b/web/core/components/gantt-chart/types/index.ts
index 83b64a2b5..ad5b2afde 100644
--- a/web/core/components/gantt-chart/types/index.ts
+++ b/web/core/components/gantt-chart/types/index.ts
@@ -39,7 +39,7 @@ export interface WeekMonthDataType {
 
 export interface ChartDataType {
   key: string;
-  title: string;
+  i18n_title: string;
   data: ChartDataTypeData;
 }
 
diff --git a/web/core/components/global/index.ts b/web/core/components/global/index.ts
index 1230b8384..bb0ffcec8 100644
--- a/web/core/components/global/index.ts
+++ b/web/core/components/global/index.ts
@@ -1 +1,3 @@
 export * from "./product-updates";
+
+export * from "./timezone-select";
diff --git a/web/core/components/global/product-updates/footer.tsx b/web/core/components/global/product-updates/footer.tsx
index 6dd263833..5d402e85e 100644
--- a/web/core/components/global/product-updates/footer.tsx
+++ b/web/core/components/global/product-updates/footer.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { getButtonStyling } from "@plane/ui";
 // helpers
@@ -6,38 +7,40 @@ import { cn } from "@/helpers/common.helper";
 // assets
 import PlaneLogo from "@/public/plane-logos/blue-without-text.png";
 
-export const ProductUpdatesFooter = () => (
-  <div className="flex items-center justify-between flex-shrink-0 gap-4 m-6 mb-4">
-    <div className="flex items-center gap-2">
-      <a
+export const ProductUpdatesFooter = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex items-center justify-between flex-shrink-0 gap-4 m-6 mb-4">
+      <div className="flex items-center gap-2">
+        <a
         href="https://go.plane.so/p-docs"
         target="_blank"
         className="text-sm text-custom-text-200 hover:text-custom-text-100 hover:underline underline-offset-1 outline-none"
-      >
-        Docs
-      </a>
-      <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-current">
-        <circle cx={1} cy={1} r={1} />
+        >
+          {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-sm text-custom-text-200 hover:text-custom-text-100 hover:underline underline-offset-1 outline-none"
-      >
-        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} />
+        >
+          {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-sm text-custom-text-200 hover:text-custom-text-100 hover:underline underline-offset-1 outline-none"
-      >
-        Support
-      </a>
-      <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-current">
-        <circle cx={1} cy={1} r={1} />
+        >
+          {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://go.plane.so/p-discord"
@@ -55,8 +58,9 @@ export const ProductUpdatesFooter = () => (
         "flex gap-1.5 items-center text-center font-medium hover:underline underline-offset-2 outline-none"
       )}
     >
-      <Image src={PlaneLogo} alt="Plane" width={12} height={12} />
-      Powered by Plane Pages
-    </a>
-  </div>
-);
+        <Image src={PlaneLogo} alt="Plane" width={12} height={12} />
+        {t("powered_by_plane_pages")}
+      </a>
+    </div>
+  );
+};
diff --git a/web/core/components/global/product-updates/modal.tsx b/web/core/components/global/product-updates/modal.tsx
index 4288d68ee..b8982ce49 100644
--- a/web/core/components/global/product-updates/modal.tsx
+++ b/web/core/components/global/product-updates/modal.tsx
@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { observer } from "mobx-react-lite";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
@@ -16,28 +17,28 @@ export type ProductUpdatesModalProps = {
 
 export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props) => {
   const { isOpen, handleClose } = props;
-
+  const { t } = useTranslation();
   const { config } = useInstance();
 
   return (
-    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXXXL}>
       <ProductUpdatesHeader />
       <div className="flex flex-col h-[60vh] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5">
         {config?.instance_changelog_url && config?.instance_changelog_url !== "" ? (
           <iframe src={config?.instance_changelog_url} className="w-full h-full" />
         ) : (
           <div className="flex flex-col items-center justify-center w-full h-full mb-8">
-            <div className="text-lg font-medium">We are having trouble fetching the updates.</div>
+            <div className="text-lg font-medium">{t("we_are_having_trouble_fetching_the_updates")}</div>
             <div className="text-sm text-custom-text-200">
-              Please visit{" "}
+              {t("please_visit")}
               <a
                 href="https://go.plane.so/p-changelog"
                 target="_blank"
                 className="text-sm text-custom-primary-100 font-medium hover:text-custom-primary-200 underline underline-offset-1 outline-none"
               >
-                our changelogs
+                {t("our_changelogs")}
               </a>{" "}
-              for the latest updates.
+              {t("for_the_latest_updates")}.
             </div>
           </div>
         )}
diff --git a/web/core/components/global/timezone-select.tsx b/web/core/components/global/timezone-select.tsx
new file mode 100644
index 000000000..af20a7c88
--- /dev/null
+++ b/web/core/components/global/timezone-select.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+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: FC<TTimezoneSelect> = observer((props) => {
+  // 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-red-500": error,
+        })}
+        className={cn("rounded-md border-[0.5px] !border-custom-border-200", className)}
+        optionsClassName={cn("w-72", optionsClassName)}
+        input
+        disabled={isDisabled || disabled}
+      />
+    </div>
+  );
+});
diff --git a/web/core/components/graphs/issues-by-priority.tsx b/web/core/components/graphs/issues-by-priority.tsx
index d0f63f604..faed3709e 100644
--- a/web/core/components/graphs/issues-by-priority.tsx
+++ b/web/core/components/graphs/issues-by-priority.tsx
@@ -1,14 +1,80 @@
 import { ComputedDatum } from "@nivo/bar";
-import { Theme } from "@nivo/core";
+import { Theme, linearGradientDef } from "@nivo/core";
+import { ISSUE_PRIORITIES } from "@plane/constants";
 // components
 import { TIssuePriorities } from "@plane/types";
 import { BarGraph } from "@/components/ui";
 // helpers
-import { PRIORITY_GRAPH_GRADIENTS } from "@/constants/dashboard";
-import { ISSUE_PRIORITIES } from "@/constants/issue";
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
-// types
-// constants
+
+// gradients for work items by priority widget graph bars
+export const PRIORITY_GRAPH_GRADIENTS = [
+  linearGradientDef(
+    "gradient_urgent",
+    [
+      { offset: 0, color: "#A90408" },
+      { offset: 100, color: "#DF4D51" },
+    ],
+    {
+      x1: 1,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+  ),
+  linearGradientDef(
+    "gradient_high",
+    [
+      { offset: 0, color: "#FE6B00" },
+      { offset: 100, color: "#FFAC88" },
+    ],
+    {
+      x1: 1,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+  ),
+  linearGradientDef(
+    "gradient_medium",
+    [
+      { offset: 0, color: "#F5AC00" },
+      { offset: 100, color: "#FFD675" },
+    ],
+    {
+      x1: 1,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+  ),
+  linearGradientDef(
+    "gradient_low",
+    [
+      { offset: 0, color: "#1B46DE" },
+      { offset: 100, color: "#4F9BF4" },
+    ],
+    {
+      x1: 1,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+  ),
+  linearGradientDef(
+    "gradient_none",
+    [
+      { offset: 0, color: "#A0A1A9" },
+      { offset: 100, color: "#B9BBC6" },
+    ],
+    {
+      x1: 1,
+      y1: 0,
+      x2: 0,
+      y2: 0,
+    }
+  ),
+];
 
 type Props = {
   borderRadius?: number;
@@ -73,7 +139,7 @@ export const IssuesByPriorityGraph: React.FC<Props> = (props) => {
         match: {
           id: p.key,
         },
-        id: `gradient${p.title}`,
+        id: `gradient_${p.key}`,
       }))}
       onClick={(datum) => {
         if (onBarClick) onBarClick(datum);
diff --git a/web/core/components/home/home-dashboard-widgets.tsx b/web/core/components/home/home-dashboard-widgets.tsx
new file mode 100644
index 000000000..75daa8364
--- /dev/null
+++ b/web/core/components/home/home-dashboard-widgets.tsx
@@ -0,0 +1,106 @@
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { THomeWidgetKeys, THomeWidgetProps } from "@plane/types";
+// components
+import { SimpleEmptyState } from "@/components/empty-state";
+// hooks
+import { useProject } from "@/hooks/store";
+import { useHome } from "@/hooks/store/use-home";
+// plane web components
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+import { HomePageHeader } from "@/plane-web/components/home/header";
+import { StickiesWidget } from "../stickies";
+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(() => {
+  // router
+  const { workspaceSlug } = useParams();
+  // navigation
+  const pathname = usePathname();
+  // store hooks
+  const { toggleWidgetSettings, widgetsMap, showWidgetSettings, orderedWidgets, isAnyWidgetEnabled, loading } =
+    useHome();
+  const { loader } = useProject();
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const noWidgetsResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/dashboard/widgets" });
+
+  // derived values
+  const isWikiApp = pathname.includes(`/${workspaceSlug.toString()}/pages`);
+  if (!workspaceSlug) return null;
+  if (loading || loader !== "loaded") return <HomeLoader />;
+
+  return (
+    <div className="h-full w-full relative flex flex-col gap-7">
+      <HomePageHeader />
+      <ManageWidgetsModal
+        workspaceSlug={workspaceSlug.toString()}
+        isModalOpen={showWidgetSettings}
+        handleOnClose={() => toggleWidgetSettings(false)}
+      />
+      {!isWikiApp && <NoProjectsEmptyState />}
+
+      {isAnyWidgetEnabled ? (
+        <div className="flex flex-col divide-y-[1px] divide-custom-border-100">
+          {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="h-full w-full grid place-items-center">
+          <SimpleEmptyState
+            title={t("home.empty.widgets.title")}
+            description={t("home.empty.widgets.description")}
+            assetPath={noWidgetsResolvedPath}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/core/components/home/index.ts b/web/core/components/home/index.ts
new file mode 100644
index 000000000..09005cb24
--- /dev/null
+++ b/web/core/components/home/index.ts
@@ -0,0 +1,3 @@
+export * from "./widgets";
+export * from "./home-dashboard-widgets";
+export * from "./root";
diff --git a/web/core/components/home/root.tsx b/web/core/components/home/root.tsx
new file mode 100644
index 000000000..f137db957
--- /dev/null
+++ b/web/core/components/home/root.tsx
@@ -0,0 +1,72 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// components
+import useSWR from "swr";
+import { PRODUCT_TOUR_COMPLETED } from "@plane/constants";
+import { ContentWrapper } from "@plane/ui";
+import { TourRoot } from "@/components/onboarding";
+// constants
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useUserProfile, useEventTracker, useUser } from "@/hooks/store";
+import { useHome } from "@/hooks/store/use-home";
+import useSize from "@/hooks/use-window-size";
+import { IssuePeekOverview } from "../issues";
+import { DashboardWidgets } from "./home-dashboard-widgets";
+import { UserGreetingsView } from "./user-greetings";
+
+export const WorkspaceHomeView = observer(() => {
+  // store hooks
+  const { workspaceSlug } = useParams();
+  const { data: currentUser } = useUser();
+  const { data: currentUserProfile, updateTourCompleted } = useUserProfile();
+  const { captureEvent } = useEventTracker();
+  const { toggleWidgetSettings, fetchWidgets } = useHome();
+  const [windowWidth] = useSize();
+
+  useSWR(
+    workspaceSlug ? `HOME_DASHBOARD_WIDGETS_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWidgets(workspaceSlug?.toString()) : null,
+    {
+      revalidateIfStale: true,
+      revalidateOnFocus: false,
+      revalidateOnReconnect: true,
+    }
+  );
+
+  const handleTourCompleted = () => {
+    updateTourCompleted()
+      .then(() => {
+        captureEvent(PRODUCT_TOUR_COMPLETED, {
+          user_id: currentUser?.id,
+          state: "SUCCESS",
+        });
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  // TODO: refactor loader implementation
+  return (
+    <>
+      {currentUserProfile && !currentUserProfile.is_tour_completed && (
+        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-custom-backdrop bg-opacity-50 transition-opacity">
+          <TourRoot onComplete={handleTourCompleted} />
+        </div>
+      )}
+      <>
+        <IssuePeekOverview />
+        <ContentWrapper
+          className={cn("gap-6 bg-custom-background-90/20", {
+            "vertical-scrollbar scrollbar-lg": windowWidth >= 768,
+          })}
+        >
+          {currentUser && <UserGreetingsView user={currentUser} handleWidgetModal={() => toggleWidgetSettings(true)} />}
+          <DashboardWidgets />
+        </ContentWrapper>
+      </>
+    </>
+  );
+});
diff --git a/web/core/components/home/user-greetings.tsx b/web/core/components/home/user-greetings.tsx
new file mode 100644
index 000000000..31fbab185
--- /dev/null
+++ b/web/core/components/home/user-greetings.tsx
@@ -0,0 +1,65 @@
+import { FC } from "react";
+import { Shapes } from "lucide-react";
+// plane types
+import { useTranslation } from "@plane/i18n";
+import { IUser } from "@plane/types";
+// plane ui
+import { Button } from "@plane/ui";
+// hooks
+import { useCurrentTime } from "@/hooks/use-current-time";
+
+export interface IUserGreetingsView {
+  user: IUser;
+  handleWidgetModal: () => void;
+}
+
+export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
+  const { user, handleWidgetModal } = 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="flex justify-between">
+      <div>
+        <h3 className="text-xl font-semibold text-center">
+          {t("good")} {t(greeting)}, {user?.first_name} {user?.last_name}
+        </h3>
+        <h6 className="flex items-center gap-2 font-medium text-custom-text-400">
+          <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
+          <div>
+            {weekDay}, {date} {timeString}
+          </div>
+        </h6>
+      </div>
+      <Button variant="neutral-primary" size="sm" onClick={handleWidgetModal} className="my-auto mb-0">
+        <Shapes size={16} />
+        <div className="text-xs font-medium">{t("home.manage_widgets")}</div>
+      </Button>
+    </div>
+  );
+};
diff --git a/web/core/components/home/widgets/empty-states/index.ts b/web/core/components/home/widgets/empty-states/index.ts
new file mode 100644
index 000000000..72b042924
--- /dev/null
+++ b/web/core/components/home/widgets/empty-states/index.ts
@@ -0,0 +1,4 @@
+export * from "./links";
+export * from "./no-projects";
+export * from "./recents";
+export * from "./stickies";
diff --git a/web/core/components/home/widgets/empty-states/links.tsx b/web/core/components/home/widgets/empty-states/links.tsx
new file mode 100644
index 000000000..37e04fea7
--- /dev/null
+++ b/web/core/components/home/widgets/empty-states/links.tsx
@@ -0,0 +1,14 @@
+import { Link2 } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+
+export const LinksEmptyState = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
+      <div className="m-auto flex gap-2">
+        <Link2 size={30} className="text-custom-text-400/40 -rotate-45" />
+        <div className="text-custom-text-400 text-sm text-center my-auto">{t("home.quick_links.empty")}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/core/components/home/widgets/empty-states/no-projects.tsx b/web/core/components/home/widgets/empty-states/no-projects.tsx
new file mode 100644
index 000000000..44496aa81
--- /dev/null
+++ b/web/core/components/home/widgets/empty-states/no-projects.tsx
@@ -0,0 +1,213 @@
+import React from "react";
+// mobx
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { Briefcase, Check, Hotel, Users, X } from "lucide-react";
+// plane ui
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+// helpers
+import { cn } from "@plane/utils";
+import { getFileURL } from "@/helpers/file.helper";
+// hooks
+import {
+  useCommandPalette,
+  useEventTracker,
+  useProject,
+  useUser,
+  useUserPermissions,
+  useWorkspace,
+} from "@/hooks/store";
+// plane web constants
+
+export const NoProjectsEmptyState = observer(() => {
+  // navigation
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const { toggleCreateProjectModal } = useCommandPalette();
+  const { setTrackElement } = useEventTracker();
+  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: <Briefcase className="size-10" />,
+      flag: "projects",
+      cta: {
+        text: "home.empty.create_project.cta",
+        onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+          if (!canCreateProject) return;
+          e.preventDefault();
+          e.stopPropagation();
+          setTrackElement("Sidebar");
+          toggleCreateProjectModal(true);
+        },
+        disabled: !canCreateProject,
+      },
+    },
+    {
+      id: "invite-team",
+      title: "home.empty.invite_team.title",
+      description: "home.empty.invite_team.description",
+      icon: <Users className="size-10" />,
+      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: <Hotel className="size-10" />,
+      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 h-6 w-6 items-center justify-center rounded-full p-4 capitalize text-white">
+              <img
+                src={getFileURL(currentUser?.avatar_url)}
+                className="absolute left-0 top-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 h-6 w-6 items-center justify-center rounded-full bg-gray-700 p-4 capitalize text-white text-sm">
+              {(currentUser?.email ?? currentUser?.display_name ?? "?")[0]}
+            </span>
+          </Link>
+        ),
+      flag: "visited_profile",
+      cta: {
+        text: "home.empty.personalize_account.cta",
+        link: "/profile",
+        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="flex items-center justify-between mb-4">
+        <div className="text-base font-semibold text-custom-text-350">{t("home.empty.quickstart_guide")}</div>
+        <button
+          className="text-custom-text-300 font-medium text-sm flex items-center gap-1"
+          onClick={() => {
+            if (!storedValue) return;
+            setValue({ ...storedValue, hide: true });
+          }}
+        >
+          <X className="size-4" />
+          {t("home.empty.not_right_now")}
+        </button>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+        {EMPTY_STATE_DATA.map((item) => {
+          const isStateComplete = isComplete(item.flag);
+          return (
+            <div
+              key={item.id}
+              className="flex flex-col items-center justify-center p-6 bg-custom-background-100 rounded-lg text-center border border-custom-border-200/40"
+            >
+              <div
+                className={cn(
+                  "grid place-items-center bg-custom-background-90 rounded-full size-20 mb-3 text-custom-text-400",
+                  {
+                    "text-custom-primary-100 bg-custom-primary-100/10": !isStateComplete,
+                  }
+                )}
+              >
+                <span className="text-3xl my-auto">{item.icon}</span>
+              </div>
+              <h3 className="text-base font-medium text-custom-text-100 mb-2">{t(item.title)}</h3>
+              <p className="text-sm text-custom-text-300 mb-2">{t(item.description)}</p>
+              {isStateComplete ? (
+                <div className="flex items-center gap-2 bg-[#17a34a] rounded-full p-1">
+                  <Check className="size-3 text-custom-primary-100 text-white" />
+                </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-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium", {})}
+                  >
+                    {t(item.cta.text)}
+                  </Link>
+                ) : (
+                  <button
+                    type="button"
+                    className="text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium"
+                    onClick={item.cta.onClick}
+                  >
+                    {t(item.cta.text)}
+                  </button>
+                ))
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/components/home/widgets/empty-states/recents.tsx b/web/core/components/home/widgets/empty-states/recents.tsx
new file mode 100644
index 000000000..5d48d2956
--- /dev/null
+++ b/web/core/components/home/widgets/empty-states/recents.tsx
@@ -0,0 +1,41 @@
+import { Briefcase, FileText, History } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { LayersIcon } from "@plane/ui";
+
+const getDisplayContent = (type: string) => {
+  switch (type) {
+    case "project":
+      return {
+        icon: <Briefcase size={30} className="text-custom-text-400/40" />,
+        text: "home.recents.empty.project",
+      };
+    case "page":
+      return {
+        icon: <FileText size={30} className="text-custom-text-400/40" />,
+        text: "home.recents.empty.page",
+      };
+    case "issue":
+      return {
+        icon: <LayersIcon className="text-custom-text-400/40 w-[30px] h-[30px]" />,
+        text: "home.recents.empty.issue",
+      };
+    default:
+      return {
+        icon: <History size={30} className="text-custom-text-400/40" />,
+        text: "home.recents.empty.default",
+      };
+  }
+};
+export const RecentsEmptyState = ({ type }: { type: string }) => {
+  const { t } = useTranslation();
+
+  const { icon, text } = getDisplayContent(type);
+
+  return (
+    <div className="min-h-[120px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
+      <div className="m-auto flex gap-2">
+        {icon} <div className="text-custom-text-400 text-sm text-center my-auto">{t(text)}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/core/components/home/widgets/empty-states/stickies.tsx b/web/core/components/home/widgets/empty-states/stickies.tsx
new file mode 100644
index 000000000..1210ea096
--- /dev/null
+++ b/web/core/components/home/widgets/empty-states/stickies.tsx
@@ -0,0 +1,15 @@
+// plane ui
+import { useTranslation } from "@plane/i18n";
+import { RecentStickyIcon } from "@plane/ui";
+
+export const StickiesEmptyState = () => {
+  const { t } = useTranslation();
+  return (
+    <div className="min-h-[110px] flex w-full justify-center py-6 bg-custom-border-100 rounded">
+      <div className="m-auto flex gap-2">
+        <RecentStickyIcon className="h-[30px] w-[30px] text-custom-text-400/40" />
+        <div className="text-custom-text-400 text-sm text-center my-auto">{t("stickies.empty_state.simple")}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/core/components/home/widgets/index.ts b/web/core/components/home/widgets/index.ts
new file mode 100644
index 000000000..19d9aba92
--- /dev/null
+++ b/web/core/components/home/widgets/index.ts
@@ -0,0 +1,4 @@
+export * from "./empty-states";
+export * from "./loaders";
+export * from "./recents";
+export * from "./empty-states";
diff --git a/web/core/components/home/widgets/links/action.tsx b/web/core/components/home/widgets/links/action.tsx
new file mode 100644
index 000000000..5199b7d4d
--- /dev/null
+++ b/web/core/components/home/widgets/links/action.tsx
@@ -0,0 +1,22 @@
+import { PlusIcon } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+
+type TProps = {
+  onClick: () => void;
+};
+export const AddLink = (props: TProps) => {
+  const { onClick } = props;
+  const { t } = useTranslation();
+
+  return (
+    <button
+      className="btn btn-primary flex bg-custom-background-100 px-4 w-[230px] h-[56px] border-[0.5px] border-custom-border-200 rounded-md gap-4"
+      onClick={onClick}
+    >
+      <div className="rounded p-2 bg-custom-background-80/40 w-8 h-8 my-auto">
+        <PlusIcon className="h-4 w-4 stroke-2 text-custom-text-350" />
+      </div>
+      <div className="text-sm font-medium my-auto">{t("home.quick_links.add")}</div>
+    </button>
+  );
+};
diff --git a/web/core/components/home/widgets/links/create-update-link-modal.tsx b/web/core/components/home/widgets/links/create-update-link-modal.tsx
new file mode 100644
index 000000000..dccc09f5f
--- /dev/null
+++ b/web/core/components/home/widgets/links/create-update-link-modal.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import { FC, useEffect } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane types
+// plane ui
+import { useTranslation } from "@plane/i18n";
+import { TLink, TLinkEditableFields } from "@plane/types";
+import { Button, Input, ModalCore } from "@plane/ui";
+import { 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;
+  setLinkData: (link: TLink | undefined) => void;
+};
+
+const defaultValues: TLinkCreateFormFieldOptions = {
+  title: "",
+  url: "",
+};
+
+export const LinkCreateUpdateModal: FC<TLinkCreateEditModal> = observer((props) => {
+  // props
+  const { setLinkData, 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();
+    setLinkData(undefined);
+  };
+
+  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-xl font-medium text-custom-text-200">
+            {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-custom-text-200 text-base font-medium">
+                {t("link.modal.url.text")}
+                <span className="text-[10px] block">{t("required")}</span>
+              </label>
+              <Controller
+                control={control}
+                name="url"
+                rules={{
+                  required: t("link.modal.url.required"),
+                }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="url"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.url)}
+                    placeholder={t("link.modal.url.placeholder")}
+                    className="w-full"
+                  />
+                )}
+              />
+              {errors.url && <span className="text-xs text-red-500">{t("link.modal.url.required")}</span>}
+            </div>
+            <div>
+              <label htmlFor="title" className="mb-2 text-custom-text-200 text-base font-medium">
+                {t("link.modal.title.text")}
+                <span className="text-[10px] block">{t("optional")}</span>
+              </label>
+              <Controller
+                control={control}
+                name="title"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="title"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.title)}
+                    placeholder={t("link.modal.title.placeholder")}
+                    className="w-full"
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
+          <Button variant="neutral-primary" size="sm" onClick={onClose}>
+            {t("Cancel")}
+          </Button>
+          <Button variant="primary" size="sm" 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/web/core/components/home/widgets/links/index.ts b/web/core/components/home/widgets/links/index.ts
new file mode 100644
index 000000000..380f7763c
--- /dev/null
+++ b/web/core/components/home/widgets/links/index.ts
@@ -0,0 +1,3 @@
+export * from "./root";
+export * from "./links";
+export * from "./link-detail";
diff --git a/web/core/components/home/widgets/links/link-detail.tsx b/web/core/components/home/widgets/links/link-detail.tsx
new file mode 100644
index 000000000..e632aaa2f
--- /dev/null
+++ b/web/core/components/home/widgets/links/link-detail.tsx
@@ -0,0 +1,124 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { Pencil, Trash2, ExternalLink, EllipsisVertical, Link2, Link } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast, CustomMenu, TContextMenuItem } from "@plane/ui";
+// plane utils
+import { cn, copyTextToClipboard } from "@plane/utils";
+// helpers
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+// hooks
+import { useHome } from "@/hooks/store/use-home";
+// types
+import { TLinkOperations } from "./use-links";
+
+export type TProjectLinkDetail = {
+  linkId: string;
+  linkOperations: TLinkOperations;
+};
+
+export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
+  // props
+  const { linkId, linkOperations } = props;
+  // hooks
+  const {
+    quickLinks: { getLinkById, toggleLinkModal, setLinkData },
+  } = useHome();
+  const { t } = useTranslation();
+
+  const linkDetail = getLinkById(linkId);
+  if (!linkDetail) return <></>;
+
+  const viewLink = linkDetail.url;
+
+  const handleEdit = (modalToggle: boolean) => {
+    toggleLinkModal(modalToggle);
+    setLinkData(linkDetail);
+  };
+
+  const handleCopyText = () =>
+    copyTextToClipboard(viewLink).then(() => {
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("link_copied"),
+        message: t("view_link_copied_to_clipboard"),
+      });
+    });
+  const handleOpenInNewTab = () => window.open(`${viewLink}`, "_blank");
+
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "edit",
+      action: () => handleEdit(true),
+      title: t("edit"),
+      icon: Pencil,
+    },
+    {
+      key: "open-new-tab",
+      action: handleOpenInNewTab,
+      title: t("open_in_new_tab"),
+      icon: ExternalLink,
+    },
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      title: t("copy_link"),
+      icon: Link,
+    },
+    {
+      key: "delete",
+      action: () => linkOperations.remove(linkId),
+      title: t("delete"),
+      icon: Trash2,
+    },
+  ];
+
+  return (
+    <div
+      onClick={handleOpenInNewTab}
+      className="cursor-pointer group flex items-center bg-custom-background-100 px-4 w-[230px] h-[56px] border-[0.5px] border-custom-border-200 rounded-md gap-4 hover:shadow-md transition-shadow"
+    >
+      <div className="flex-shrink-0 size-8 rounded p-2 bg-custom-background-80 grid place-items-center">
+        <Link2 className="size-4 stroke-2 text-custom-text-350 -rotate-45" />
+      </div>
+      <div className="flex-1 truncate">
+        <div className="text-sm font-medium truncate">{linkDetail.title || linkDetail.url}</div>
+        <div className="text-xs font-medium text-custom-text-400">{calculateTimeAgo(linkDetail.created_at)}</div>
+      </div>
+      <div className="hidden group-hover:block">
+        <CustomMenu placement="bottom-end" menuItemsClassName="z-20" closeOnSelect verticalEllipsis>
+          {MENU_ITEMS.map((item) => (
+            <CustomMenu.MenuItem
+              key={item.key}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                item.action();
+              }}
+              className={cn("flex items-center gap-2 w-full ", {
+                "text-custom-text-400": 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("text-custom-text-300 whitespace-pre-line", {
+                      "text-custom-text-400": item.disabled,
+                    })}
+                  >
+                    {item.description}
+                  </p>
+                )}
+              </div>
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/components/home/widgets/links/links.tsx b/web/core/components/home/widgets/links/links.tsx
new file mode 100644
index 000000000..7e61bce55
--- /dev/null
+++ b/web/core/components/home/widgets/links/links.tsx
@@ -0,0 +1,48 @@
+import { FC } from "react";
+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 { TLinkOperations } from "./use-links";
+
+export type TLinkOperationsModal = Exclude<TLinkOperations, "create">;
+
+export type TProjectLinkList = {
+  linkOperations: TLinkOperationsModal;
+  workspaceSlug: string;
+};
+
+export const ProjectLinkList: FC<TProjectLinkList> = observer((props) => {
+  // 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-custom-background-90/20"
+      >
+        <div className="flex gap-2 mb-2 flex-wrap flex-1">
+          {links.map((linkId) => (
+            <ProjectLinkDetail key={linkId} linkId={linkId} linkOperations={linkOperations} />
+          ))}
+        </div>
+      </ContentOverflowWrapper>
+    </div>
+  );
+});
diff --git a/web/core/components/home/widgets/links/root.tsx b/web/core/components/home/widgets/links/root.tsx
new file mode 100644
index 000000000..0cd9d30e6
--- /dev/null
+++ b/web/core/components/home/widgets/links/root.tsx
@@ -0,0 +1,56 @@
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { Plus } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { 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((props: THomeWidgetProps) => {
+  const { workspaceSlug } = props;
+  const { linkOperations } = useLinks(workspaceSlug);
+  const {
+    quickLinks: { isLinkModalOpen, toggleLinkModal, linkData, setLinkData, fetchLinks },
+  } = useHome();
+  const { t } = useTranslation();
+
+  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}
+        setLinkData={setLinkData}
+      />
+      <div className="mb-2">
+        <div className="flex items-center justify-between mb-4">
+          <div className="text-base font-semibold text-custom-text-350">{t("home.quick_links.title_plural")}</div>
+          <button
+            onClick={() => {
+              toggleLinkModal(true);
+            }}
+            className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
+          >
+            <Plus className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>
+          </button>
+        </div>
+        <div className="flex flex-wrap w-full">
+          {/* rendering links */}
+          <ProjectLinkList workspaceSlug={workspaceSlug} linkOperations={linkOperations} />
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/core/components/home/widgets/links/use-links.tsx b/web/core/components/home/widgets/links/use-links.tsx
new file mode 100644
index 000000000..2f2a9c78f
--- /dev/null
+++ b/web/core/components/home/widgets/links/use-links.tsx
@@ -0,0 +1,99 @@
+import { useMemo } from "react";
+import { useTranslation } from "@plane/i18n";
+import { TProjectLink } from "@plane/types";
+import { setToast, TOAST_TYPE } from "@plane/ui";
+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/web/core/components/home/widgets/loaders/home-loader.tsx b/web/core/components/home/widgets/loaders/home-loader.tsx
new file mode 100644
index 000000000..56d32725b
--- /dev/null
+++ b/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import range from "lodash/range";
+// ui
+import { Loader } from "@plane/ui";
+
+export const HomeLoader = () => (
+  <>
+    {range(3).map((index) => (
+      <div key={index}>
+        <div className="mb-2">
+          <div className="text-base font-semibold text-custom-text-350 mb-4">
+            <Loader.Item height="20px" width="100px" />
+          </div>
+          <Loader className="h-[110px] w-full flex items-center justify-center gap-2 text-custom-text-400 rounded">
+            <Loader.Item height="100%" width="100%" />
+          </Loader>
+        </div>
+      </div>
+    ))}
+  </>
+);
diff --git a/web/core/components/home/widgets/loaders/index.ts b/web/core/components/home/widgets/loaders/index.ts
new file mode 100644
index 000000000..a0925eccd
--- /dev/null
+++ b/web/core/components/home/widgets/loaders/index.ts
@@ -0,0 +1,2 @@
+export * from "./loader";
+export * from "./home-loader";
diff --git a/web/core/components/home/widgets/loaders/loader.tsx b/web/core/components/home/widgets/loaders/loader.tsx
new file mode 100644
index 000000000..9fed9cafa
--- /dev/null
+++ b/web/core/components/home/widgets/loaders/loader.tsx
@@ -0,0 +1,25 @@
+// 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 const WidgetLoader: React.FC<Props> = (props) => {
+  const { widgetKey } = props;
+
+  const loaders = {
+    [EWidgetKeys.RECENT_ACTIVITY]: <RecentActivityWidgetLoader />,
+    [EWidgetKeys.QUICK_LINKS]: <QuickLinksWidgetLoader />,
+  };
+
+  return loaders[widgetKey];
+};
diff --git a/web/core/components/home/widgets/loaders/quick-links.tsx b/web/core/components/home/widgets/loaders/quick-links.tsx
new file mode 100644
index 000000000..3037bf39c
--- /dev/null
+++ b/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import range from "lodash/range";
+// ui
+import { Loader } from "@plane/ui";
+
+export const QuickLinksWidgetLoader = () => (
+  <Loader className="bg-custom-background-100 rounded-xl gap-2 flex flex-wrap">
+    {range(4).map((index) => (
+      <Loader.Item key={index} height="56px" width="230px" />
+    ))}
+  </Loader>
+);
diff --git a/web/core/components/home/widgets/loaders/recent-activity.tsx b/web/core/components/home/widgets/loaders/recent-activity.tsx
new file mode 100644
index 000000000..741ef29eb
--- /dev/null
+++ b/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import range from "lodash/range";
+// ui
+import { Loader } from "@plane/ui";
+
+export const RecentActivityWidgetLoader = () => (
+  <Loader className="bg-custom-background-100 rounded-xl px-2 space-y-6">
+    {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="space-y-3 flex-shrink-0 w-full my-auto">
+          <Loader.Item height="15px" width="70%" />
+        </div>
+      </div>
+    ))}
+  </Loader>
+);
diff --git a/web/core/components/home/widgets/manage/index.tsx b/web/core/components/home/widgets/manage/index.tsx
new file mode 100644
index 000000000..8834ca69d
--- /dev/null
+++ b/web/core/components/home/widgets/manage/index.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { FC } from "react";
+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: FC<TProps> = observer((props) => {
+  // props
+  const { workspaceSlug, isModalOpen, handleOnClose } = props;
+  const { t } = useTranslation();
+
+  return (
+    <ModalCore isOpen={isModalOpen} handleClose={handleOnClose} width={EModalWidth.MD}>
+      <div className="p-4">
+        <div className="font-medium text-xl"> {t("home.manage_widgets")}</div>
+        <WidgetList workspaceSlug={workspaceSlug} />
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx b/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
new file mode 100644
index 000000000..2995ce086
--- /dev/null
+++ b/web/core/components/home/widgets/manage/widget-item-drag-handle.tsx
@@ -0,0 +1,26 @@
+"use client";
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+// ui
+import { DragHandle } from "@plane/ui";
+// helper
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  sort_order: number | null;
+  isDragging: boolean;
+};
+
+export const WidgetItemDragHandle: FC<Props> = observer((props) => {
+  const { isDragging } = props;
+
+  return (
+    <div
+      className={cn("flex items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2", {
+        "cursor-grabbing": isDragging,
+      })}
+    >
+      <DragHandle className="bg-transparent" />
+    </div>
+  );
+});
diff --git a/web/core/components/home/widgets/manage/widget-item.tsx b/web/core/components/home/widgets/manage/widget-item.tsx
new file mode 100644
index 000000000..42cb7f5c0
--- /dev/null
+++ b/web/core/components/home/widgets/manage/widget-item.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React, { FC, useEffect, useRef, useState } from "react";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { DropTargetRecord, DragLocationHistory } from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import {
+  draggable,
+  dropTargetForElements,
+  ElementDragPayload,
+} 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 { InstructionType, TWidgetEntityData } from "@plane/types";
+// plane ui
+import { DropIndicator, ToggleSwitch } 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: FC<Props> = observer((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] as TWidgetEntityData;
+  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: elementRef.current,
+        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 bg-custom-background-100 text-sm p-1 pr-2">{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(
+          "px-2 relative flex items-center py-2 font-medium text-sm group/widget-item rounded hover:bg-custom-background-80 justify-between",
+          {
+            "cursor-grabbing bg-custom-background-80": isDragging,
+          }
+        )}
+      >
+        <div className="flex items-center">
+          <WidgetItemDragHandle sort_order={widget.sort_order} isDragging={isDragging} />
+          <div>{t(widgetTitle, { count: 1 })}</div>
+        </div>
+        <ToggleSwitch
+          value={widget.is_enabled}
+          onChange={() => handleToggle(workspaceSlug.toString(), widget.key, !widget.is_enabled)}
+        />
+      </div>
+      {isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
+    </div>
+  );
+});
diff --git a/web/core/components/home/widgets/manage/widget-list.tsx b/web/core/components/home/widgets/manage/widget-list.tsx
new file mode 100644
index 000000000..85957d8cf
--- /dev/null
+++ b/web/core/components/home/widgets/manage/widget-list.tsx
@@ -0,0 +1,62 @@
+import {
+  DragLocationHistory,
+  DropTargetRecord,
+  ElementDragPayload,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { setToast, TOAST_TYPE } from "@plane/ui";
+import { useHome } from "@/hooks/store/use-home";
+import { WidgetItem } from "./widget-item";
+import { getInstructionFromPayload, TargetData } from "./widget.helpers";
+
+export const WidgetList = observer(({ 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) {
+      try {
+        reorderWidget(workspaceSlug, sourceData.id, droppedId, instruction); /** sequence */
+        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/web/core/components/home/widgets/manage/widget.helpers.ts b/web/core/components/home/widgets/manage/widget.helpers.ts
new file mode 100644
index 000000000..a72ee8028
--- /dev/null
+++ b/web/core/components/home/widgets/manage/widget.helpers.ts
@@ -0,0 +1,62 @@
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { 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/web/core/components/home/widgets/recents/filters.tsx b/web/core/components/home/widgets/recents/filters.tsx
new file mode 100644
index 000000000..255249dd1
--- /dev/null
+++ b/web/core/components/home/widgets/recents/filters.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { FC } from "react";
+import { observer } from "mobx-react";
+import { ChevronDown } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+import { 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: FC<TFiltersDropdown> = observer((props) => {
+  const { className, activeFilter, setActiveFilter, filters } = props;
+  const { t } = useTranslation();
+
+  const DropdownOptions = () =>
+    filters?.map((filter) => (
+      <CustomMenu.MenuItem
+        key={filter.name}
+        className="flex items-center gap-2 truncate text-custom-text-200"
+        onClick={() => {
+          setActiveFilter(filter.name);
+        }}
+      >
+        {filter.icon && <div>{filter.icon}</div>}
+        <div className="truncate font-medium text-xs 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 justify-center text-xs text-custom-text-200 w-fit ", className)}
+      placement="bottom-start"
+      customButton={
+        <button className="flex hover:bg-custom-background-80 px-2 py-1 rounded gap-1 capitalize border border-custom-border-200">
+          <span className="font-medium text-sm my-auto"> {t(title || "")}</span>
+          <ChevronDown className={cn("size-3 my-auto text-custom-text-300 hover:text-custom-text-200 duration-300")} />
+        </button>
+      }
+      customButtonClassName="flex justify-center"
+      closeOnSelect
+    >
+      <DropdownOptions />
+    </CustomMenu>
+  );
+});
diff --git a/web/core/components/home/widgets/recents/index.tsx b/web/core/components/home/widgets/recents/index.tsx
new file mode 100644
index 000000000..5622a2541
--- /dev/null
+++ b/web/core/components/home/widgets/recents/index.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+import { Briefcase, FileText } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
+// plane types
+import { TActivityEntityData, THomeWidgetProps, TRecentActivityFilterKeys } from "@plane/types";
+// plane ui
+import { LayersIcon } from "@plane/ui";
+// components
+import { ContentOverflowWrapper } from "@/components/core/content-overflow-HOC";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+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: <LayersIcon className="w-4 h-4" />, i18n_key: "home.recents.filters.issues" },
+  { name: "page", icon: <FileText size={16} />, i18n_key: "home.recents.filters.pages" },
+  { name: "project", icon: <Briefcase size={16} />, i18n_key: "home.recents.filters.projects" },
+];
+
+type TRecentWidgetProps = THomeWidgetProps & {
+  presetFilter?: TRecentActivityFilterKeys;
+  showFilterSelect?: boolean;
+};
+
+export const RecentActivityWidget: React.FC<TRecentWidgetProps> = observer((props) => {
+  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="flex items-center justify-between mb-4">
+          <div className="text-base font-semibold text-custom-text-350">{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-custom-background-90/20"
+    >
+      <div className="flex items-center justify-between mb-2">
+        <div className="text-base font-semibold text-custom-text-350">{t("home.recents.title")}</div>
+        {showFilterSelect && <FiltersDropdown filters={filters} activeFilter={filter} setActiveFilter={setFilter} />}
+      </div>
+      <div className="min-h-[250px] flex 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/web/core/components/home/widgets/recents/issue.tsx b/web/core/components/home/widgets/recents/issue.tsx
new file mode 100644
index 000000000..5c16457b3
--- /dev/null
+++ b/web/core/components/home/widgets/recents/issue.tsx
@@ -0,0 +1,120 @@
+// plane types
+import { TActivityEntityData, TIssueEntityData } from "@plane/types";
+// plane ui
+import { LayersIcon, PriorityIcon, StateGroupIcon, Tooltip } from "@plane/ui";
+// components
+import { ListItem } from "@/components/core/list";
+import { MemberDropdown } from "@/components/dropdowns";
+// helpers
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
+// hooks
+import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
+// plane web components
+import { IssueIdentifier } from "@/plane-web/components/issues";
+
+type BlockProps = {
+  activity: TActivityEntityData;
+  ref: React.RefObject<HTMLDivElement>;
+  workspaceSlug: string;
+};
+export const RecentIssue = (props: BlockProps) => {
+  const { activity, ref, workspaceSlug } = props;
+  // hooks
+  const { getStateById } = useProjectState();
+  const { setPeekIssue } = useIssueDetail();
+  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,
+  });
+
+  return (
+    <ListItem
+      key={activity.id}
+      id={`issue-${issueDetails?.id}`}
+      itemLink={workItemLink}
+      title={issueDetails?.name}
+      prependTitleElement={
+        <div className="flex-shrink-0 flex items-center gap-2">
+          {issueDetails.type ? (
+            <IssueIdentifier
+              size="lg"
+              issueTypeId={issueDetails?.type}
+              projectId={issueDetails?.project_id || ""}
+              projectIdentifier={issueDetails?.project_identifier || ""}
+              issueSequenceId={issueDetails?.sequence_id || ""}
+              textContainerClassName="text-custom-sidebar-text-400 text-sm whitespace-nowrap"
+            />
+          ) : (
+            <div className="flex gap-2 items-center justify-center">
+              <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
+                <LayersIcon className="size-4 text-custom-text-350" />
+              </div>
+              <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
+                {issueDetails?.project_identifier}-{issueDetails?.sequence_id}
+              </div>
+            </div>
+          )}
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+          {calculateTimeAgo(activity.visited_at)}
+        </div>
+      }
+      quickActionElement={
+        <div className="flex gap-4">
+          <Tooltip tooltipHeading="State" tooltipContent={state?.name ?? "State"}>
+            <div>
+              <StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-4 w-4 my-auto" />
+            </div>
+          </Tooltip>
+          <Tooltip tooltipHeading="Priority" tooltipContent={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="bg-transparent my-auto !px-2 border-none py-3"
+      itemClassName="my-auto"
+      onItemClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setPeekIssue({ workspaceSlug, projectId: issueDetails?.project_id, issueId: activity.entity_data.id });
+      }}
+      preventDefaultNProgress
+    />
+  );
+};
diff --git a/web/core/components/home/widgets/recents/page.tsx b/web/core/components/home/widgets/recents/page.tsx
new file mode 100644
index 000000000..532831d32
--- /dev/null
+++ b/web/core/components/home/widgets/recents/page.tsx
@@ -0,0 +1,81 @@
+import { useRouter } from "next/navigation";
+import { FileText } from "lucide-react";
+// plane types
+import { TActivityEntityData, TPageEntityData } from "@plane/types";
+// plane ui
+import { Avatar, Logo } from "@plane/ui";
+// plane utils
+import { getFileURL } from "@plane/utils";
+// components
+import { ListItem } from "@/components/core/list";
+// helpers
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+import { getPageName } from "@/helpers/page.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+
+type BlockProps = {
+  activity: TActivityEntityData;
+  ref: React.RefObject<HTMLDivElement>;
+  workspaceSlug: string;
+};
+
+export const 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-shrink-0 flex items-center gap-2">
+          <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
+            {pageDetails?.logo_props?.in_use ? (
+              <Logo logo={pageDetails?.logo_props} size={16} type="lucide" />
+            ) : (
+              <FileText className="size-4 text-custom-text-350" />
+            )}
+          </div>
+          {pageDetails?.project_identifier && (
+            <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
+              {pageDetails?.project_identifier}
+            </div>
+          )}
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+          {calculateTimeAgo(activity.visited_at)}
+        </div>
+      }
+      quickActionElement={
+        <div className="flex gap-4">
+          <Avatar src={getFileURL(ownerDetails?.avatar_url ?? "")} name={ownerDetails?.display_name} />
+        </div>
+      }
+      parentRef={ref}
+      disableLink={false}
+      className="bg-transparent my-auto !px-2 border-none py-3"
+      itemClassName="my-auto"
+      onItemClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        router.push(pageLink);
+      }}
+    />
+  );
+};
diff --git a/web/core/components/home/widgets/recents/project.tsx b/web/core/components/home/widgets/recents/project.tsx
new file mode 100644
index 000000000..9321a017f
--- /dev/null
+++ b/web/core/components/home/widgets/recents/project.tsx
@@ -0,0 +1,80 @@
+import { useRouter } from "next/navigation";
+// plane types
+import { TActivityEntityData, TProjectEntityData } from "@plane/types";
+// plane ui
+import { Logo } from "@plane/ui";
+// components
+import { ListItem } from "@/components/core/list";
+import { MemberDropdown } from "@/components/dropdowns";
+// helpers
+import { calculateTimeAgo } from "@/helpers/date-time.helper";
+
+type BlockProps = {
+  activity: TActivityEntityData;
+  ref: React.RefObject<HTMLDivElement>;
+  workspaceSlug: string;
+};
+export const 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-shrink-0 flex items-center gap-2">
+          <div className="flex-shrink-0 grid place-items-center rounded bg-custom-background-80 size-8">
+            <Logo logo={projectDetails?.logo_props} size={16} />
+          </div>
+          <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">{projectDetails?.identifier}</div>
+        </div>
+      }
+      appendTitleElement={
+        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+          {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="bg-transparent my-auto !px-2 border-none py-3"
+      itemClassName="my-auto"
+      onItemClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        router.push(projectLink);
+      }}
+    />
+  );
+};
diff --git a/web/core/components/inbox/content/inbox-issue-header.tsx b/web/core/components/inbox/content/inbox-issue-header.tsx
index ad7d63ff0..1259b21ef 100644
--- a/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -15,6 +15,9 @@ import {
   MoveRight,
   Copy,
 } from "lucide-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TNameDescriptionLoader } from "@plane/types";
 import { Button, ControlLink, CustomMenu, Row, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import {
@@ -25,15 +28,15 @@ import {
   InboxIssueStatus,
   SelectDuplicateInboxIssueModal,
 } from "@/components/inbox";
-import { CreateUpdateIssueModal, IssueUpdateStatus } from "@/components/issues";
+import { CreateUpdateIssueModal, NameDescriptionUpdateStatus } from "@/components/issues";
 // helpers
 import { findHowManyDaysLeft } from "@/helpers/date-time.helper";
 import { EInboxIssueStatus } from "@/helpers/inbox.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useUser, useProjectInbox, useProject, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // store types
 import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
 
@@ -41,7 +44,7 @@ type TInboxIssueActionsHeader = {
   workspaceSlug: string;
   projectId: string;
   inboxIssue: IInboxIssueStore | undefined;
-  isSubmitting: "submitting" | "submitted" | "saved";
+  isSubmitting: TNameDescriptionLoader;
   isMobileSidebar: boolean;
   setIsMobileSidebar: (value: boolean) => void;
   isNotificationEmbed: boolean;
@@ -70,6 +73,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
   const { data: currentUser } = useUser();
   const { allowPermissions } = useUserPermissions();
   const { currentProjectDetails } = useProject();
+  const { t } = useTranslation();
 
   const router = useAppRouter();
   const { getProjectById } = useProject();
@@ -101,7 +105,6 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
 
   const currentInboxIssueId = inboxIssue?.issue?.id;
 
-  const issueLink = `${workspaceSlug}/projects/${issue?.project_id}/issues/${currentInboxIssueId}`;
   const intakeIssueLink = `${workspaceSlug}/projects/${issue?.project_id}/inbox/?currentTab=${currentTab}&inboxIssueId=${currentInboxIssueId}`;
 
   const redirectIssue = (): string | undefined => {
@@ -171,8 +174,8 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
     copyUrlToClipboard(path).then(() =>
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Link copied",
-        message: "Issue link copied to clipboard",
+        title: t("common.link_copied"),
+        message: t("common.copied_to_clipboard"),
       })
     );
 
@@ -226,6 +229,14 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
 
   if (!inboxIssue) return null;
 
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issue?.project_id,
+    issueId: currentInboxIssueId,
+    projectIdentifier: currentProjectDetails?.identifier,
+    sequenceId: issue?.sequence_id,
+  });
+
   return (
     <>
       <>
@@ -242,10 +253,12 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           beforeFormSubmit={handleInboxIssueAccept}
           withDraftIssueWrapper={false}
           fetchIssueDetails={false}
-          modalTitle={`Move ${currentProjectDetails?.identifier}-${issue?.sequence_id} to project issues`}
+          modalTitle={t("inbox_issue.actions.move", {
+            value: `${currentProjectDetails?.identifier}-${issue?.sequence_id}`,
+          })}
           primaryButtonText={{
-            default: "Add to project",
-            loading: "Adding",
+            default: t("add_to_project"),
+            loading: t("adding"),
           }}
         />
         <DeclineIssueModal
@@ -282,7 +295,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           )}
           <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
           <div className="flex items-center justify-end w-full">
-            <IssueUpdateStatus isSubmitting={isSubmitting} />
+            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
         </div>
 
@@ -318,11 +331,11 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                     handleActionWithPermission(
                       isProjectAdmin,
                       () => setAcceptIssueModal(true),
-                      "Only project admins can accept issues"
+                      t("inbox_issue.errors.accept_permission")
                     )
                   }
                 >
-                  Accept
+                  {t("inbox_issue.actions.accept")}
                 </Button>
               </div>
             )}
@@ -338,11 +351,11 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                     handleActionWithPermission(
                       isProjectAdmin,
                       () => setDeclineIssueModal(true),
-                      "Only project admins can deny issues"
+                      t("inbox_issue.errors.decline_permission")
                     )
                   }
                 >
-                  Decline
+                  {t("inbox_issue.actions.decline")}
                 </Button>
               </div>
             )}
@@ -353,19 +366,13 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                   variant="neutral-primary"
                   prependIcon={<Link className="h-2.5 w-2.5" />}
                   size="sm"
-                  onClick={() => handleCopyIssueLink(issueLink)}
+                  onClick={() => handleCopyIssueLink(workItemLink)}
                 >
-                  Copy issue link
+                  {t("inbox_issue.actions.copy")}
                 </Button>
-                <ControlLink
-                  href={`/${workspaceSlug}/projects/${issue?.project_id}/issues/${currentInboxIssueId}`}
-                  onClick={() =>
-                    router.push(`/${workspaceSlug}/projects/${issue?.project_id}/issues/${currentInboxIssueId}`)
-                  }
-                  target="_self"
-                >
+                <ControlLink href={workItemLink} onClick={() => router.push(workItemLink)} target="_self">
                   <Button variant="neutral-primary" prependIcon={<ExternalLink className="h-2.5 w-2.5" />} size="sm">
-                    Open issue
+                    {t("inbox_issue.actions.open")}
                   </Button>
                 </ControlLink>
               </div>
@@ -379,15 +386,15 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                           handleActionWithPermission(
                             isProjectAdmin,
                             handleIssueSnoozeAction,
-                            "Only project admins can snooze/Un-snooze issues"
+                            t("inbox_issue.errors.snooze_permission")
                           )
                         }
                       >
                         <div className="flex items-center gap-2">
                           <Clock size={14} strokeWidth={2} />
                           {inboxIssue?.snoozed_till && numberOfDaysLeft && numberOfDaysLeft > 0
-                            ? "Un-snooze"
-                            : "Snooze"}
+                            ? t("inbox_issue.actions.unsnooze")
+                            : t("inbox_issue.actions.snooze")}
                         </div>
                       </CustomMenu.MenuItem>
                     )}
@@ -397,27 +404,27 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
                           handleActionWithPermission(
                             isProjectAdmin,
                             () => setSelectDuplicateIssue(true),
-                            "Only project admins can mark issues as duplicate"
+                            "Only project admins can mark work item as duplicate"
                           )
                         }
                       >
                         <div className="flex items-center gap-2">
                           <FileStack size={14} strokeWidth={2} />
-                          Mark as duplicate
+                          {t("inbox_issue.actions.mark_as_duplicate")}
                         </div>
                       </CustomMenu.MenuItem>
                     )}
                     <CustomMenu.MenuItem onClick={() => handleCopyIssueLink(intakeIssueLink)}>
                       <div className="flex items-center gap-2">
                         <Copy size={14} strokeWidth={2} />
-                        Copy issue link
+                        {t("inbox_issue.actions.copy")}
                       </div>
                     </CustomMenu.MenuItem>
                     {canDelete && (
                       <CustomMenu.MenuItem onClick={() => setDeleteIssueModal(true)}>
                         <div className="flex items-center gap-2">
                           <Trash2 size={14} strokeWidth={2} />
-                          Delete
+                          {t("inbox_issue.actions.delete")}
                         </div>
                       </CustomMenu.MenuItem>
                     )}
@@ -433,7 +440,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
         <InboxIssueActionsMobileHeader
           inboxIssue={inboxIssue}
           isSubmitting={isSubmitting}
-          handleCopyIssueLink={() => handleCopyIssueLink(issueLink)}
+          handleCopyIssueLink={() => handleCopyIssueLink(workItemLink)}
           setAcceptIssueModal={setAcceptIssueModal}
           setDeclineIssueModal={setDeclineIssueModal}
           handleIssueSnoozeAction={handleIssueSnoozeAction}
diff --git a/web/core/components/inbox/content/inbox-issue-mobile-header.tsx b/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
index 7a66d0976..93b823587 100644
--- a/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
+++ b/web/core/components/inbox/content/inbox-issue-mobile-header.tsx
@@ -15,14 +15,17 @@ import {
   PanelLeft,
   MoveRight,
 } from "lucide-react";
+import { TNameDescriptionLoader } from "@plane/types";
 import { Header, CustomMenu, EHeaderVariant } from "@plane/ui";
 // components
 import { InboxIssueStatus } from "@/components/inbox";
-import { IssueUpdateStatus } from "@/components/issues";
+import { NameDescriptionUpdateStatus } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { findHowManyDaysLeft } from "@/helpers/date-time.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
+import { useProject } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 // store types
 import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
@@ -30,7 +33,7 @@ import type { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
 type Props = {
   workspaceSlug: string;
   inboxIssue: IInboxIssueStore | undefined;
-  isSubmitting: "submitting" | "submitted" | "saved";
+  isSubmitting: TNameDescriptionLoader;
   handleInboxIssueNavigation: (direction: "next" | "prev") => void;
   canMarkAsAccepted: boolean;
   canMarkAsDeclined: boolean;
@@ -76,6 +79,8 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
     handleActionWithPermission,
   } = props;
   const router = useAppRouter();
+  const { getProjectIdentifierById } = useProject();
+
   const issue = inboxIssue?.issue;
   const currentInboxIssueId = issue?.id;
   // days left for snooze
@@ -83,6 +88,16 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
 
   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 && (
@@ -117,7 +132,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
         <div className="flex items-center gap-4">
           <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />
           <div className="flex items-center justify-end w-full">
-            <IssueUpdateStatus isSubmitting={isSubmitting} />
+            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
           </div>
         </div>
         <div className="ml-auto">
@@ -126,19 +141,15 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
               <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
                 <div className="flex items-center gap-2">
                   <Link size={14} strokeWidth={2} />
-                  Copy issue link
+                  Copy work item link
                 </div>
               </CustomMenu.MenuItem>
             )}
             {isAcceptedOrDeclined && (
-              <CustomMenu.MenuItem
-                onClick={() =>
-                  router.push(`/${workspaceSlug}/projects/${issue?.project_id}/issues/${currentInboxIssueId}`)
-                }
-              >
+              <CustomMenu.MenuItem onClick={() => router.push(workItemLink)}>
                 <div className="flex items-center gap-2">
                   <ExternalLink size={14} strokeWidth={2} />
-                  Open issue
+                  Open work item
                 </div>
               </CustomMenu.MenuItem>
             )}
@@ -148,7 +159,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
                   handleActionWithPermission(
                     isProjectAdmin,
                     handleIssueSnoozeAction,
-                    "Only project admins can snooze/Un-snooze issues"
+                    "Only project admins can snooze/Un-snooze work items"
                   )
                 }
               >
@@ -164,7 +175,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
                   handleActionWithPermission(
                     isProjectAdmin,
                     () => setSelectDuplicateIssue(true),
-                    "Only project admins can mark issues as duplicate"
+                    "Only project admins can mark work items as duplicate"
                   )
                 }
               >
@@ -180,7 +191,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
                   handleActionWithPermission(
                     isProjectAdmin,
                     () => setAcceptIssueModal(true),
-                    "Only project admins can accept issues"
+                    "Only project admins can accept work items"
                   )
                 }
               >
@@ -196,7 +207,7 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
                   handleActionWithPermission(
                     isProjectAdmin,
                     () => setDeclineIssueModal(true),
-                    "Only project admins can deny issues"
+                    "Only project admins can deny work items"
                   )
                 }
               >
diff --git a/web/core/components/inbox/content/issue-properties.tsx b/web/core/components/inbox/content/issue-properties.tsx
index db7ad8e41..e189df9fa 100644
--- a/web/core/components/inbox/content/issue-properties.tsx
+++ b/web/core/components/inbox/content/issue-properties.tsx
@@ -10,6 +10,7 @@ import { DateDropdown, PriorityDropdown, MemberDropdown, StateDropdown } from "@
 import { IssueLabel, TIssueOperations } from "@/components/issues";
 // helper
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
 import { useProject } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -34,6 +35,14 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
   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,
+  });
+
   return (
     <div className="flex w-full flex-col divide-y-2 divide-custom-border-200">
       <div className="w-full overflow-y-auto">
@@ -169,9 +178,9 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
                 </div>
 
                 <ControlLink
-                  href={`/${workspaceSlug}/projects/${projectId}/issues/${duplicateIssueDetails?.id}`}
+                  href={duplicateWorkItemLink}
                   onClick={() => {
-                    router.push(`/${workspaceSlug}/projects/${projectId}/issues/${duplicateIssueDetails?.id}`);
+                    router.push(duplicateWorkItemLink);
                   }}
                   target="_self"
                 >
diff --git a/web/core/components/inbox/content/issue-root.tsx b/web/core/components/inbox/content/issue-root.tsx
index 2673245b0..0b64b220a 100644
--- a/web/core/components/inbox/content/issue-root.tsx
+++ b/web/core/components/inbox/content/issue-root.tsx
@@ -4,7 +4,8 @@ import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // plane types
-import { TIssue } from "@plane/types";
+import { ISSUE_ARCHIVED, ISSUE_DELETED } from "@plane/constants";
+import { TIssue, TNameDescriptionLoader } from "@plane/types";
 // plane ui
 import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
 // components
@@ -18,7 +19,6 @@ import {
   IssueAttachmentRoot,
 } from "@/components/issues";
 // constants
-import { ISSUE_ARCHIVED, ISSUE_DELETED } from "@/constants/event-tracker";
 // helpers
 import { getTextContent } from "@/helpers/editor.helper";
 // hooks
@@ -34,8 +34,8 @@ type Props = {
   projectId: string;
   inboxIssue: IInboxIssueStore;
   isEditable: boolean;
-  isSubmitting: "submitting" | "submitted" | "saved";
-  setIsSubmitting: Dispatch<SetStateAction<"submitting" | "submitted" | "saved">>;
+  isSubmitting: TNameDescriptionLoader;
+  setIsSubmitting: Dispatch<SetStateAction<TNameDescriptionLoader>>;
 };
 
 export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
@@ -65,11 +65,16 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   const projectDetails = issue?.project_id ? getProjectById(issue?.project_id) : undefined;
 
   // debounced duplicate issues swr
-  const { duplicateIssues } = useDebouncedDuplicateIssues(projectDetails?.workspace.toString(), projectId, {
-    name: issue?.name,
-    description_html: getTextContent(issue?.description_html),
-    issueId: issue?.id,
-  });
+  const { duplicateIssues } = useDebouncedDuplicateIssues(
+    workspaceSlug,
+    projectDetails?.workspace.toString(),
+    projectId,
+    {
+      name: issue?.name,
+      description_html: getTextContent(issue?.description_html),
+      issueId: issue?.id,
+    }
+  );
 
   if (!issue) return <></>;
 
@@ -86,23 +91,23 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           setToast({
             title: "Success!",
             type: TOAST_TYPE.SUCCESS,
-            message: "Issue deleted successfully",
+            message: "Work item deleted successfully",
           });
           captureIssueEvent({
             eventName: ISSUE_DELETED,
-            payload: { id: _issueId, state: "SUCCESS", element: "Issue detail page" },
+            payload: { id: _issueId, state: "SUCCESS", element: "Work item detail page" },
             path: pathname,
           });
         } catch (error) {
-          console.log("Error in deleting issue:", error);
+          console.log("Error in deleting work item:", error);
           setToast({
             title: "Error!",
             type: TOAST_TYPE.ERROR,
-            message: "Issue delete failed",
+            message: "Work item delete failed",
           });
           captureIssueEvent({
             eventName: ISSUE_DELETED,
-            payload: { id: _issueId, state: "FAILED", element: "Issue detail page" },
+            payload: { id: _issueId, state: "FAILED", element: "Work item detail page" },
             path: pathname,
           });
         }
@@ -111,7 +116,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
         try {
           await inboxIssue.updateIssue(data);
           captureIssueEvent({
-            eventName: "Inbox issue updated",
+            eventName: "Inbox work item updated",
             payload: { ...data, state: "SUCCESS", element: "Inbox" },
             updates: {
               changed_property: Object.keys(data).join(","),
@@ -121,12 +126,12 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           });
         } catch (error) {
           setToast({
-            title: "Issue update failed",
+            title: "Work item update failed",
             type: TOAST_TYPE.ERROR,
-            message: "Issue update failed",
+            message: "Work item update failed",
           });
           captureIssueEvent({
-            eventName: "Inbox issue updated",
+            eventName: "Inbox work item updated",
             payload: { state: "SUCCESS", element: "Inbox" },
             updates: {
               changed_property: Object.keys(data).join(","),
@@ -141,14 +146,14 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
           await archiveIssue(workspaceSlug, projectId, issueId);
           captureIssueEvent({
             eventName: ISSUE_ARCHIVED,
-            payload: { id: issueId, state: "SUCCESS", element: "Issue details page" },
+            payload: { id: issueId, state: "SUCCESS", element: "Work item details page" },
             path: pathname,
           });
         } catch (error) {
           console.log("Error in archiving issue:", error);
           captureIssueEvent({
             eventName: ISSUE_ARCHIVED,
-            payload: { id: issueId, state: "FAILED", element: "Issue details page" },
+            payload: { id: issueId, state: "FAILED", element: "Work item details page" },
             path: pathname,
           });
         }
diff --git a/web/core/components/inbox/content/root.tsx b/web/core/components/inbox/content/root.tsx
index 64d1257e9..81be3d0e7 100644
--- a/web/core/components/inbox/content/root.tsx
+++ b/web/core/components/inbox/content/root.tsx
@@ -1,13 +1,14 @@
 import { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { TNameDescriptionLoader } from "@plane/types";
 // components
 import { ContentWrapper } from "@plane/ui";
 import { InboxIssueActionsHeader, InboxIssueMainContent } from "@/components/inbox";
 // hooks
 import { useProjectInbox, useUser, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type TInboxContentRoot = {
   workspaceSlug: string;
@@ -32,7 +33,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
   /// router
   const router = useAppRouter();
   // states
-  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  const [isSubmitting, setIsSubmitting] = useState<TNameDescriptionLoader>("saved");
   // hooks
   const { data: currentUser } = useUser();
   const { currentTab, fetchInboxIssueById, getIssueInboxByIssueId, getIsIssueAvailable } = useProjectInbox();
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx b/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
index 080250904..ebbdd6ae5 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/priority.tsx
@@ -3,15 +3,16 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssuePriorities } from "@plane/types";
 import { PriorityIcon, Tag } from "@plane/ui";
-// constants
-import { ISSUE_PRIORITIES } from "@/constants/issue";
 // hooks
 import { useProjectInbox } from "@/hooks/store";
 
 export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
   // hooks
+  const { t } = useTranslation();
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
   // derived values
   const filteredValues = inboxFilters?.priority || [];
@@ -26,7 +27,7 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
   if (filteredValues.length === 0) return <></>;
   return (
     <Tag>
-      <div className="text-xs text-custom-text-200">Priority</div>
+      <div className="text-xs text-custom-text-200">{t("common.priority")}</div>
       {filteredValues.map((value) => {
         const optionDetail = currentOptionDetail(value);
         if (!optionDetail) return <></>;
diff --git a/web/core/components/inbox/inbox-filter/applied-filters/status.tsx b/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
index 3232e4a5a..990f04dce 100644
--- a/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
+++ b/web/core/components/inbox/inbox-filter/applied-filters/status.tsx
@@ -1,16 +1,18 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
-import { TInboxIssueStatus } from "@plane/types";
+import { INBOX_STATUS, TInboxIssueStatus } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // constants
 import { Tag } from "@plane/ui";
-import { INBOX_STATUS } from "@/constants/inbox";
 // hooks
 import { useProjectInbox } from "@/hooks/store";
+import { InboxStatusIcon } from "../../inbox-status-icon";
 
 export const InboxIssueAppliedFiltersStatus: FC = observer(() => {
   // 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;
@@ -28,9 +30,9 @@ export const InboxIssueAppliedFiltersStatus: FC = observer(() => {
         return (
           <div key={value} className="relative flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
             <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
-              <optionDetail.icon className={`w-3 h-3 ${optionDetail?.textColor(false)}`} />
+              <InboxStatusIcon type={optionDetail?.status} />
             </div>
-            <div className="text-xs truncate">{optionDetail?.title}</div>
+            <div className="text-xs truncate">{t(optionDetail?.i18n_title)}</div>
             {handleFilterValue(optionDetail?.status).length >= 1 && (
               <div
                 className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-custom-text-300 hover:text-custom-text-200 transition-all"
diff --git a/web/core/components/inbox/inbox-filter/filters/priority.tsx b/web/core/components/inbox/inbox-filter/filters/priority.tsx
index 468e742ef..ebb02ccb3 100644
--- a/web/core/components/inbox/inbox-filter/filters/priority.tsx
+++ b/web/core/components/inbox/inbox-filter/filters/priority.tsx
@@ -2,12 +2,13 @@
 
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
+import { ISSUE_PRIORITIES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssuePriorities } from "@plane/types";
 import { PriorityIcon } from "@plane/ui";
+// plane constants
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { ISSUE_PRIORITIES } from "@/constants/issue";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 
@@ -18,6 +19,7 @@ type Props = {
 export const FilterPriority: FC<Props> = observer((props) => {
   const { searchQuery } = props;
   // hooks
+  const { t } = useTranslation();
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -32,7 +34,7 @@ export const FilterPriority: FC<Props> = observer((props) => {
   return (
     <>
       <FilterHeader
-        title={`Priority${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        title={`${t("common.priority")}${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -49,7 +51,7 @@ export const FilterPriority: FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/web/core/components/inbox/inbox-filter/filters/status.tsx b/web/core/components/inbox/inbox-filter/filters/status.tsx
index b27f360da..730581e5f 100644
--- a/web/core/components/inbox/inbox-filter/filters/status.tsx
+++ b/web/core/components/inbox/inbox-filter/filters/status.tsx
@@ -1,13 +1,14 @@
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 // types
-import { TInboxIssueStatus } from "@plane/types";
+import { INBOX_STATUS, TInboxIssueStatus } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
 // constants
-import { INBOX_STATUS } from "@/constants/inbox";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
+import { InboxStatusIcon } from "../../inbox-status-icon";
 
 type Props = {
   searchQuery: string;
@@ -17,6 +18,7 @@ export const FilterStatus: FC<Props> = observer((props) => {
   const { searchQuery } = props;
   // hooks
   const { currentTab, inboxFilters, handleInboxIssueFilters } = useProjectInbox();
+  const { t } = useTranslation();
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
   // derived values
@@ -40,7 +42,7 @@ export const FilterStatus: FC<Props> = observer((props) => {
   return (
     <>
       <FilterHeader
-        title={`Issue Status ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        title={`Work item Status ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -52,8 +54,8 @@ export const FilterStatus: FC<Props> = observer((props) => {
                 key={status.key}
                 isChecked={filterValue?.includes(status.status) ? true : false}
                 onClick={() => handleStatusFilterSelect(status.status)}
-                icon={<status.icon className={`h-3.5 w-3.5 ${status?.textColor(false)}`} />}
-                title={status.title}
+                icon={<InboxStatusIcon type={status.status} className={`h-3.5 w-3.5`} />}
+                title={t(status.i18n_title)}
               />
             ))
           ) : (
diff --git a/web/core/components/inbox/inbox-filter/root.tsx b/web/core/components/inbox/inbox-filter/root.tsx
index 047610331..df4fcf69f 100644
--- a/web/core/components/inbox/inbox-filter/root.tsx
+++ b/web/core/components/inbox/inbox-filter/root.tsx
@@ -1,8 +1,10 @@
 import { FC } from "react";
 import { ChevronDown, ListFilter } from "lucide-react";
-// components
-import { cn } from "@plane/editor";
+// plane ui
 import { getButtonStyling } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
+// components
 import { InboxIssueFilterSelection, InboxIssueOrderByDropdown } from "@/components/inbox/inbox-filter";
 import { FiltersDropdown } from "@/components/issues";
 import useSize from "@/hooks/use-window-size";
diff --git a/web/core/components/inbox/inbox-filter/sorting/order-by.tsx b/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
index f1282c3c1..d3dabbf86 100644
--- a/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
+++ b/web/core/components/inbox/inbox-filter/sorting/order-by.tsx
@@ -3,9 +3,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys } from "@plane/types";
 import { CustomMenu, getButtonStyling } from "@plane/ui";
 // constants
-import { INBOX_ISSUE_ORDER_BY_OPTIONS, INBOX_ISSUE_SORT_BY_OPTIONS } from "@/constants/inbox";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -14,6 +16,7 @@ import useSize from "@/hooks/use-window-size";
 
 export const InboxIssueOrderByDropdown: FC = observer(() => {
   // hooks
+  const { t } = useTranslation();
   const windowSize = useSize();
   const { inboxSorting, handleInboxIssueSorting } = useProjectInbox();
   const orderByDetails =
@@ -31,8 +34,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
       ) : (
         <ArrowDownWideNarrow className="size-3 " />
       )}
-      {orderByDetails?.label || "Order By"}
-
+      {t(orderByDetails?.i18n_label || "inbox_issue.order_by.created_at")}
       <ChevronDown className="size-3" strokeWidth={2} />
     </div>
   );
@@ -47,9 +49,9 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
         <CustomMenu.MenuItem
           key={option.key}
           className="flex items-center justify-between gap-2"
-          onClick={() => handleInboxIssueSorting("order_by", option.key)}
+          onClick={() => handleInboxIssueSorting("order_by", option.key as TInboxIssueSortingOrderByKeys)}
         >
-          {option.label}
+          {t(option.i18n_label)}
           {inboxSorting?.order_by?.includes(option.key) && <Check className="size-3" />}
         </CustomMenu.MenuItem>
       ))}
@@ -58,9 +60,9 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
         <CustomMenu.MenuItem
           key={option.key}
           className="flex items-center justify-between gap-2"
-          onClick={() => handleInboxIssueSorting("sort_by", option.key)}
+          onClick={() => handleInboxIssueSorting("sort_by", option.key as TInboxIssueSortingSortByKeys)}
         >
-          {option.label}
+          {t(option.i18n_label)}
           {inboxSorting?.sort_by?.includes(option.key) && <Check className="size-3" />}
         </CustomMenu.MenuItem>
       ))}
diff --git a/web/core/components/inbox/inbox-issue-status.tsx b/web/core/components/inbox/inbox-issue-status.tsx
index f74693f76..8e7867a75 100644
--- a/web/core/components/inbox/inbox-issue-status.tsx
+++ b/web/core/components/inbox/inbox-issue-status.tsx
@@ -1,11 +1,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 // constants
-import { INBOX_STATUS } from "@/constants/inbox";
 // helpers
+import { INBOX_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { cn } from "@/helpers/common.helper";
+import { findHowManyDaysLeft } from "@/helpers/date-time.helper";
 // store
 import { IInboxIssueStore } from "@/store/inbox/inbox-issue.store";
+import { ICON_PROPERTIES, InboxStatusIcon } from "./inbox-status-icon";
 
 type Props = {
   inboxIssue: IInboxIssueStore;
@@ -15,28 +18,31 @@ type Props = {
 
 export const InboxIssueStatus: React.FC<Props> = observer((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 = inboxIssueStatusDetail.description(new Date(inboxIssue.snoozed_till ?? ""));
+  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 p-1.5 py-0.5 rounded ${inboxIssueStatusDetail.textColor(
+        `relative flex flex-col gap-1 p-1.5 py-0.5 rounded ${statusIcon.textColor(
           isSnoozedDatePassed
-        )} ${inboxIssueStatusDetail.bgColor(isSnoozedDatePassed)}`
+        )} ${statusIcon.bgColor(isSnoozedDatePassed)}`
       )}
     >
       <div className={`flex items-center gap-1`}>
-        <inboxIssueStatusDetail.icon size={iconSize} className="flex-shrink-0" />
+        <InboxStatusIcon type={inboxIssue?.status} size={iconSize} className="flex-shrink-0" renderColor={false} />
         <div className="font-medium text-xs whitespace-nowrap">
-          {inboxIssue?.status === 0 && inboxIssue?.snoozed_till
-            ? inboxIssueStatusDetail.description(inboxIssue?.snoozed_till)
-            : inboxIssueStatusDetail.title}
+          {inboxIssue?.status === 0 && inboxIssue?.snoozed_till ? description : t(inboxIssueStatusDetail.i18n_title)}
         </div>
       </div>
       {showDescription && <div className="text-sm whitespace-nowrap">{description}</div>}
diff --git a/web/core/components/inbox/inbox-status-icon.tsx b/web/core/components/inbox/inbox-status-icon.tsx
new file mode 100644
index 000000000..03c6acd6c
--- /dev/null
+++ b/web/core/components/inbox/inbox-status-icon.tsx
@@ -0,0 +1,46 @@
+import { AlertTriangle, CheckCircle2, Clock, Copy, XCircle } from "lucide-react";
+import { TInboxIssueStatus, EInboxIssueStatus } from "@plane/constants";
+import { cn } from "@plane/utils";
+
+export const ICON_PROPERTIES = {
+  [EInboxIssueStatus.PENDING]: {
+    icon: AlertTriangle,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#AB6400]"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#FFF7C2]"),
+  },
+  [EInboxIssueStatus.DECLINED]: {
+    icon: XCircle,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#CE2C31]"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#FEEBEC]"),
+  },
+  [EInboxIssueStatus.SNOOZED]: {
+    icon: Clock,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-custom-text-400"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-red-500/10" : "bg-[#E0E1E6]"),
+  },
+  [EInboxIssueStatus.ACCEPTED]: {
+    icon: CheckCircle2,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#3E9B4F]"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#E9F6E9]"),
+  },
+  [EInboxIssueStatus.DUPLICATE]: {
+    icon: Copy,
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-custom-text-200"),
+    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-gray-500/10"),
+  },
+};
+export const InboxStatusIcon = ({
+  type,
+  size,
+  className,
+  renderColor = true,
+}: {
+  type: TInboxIssueStatus;
+  size?: number;
+  className?: string;
+  renderColor?: boolean;
+}) => {
+  if (type === undefined) return null;
+  const Icon = ICON_PROPERTIES[type];
+  return <Icon.icon size={size} className={cn(`w-3 h-3 ${renderColor && Icon?.textColor(false)}`, className)} />;
+};
diff --git a/web/core/components/inbox/modals/create-modal/create-root.tsx b/web/core/components/inbox/modals/create-modal/create-root.tsx
index 4f7bbd4b4..48b566c97 100644
--- a/web/core/components/inbox/modals/create-modal/create-root.tsx
+++ b/web/core/components/inbox/modals/create-modal/create-root.tsx
@@ -3,16 +3,16 @@
 import { FC, FormEvent, useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-// editor
+// plane imports
+import { ETabIndices, ISSUE_CREATED } from "@plane/constants";
 import { EditorRefApi } from "@plane/editor";
 // types
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 import { Button, ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { InboxIssueTitle, InboxIssueDescription, InboxIssueProperties } from "@/components/inbox/modals/create-modal";
 // constants
-import { ISSUE_CREATED } from "@/constants/event-tracker";
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
@@ -67,6 +67,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id;
   const { isMobile } = usePlatformOS();
   const { getProjectById } = useProject();
+  const { t } = useTranslation();
   // states
   const [createMore, setCreateMore] = useState<boolean>(false);
   const [formSubmitting, setFormSubmitting] = useState(false);
@@ -87,10 +88,15 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
   const { getIndex } = getTabIndex(ETabIndices.INTAKE_ISSUE_FORM, isMobile);
 
   // debounced duplicate issues swr
-  const { duplicateIssues } = useDebouncedDuplicateIssues(projectDetails?.workspace.toString(), projectId, {
-    name: formData?.name,
-    description_html: formData?.description_html,
-  });
+  const { duplicateIssues } = useDebouncedDuplicateIssues(
+    workspaceSlug,
+    projectDetails?.workspace.toString(),
+    projectId,
+    {
+      name: formData?.name,
+      description_html: formData?.description_html,
+    }
+  );
 
   const handleEscKeyDown = (event: KeyboardEvent) => {
     if (descriptionEditorRef.current?.isEditorReadyToDiscard()) {
@@ -174,7 +180,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: `Success!`,
-          message: "Issue created successfully.",
+          message: "Work item created successfully.",
         });
       })
       .catch((error) => {
@@ -208,7 +214,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
         <form ref={formRef} onSubmit={handleFormSubmit} className="flex flex-col w-full">
           <div className="space-y-5 p-5 rounded-t-lg bg-custom-background-100">
             <div className="flex items-center justify-between gap-2">
-              <h3 className="text-xl font-medium text-custom-text-200">Create intake issue</h3>
+              <h3 className="text-xl font-medium text-custom-text-200">{t("inbox_issue.modal.title")}</h3>
               {duplicateIssues?.length > 0 && (
                 <DeDupeButtonRoot
                   workspaceSlug={workspaceSlug}
@@ -246,7 +252,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
               tabIndex={getIndex("create_more")}
             >
               <ToggleSwitch value={createMore} onChange={() => {}} size="sm" />
-              <span className="text-xs">Create more</span>
+              <span className="text-xs">{t("create_more")}</span>
             </div>
             <div className="flex items-center gap-3">
               <Button
@@ -266,7 +272,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
                 }}
                 tabIndex={getIndex("discard_button")}
               >
-                Discard
+                {t("discard")}
               </Button>
               <Button
                 variant="primary"
@@ -277,7 +283,7 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
                 disabled={isTitleLengthMoreThan255Character}
                 tabIndex={getIndex("submit_button")}
               >
-                {formSubmitting ? "Creating" : "Create Issue"}
+                {formSubmitting ? t("creating") : t("create_work_item")}
               </Button>
             </div>
           </div>
diff --git a/web/core/components/inbox/modals/create-modal/issue-description.tsx b/web/core/components/inbox/modals/create-modal/issue-description.tsx
index b9bad6c11..4841f9ca1 100644
--- a/web/core/components/inbox/modals/create-modal/issue-description.tsx
+++ b/web/core/components/inbox/modals/create-modal/issue-description.tsx
@@ -2,8 +2,12 @@
 
 import { FC, RefObject } from "react";
 import { observer } from "mobx-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
 // editor
 import { EditorRefApi } from "@plane/editor";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { TIssue } from "@plane/types";
 import { EFileAssetType } from "@plane/types/src/enums";
@@ -11,17 +15,15 @@ import { EFileAssetType } from "@plane/types/src/enums";
 import { Loader } from "@plane/ui";
 // components
 import { RichTextEditor } from "@/components/editor/rich-text-editor/rich-text-editor";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
-import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
+import { getDescriptionPlaceholderI18n } from "@/helpers/issue.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
-import { useProjectInbox } from "@/hooks/store";
+import { useEditorAsset, useProjectInbox } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// services
-import { FileService } from "@/services/file.service";
-const fileService = new FileService();
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+const workspaceService = new WorkspaceService();
 
 type TInboxIssueDescription = {
   containerClassName?: string;
@@ -48,7 +50,10 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
     onEnterKeyPress,
     onAssetUpload,
   } = props;
-  // hooks
+  // i18n
+  const { t } = useTranslation();
+  // store hooks
+  const { uploadEditorAsset } = useEditorAsset();
   const { loader } = useProjectInbox();
   const { isMobile } = usePlatformOS();
 
@@ -71,25 +76,32 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
       projectId={projectId}
       dragDropEnabled={false}
       onChange={(_description: object, description_html: string) => handleData("description_html", description_html)}
-      placeholder={getDescriptionPlaceholder}
+      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 (file) => {
+      uploadFile={async (blockId, file) => {
         try {
-          const { asset_id } = await fileService.uploadProjectAsset(
-            workspaceSlug,
-            projectId,
-            {
+          const { asset_id } = await uploadEditorAsset({
+            blockId,
+            data: {
               entity_identifier: data.id ?? "",
               entity_type: EFileAssetType.ISSUE_DESCRIPTION,
             },
-            file
-          );
+            file,
+            projectId,
+            workspaceSlug,
+          });
           onAssetUpload?.(asset_id);
           return asset_id;
         } catch (error) {
-          console.log("Error in uploading issue asset:", error);
+          console.log("Error in uploading work item asset:", error);
           throw new Error("Asset upload failed. Please try again later.");
         }
       }}
diff --git a/web/core/components/inbox/modals/create-modal/issue-properties.tsx b/web/core/components/inbox/modals/create-modal/issue-properties.tsx
index ce37f07b1..c5bcc965a 100644
--- a/web/core/components/inbox/modals/create-modal/issue-properties.tsx
+++ b/web/core/components/inbox/modals/create-modal/issue-properties.tsx
@@ -1,6 +1,8 @@
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { LayoutPanelTop } from "lucide-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
 import { ISearchIssueResponse, TIssue } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // components
@@ -15,8 +17,6 @@ import {
 } from "@/components/dropdowns";
 import { ParentIssuesListModal } from "@/components/issues";
 import { IssueLabelSelect } from "@/components/issues/select";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
@@ -194,7 +194,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
             >
               <>
                 <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueModalOpen(true)}>
-                  Change parent issue
+                  Change parent work item
                 </CustomMenu.MenuItem>
                 <CustomMenu.MenuItem
                   className="!p-1"
@@ -203,7 +203,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
                     setSelectedParentIssue(undefined);
                   }}
                 >
-                  Remove parent issue
+                  Remove parent work item
                 </CustomMenu.MenuItem>
               </>
             </CustomMenu>
diff --git a/web/core/components/inbox/modals/create-modal/issue-title.tsx b/web/core/components/inbox/modals/create-modal/issue-title.tsx
index f5c8f2427..cd645fb70 100644
--- a/web/core/components/inbox/modals/create-modal/issue-title.tsx
+++ b/web/core/components/inbox/modals/create-modal/issue-title.tsx
@@ -2,10 +2,11 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 import { Input } from "@plane/ui";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
@@ -23,6 +24,7 @@ export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
   const { isMobile } = usePlatformOS();
 
   const { getIndex } = getTabIndex(ETabIndices.INTAKE_ISSUE_FORM, isMobile);
+  const { t } = useTranslation();
   return (
     <div className="space-y-1">
       <Input
@@ -31,13 +33,13 @@ export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
         type="text"
         value={data?.name}
         onChange={(e) => handleData("name", e.target.value)}
-        placeholder="Title"
+        placeholder={t("title")}
         className="w-full text-base"
         tabIndex={getIndex("name")}
         required
       />
       {isTitleLengthMoreThan255Character && (
-        <span className="text-xs text-red-500">Title should be less than 255 characters</span>
+        <span className="text-xs text-red-500">{t("title_should_be_less_than_255_characters")}</span>
       )}
     </div>
   );
diff --git a/web/core/components/inbox/modals/decline-issue-modal.tsx b/web/core/components/inbox/modals/decline-issue-modal.tsx
index dd6b009e2..206eae71f 100644
--- a/web/core/components/inbox/modals/decline-issue-modal.tsx
+++ b/web/core/components/inbox/modals/decline-issue-modal.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 // types
+import { useTranslation } from "@plane/i18n";
 import type { TIssue } from "@plane/types";
 // ui
 import { AlertModalCore } from "@plane/ui";
@@ -19,6 +20,7 @@ export const DeclineIssueModal: React.FC<Props> = (props) => {
   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;
 
@@ -38,11 +40,11 @@ export const DeclineIssueModal: React.FC<Props> = (props) => {
       handleSubmit={handleDecline}
       isSubmitting={isDeclining}
       isOpen={isOpen}
-      title="Decline issue"
+      title={t("inbox_issue.modals.decline.title")}
+      // TODO: Need to translate the confirmation message
       content={
         <>
-          {" "}
-          Are you sure you want to decline issue{" "}
+          Are you sure you want to decline work item{" "}
           <span className="break-words font-medium text-custom-text-100">
             {projectDetails?.identifier}-{data?.sequence_id}
           </span>
@@ -50,8 +52,8 @@ export const DeclineIssueModal: React.FC<Props> = (props) => {
         </>
       }
       primaryButtonText={{
-        loading: "Declining",
-        default: "Decline",
+        loading: t("declining"),
+        default: t("decline"),
       }}
     />
   );
diff --git a/web/core/components/inbox/modals/delete-issue-modal.tsx b/web/core/components/inbox/modals/delete-issue-modal.tsx
index 8cdabef5b..cd76aae63 100644
--- a/web/core/components/inbox/modals/delete-issue-modal.tsx
+++ b/web/core/components/inbox/modals/delete-issue-modal.tsx
@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // types
+import { PROJECT_ERROR_MESSAGES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import type { TIssue } from "@plane/types";
 // ui
 import { AlertModalCore, setToast, TOAST_TYPE } from "@plane/ui";
 // constants
-import { PROJECT_ERROR_MESSAGES } from "@/constants/project";
 // hooks
 import { useProject } from "@/hooks/store";
 
@@ -21,6 +22,7 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
   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;
 
@@ -35,19 +37,19 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: `Issue deleted successfully`,
+          title: `${t("success")!}`,
+          message: `${t("inbox_issue.modals.delete.success")!}`,
         });
       })
       .catch((errors) => {
-        const isPermissionError = errors?.error === "Only admin or creator can delete the issue";
+        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: currentError.title,
+          title: t(currentError.i18n_title),
           type: TOAST_TYPE.ERROR,
-          message: currentError.message,
+          message: currentError.i18n_message && t(currentError.i18n_message),
         });
       })
       .finally(() => handleClose());
@@ -59,14 +61,15 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
       handleSubmit={handleDelete}
       isSubmitting={isDeleting}
       isOpen={isOpen}
-      title="Delete issue"
+      title={t("inbox_issue.modals.delete.title")}
+      // TODO: Need to translate the confirmation message
       content={
         <>
-          Are you sure you want to delete issue{" "}
+          Are you sure you want to delete work item{" "}
           <span className="break-words font-medium text-custom-text-100">
             {projectDetails?.identifier}-{data?.sequence_id}
           </span>
-          {""}? The issue will only be deleted from the intake and this action cannot be undone.
+          {""}? The work item will only be deleted from the intake and this action cannot be undone.
         </>
       }
     />
diff --git a/web/core/components/inbox/modals/select-duplicate.tsx b/web/core/components/inbox/modals/select-duplicate.tsx
index 9bcefad49..d0484ce66 100644
--- a/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/web/core/components/inbox/modals/select-duplicate.tsx
@@ -4,18 +4,16 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { Search } from "lucide-react";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
-// icons
-// components
-// types
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { ISearchIssueResponse } from "@plane/types";
-// ui
 import { Loader, TOAST_TYPE, setToast } from "@plane/ui";
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
+// components
+import { SimpleEmptyState } from "@/components/empty-state";
 // hooks
 import { useProject } from "@/hooks/store";
 import useDebounce from "@/hooks/use-debounce";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // services
 import { ProjectService } from "@/services/project";
 
@@ -30,18 +28,19 @@ const projectService = new ProjectService();
 
 export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const { isOpen, onClose, onSubmit, value } = props;
-
-  const [query, setQuery] = useState("");
-
+  // router
   const { workspaceSlug, projectId, issueId } = useParams();
-
-  // hooks
-  const { getProjectById } = useProject();
-
+  // states
+  const [query, setQuery] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
   const [isSearching, setIsSearching] = useState(false);
-
+  // hooks
+  const { getProjectById } = useProject();
+  const { t } = useTranslation();
+  // derived values
   const debouncedSearchTerm: string = useDebounce(query, 500);
+  const searchResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/search" });
+  const issuesResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/issues" });
 
   useEffect(() => {
     if (!isOpen || !workspaceSlug || !projectId) return;
@@ -75,7 +74,9 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const issueList =
     filteredIssues.length > 0 ? (
       <li className="p-2">
-        {query === "" && <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select issue</h2>}
+        {query === "" && (
+          <h2 className="mb-2 mt-4 px-3 text-xs font-semibold text-custom-text-100">Select work item</h2>
+        )}
         <ul className="text-sm text-custom-text-100">
           {filteredIssues.map((issue) => {
             const stateColor = issue.state__color || "";
@@ -110,12 +111,11 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
       </li>
     ) : (
       <div className="flex flex-col items-center justify-center px-3 py-8 text-center">
-        <EmptyState
-          type={
-            query === "" ? EmptyStateType.ISSUE_RELATION_EMPTY_STATE : EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE
-          }
-          layout="screen-simple"
-        />
+        {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>
     );
 
diff --git a/web/core/components/inbox/modals/snooze-issue-modal.tsx b/web/core/components/inbox/modals/snooze-issue-modal.tsx
index 02134d566..6d53a0234 100644
--- a/web/core/components/inbox/modals/snooze-issue-modal.tsx
+++ b/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { FC, Fragment, useState } from "react";
-import { DayPicker } from "react-day-picker";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Button } from "@plane/ui";
+import { useTranslation } from "@plane/i18n";
+import { Button, Calendar } from "@plane/ui";
 
 export type InboxIssueSnoozeModalProps = {
   isOpen: boolean;
@@ -17,6 +17,8 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
   const { isOpen, handleClose, value, onConfirm } = props;
   // states
   const [date, setDate] = useState(value || new Date());
+  //hooks
+  const { t } = useTranslation();
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
@@ -45,7 +47,9 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
             >
               <Dialog.Panel className="relative flex transform rounded-lg bg-custom-background-100 px-5 py-8 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <div className="flex h-full w-full flex-col gap-y-1">
-                  <DayPicker
+                  <Calendar
+                    captionLayout="dropdown"
+                    classNames={{ root: `rounded-md border border-custom-border-200 p-3` }}
                     selected={date ? new Date(date) : undefined}
                     defaultMonth={date ? new Date(date) : undefined}
                     onSelect={(date) => {
@@ -53,7 +57,6 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
                       setDate(date);
                     }}
                     mode="single"
-                    className="rounded-md border border-custom-border-200 p-3"
                     disabled={[
                       {
                         before: new Date(),
@@ -67,7 +70,7 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
                       onConfirm(date);
                     }}
                   >
-                    Snooze
+                    {t("inbox_issue.actions.snooze")}
                   </Button>
                 </div>
               </Dialog.Panel>
diff --git a/web/core/components/inbox/root.tsx b/web/core/components/inbox/root.tsx
index 5d5617bb3..010b76e96 100644
--- a/web/core/components/inbox/root.tsx
+++ b/web/core/components/inbox/root.tsx
@@ -1,18 +1,19 @@
 import { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { Intake } from "@plane/ui";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 import { InboxSidebar, InboxContentRoot } from "@/components/inbox";
 import { InboxLayoutLoader } from "@/components/ui";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
 // hooks
 import { useProjectInbox } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 type TInboxIssueRoot = {
   workspaceSlug: string;
@@ -26,8 +27,12 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
   const { workspaceSlug, projectId, inboxIssueId, inboxAccessible, navigationTab } = props;
   // states
   const [isMobileSidebar, setIsMobileSidebar] = useState(true);
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { loader, error, currentTab, handleCurrentTab, fetchInboxIssues } = useProjectInbox();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/intake/issue-detail" });
 
   useEffect(() => {
     if (!inboxAccessible || !workspaceSlug || !projectId) return;
@@ -96,7 +101,7 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
           />
         ) : (
           <div className="w-full h-full relative flex justify-center items-center">
-            <EmptyState type={EmptyStateType.INBOX_DETAIL_EMPTY_STATE} layout="screen-simple" />
+            <SimpleEmptyState title={t("inbox_issue.empty_state.detail.title")} assetPath={resolvedPath} />
           </div>
         )}
       </div>
diff --git a/web/core/components/inbox/sidebar/root.tsx b/web/core/components/inbox/sidebar/root.tsx
index b8c86e0de..e40359087 100644
--- a/web/core/components/inbox/sidebar/root.tsx
+++ b/web/core/components/inbox/sidebar/root.tsx
@@ -2,14 +2,14 @@
 
 import { FC, useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-import { TInboxIssueCurrentTab } from "@plane/types";
+// plane imports
+import { TInboxIssueCurrentTab } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Header, Loader, EHeaderVariant } from "@plane/ui";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 import { FiltersRoot, InboxIssueAppliedFilters, InboxIssueList } from "@/components/inbox";
 import { InboxSidebarLoader } from "@/components/ui";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
@@ -17,6 +17,7 @@ import { EInboxIssueCurrentTab } from "@/helpers/inbox.helper";
 import { useProject, useProjectInbox } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 type IInboxSidebarProps = {
   workspaceSlug: string;
@@ -25,22 +26,26 @@ type IInboxSidebarProps = {
   setIsMobileSidebar: (value: boolean) => void;
 };
 
-const tabNavigationOptions: { key: TInboxIssueCurrentTab; label: string }[] = [
+const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[] = [
   {
     key: EInboxIssueCurrentTab.OPEN,
-    label: "Open",
+    i18n_label: "inbox_issue.tabs.open",
   },
   {
     key: EInboxIssueCurrentTab.CLOSED,
-    label: "Closed",
+    i18n_label: "inbox_issue.tabs.closed",
   },
 ];
 
 export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
   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 {
@@ -52,8 +57,11 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
     fetchInboxPaginationIssues,
     getAppliedFiltersCount,
   } = useProjectInbox();
-
-  const router = useAppRouter();
+  // derived values
+  const sidebarAssetPath = useResolvedAssetPath({ basePath: "/empty-state/intake/intake-issue" });
+  const sidebarFilterAssetPath = useResolvedAssetPath({
+    basePath: "/empty-state/intake/filter-issue",
+  });
 
   const fetchNextPages = useCallback(() => {
     if (!workspaceSlug || !projectId) return;
@@ -91,7 +99,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
                 }
               }}
             >
-              <div>{option?.label}</div>
+              <div>{t(option?.i18n_label)}</div>
               {option?.key === "open" && currentTab === option?.key && (
                 <div className="rounded-full p-1.5 py-0.5 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold">
                   {inboxIssuePaginationInfo?.total_results || 0}
@@ -128,16 +136,25 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
               />
             ) : (
               <div className="flex items-center justify-center h-full w-full">
-                <EmptyState
-                  type={
-                    getAppliedFiltersCount > 0
-                      ? EmptyStateType.INBOX_SIDEBAR_FILTER_EMPTY_STATE
-                      : currentTab === EInboxIssueCurrentTab.OPEN
-                        ? EmptyStateType.INBOX_SIDEBAR_OPEN_TAB
-                        : EmptyStateType.INBOX_SIDEBAR_CLOSED_TAB
-                  }
-                  layout="screen-simple"
-                />
+                {getAppliedFiltersCount > 0 ? (
+                  <SimpleEmptyState
+                    title={t("inbox_issue.empty_state.sidebar_filter.title")}
+                    description={t("inbox_issue.empty_state.sidebar_filter.description")}
+                    assetPath={sidebarFilterAssetPath}
+                  />
+                ) : currentTab === EInboxIssueCurrentTab.OPEN ? (
+                  <SimpleEmptyState
+                    title={t("inbox_issue.empty_state.sidebar_open_tab.title")}
+                    description={t("inbox_issue.empty_state.sidebar_open_tab.description")}
+                    assetPath={sidebarAssetPath}
+                  />
+                ) : (
+                  <SimpleEmptyState
+                    title={t("inbox_issue.empty_state.sidebar_closed_tab.title")}
+                    description={t("inbox_issue.empty_state.sidebar_closed_tab.description")}
+                    assetPath={sidebarAssetPath}
+                  />
+                )}
               </div>
             )}
             <div ref={setElementRef}>
diff --git a/web/core/components/integration/github/import-confirm.tsx b/web/core/components/integration/github/import-confirm.tsx
index 84870d73a..94b25a2a2 100644
--- a/web/core/components/integration/github/import-confirm.tsx
+++ b/web/core/components/integration/github/import-confirm.tsx
@@ -17,7 +17,7 @@ type Props = {
 export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
   <div className="mt-6">
     <h4 className="font-medium text-custom-text-200">
-      You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm & Import{'" '}
+      You are about to import work items from {watch("github").full_name}. Click on {'"'}Confirm & Import{'" '}
       to complete the process.
     </h4>
     <div className="mt-6 flex items-center justify-between">
diff --git a/web/core/components/integration/github/import-data.tsx b/web/core/components/integration/github/import-data.tsx
index ca2dac955..75226e788 100644
--- a/web/core/components/integration/github/import-data.tsx
+++ b/web/core/components/integration/github/import-data.tsx
@@ -43,7 +43,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Repository</h4>
             <p className="text-xs text-custom-text-200">
-              Select the repository that you want the issues to be imported from.
+              Select the repository that you want the work items to be imported from.
             </p>
           </div>
           <div className="col-span-12 sm:col-span-4">
@@ -69,7 +69,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Project</h4>
-            <p className="text-xs text-custom-text-200">Select the project to import the issues to.</p>
+            <p className="text-xs text-custom-text-200">Select the project to import the work item to.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             {workspaceProjectIds && (
@@ -93,8 +93,8 @@ export const GithubImportData: FC<Props> = observer((props) => {
         </div>
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
-            <h4 className="font-semibold">Sync Issues</h4>
-            <p className="text-xs text-custom-text-200">Set whether you want to sync the issues or not.</p>
+            <h4 className="font-semibold">Sync work item</h4>
+            <p className="text-xs text-custom-text-200">Set whether you want to sync the work items or not.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             <Controller
diff --git a/web/core/components/integration/github/repo-details.tsx b/web/core/components/integration/github/repo-details.tsx
index 7c5a9a320..5d58ab4c9 100644
--- a/web/core/components/integration/github/repo-details.tsx
+++ b/web/core/components/integration/github/repo-details.tsx
@@ -65,7 +65,7 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
             <div className="mt-4 flex gap-16">
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.issue_count}</p>
-                <h6 className="text-sm text-custom-text-200">Issues</h6>
+                <h6 className="text-sm text-custom-text-200">Work items</h6>
               </div>
               <div className="flex-shrink-0 text-center">
                 <p className="text-3xl font-bold">{repoInfo.labels}</p>
@@ -79,7 +79,7 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
           </div>
         ) : (
           <div>
-            <h5>We didn{"'"}t find any issue in this repository.</h5>
+            <h5>We didn{"'"}t find any work item in this repository.</h5>
           </div>
         )
       ) : (
diff --git a/web/core/components/integration/github/root.tsx b/web/core/components/integration/github/root.tsx
index 8fa528d8f..53df6c11f 100644
--- a/web/core/components/integration/github/root.tsx
+++ b/web/core/components/integration/github/root.tsx
@@ -64,7 +64,7 @@ const integrationWorkflowData = [
     key: "import-data",
     icon: UploadCloud,
   },
-  { title: "Issues", key: "repo-details", icon: List },
+  { title: "Work item", key: "repo-details", icon: List },
   {
     title: "Users",
     key: "import-users",
@@ -168,7 +168,7 @@ export const GithubImporterRoot: React.FC = () => {
         <div className="space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4">
           <div className="flex items-center gap-2">
             <div className="h-10 w-10 flex-shrink-0">
-              <Image src={GithubLogo} alt="GithubLogo" />
+              <Image src={GithubLogo} alt="GitHubLogo" />
             </div>
             <div className="flex h-full w-full items-center justify-center">
               {integrationWorkflowData.map((integration, index) => (
diff --git a/web/core/components/integration/guide.tsx b/web/core/components/integration/guide.tsx
index da751cde8..7cce8df86 100644
--- a/web/core/components/integration/guide.tsx
+++ b/web/core/components/integration/guide.tsx
@@ -8,26 +8,41 @@ import { useParams, useSearchParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 // icons
 import { RefreshCw } from "lucide-react";
+// plane imports
+import { IMPORTERS_LIST } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import { IImporterService } from "@plane/types";
 // ui
 import { Button } from "@plane/ui";
 // components
-import { EmptyState } from "@/components/empty-state";
 import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "@/components/integration";
 import { ImportExportSettingsLoader } from "@/components/ui";
 // constants
-import { EmptyStateType } from "@/constants/empty-state";
 import { IMPORTER_SERVICES_LIST } from "@/constants/fetch-keys";
-import { IMPORTERS_LIST } from "@/constants/workspace";
 // hooks
 import { useUser } from "@/hooks/store";
+// assets
+import GithubLogo from "@/public/services/github.png";
+import JiraLogo from "@/public/services/jira.svg";
 // services
 import { IntegrationService } from "@/services/integrations";
 
 // services
 const integrationService = new IntegrationService();
 
+const getImporterLogo = (provider: string) => {
+  switch (provider) {
+    case "github":
+      return GithubLogo;
+    case "jira":
+      return JiraLogo;
+    default:
+      return "";
+  }
+};
+
+// FIXME: [Deprecated] Remove this component
 const IntegrationGuide = observer(() => {
   // states
   const [refreshing, setRefreshing] = useState(false);
@@ -40,6 +55,8 @@ const IntegrationGuide = observer(() => {
   // store hooks
   const { data: currentUser } = useUser();
 
+  const { t } = useTranslation();
+
   const { data: importerServices } = useSWR(
     workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug as string) : null,
     workspaceSlug ? () => integrationService.getImporterServicesList(workspaceSlug as string) : null
@@ -65,8 +82,8 @@ const IntegrationGuide = observer(() => {
               <div className="h-full w-full space-y-1">
                 <div className="text-lg font-medium">Relocation Guide</div>
                 <div className="text-sm">
-                  You can now transfer all the issues that you{"'"}ve created in other tracking
-                  services. This tool will guide you to relocate the issue to Plane.
+                  You can now transfer all the work items that you{"'"}ve created in other tracking
+                  services. This tool will guide you to relocate the work item to Plane.
                 </div>
               </div>
               <a
@@ -87,11 +104,16 @@ const IntegrationGuide = observer(() => {
               >
                 <div className="flex items-start gap-4">
                   <div className="relative h-10 w-10 flex-shrink-0">
-                    <Image src={service.logo} layout="fill" objectFit="cover" alt={`${service.title} Logo`} />
+                    <Image
+                      src={getImporterLogo(service?.provider)}
+                      layout="fill"
+                      objectFit="cover"
+                      alt={`${t(service.i18n_title)} Logo`}
+                    />
                   </div>
                   <div>
-                    <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
-                    <p className="text-sm tracking-tight text-custom-text-200">{service.description}</p>
+                    <h3 className="flex items-center gap-4 text-sm font-medium">{t(service.i18n_title)}</h3>
+                    <p className="text-sm tracking-tight text-custom-text-200">{t(service.i18n_description)}</p>
                   </div>
                 </div>
                 <div className="flex-shrink-0">
@@ -137,7 +159,7 @@ const IntegrationGuide = observer(() => {
                     </div>
                   ) : (
                     <div className="flex h-full w-full items-center justify-center">
-                      <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_IMPORT} size="sm" />
+                      {/* <EmptyState type={EmptyStateType.WORKSPACE_SETTINGS_IMPORT} size="sm" /> */}
                     </div>
                   )
                 ) : (
diff --git a/web/core/components/integration/jira/confirm-import.tsx b/web/core/components/integration/jira/confirm-import.tsx
index 85d595181..efb26afe1 100644
--- a/web/core/components/integration/jira/confirm-import.tsx
+++ b/web/core/components/integration/jira/confirm-import.tsx
@@ -22,7 +22,7 @@ export const JiraConfirmImport: React.FC = () => {
         <div className="col-span-1 flex items-center justify-between">
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_issues")}</h4>
-            <p className="text-sm text-custom-text-200">Issues</p>
+            <p className="text-sm text-custom-text-200">Work items</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{watch("data.total_states")}</h4>
diff --git a/web/core/components/integration/jira/give-details.tsx b/web/core/components/integration/jira/give-details.tsx
index 4e9656551..f26318e3a 100644
--- a/web/core/components/integration/jira/give-details.tsx
+++ b/web/core/components/integration/jira/give-details.tsx
@@ -66,7 +66,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Project Key</h3>
-          <p className="text-sm text-custom-text-200">If XXX-123 is your issue, then enter XXX</p>
+          <p className="text-sm text-custom-text-200">If XXX-123 is your work item, then enter XXX</p>
         </div>
         <div className="col-span-1">
           <Controller
diff --git a/web/core/components/integration/jira/jira-project-detail.tsx b/web/core/components/integration/jira/jira-project-detail.tsx
index 3a1d7ff81..e1808ccac 100644
--- a/web/core/components/integration/jira/jira-project-detail.tsx
+++ b/web/core/components/integration/jira/jira-project-detail.tsx
@@ -130,7 +130,7 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
         <div className="col-span-1 flex items-center justify-between">
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.issues}</h4>
-            <p className="text-sm text-custom-text-200">Issues</p>
+            <p className="text-sm text-custom-text-200">Work items</p>
           </div>
           <div>
             <h4 className="mb-2 text-lg font-semibold">{projectInfo?.states}</h4>
diff --git a/web/core/components/integration/single-import.tsx b/web/core/components/integration/single-import.tsx
index 08a9ebdfc..6be8c02c9 100644
--- a/web/core/components/integration/single-import.tsx
+++ b/web/core/components/integration/single-import.tsx
@@ -1,12 +1,15 @@
 "use client";
 
-// ui
+import { observer } from "mobx-react";
 import { Trash2 } from "lucide-react";
+// plane imports
+import { IMPORTERS_LIST } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IImporterService } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // icons
 // helpers
-import { IMPORTERS_LIST } from "@/constants/workspace";
+
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // types
 // constants
@@ -17,41 +20,47 @@ type Props = {
   handleDelete: () => void;
 };
 
-export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelete }) => (
-  <div className="flex items-center justify-between gap-2 px-4 py-3">
-    <div>
-      <h4 className="flex items-center gap-2 text-sm">
-        <span>
-          Import from{" "}
-          <span className="font-medium">{IMPORTERS_LIST.find((i) => i.provider === service.service)?.title}</span> to{" "}
+export const SingleImport: React.FC<Props> = observer(({ service, refreshing, handleDelete }) => {
+  const { t } = useTranslation();
+
+  const importer = IMPORTERS_LIST.find((i) => i.provider === service.service);
+  return (
+    <div className="flex items-center justify-between gap-2 px-4 py-3">
+      <div>
+        <h4 className="flex items-center gap-2 text-sm">
+          {importer && (
+            <span>
+              Import from <span className="font-medium">{t(importer.i18n_title)}</span> to{" "}
+            </span>
+          )}
           <span className="font-medium">{service.project_detail.name}</span>
-        </span>
-        <span
-          className={`rounded px-2 py-0.5 text-xs capitalize ${
-            service.status === "completed"
-              ? "bg-green-500/20 text-green-500"
-              : service.status === "processing"
-                ? "bg-yellow-500/20 text-yellow-500"
-                : service.status === "failed"
-                  ? "bg-red-500/20 text-red-500"
-                  : ""
-          }`}
-        >
-          {refreshing ? "Refreshing..." : service.status}
-        </span>
-      </h4>
-      <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
-        <span>{renderFormattedDate(service.created_at)}</span>|
-        <span>Imported by {service.initiated_by_detail?.display_name}</span>
+          <span
+            className={`rounded px-2 py-0.5 text-xs capitalize ${
+              service.status === "completed"
+                ? "bg-green-500/20 text-green-500"
+                : service.status === "processing"
+                  ? "bg-yellow-500/20 text-yellow-500"
+                  : service.status === "failed"
+                    ? "bg-red-500/20 text-red-500"
+                    : ""
+            }`}
+          >
+            {refreshing ? "Refreshing..." : service.status}
+          </span>
+        </h4>
+        <div className="mt-2 flex items-center gap-2 text-xs text-custom-text-200">
+          <span>{renderFormattedDate(service.created_at)}</span>|
+          <span>Imported by {service.initiated_by_detail?.display_name}</span>
+        </div>
       </div>
+      <CustomMenu ellipsis>
+        <CustomMenu.MenuItem onClick={handleDelete}>
+          <span className="flex items-center justify-start gap-2">
+            <Trash2 className="h-3.5 w-3.5" />
+            Delete import
+          </span>
+        </CustomMenu.MenuItem>
+      </CustomMenu>
     </div>
-    <CustomMenu ellipsis>
-      <CustomMenu.MenuItem onClick={handleDelete}>
-        <span className="flex items-center justify-start gap-2">
-          <Trash2 className="h-3.5 w-3.5" />
-          Delete import
-        </span>
-      </CustomMenu.MenuItem>
-    </CustomMenu>
-  </div>
-);
+  );
+});
diff --git a/web/core/components/integration/single-integration-card.tsx b/web/core/components/integration/single-integration-card.tsx
index 25392d113..eb1de3ed3 100644
--- a/web/core/components/integration/single-integration-card.tsx
+++ b/web/core/components/integration/single-integration-card.tsx
@@ -6,6 +6,7 @@ import Image from "next/image";
 import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
 import { CheckCircle } from "lucide-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
 // ui
 import { Button, Loader, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
@@ -15,7 +16,6 @@ import { WORKSPACE_INTEGRATIONS } from "@/constants/fetch-keys";
 import { useInstance, useUserPermissions } from "@/hooks/store";
 import useIntegrationPopup from "@/hooks/use-integration-popup";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // services
 // icons
 import GithubLogo from "@/public/services/github.png";
@@ -30,12 +30,12 @@ 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 issues.",
+    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 issues.",
+    notInstalled: "Connect with Slack with your Plane workspace to sync project work items.",
   },
 };
 
diff --git a/web/core/components/issues/archive-issue-modal.tsx b/web/core/components/issues/archive-issue-modal.tsx
index 4f944e26a..f43964d88 100644
--- a/web/core/components/issues/archive-issue-modal.tsx
+++ b/web/core/components/issues/archive-issue-modal.tsx
@@ -2,6 +2,8 @@
 
 import { useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { TDeDupeIssue, TIssue } from "@plane/types";
 // ui
@@ -20,6 +22,7 @@ type Props = {
 
 export const ArchiveIssueModal: React.FC<Props> = (props) => {
   const { dataId, data, isOpen, handleClose, onSubmit } = props;
+  const { t } = useTranslation();
   // states
   const [isArchiving, setIsArchiving] = useState(false);
   // store hooks
@@ -44,16 +47,16 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Archive success",
-          message: "Your archives can be found in project archives.",
+          title: t("issue.archive.success.label"),
+          message: t("issue.archive.success.message"),
         });
         onClose();
       })
       .catch(() =>
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Issue could not be archived. Please try again.",
+          title: t("common.error.label"),
+          message: t("issue.archive.failed.message"),
         })
       )
       .finally(() => setIsArchiving(false));
@@ -88,17 +91,15 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-lg">
                 <div className="px-5 py-4">
                   <h3 className="text-xl font-medium 2xl:text-2xl">
-                    Archive issue {projectDetails?.identifier} {issue.sequence_id}
+                    {t("issue.archive.label")} {projectDetails?.identifier} {issue.sequence_id}
                   </h3>
-                  <p className="mt-3 text-sm text-custom-text-200">
-                    Are you sure you want to archive the issue? All your archived issues can be restored later.
-                  </p>
+                  <p className="mt-3 text-sm text-custom-text-200">{t("issue.archive.confirm_message")}</p>
                   <div className="mt-3 flex justify-end gap-2">
                     <Button variant="neutral-primary" size="sm" onClick={onClose}>
-                      Cancel
+                      {t("common.cancel")}
                     </Button>
                     <Button size="sm" tabIndex={1} onClick={handleArchiveIssue} loading={isArchiving}>
-                      {isArchiving ? "Archiving" : "Archive"}
+                      {isArchiving ? t("common.archiving") : t("common.archive")}
                     </Button>
                   </div>
                 </div>
diff --git a/web/core/components/issues/archived-issues-header.tsx b/web/core/components/issues/archived-issues-header.tsx
index 3926f0872..4e2eaebd9 100644
--- a/web/core/components/issues/archived-issues-header.tsx
+++ b/web/core/components/issues/archived-issues-header.tsx
@@ -1,13 +1,15 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane constants
+import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // components
 import { ArchiveTabsList } from "@/components/archives";
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
-// constants
-import { EIssueFilterType, EIssuesStoreType, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
@@ -26,6 +28,8 @@ export const ArchivedIssuesHeader: FC = observer(() => {
   const {
     project: { projectMemberIds },
   } = useMember();
+  // i18n
+  const { t } = useTranslation();
   // for archived issues list layout is the only option
   const activeLayout = "list";
   // hooks
@@ -70,29 +74,27 @@ export const ArchivedIssuesHeader: FC = observer(() => {
       </div>
       {/* filter options */}
       <div className="flex items-center gap-2 px-8">
-        <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
+        <FiltersDropdown title={t("common.filters")} placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
           <FilterSelection
             filters={issueFilters?.filters || {}}
             handleFiltersUpdate={handleFiltersUpdate}
             displayFilters={issueFilters?.displayFilters ?? {}}
             handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
             layoutDisplayFiltersOptions={
-              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.archived_issues[activeLayout] : undefined
             }
             labels={projectLabels}
             memberIds={projectMemberIds ?? undefined}
             states={projectStates}
           />
         </FiltersDropdown>
-        <FiltersDropdown title="Display" placement="bottom-end">
+        <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_LAYOUT.issues[activeLayout] : undefined
-            }
+            layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[activeLayout] : undefined}
             cycleViewDisabled={!currentProjectDetails?.cycle_view}
             moduleViewDisabled={!currentProjectDetails?.module_view}
           />
diff --git a/web/core/components/issues/attachment/attachment-item-list.tsx b/web/core/components/issues/attachment/attachment-item-list.tsx
index d377bd90a..5df3f49c2 100644
--- a/web/core/components/issues/attachment/attachment-item-list.tsx
+++ b/web/core/components/issues/attachment/attachment-item-list.tsx
@@ -2,6 +2,9 @@ import { FC, useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { FileRejection, useDropzone } from "react-dropzone";
 import { UploadCloud } from "lucide-react";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueServiceType } from "@plane/types";
 // hooks
 import { TOAST_TYPE, setToast } from "@plane/ui";
 import { useIssueDetail } from "@/hooks/store";
@@ -21,10 +24,19 @@ type TIssueAttachmentItemList = {
   issueId: string;
   attachmentHelpers: TAttachmentHelpers;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, attachmentHelpers, disabled } = props;
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    attachmentHelpers,
+    disabled,
+    issueServiceType = EIssueServiceType.ISSUES,
+  } = props;
+  const { t } = useTranslation();
   // states
   const [isUploading, setIsUploading] = useState(false);
   // store hooks
@@ -33,7 +45,7 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
     attachmentDeleteModalId,
     toggleDeleteAttachmentModal,
     fetchActivities,
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
   const { operations: attachmentOperations, snapshot: attachmentSnapshot } = attachmentHelpers;
   const { create: createAttachment } = attachmentOperations;
   const { uploadStatus } = attachmentSnapshot;
@@ -60,8 +72,8 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
           .catch(() => {
             setToast({
               type: TOAST_TYPE.ERROR,
-              title: "Error!",
-              message: "File could not be attached. Try uploading again.",
+              title: t("toast.error"),
+              message: t("attachment.error"),
             });
           })
           .finally(() => {
@@ -73,11 +85,11 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
 
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
+        title: t("toast.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.`,
+            ? t("attachment.only_one_file_allowed")
+            : t("attachment.file_size_limit", { size: maxFileSize / 1024 / 1024 }),
       });
       return;
     },
@@ -104,6 +116,7 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
               onClose={() => toggleDeleteAttachmentModal(null)}
               attachmentOperations={attachmentOperations}
               attachmentId={attachmentDeleteModalId}
+              issueServiceType={issueServiceType}
             />
           )}
           <div
@@ -116,13 +129,18 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
                 <div className="flex items-center justify-center p-1 rounded-md bg-custom-background-100">
                   <div className="flex flex-col justify-center items-center px-5 py-6 rounded-md border border-dashed border-custom-border-300">
                     <UploadCloud className="size-7" />
-                    <span className="text-sm text-custom-text-300">Drag and drop anywhere to upload</span>
+                    <span className="text-sm text-custom-text-300">{t("attachment.drag_and_drop")}</span>
                   </div>
                 </div>
               </div>
             )}
             {issueAttachments?.map((attachmentId) => (
-              <IssueAttachmentsListItem key={attachmentId} attachmentId={attachmentId} disabled={disabled} />
+              <IssueAttachmentsListItem
+                key={attachmentId}
+                attachmentId={attachmentId}
+                disabled={disabled}
+                issueServiceType={issueServiceType}
+              />
             ))}
           </div>
         </>
diff --git a/web/core/components/issues/attachment/attachment-list-item.tsx b/web/core/components/issues/attachment/attachment-list-item.tsx
index e3adc5f82..246d69be5 100644
--- a/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -3,6 +3,9 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Trash } from "lucide-react";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueServiceType } from "@plane/types";
 // ui
 import { CustomMenu, Tooltip } from "@plane/ui";
 // components
@@ -19,17 +22,19 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 type TIssueAttachmentsListItem = {
   attachmentId: string;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer((props) => {
+  const { t } = useTranslation();
   // props
-  const { attachmentId, disabled } = props;
+  const { attachmentId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
   // store hooks
   const { getUserDetails } = useMember();
   const {
     attachment: { getAttachmentById },
     toggleDeleteAttachmentModal,
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
   // derived values
   const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
   const fileName = getFileName(attachment?.attributes.name ?? "");
@@ -66,11 +71,11 @@ export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer(
                 <Tooltip
                   isMobile={isMobile}
                   tooltipContent={`${
-                    getUserDetails(attachment.updated_by)?.display_name ?? ""
+                    getUserDetails(attachment?.created_by)?.display_name ?? ""
                   } uploaded on ${renderFormattedDate(attachment.updated_at)}`}
                 >
                   <div className="flex items-center justify-center">
-                    <ButtonAvatars showTooltip userIds={attachment?.updated_by} />
+                    <ButtonAvatars showTooltip userIds={attachment?.created_by} />
                   </div>
                 </Tooltip>
               </>
@@ -86,7 +91,7 @@ export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer(
               >
                 <div className="flex items-center gap-2">
                   <Trash className="h-3.5 w-3.5" strokeWidth={2} />
-                  <span>Delete</span>
+                  <span>{t("common.actions.delete")}</span>
                 </div>
               </CustomMenu.MenuItem>
             </CustomMenu>
diff --git a/web/core/components/issues/attachment/delete-attachment-modal.tsx b/web/core/components/issues/attachment/delete-attachment-modal.tsx
index 925ff21c0..2b2833fd3 100644
--- a/web/core/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/core/components/issues/attachment/delete-attachment-modal.tsx
@@ -1,6 +1,11 @@
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
+// constants
+import { EIssueServiceType } from "@plane/constants";
+// plane-i18n
+import { useTranslation } from "@plane/i18n";
 // types
+import { TIssueServiceType } from "@plane/types";
 // ui
 import { AlertModalCore } from "@plane/ui";
 // helper
@@ -17,17 +22,19 @@ type Props = {
   onClose: () => void;
   attachmentId: string;
   attachmentOperations: TAttachmentOperationsRemoveModal;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentDeleteModal: FC<Props> = observer((props) => {
-  const { isOpen, onClose, attachmentId, attachmentOperations } = 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();
+  } = useIssueDetail(issueServiceType);
 
   // derived values
   const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
@@ -50,9 +57,10 @@ export const IssueAttachmentDeleteModal: FC<Props> = observer((props) => {
       handleSubmit={() => handleDeletion(attachment.id)}
       isSubmitting={loader}
       isOpen={isOpen}
-      title="Delete attachment"
+      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/web/core/components/issues/bulk-operations/upgrade-banner.tsx b/web/core/components/issues/bulk-operations/upgrade-banner.tsx
index f6657c29e..fef0cb617 100644
--- a/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -1,10 +1,7 @@
 "use client";
 
-// ui
+import { MARKETING_PLANE_ONE_PAGE_LINK } from "@plane/constants";
 import { getButtonStyling } from "@plane/ui";
-// constants
-import { MARKETING_PLANE_ONE_PAGE_LINK } from "@/constants/common";
-// helpers
 import { cn } from "@/helpers/common.helper";
 
 type Props = {
@@ -18,7 +15,8 @@ export const BulkOperationsUpgradeBanner: React.FC<Props> = (props) => {
     <div className={cn("sticky bottom-0 left-0 h-20 z-[2] px-3.5 grid place-items-center", className)}>
       <div className="h-14 w-full bg-custom-primary-100/10 border-[0.5px] border-custom-primary-100/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
         <p className="text-custom-primary-100 font-medium">
-          Change state, priority, and more for several issues at once. Save three minutes on an average per operation.
+          Change state, priority, and more for several work items at once. Save three minutes on an average per
+          operation.
         </p>
         <a
           href={MARKETING_PLANE_ONE_PAGE_LINK}
diff --git a/web/core/components/issues/confirm-issue-discard.tsx b/web/core/components/issues/confirm-issue-discard.tsx
index 580703490..7630af303 100644
--- a/web/core/components/issues/confirm-issue-discard.tsx
+++ b/web/core/components/issues/confirm-issue-discard.tsx
@@ -65,7 +65,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
-                          You can save this issue to Drafts so you can come back to it later.{" "}
+                          You can save this work item to Drafts so you can come back to it later.{" "}
                         </p>
                       </div>
                     </div>
diff --git a/web/core/components/issues/create-issue-toast-action-items.tsx b/web/core/components/issues/create-issue-toast-action-items.tsx
index 0fe76fb9b..16f2a2d75 100644
--- a/web/core/components/issues/create-issue-toast-action-items.tsx
+++ b/web/core/components/issues/create-issue-toast-action-items.tsx
@@ -2,35 +2,46 @@
 import React, { FC, useState } from "react";
 import { observer } from "mobx-react";
 // helpers
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useIssueDetail } from "@/hooks/store";
+import { useIssueDetail, useProject } from "@/hooks/store";
 
 type TCreateIssueToastActionItems = {
   workspaceSlug: string;
   projectId: string;
   issueId: string;
+  isEpic?: boolean;
 };
 
 export const CreateIssueToastActionItems: FC<TCreateIssueToastActionItems> = observer((props) => {
-  const { workspaceSlug, projectId, issueId } = props;
+  const { workspaceSlug, projectId, 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 issueLink = `${workspaceSlug}/projects/${projectId}/issues/${issueId}`;
+  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(issueLink);
+      await copyUrlToClipboard(workItemLink, false);
       setCopied(true);
       setTimeout(() => setCopied(false), 3000);
     } catch (error) {
@@ -43,12 +54,12 @@ export const CreateIssueToastActionItems: FC<TCreateIssueToastActionItems> = obs
   return (
     <div className="flex items-center gap-1 text-xs text-custom-text-200">
       <a
-        href={`/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`}
+        href={workItemLink}
         target="_blank"
         rel="noopener noreferrer"
         className="text-custom-primary px-2 py-1 hover:bg-custom-background-90 font-medium rounded"
       >
-        View issue
+        {`View ${isEpic ? "epic" : "work item"}`}
       </a>
 
       {copied ? (
diff --git a/web/core/components/issues/delete-issue-modal.tsx b/web/core/components/issues/delete-issue-modal.tsx
index f19141234..8f7265a16 100644
--- a/web/core/components/issues/delete-issue-modal.tsx
+++ b/web/core/components/issues/delete-issue-modal.tsx
@@ -1,16 +1,18 @@
 "use client";
 
 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 { TDeDupeIssue, TIssue } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PROJECT_ERROR_MESSAGES } from "@/constants/project";
 // hooks
 import { useIssues, useProject, useUser, useUserPermissions } from "@/hooks/store";
 // plane-web
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   isOpen: boolean;
@@ -19,22 +21,22 @@ type Props = {
   data?: TIssue | TDeDupeIssue;
   isSubIssue?: boolean;
   onSubmit?: () => Promise<void>;
+  isEpic?: boolean;
 };
 
-export const DeleteIssueModal: React.FC<Props> = (props) => {
-  const { dataId, data, isOpen, handleClose, isSubIssue = false, onSubmit } = props;
+export const DeleteIssueModal: React.FC<Props> = observer((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();
 
-  // derived values
-  const canPerformProjectAdminActions = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
-
   useEffect(() => {
     setIsDeleting(false);
   }, [isOpen]);
@@ -45,6 +47,14 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
   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 = () => {
@@ -57,9 +67,10 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
 
     if (!authorized) {
       setToast({
-        title: PROJECT_ERROR_MESSAGES.permissionError.title,
+        title: t(PROJECT_ERROR_MESSAGES.permissionError.i18n_title),
         type: TOAST_TYPE.ERROR,
-        message: PROJECT_ERROR_MESSAGES.permissionError.message,
+        message:
+          PROJECT_ERROR_MESSAGES.permissionError.i18n_message && t(PROJECT_ERROR_MESSAGES.permissionError.i18n_message),
       });
       onClose();
       return;
@@ -69,20 +80,24 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
         .then(() => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: `${isSubIssue ? "Sub-issue" : "Issue"} deleted successfully`,
+            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 issue";
+          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: currentError.title,
+            title: t(currentError.i18n_title),
             type: TOAST_TYPE.ERROR,
-            message: currentError.message,
+            message: currentError.i18n_message && t(currentError.i18n_message),
           });
         })
         .finally(() => onClose());
@@ -94,16 +109,17 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
       handleSubmit={handleIssueDelete}
       isSubmitting={isDeleting}
       isOpen={isOpen}
-      title="Delete issue"
+      title={t("entity.delete.label", { entity: isEpic ? t("common.epic") : t("common.work_item") })}
       content={
         <>
-          Are you sure you want to delete issue{" "}
+          {/* TODO: Translate here */}
+          {`Are you sure you want to delete ${isEpic ? "epic" : "work item"} `}
           <span className="break-words font-medium text-custom-text-100">
             {projectDetails?.identifier}-{issue?.sequence_id}
           </span>
-          {""}? All of the data related to the issue will be permanently removed. This action cannot be undone.
+          {` ? All of the data related to the ${isEpic ? "epic" : "work item"} will be permanently removed. This action cannot be undone.`}
         </>
       }
     />
   );
-};
+});
diff --git a/web/core/components/issues/description-input.tsx b/web/core/components/issues/description-input.tsx
index 8c18618c5..df1276dc9 100644
--- a/web/core/components/issues/description-input.tsx
+++ b/web/core/components/issues/description-input.tsx
@@ -4,8 +4,10 @@ import { FC, useCallback, useEffect, useState } from "react";
 import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
-import { TIssue } from "@plane/types";
+import { TIssue, TNameDescriptionLoader } from "@plane/types";
 import { EFileAssetType } from "@plane/types/src/enums";
 // ui
 import { Loader } from "@plane/ui";
@@ -13,12 +15,12 @@ import { Loader } from "@plane/ui";
 import { RichTextEditor, RichTextReadOnlyEditor } from "@/components/editor";
 import { TIssueOperations } from "@/components/issues/issue-detail";
 // helpers
-import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
+import { getDescriptionPlaceholderI18n } from "@/helpers/issue.helper";
 // hooks
-import { useWorkspace } from "@/hooks/store";
-// services
-import { FileService } from "@/services/file.service";
-const fileService = new FileService();
+import { useEditorAsset, useWorkspace } from "@/hooks/store";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
+const workspaceService = new WorkspaceService();
 
 export type IssueDescriptionInputProps = {
   containerClassName?: string;
@@ -29,7 +31,7 @@ export type IssueDescriptionInputProps = {
   disabled?: boolean;
   issueOperations: TIssueOperations;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
-  setIsSubmitting: (initialValue: "submitting" | "submitted" | "saved") => void;
+  setIsSubmitting: (initialValue: TNameDescriptionLoader) => void;
   swrIssueDescription?: string | null | undefined;
 };
 
@@ -46,6 +48,17 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
     setIsSubmitting,
     placeholder,
   } = props;
+  // states
+  const [localIssueDescription, setLocalIssueDescription] = useState({
+    id: issueId,
+    description_html: initialValue,
+  });
+  // store hooks
+  const { uploadEditorAsset } = useEditorAsset();
+  // form info
+
+  // i18n
+  const { t } = useTranslation();
 
   const { handleSubmit, reset, control } = useForm<TIssue>({
     defaultValues: {
@@ -53,11 +66,6 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
     },
   });
 
-  const [localIssueDescription, setLocalIssueDescription] = useState({
-    id: issueId,
-    description_html: initialValue,
-  });
-
   const handleDescriptionFormSubmit = useCallback(
     async (formData: Partial<TIssue>) => {
       await issueOperations.update(workspaceSlug, projectId, issueId, {
@@ -116,23 +124,33 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
                   debouncedFormSave();
                 }}
                 placeholder={
-                  placeholder ? placeholder : (isFocused, value) => getDescriptionPlaceholder(isFocused, value)
+                  placeholder
+                    ? placeholder
+                    : (isFocused, value) => t(`${getDescriptionPlaceholderI18n(isFocused, value)}`)
+                }
+                searchMentionCallback={async (payload) =>
+                  await workspaceService.searchEntity(workspaceSlug?.toString() ?? "", {
+                    ...payload,
+                    project_id: projectId?.toString() ?? "",
+                    issue_id: issueId?.toString(),
+                  })
                 }
                 containerClassName={containerClassName}
-                uploadFile={async (file) => {
+                uploadFile={async (blockId, file) => {
                   try {
-                    const { asset_id } = await fileService.uploadProjectAsset(
-                      workspaceSlug,
-                      projectId,
-                      {
+                    const { asset_id } = await uploadEditorAsset({
+                      blockId,
+                      data: {
                         entity_identifier: issueId,
                         entity_type: EFileAssetType.ISSUE_DESCRIPTION,
                       },
-                      file
-                    );
+                      file,
+                      projectId,
+                      workspaceSlug,
+                    });
                     return asset_id;
                   } catch (error) {
-                    console.log("Error in uploading issue asset:", error);
+                    console.log("Error in uploading work item asset:", error);
                     throw new Error("Asset upload failed. Please try again later.");
                   }
                 }}
@@ -142,6 +160,7 @@ export const IssueDescriptionInput: FC<IssueDescriptionInputProps> = observer((p
                 id={issueId}
                 initialValue={localIssueDescription.description_html ?? ""}
                 containerClassName={containerClassName}
+                workspaceId={workspaceId}
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
               />
diff --git a/web/core/components/issues/filters.tsx b/web/core/components/issues/filters.tsx
index 4b80ba12f..346c960b7 100644
--- a/web/core/components/issues/filters.tsx
+++ b/web/core/components/issues/filters.tsx
@@ -2,26 +2,21 @@
 
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
+// plane constants
+import { EIssueLayoutTypes, EIssueFilterType, EIssuesStoreType, ISSUE_STORE_TO_FILTERS_MAP } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
-// ui
 import { Button } from "@plane/ui";
-
+// components
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
-// constants
-import {
-  EIssueFilterType,
-  EIssuesStoreType,
-  EIssueLayoutTypes,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-} from "@/constants/issue";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
 import { useLabel, useProjectState, useMember, useIssues } from "@/hooks/store";
 // plane web types
 import { TProject } from "@/plane-web/types";
-// local components
 import { ProjectAnalyticsModal } from "../analytics";
 
 type Props = {
@@ -29,8 +24,18 @@ type Props = {
   projectId: string;
   workspaceSlug: string;
   canUserCreateIssue: boolean | undefined;
+  storeType?: EIssuesStoreType.PROJECT | EIssuesStoreType.EPIC;
 };
-const HeaderFilters = observer(({ currentProjectDetails, projectId, workspaceSlug, canUserCreateIssue }: Props) => {
+const HeaderFilters = observer((props: Props) => {
+  const {
+    currentProjectDetails,
+    projectId,
+    workspaceSlug,
+    canUserCreateIssue,
+    storeType = EIssuesStoreType.PROJECT,
+  } = props;
+  // i18n
+  const { t } = useTranslation();
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // store hooks
@@ -39,11 +44,12 @@ const HeaderFilters = observer(({ currentProjectDetails, projectId, workspaceSlu
   } = useMember();
   const {
     issuesFilter: { issueFilters, updateFilters },
-  } = useIssues(EIssuesStoreType.PROJECT);
-
+  } = useIssues(storeType);
   const { projectStates } = useProjectState();
   const { projectLabels } = useLabel();
+  // derived values
   const activeLayout = issueFilters?.displayFilters?.layout;
+  const layoutDisplayFiltersOptions = ISSUE_STORE_TO_FILTERS_MAP[storeType]?.[activeLayout];
 
   const handleFiltersUpdate = useCallback(
     (key: keyof IIssueFilterOptions, value: string | string[]) => {
@@ -107,34 +113,41 @@ const HeaderFilters = observer(({ currentProjectDetails, projectId, workspaceSlu
         onChange={(layout) => handleLayoutChange(layout)}
         selectedLayout={activeLayout}
       />
-      <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
+      <FiltersDropdown
+        title={t("common.filters")}
+        placement="bottom-end"
+        isFiltersApplied={isIssueFilterActive(issueFilters)}
+      >
         <FilterSelection
           filters={issueFilters?.filters ?? {}}
           handleFiltersUpdate={handleFiltersUpdate}
           displayFilters={issueFilters?.displayFilters ?? {}}
           handleDisplayFiltersUpdate={handleDisplayFilters}
-          layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
+          layoutDisplayFiltersOptions={layoutDisplayFiltersOptions}
           labels={projectLabels}
           memberIds={projectMemberIds ?? undefined}
+          projectId={projectId}
           states={projectStates}
           cycleViewDisabled={!currentProjectDetails?.cycle_view}
           moduleViewDisabled={!currentProjectDetails?.module_view}
+          isEpic={storeType === EIssuesStoreType.EPIC}
         />
       </FiltersDropdown>
-      <FiltersDropdown title="Display" placement="bottom-end">
+      <FiltersDropdown title={t("common.display")} placement="bottom-end">
         <DisplayFiltersSelection
-          layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
+          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 md:block" onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
-          Analytics
+          {t("common.analytics")}
         </Button>
       ) : (
         <></>
diff --git a/web/core/components/issues/issue-detail-widgets/action-buttons.tsx b/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
index 18b6cc024..7b6dff67b 100644
--- a/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
+++ b/web/core/components/issues/issue-detail-widgets/action-buttons.tsx
@@ -1,6 +1,8 @@
 "use client";
 import React, { FC } from "react";
 import { Layers, Link, Paperclip, Waypoints } from "lucide-react";
+//i18n
+import { useTranslation } from "@plane/i18n";
 // components
 import {
   IssueAttachmentActionButton,
@@ -19,13 +21,14 @@ type Props = {
 
 export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
   const { workspaceSlug, projectId, issueId, disabled } = props;
+  const { t } = useTranslation();
   return (
     <div className="flex items-center flex-wrap gap-2">
       <SubIssuesActionButton
         issueId={issueId}
         customButton={
           <IssueDetailWidgetButton
-            title="Add sub-issue"
+            title={t("issue.add.sub_issue")}
             icon={<Layers className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
             disabled={disabled}
           />
@@ -36,7 +39,7 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
         issueId={issueId}
         customButton={
           <IssueDetailWidgetButton
-            title="Add relation"
+            title={t("issue.add.relation")}
             icon={<Waypoints className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
             disabled={disabled}
           />
@@ -46,7 +49,7 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
       <IssueLinksActionButton
         customButton={
           <IssueDetailWidgetButton
-            title="Add link"
+            title={t("issue.add.link")}
             icon={<Link className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
             disabled={disabled}
           />
@@ -59,7 +62,7 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
         issueId={issueId}
         customButton={
           <IssueDetailWidgetButton
-            title="Attach"
+            title={t("common.attach")}
             icon={<Paperclip className="h-3.5 w-3.5 flex-shrink-0" strokeWidth={2} />}
             disabled={disabled}
           />
diff --git a/web/core/components/issues/issue-detail-widgets/attachments/content.tsx b/web/core/components/issues/issue-detail-widgets/attachments/content.tsx
index 9c5b2a491..7441ad42f 100644
--- a/web/core/components/issues/issue-detail-widgets/attachments/content.tsx
+++ b/web/core/components/issues/issue-detail-widgets/attachments/content.tsx
@@ -1,6 +1,8 @@
 "use client";
 import React, { FC } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 // components
 import { IssueAttachmentItemList } from "@/components/issues/attachment";
 // helper
@@ -11,12 +13,13 @@ type Props = {
   projectId: string;
   issueId: string;
   disabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentsCollapsibleContent: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled } = props;
+  const { workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
   // helper
-  const attachmentHelpers = useAttachmentOperations(workspaceSlug, projectId, issueId);
+  const attachmentHelpers = useAttachmentOperations(workspaceSlug, projectId, issueId, issueServiceType);
   return (
     <IssueAttachmentItemList
       workspaceSlug={workspaceSlug}
@@ -24,6 +27,7 @@ export const IssueAttachmentsCollapsibleContent: FC<Props> = observer((props) =>
       issueId={issueId}
       disabled={disabled}
       attachmentHelpers={attachmentHelpers}
+      issueServiceType={issueServiceType}
     />
   );
 });
diff --git a/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx b/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
index 43b4812e6..28684ac99 100644
--- a/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
+++ b/web/core/components/issues/issue-detail-widgets/attachments/helper.tsx
@@ -1,5 +1,7 @@
 "use client";
 import { useMemo } from "react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 // plane ui
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 // hooks
@@ -24,11 +26,12 @@ export type TAttachmentHelpers = {
 export const useAttachmentOperations = (
   workspaceSlug: string,
   projectId: string,
-  issueId: string
+  issueId: string,
+  issueServiceType: TIssueServiceType = EIssueServiceType.ISSUES
 ): TAttachmentHelpers => {
   const {
     attachment: { createAttachment, removeAttachment, getAttachmentsUploadStatusByIssueId },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
   const { captureIssueEvent } = useEventTracker();
 
   const attachmentOperations: TAttachmentOperations = useMemo(
diff --git a/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx b/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
index c2d88a954..fb0b5b2c6 100644
--- a/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
+++ b/web/core/components/issues/issue-detail-widgets/attachments/quick-action-button.tsx
@@ -4,6 +4,8 @@ import React, { FC, useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { FileRejection, useDropzone } from "react-dropzone";
 import { Plus } from "lucide-react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 // plane ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
@@ -19,18 +21,31 @@ type Props = {
   issueId: string;
   customButton?: React.ReactNode;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentActionButton: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, customButton, disabled = false } = props;
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    customButton,
+    disabled = false,
+    issueServiceType = EIssueServiceType.ISSUES,
+  } = props;
   // state
   const [isLoading, setIsLoading] = useState(false);
   // store hooks
-  const { setLastWidgetAction, fetchActivities } = useIssueDetail();
+  const { setLastWidgetAction, fetchActivities } = useIssueDetail(issueServiceType);
   // file size
   const { maxFileSize } = useFileSize();
   // operations
-  const { operations: attachmentOperations } = useAttachmentOperations(workspaceSlug, projectId, issueId);
+  const { operations: attachmentOperations } = useAttachmentOperations(
+    workspaceSlug,
+    projectId,
+    issueId,
+    issueServiceType
+  );
   // handlers
   const handleFetchPropertyActivities = useCallback(() => {
     fetchActivities(workspaceSlug, projectId, issueId);
diff --git a/web/core/components/issues/issue-detail-widgets/attachments/root.tsx b/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
index 1f8027590..7b4788a1a 100644
--- a/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
+++ b/web/core/components/issues/issue-detail-widgets/attachments/root.tsx
@@ -1,6 +1,8 @@
 "use client";
 import React, { FC } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 import { Collapsible } from "@plane/ui";
 // components
 import {
@@ -15,12 +17,13 @@ type Props = {
   projectId: string;
   issueId: string;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const AttachmentsCollapsible: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false } = props;
+  const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
   // store hooks
-  const { openWidgets, toggleOpenWidget } = useIssueDetail();
+  const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
 
   // derived values
   const isCollapsibleOpen = openWidgets.includes("attachments");
@@ -36,6 +39,7 @@ export const AttachmentsCollapsible: FC<Props> = observer((props) => {
           projectId={projectId}
           issueId={issueId}
           disabled={disabled}
+          issueServiceType={issueServiceType}
         />
       }
       buttonClassName="w-full"
@@ -45,6 +49,7 @@ export const AttachmentsCollapsible: FC<Props> = observer((props) => {
         projectId={projectId}
         issueId={issueId}
         disabled={disabled}
+        issueServiceType={issueServiceType}
       />
     </Collapsible>
   );
diff --git a/web/core/components/issues/issue-detail-widgets/attachments/title.tsx b/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
index ce83f6826..c96b6ffb8 100644
--- a/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
+++ b/web/core/components/issues/issue-detail-widgets/attachments/title.tsx
@@ -1,6 +1,9 @@
 "use client";
 import React, { FC, useMemo } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueServiceType } from "@plane/types";
 import { CollapsibleButton } from "@plane/ui";
 // components
 import { IssueAttachmentActionButton } from "@/components/issues/issue-detail-widgets";
@@ -13,14 +16,16 @@ type Props = {
   projectId: string;
   issueId: string;
   disabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueAttachmentsCollapsibleTitle: FC<Props> = observer((props) => {
-  const { isOpen, workspaceSlug, projectId, issueId, disabled } = props;
+  const { isOpen, workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
   // store hooks
   const {
     issue: { getIssueById },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   // derived values
   const issue = getIssueById(issueId);
@@ -39,7 +44,7 @@ export const IssueAttachmentsCollapsibleTitle: FC<Props> = observer((props) => {
   return (
     <CollapsibleButton
       isOpen={isOpen}
-      title="Attachments"
+      title={t("common.attachments")}
       indicatorElement={indicatorElement}
       actionItemElement={
         !disabled && (
@@ -48,6 +53,7 @@ export const IssueAttachmentsCollapsibleTitle: FC<Props> = observer((props) => {
             projectId={projectId}
             issueId={issueId}
             disabled={disabled}
+            issueServiceType={issueServiceType}
           />
         )
       }
diff --git a/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx b/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx
index 8537020b7..9162e6316 100644
--- a/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx
+++ b/web/core/components/issues/issue-detail-widgets/issue-detail-widget-collapsibles.tsx
@@ -55,12 +55,7 @@ export const IssueDetailWidgetCollapsibles: FC<Props> = observer((props) => {
         />
       )}
       {shouldRenderRelations && (
-        <RelationsCollapsible
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
-          disabled={disabled}
-        />
+        <RelationsCollapsible workspaceSlug={workspaceSlug} issueId={issueId} disabled={disabled} />
       )}
       {shouldRenderLinks && (
         <LinksCollapsible workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
diff --git a/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx b/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
index ec99d6ebe..a0f5a158f 100644
--- a/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
+++ b/web/core/components/issues/issue-detail-widgets/issue-detail-widget-modals.tsx
@@ -82,7 +82,7 @@ export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
 
   const handleCreateUpdateModalOnSubmit = async (_issue: TIssue) => {
     if (_issue.parent_id) {
-      await subIssueOperations.addSubIssue(workspaceSlug, projectId, issueId, [_issue.id]);
+      await subIssueOperations.addSubIssue(workspaceSlug, projectId, _issue.parent_id, [_issue.id]);
     }
   };
 
@@ -104,7 +104,7 @@ export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: "Please select at least one issue.",
+        message: "Please select at least one work item.",
       });
       return;
     }
diff --git a/web/core/components/issues/issue-detail-widgets/links/content.tsx b/web/core/components/issues/issue-detail-widgets/links/content.tsx
index 2d85270b0..fefc7938f 100644
--- a/web/core/components/issues/issue-detail-widgets/links/content.tsx
+++ b/web/core/components/issues/issue-detail-widgets/links/content.tsx
@@ -1,5 +1,7 @@
 "use client";
 import React, { FC } from "react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 // components
 import { LinkList } from "../../issue-detail/links";
 // helper
@@ -10,13 +12,21 @@ type Props = {
   projectId: string;
   issueId: string;
   disabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueLinksCollapsibleContent: FC<Props> = (props) => {
-  const { workspaceSlug, projectId, issueId, disabled } = props;
+  const { workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
 
   // helper
-  const handleLinkOperations = useLinkOperations(workspaceSlug, projectId, issueId);
+  const handleLinkOperations = useLinkOperations(workspaceSlug, projectId, issueId, issueServiceType);
 
-  return <LinkList issueId={issueId} linkOperations={handleLinkOperations} disabled={disabled} />;
+  return (
+    <LinkList
+      issueId={issueId}
+      linkOperations={handleLinkOperations}
+      disabled={disabled}
+      issueServiceType={issueServiceType}
+    />
+  );
 };
diff --git a/web/core/components/issues/issue-detail-widgets/links/helper.tsx b/web/core/components/issues/issue-detail-widgets/links/helper.tsx
index 4669528cd..364958fa2 100644
--- a/web/core/components/issues/issue-detail-widgets/links/helper.tsx
+++ b/web/core/components/issues/issue-detail-widgets/links/helper.tsx
@@ -1,14 +1,23 @@
 "use client";
 import { useMemo } from "react";
-import { TIssueLink } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueLink, TIssueServiceType } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 // types
 import { TLinkOperations } from "../../issue-detail/links";
 
-export const useLinkOperations = (workspaceSlug: string, projectId: string, issueId: string): TLinkOperations => {
-  const { createLink, updateLink, removeLink } = useIssueDetail();
+export const useLinkOperations = (
+  workspaceSlug: string,
+  projectId: string,
+  issueId: string,
+  issueServiceType: TIssueServiceType = EIssueServiceType.ISSUES
+): TLinkOperations => {
+  const { createLink, updateLink, removeLink } = useIssueDetail(issueServiceType);
+  // i18n
+  const { t } = useTranslation();
 
   const handleLinkOperations: TLinkOperations = useMemo(
     () => ({
@@ -17,15 +26,15 @@ export const useLinkOperations = (workspaceSlug: string, projectId: string, issu
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
           await createLink(workspaceSlug, projectId, issueId, data);
           setToast({
-            message: "The link has been successfully created",
+            message: t("links.toasts.created.message"),
             type: TOAST_TYPE.SUCCESS,
-            title: "Link created",
+            title: t("links.toasts.created.title"),
           });
         } catch (error: any) {
           setToast({
-            message: error?.data?.error ?? "The link could not be created",
+            message: error?.data?.url?.error ?? t("links.toasts.not_created.message"),
             type: TOAST_TYPE.ERROR,
-            title: "Link not created",
+            title: t("links.toasts.not_created.title"),
           });
           throw error;
         }
@@ -35,15 +44,15 @@ export const useLinkOperations = (workspaceSlug: string, projectId: string, issu
           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",
+            message: t("links.toasts.updated.message"),
             type: TOAST_TYPE.SUCCESS,
-            title: "Link updated",
+            title: t("links.toasts.updated.title"),
           });
-        } catch (error) {
+        } catch (error: any) {
           setToast({
-            message: "The link could not be updated",
+            message: error?.data?.url?.error ?? t("links.toasts.not_updated.message"),
             type: TOAST_TYPE.ERROR,
-            title: "Link not updated",
+            title: t("links.toasts.not_updated.title"),
           });
           throw error;
         }
@@ -53,15 +62,15 @@ export const useLinkOperations = (workspaceSlug: string, projectId: string, issu
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing required fields");
           await removeLink(workspaceSlug, projectId, issueId, linkId);
           setToast({
-            message: "The link has been successfully removed",
+            message: t("links.toasts.removed.message"),
             type: TOAST_TYPE.SUCCESS,
-            title: "Link removed",
+            title: t("links.toasts.removed.title"),
           });
         } catch (error) {
           setToast({
-            message: "The link could not be removed",
+            message: t("links.toasts.not_removed.message"),
             type: TOAST_TYPE.ERROR,
-            title: "Link not removed",
+            title: t("links.toasts.not_removed.title"),
           });
         }
       },
diff --git a/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx b/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
index f9a59dd3a..775e2f9d7 100644
--- a/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
+++ b/web/core/components/issues/issue-detail-widgets/links/quick-action-button.tsx
@@ -2,18 +2,21 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { Plus } from "lucide-react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 
 type Props = {
   customButton?: React.ReactNode;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueLinksActionButton: FC<Props> = observer((props) => {
-  const { customButton, disabled = false } = props;
+  const { customButton, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
   // store hooks
-  const { toggleIssueLinkModal } = useIssueDetail();
+  const { toggleIssueLinkModal } = useIssueDetail(issueServiceType);
 
   // handlers
   const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
diff --git a/web/core/components/issues/issue-detail-widgets/links/root.tsx b/web/core/components/issues/issue-detail-widgets/links/root.tsx
index 5b8c11b02..655f23e08 100644
--- a/web/core/components/issues/issue-detail-widgets/links/root.tsx
+++ b/web/core/components/issues/issue-detail-widgets/links/root.tsx
@@ -1,6 +1,8 @@
 "use client";
 import React, { FC } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 import { Collapsible } from "@plane/ui";
 // components
 import { IssueLinksCollapsibleContent, IssueLinksCollapsibleTitle } from "@/components/issues/issue-detail-widgets";
@@ -12,12 +14,13 @@ type Props = {
   projectId: string;
   issueId: string;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const LinksCollapsible: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false } = props;
+  const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
   // store hooks
-  const { openWidgets, toggleOpenWidget } = useIssueDetail();
+  const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
 
   // derived values
   const isCollapsibleOpen = openWidgets.includes("links");
@@ -26,7 +29,14 @@ export const LinksCollapsible: FC<Props> = observer((props) => {
     <Collapsible
       isOpen={isCollapsibleOpen}
       onToggle={() => toggleOpenWidget("links")}
-      title={<IssueLinksCollapsibleTitle isOpen={isCollapsibleOpen} issueId={issueId} disabled={disabled} />}
+      title={
+        <IssueLinksCollapsibleTitle
+          isOpen={isCollapsibleOpen}
+          issueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      }
       buttonClassName="w-full"
     >
       <IssueLinksCollapsibleContent
@@ -34,6 +44,7 @@ export const LinksCollapsible: FC<Props> = observer((props) => {
         projectId={projectId}
         issueId={issueId}
         disabled={disabled}
+        issueServiceType={issueServiceType}
       />
     </Collapsible>
   );
diff --git a/web/core/components/issues/issue-detail-widgets/links/title.tsx b/web/core/components/issues/issue-detail-widgets/links/title.tsx
index 1e01ee198..ce69e6aad 100644
--- a/web/core/components/issues/issue-detail-widgets/links/title.tsx
+++ b/web/core/components/issues/issue-detail-widgets/links/title.tsx
@@ -1,6 +1,9 @@
 "use client";
 import React, { FC, useMemo } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueServiceType } from "@plane/types";
 import { CollapsibleButton } from "@plane/ui";
 // components
 import { IssueLinksActionButton } from "@/components/issues/issue-detail-widgets";
@@ -11,14 +14,16 @@ type Props = {
   isOpen: boolean;
   issueId: string;
   disabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueLinksCollapsibleTitle: FC<Props> = observer((props) => {
-  const { isOpen, issueId, disabled } = props;
+  const { isOpen, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
   // store hooks
   const {
     issue: { getIssueById },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   // derived values
   const issue = getIssueById(issueId);
@@ -38,9 +43,11 @@ export const IssueLinksCollapsibleTitle: FC<Props> = observer((props) => {
   return (
     <CollapsibleButton
       isOpen={isOpen}
-      title="Links"
+      title={t("common.links")}
       indicatorElement={indicatorElement}
-      actionItemElement={!disabled && <IssueLinksActionButton disabled={disabled} />}
+      actionItemElement={
+        !disabled && <IssueLinksActionButton issueServiceType={issueServiceType} disabled={disabled} />
+      }
     />
   );
 });
diff --git a/web/core/components/issues/issue-detail-widgets/relations/content.tsx b/web/core/components/issues/issue-detail-widgets/relations/content.tsx
index 79be48e4f..3092a42fe 100644
--- a/web/core/components/issues/issue-detail-widgets/relations/content.tsx
+++ b/web/core/components/issues/issue-detail-widgets/relations/content.tsx
@@ -1,7 +1,10 @@
 "use client";
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
-import { TIssue, TIssueRelationIdMap } from "@plane/types";
+// plane imports
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssue, TIssueServiceType } from "@plane/types";
 import { Collapsible } from "@plane/ui";
 // components
 import { RelationIssueList } from "@/components/issues";
@@ -10,6 +13,7 @@ import { CreateUpdateIssueModal } from "@/components/issues/issue-modal";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 // Plane-web
+import { CreateUpdateEpicModal } from "@/plane-web/components/epics";
 import { useTimeLineRelationOptions } from "@/plane-web/components/relations";
 import { TIssueRelationTypes } from "@/plane-web/types";
 // helper
@@ -17,23 +21,25 @@ import { useRelationOperations } from "./helper";
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   disabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 type TIssueCrudState = { toggle: boolean; issueId: string | undefined; issue: TIssue | undefined };
 
 export type TRelationObject = {
   key: TIssueRelationTypes;
-  label: string;
+  i18n_label: string;
   className: string;
   icon: (size: number) => React.ReactElement;
   placeholder: string;
 };
 
 export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false } = props;
+  const { workspaceSlug, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
+  // plane hooks
+  const { t } = useTranslation();
   // state
   const [issueCrudState, setIssueCrudState] = useState<{
     update: TIssueCrudState;
@@ -56,10 +62,11 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
     relation: { getRelationsByIssueId },
     toggleDeleteIssueModal,
     toggleCreateIssueModal,
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   // helper
   const issueOperations = useRelationOperations();
+  const epicOperations = useRelationOperations(EIssueServiceType.EPICS);
 
   // derived values
   const relations = getRelationsByIssueId(issueId);
@@ -89,7 +96,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
         relationKey: relationKey,
         issueIds: issueIds,
         icon: issueRelationOption?.icon,
-        label: issueRelationOption?.label,
+        label: issueRelationOption?.i18n_label ? t(issueRelationOption?.i18n_label) : "",
         className: issueRelationOption?.className,
       };
     });
@@ -122,13 +129,12 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
             >
               <RelationIssueList
                 workspaceSlug={workspaceSlug}
-                projectId={projectId}
                 issueId={issueId}
                 relationKey={relation.relationKey}
                 issueIds={relation.issueIds}
                 disabled={disabled}
-                issueOperations={issueOperations}
                 handleIssueCrudState={handleIssueCrudState}
+                issueServiceType={issueServiceType}
               />
             </Collapsible>
           </div>
@@ -143,24 +149,56 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
             toggleDeleteIssueModal(null);
           }}
           data={issueCrudState?.delete?.issue as TIssue}
-          onSubmit={async () =>
-            await issueOperations.remove(workspaceSlug, projectId, issueCrudState?.delete?.issue?.id as string)
-          }
+          onSubmit={async () => {
+            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 as string
+              );
+            }
+          }}
+          isEpic={!!issueCrudState.delete.issue?.is_epic}
         />
       )}
 
       {shouldRenderIssueUpdateModal && (
-        <CreateUpdateIssueModal
-          isOpen={issueCrudState?.update?.toggle}
-          onClose={() => {
-            handleIssueCrudState("update", null, null);
-            toggleCreateIssueModal(false);
-          }}
-          data={issueCrudState?.update?.issue ?? undefined}
-          onSubmit={async (_issue: TIssue) => {
-            await issueOperations.update(workspaceSlug, projectId, _issue.id, _issue);
-          }}
-        />
+        <>
+          {!!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/web/core/components/issues/issue-detail-widgets/relations/helper.tsx b/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
index ac8b0f663..3fb88b78f 100644
--- a/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
+++ b/web/core/components/issues/issue-detail-widgets/relations/helper.tsx
@@ -1,10 +1,11 @@
 "use client";
 import { useMemo } from "react";
 import { usePathname } from "next/navigation";
-import { TIssue } from "@plane/types";
+import { EIssueServiceType, ISSUE_DELETED, ISSUE_UPDATED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssue, TIssueServiceType } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { ISSUE_DELETED, ISSUE_UPDATED } from "@/constants/event-tracker";
 // helper
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
@@ -16,20 +17,25 @@ export type TRelationIssueOperations = {
   remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
 };
 
-export const useRelationOperations = (): TRelationIssueOperations => {
-  const { updateIssue, removeIssue } = useIssueDetail();
+export const useRelationOperations = (
+  issueServiceType: TIssueServiceType = EIssueServiceType.ISSUES
+): TRelationIssueOperations => {
+  const { updateIssue, removeIssue } = useIssueDetail(issueServiceType);
   const { captureIssueEvent } = useEventTracker();
   const pathname = usePathname();
+  const { t } = useTranslation();
+  // derived values
+  const entityName = issueServiceType === EIssueServiceType.ISSUES ? "Work item" : "Epic";
 
   const issueOperations: TRelationIssueOperations = useMemo(
     () => ({
       copyText: (text: string) => {
         const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-        copyTextToClipboard(`${originURL}/${text}`).then(() => {
+        copyTextToClipboard(`${originURL}${text}`).then(() => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Link Copied!",
-            message: "Issue link copied to clipboard.",
+            title: t("common.link_copied"),
+            message: t("entity.link_copied_to_clipboard", { entity: entityName }),
           });
         });
       },
@@ -46,9 +52,9 @@ export const useRelationOperations = (): TRelationIssueOperations => {
             path: pathname,
           });
           setToast({
-            title: "Success!",
+            title: t("toast.success"),
             type: TOAST_TYPE.SUCCESS,
-            message: "Issue updated successfully",
+            message: t("entity.update.success", { entity: entityName }),
           });
         } catch (error) {
           captureIssueEvent({
@@ -61,9 +67,9 @@ export const useRelationOperations = (): TRelationIssueOperations => {
             path: pathname,
           });
           setToast({
-            title: "Error!",
+            title: t("toast.error"),
             type: TOAST_TYPE.ERROR,
-            message: "Issue update failed",
+            message: t("entity.update.failed", { entity: entityName }),
           });
         }
       },
diff --git a/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx b/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
index dff072e7d..2d7e5a2ba 100644
--- a/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
+++ b/web/core/components/issues/issue-detail-widgets/relations/quick-action-button.tsx
@@ -2,6 +2,9 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { Plus } from "lucide-react";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueServiceType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
@@ -13,12 +16,14 @@ type Props = {
   issueId: string;
   customButton?: React.ReactNode;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const RelationActionButton: FC<Props> = observer((props) => {
-  const { customButton, issueId, disabled = false } = props;
+  const { customButton, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
   // store hooks
-  const { toggleRelationModal, setRelationKey } = useIssueDetail();
+  const { toggleRelationModal, setRelationKey } = useIssueDetail(issueServiceType);
 
   const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
 
@@ -53,7 +58,7 @@ export const RelationActionButton: FC<Props> = observer((props) => {
           >
             <div className="flex items-center gap-2">
               {item.icon(12)}
-              <span>{item.label}</span>
+              <span>{t(item.i18n_label)}</span>
             </div>
           </CustomMenu.MenuItem>
         );
diff --git a/web/core/components/issues/issue-detail-widgets/relations/root.tsx b/web/core/components/issues/issue-detail-widgets/relations/root.tsx
index d6a8edc3f..803d3fc66 100644
--- a/web/core/components/issues/issue-detail-widgets/relations/root.tsx
+++ b/web/core/components/issues/issue-detail-widgets/relations/root.tsx
@@ -1,6 +1,8 @@
 "use client";
 import React, { FC } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 import { Collapsible } from "@plane/ui";
 // components
 import { RelationsCollapsibleContent, RelationsCollapsibleTitle } from "@/components/issues/issue-detail-widgets";
@@ -9,15 +11,15 @@ import { useIssueDetail } from "@/hooks/store";
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const RelationsCollapsible: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false } = props;
+  const { workspaceSlug, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
   // store hooks
-  const { openWidgets, toggleOpenWidget } = useIssueDetail();
+  const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
 
   // derived values
   const isCollapsibleOpen = openWidgets.includes("relations");
@@ -26,14 +28,21 @@ export const RelationsCollapsible: FC<Props> = observer((props) => {
     <Collapsible
       isOpen={isCollapsibleOpen}
       onToggle={() => toggleOpenWidget("relations")}
-      title={<RelationsCollapsibleTitle isOpen={isCollapsibleOpen} issueId={issueId} disabled={disabled} />}
+      title={
+        <RelationsCollapsibleTitle
+          isOpen={isCollapsibleOpen}
+          issueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      }
       buttonClassName="w-full"
     >
       <RelationsCollapsibleContent
         workspaceSlug={workspaceSlug}
-        projectId={projectId}
         issueId={issueId}
         disabled={disabled}
+        issueServiceType={issueServiceType}
       />
     </Collapsible>
   );
diff --git a/web/core/components/issues/issue-detail-widgets/relations/title.tsx b/web/core/components/issues/issue-detail-widgets/relations/title.tsx
index 2c3854bed..f1284eb47 100644
--- a/web/core/components/issues/issue-detail-widgets/relations/title.tsx
+++ b/web/core/components/issues/issue-detail-widgets/relations/title.tsx
@@ -1,6 +1,9 @@
 "use client";
 import React, { FC, useMemo } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueServiceType } from "@plane/types";
 import { CollapsibleButton } from "@plane/ui";
 // components
 import { RelationActionButton } from "@/components/issues/issue-detail-widgets";
@@ -13,14 +16,16 @@ type Props = {
   isOpen: boolean;
   issueId: string;
   disabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const RelationsCollapsibleTitle: FC<Props> = observer((props) => {
-  const { isOpen, issueId, disabled } = props;
+  const { isOpen, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
   // store hook
   const {
     relation: { getRelationCountByIssueId },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   const ISSUE_RELATION_OPTIONS = useTimeLineRelationOptions();
   // derived values
@@ -39,9 +44,11 @@ export const RelationsCollapsibleTitle: FC<Props> = observer((props) => {
   return (
     <CollapsibleButton
       isOpen={isOpen}
-      title="Relations"
+      title={t("common.relations")}
       indicatorElement={indicatorElement}
-      actionItemElement={!disabled && <RelationActionButton issueId={issueId} disabled={disabled} />}
+      actionItemElement={
+        !disabled && <RelationActionButton issueId={issueId} disabled={disabled} issueServiceType={issueServiceType} />
+      }
     />
   );
 });
diff --git a/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx b/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx
index 5432ee777..26cb370ca 100644
--- a/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx
+++ b/web/core/components/issues/issue-detail-widgets/sub-issues/content.tsx
@@ -1,7 +1,8 @@
 "use client";
-import React, { FC, useCallback, useEffect, useState } from "react";
+import React, { FC, useEffect, useState, useCallback } from "react";
 import { observer } from "mobx-react";
-import { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssue, TIssueServiceType } from "@plane/types";
 // components
 import { DeleteIssueModal } from "@/components/issues/delete-issue-modal";
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal";
@@ -16,12 +17,13 @@ type Props = {
   projectId: string;
   parentIssueId: string;
   disabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
 
 export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, parentIssueId, disabled } = props;
+  const { workspaceSlug, projectId, parentIssueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
   // state
   const [issueCrudState, setIssueCrudState] = useState<{
     create: TIssueCrudState;
@@ -51,14 +53,13 @@ export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
     },
   });
   // store hooks
+  const { toggleCreateIssueModal, toggleDeleteIssueModal } = useIssueDetail();
   const {
     subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
-    toggleCreateIssueModal,
-    toggleDeleteIssueModal,
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   // helpers
-  const subIssueOperations = useSubIssueOperations();
+  const subIssueOperations = useSubIssueOperations(issueServiceType);
   const subIssueHelpers = subIssueHelpersByIssueId(`${parentIssueId}_root`);
 
   // handler
@@ -79,11 +80,16 @@ export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
 
   const handleFetchSubIssues = useCallback(async () => {
     if (!subIssueHelpers.issue_visibility.includes(parentIssueId)) {
-      setSubIssueHelpers(`${parentIssueId}_root`, "preview_loader", parentIssueId);
-      await subIssueOperations.fetchSubIssues(workspaceSlug, projectId, parentIssueId);
-      setSubIssueHelpers(`${parentIssueId}_root`, "preview_loader", 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", "");
+      }
     }
-    setSubIssueHelpers(`${parentIssueId}_root`, "issue_visibility", parentIssueId);
   }, [
     parentIssueId,
     projectId,
@@ -95,10 +101,6 @@ export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
 
   useEffect(() => {
     handleFetchSubIssues();
-
-    return () => {
-      handleFetchSubIssues();
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [parentIssueId]);
 
@@ -123,6 +125,7 @@ export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
           disabled={!disabled}
           handleIssueCrudState={handleIssueCrudState}
           subIssueOperations={subIssueOperations}
+          issueServiceType={issueServiceType}
         />
       )}
 
diff --git a/web/core/components/issues/issue-detail-widgets/sub-issues/helper.tsx b/web/core/components/issues/issue-detail-widgets/sub-issues/helper.tsx
index 7df432d5d..def7e832f 100644
--- a/web/core/components/issues/issue-detail-widgets/sub-issues/helper.tsx
+++ b/web/core/components/issues/issue-detail-widgets/sub-issues/helper.tsx
@@ -1,12 +1,16 @@
 "use client";
 import { useMemo } from "react";
-import { usePathname } from "next/navigation";
-import { TIssue } from "@plane/types";
+import { useParams, usePathname } from "next/navigation";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssue, TIssueServiceType } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // helper
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useEventTracker, useIssueDetail } from "@/hooks/store";
+import { useEventTracker, useIssueDetail, useProjectState } from "@/hooks/store";
+// plane-web
+import { updateEpicAnalytics } from "@/plane-web/helpers/epic-analytics";
 // type
 import { TSubIssueOperations } from "../../sub-issues";
 
@@ -16,17 +20,31 @@ export type TRelationIssueOperations = {
   remove: (workspaceSlug: string, projectId: string, issueId: string) => Promise<void>;
 };
 
-export const useSubIssueOperations = (): TSubIssueOperations => {
+export const useSubIssueOperations = (
+  issueServiceType: TIssueServiceType = EIssueServiceType.ISSUES
+): TSubIssueOperations => {
+  // router
+  const { epicId: epicIdParam } = useParams();
+  const pathname = usePathname();
+  const { t } = useTranslation();
+  // store hooks
   const {
+    issue: { getIssueById },
     subIssues: { setSubIssueHelpers },
-    fetchSubIssues,
     createSubIssues,
     updateSubIssue,
-    removeSubIssue,
     deleteSubIssue,
   } = useIssueDetail();
+  const { getStateById } = useProjectState();
+  const { peekIssue: epicPeekIssue } = useIssueDetail(EIssueServiceType.EPICS);
+  // const { updateEpicAnalytics } = useIssueTypes();
+  const { updateAnalytics } = updateEpicAnalytics();
+  const { fetchSubIssues } = useIssueDetail();
+  const { removeSubIssue } = useIssueDetail(issueServiceType);
   const { captureIssueEvent } = useEventTracker();
-  const pathname = usePathname();
+
+  // derived values
+  const epicId = epicIdParam || epicPeekIssue?.issueId;
 
   const subIssueOperations: TSubIssueOperations = useMemo(
     () => ({
@@ -35,8 +53,13 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
         copyTextToClipboard(`${originURL}/${text}`).then(() => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Link Copied!",
-            message: "Issue link copied to clipboard.",
+            title: t("common.link_copied"),
+            message: t("entity.link_copied_to_clipboard", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("issue.label", { count: 1 })
+                  : t("epic.label", { count: 1 }),
+            }),
           });
         });
       },
@@ -46,8 +69,13 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
         } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Error fetching sub-issues",
+            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 }),
+            }),
           });
         }
       },
@@ -56,14 +84,25 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
           await createSubIssues(workspaceSlug, projectId, parentIssueId, issueIds);
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: "Sub-issues added successfully",
+            title: t("toast.success"),
+            message: t("entity.add.success", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("common.sub_work_items")
+                  : t("issue.label", { count: 2 }),
+            }),
           });
         } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Error adding sub-issue",
+            title: t("toast.error"),
+            // message: `Error adding ${issueServiceType === EIssueServiceType.ISSUES ? "sub-issues" : "issues"}`,
+            message: t("entity.add.failed", {
+              entity:
+                issueServiceType === EIssueServiceType.ISSUES
+                  ? t("common.sub_work_items")
+                  : t("issue.label", { count: 2 }),
+            }),
           });
         }
       },
@@ -79,6 +118,30 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           await updateSubIssue(workspaceSlug, projectId, parentIssueId, issueId, issueData, oldIssue, fromModal);
+
+          if (issueServiceType === EIssueServiceType.EPICS) {
+            const oldState = getStateById(oldIssue?.state_id)?.group;
+
+            if (oldState && oldIssue && issueData && epicId) {
+              // Check if parent_id is changed if yes then decrement the epic analytics count
+              if (issueData.parent_id && oldIssue?.parent_id && issueData.parent_id !== oldIssue?.parent_id) {
+                updateAnalytics(workspaceSlug, projectId, epicId.toString(), {
+                  decrementStateGroupCount: `${oldState}_issues`,
+                });
+              }
+
+              // Check if state_id is changed if yes then decrement the old state group count and increment the new state group count
+              if (issueData.state_id) {
+                const newState = getStateById(issueData.state_id)?.group;
+                if (oldState && newState && oldState !== newState) {
+                  updateAnalytics(workspaceSlug, projectId, epicId.toString(), {
+                    decrementStateGroupCount: `${oldState}_issues`,
+                    incrementStateGroupCount: `${newState}_issues`,
+                  });
+                }
+              }
+            }
+          }
           captureIssueEvent({
             eventName: "Sub-issue updated",
             payload: { ...oldIssue, ...issueData, state: "SUCCESS", element: "Issue detail page" },
@@ -90,8 +153,8 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
           });
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: "Sub-issue updated successfully",
+            title: t("toast.success"),
+            message: t("sub_work_item.update.success"),
           });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
         } catch (error) {
@@ -106,8 +169,8 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
           });
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Error updating sub-issue",
+            title: t("toast.error"),
+            message: t("sub_work_item.update.error"),
           });
         }
       },
@@ -115,10 +178,20 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
         try {
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
           await removeSubIssue(workspaceSlug, projectId, parentIssueId, issueId);
+          if (issueServiceType === EIssueServiceType.EPICS) {
+            const issueBeforeRemoval = getIssueById(issueId);
+            const oldState = getStateById(issueBeforeRemoval?.state_id)?.group;
+
+            if (epicId && oldState) {
+              updateAnalytics(workspaceSlug, projectId, epicId.toString(), {
+                decrementStateGroupCount: `${oldState}_issues`,
+              });
+            }
+          }
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: "Sub-issue removed successfully",
+            title: t("toast.success"),
+            message: t("sub_work_item.remove.success"),
           });
           captureIssueEvent({
             eventName: "Sub-issue removed",
@@ -142,8 +215,8 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
           });
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Error removing sub-issue",
+            title: t("toast.error"),
+            message: t("sub_work_item.remove.error"),
           });
         }
       },
@@ -166,8 +239,8 @@ export const useSubIssueOperations = (): TSubIssueOperations => {
           });
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Error deleting issue",
+            title: t("toast.error"),
+            message: t("issue.delete.error"),
           });
         }
       },
diff --git a/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx b/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
index bf1ece310..d200afc5f 100644
--- a/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
+++ b/web/core/components/issues/issue-detail-widgets/sub-issues/quick-action-button.tsx
@@ -2,7 +2,9 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { LayersIcon, Plus } from "lucide-react";
-import { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssue, TIssueServiceType } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 // hooks
 import { useEventTracker, useIssueDetail } from "@/hooks/store";
@@ -11,10 +13,12 @@ type Props = {
   issueId: string;
   customButton?: React.ReactNode;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const SubIssuesActionButton: FC<Props> = observer((props) => {
-  const { issueId, customButton, disabled = false } = props;
+  const { issueId, customButton, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
   // store hooks
   const {
     issue: { getIssueById },
@@ -22,7 +26,7 @@ export const SubIssuesActionButton: FC<Props> = observer((props) => {
     toggleSubIssuesModal,
     setIssueCrudOperationState,
     issueCrudOperationState,
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
   const { setTrackElement } = useEventTracker();
 
   // derived values
@@ -61,12 +65,12 @@ export const SubIssuesActionButton: FC<Props> = observer((props) => {
   // options
   const optionItems = [
     {
-      label: "Create new",
+      i18n_label: "common.create_new",
       icon: <Plus className="h-3 w-3" />,
       onClick: handleCreateNew,
     },
     {
-      label: "Add existing",
+      i18n_label: "common.add_existing",
       icon: <LayersIcon className="h-3 w-3" />,
       onClick: handleAddExisting,
     },
@@ -88,7 +92,7 @@ export const SubIssuesActionButton: FC<Props> = observer((props) => {
         >
           <div className="flex items-center gap-2">
             {item.icon}
-            <span>{item.label}</span>
+            <span>{t(item.i18n_label)}</span>
           </div>
         </CustomMenu.MenuItem>
       ))}
diff --git a/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx b/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
index 99dbcacb5..5ead3bc5f 100644
--- a/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
+++ b/web/core/components/issues/issue-detail-widgets/sub-issues/root.tsx
@@ -1,6 +1,8 @@
 "use client";
 import React, { FC } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 import { Collapsible } from "@plane/ui";
 // components
 import { SubIssuesCollapsibleContent, SubIssuesCollapsibleTitle } from "@/components/issues/issue-detail-widgets";
@@ -12,13 +14,14 @@ type Props = {
   projectId: string;
   issueId: string;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const SubIssuesCollapsible: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false } = props;
+  const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
 
   // store hooks
-  const { openWidgets, toggleOpenWidget } = useIssueDetail();
+  const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
 
   // derived state
   const isCollapsibleOpen = openWidgets.includes("sub-issues");
@@ -27,7 +30,14 @@ export const SubIssuesCollapsible: FC<Props> = observer((props) => {
     <Collapsible
       isOpen={isCollapsibleOpen}
       onToggle={() => toggleOpenWidget("sub-issues")}
-      title={<SubIssuesCollapsibleTitle isOpen={isCollapsibleOpen} parentIssueId={issueId} disabled={disabled} />}
+      title={
+        <SubIssuesCollapsibleTitle
+          isOpen={isCollapsibleOpen}
+          parentIssueId={issueId}
+          disabled={disabled}
+          issueServiceType={issueServiceType}
+        />
+      }
       buttonClassName="w-full"
     >
       <SubIssuesCollapsibleContent
@@ -35,6 +45,7 @@ export const SubIssuesCollapsible: FC<Props> = observer((props) => {
         projectId={projectId}
         parentIssueId={issueId}
         disabled={disabled}
+        issueServiceType={issueServiceType}
       />
     </Collapsible>
   );
diff --git a/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx b/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
index b3d9bf1fc..3eb60f5e4 100644
--- a/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
+++ b/web/core/components/issues/issue-detail-widgets/sub-issues/title.tsx
@@ -1,6 +1,9 @@
 "use client";
-import React, { FC, useMemo } from "react";
+import React, { FC } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueServiceType } from "@plane/types";
 import { CircularProgressIndicator, CollapsibleButton } from "@plane/ui";
 // components
 import { SubIssuesActionButton } from "@/components/issues/issue-detail-widgets";
@@ -11,14 +14,16 @@ type Props = {
   isOpen: boolean;
   parentIssueId: string;
   disabled: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const SubIssuesCollapsibleTitle: FC<Props> = observer((props) => {
-  const { isOpen, parentIssueId, disabled } = props;
+  const { isOpen, parentIssueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
+  const { t } = useTranslation();
   // store hooks
   const {
     subIssues: { subIssuesByIssueId, stateDistributionByIssueId },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   // derived data
   const subIssuesDistribution = stateDistributionByIssueId(parentIssueId);
@@ -32,25 +37,23 @@ export const SubIssuesCollapsibleTitle: FC<Props> = observer((props) => {
   const totalCount = subIssues.length;
   const percentage = completedCount && totalCount ? (completedCount / totalCount) * 100 : 0;
 
-  // indicator element
-  const indicatorElement = useMemo(
-    () => (
-      <div className="flex items-center gap-1.5 text-custom-text-300 text-sm">
-        <CircularProgressIndicator size={18} percentage={percentage} strokeWidth={3} />
-        <span>
-          {completedCount}/{totalCount} Done
-        </span>
-      </div>
-    ),
-    [completedCount, totalCount, percentage]
-  );
-
   return (
     <CollapsibleButton
       isOpen={isOpen}
-      title="Sub-issues"
-      indicatorElement={indicatorElement}
-      actionItemElement={!disabled && <SubIssuesActionButton issueId={parentIssueId} disabled={disabled} />}
+      title={`${issueServiceType === EIssueServiceType.EPICS ? t("issue.label", { count: 1 }) : t("common.sub_work_items")}`}
+      indicatorElement={
+        <div className="flex items-center gap-1.5 text-custom-text-300 text-sm">
+          <CircularProgressIndicator size={18} percentage={percentage} strokeWidth={3} />
+          <span>
+            {completedCount}/{totalCount} {t("common.done")}
+          </span>
+        </div>
+      }
+      actionItemElement={
+        !disabled && (
+          <SubIssuesActionButton issueId={parentIssueId} disabled={disabled} issueServiceType={issueServiceType} />
+        )
+      }
     />
   );
 });
diff --git a/web/core/components/issues/issue-detail/cycle-select.tsx b/web/core/components/issues/issue-detail/cycle-select.tsx
index f02320e28..c82f67102 100644
--- a/web/core/components/issues/issue-detail/cycle-select.tsx
+++ b/web/core/components/issues/issue-detail/cycle-select.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 // hooks
 // components
 import { CycleDropdown } from "@/components/dropdowns";
@@ -21,6 +22,7 @@ type TIssueCycleSelect = {
 
 export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) => {
   const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  const { t } = useTranslation();
   // states
   const [isUpdating, setIsUpdating] = useState(false);
   // store hooks
@@ -50,7 +52,7 @@ export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) =>
         className="group w-full"
         buttonContainerClassName="w-full text-left rounded"
         buttonClassName={`text-sm justify-between  ${issue?.cycle_id ? "" : "text-custom-text-400"}`}
-        placeholder="No cycle"
+        placeholder={t("cycle.no_cycle")}
         hideIcon
         dropdownArrow
         dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx b/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
index 49747d2b3..daf0115b1 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity-comment-root.tsx
@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+// constants
+import { E_SORT_ORDER, TActivityFilters, filterActivityOnSelectedFilters } from "@plane/constants";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 // plane web components
 import { IssueAdditionalPropertiesActivity } from "@/plane-web/components/issues";
 import { IssueActivityWorklog } from "@/plane-web/components/issues/worklog/activity/root";
-// plane web constants
-import { TActivityFilters, filterActivityOnSelectedFilters } from "@/plane-web/constants/issues";
 // components
 import { IssueActivityItem } from "./activity/activity-list";
 import { IssueCommentCard } from "./comments/comment-card";
@@ -21,18 +21,27 @@ type TIssueActivityCommentRoot = {
   activityOperations: TActivityOperations;
   showAccessSpecifier?: boolean;
   disabled?: boolean;
+  sortOrder: E_SORT_ORDER;
 };
 
 export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer((props) => {
-  const { workspaceSlug, issueId, selectedFilters, activityOperations, showAccessSpecifier, projectId, disabled } =
-    props;
+  const {
+    workspaceSlug,
+    issueId,
+    selectedFilters,
+    activityOperations,
+    showAccessSpecifier,
+    projectId,
+    disabled,
+    sortOrder,
+  } = props;
   // hooks
   const {
     activity: { getActivityCommentByIssueId },
     comment: {},
   } = useIssueDetail();
 
-  const activityComments = getActivityCommentByIssueId(issueId);
+  const activityComments = getActivityCommentByIssueId(issueId, sortOrder);
 
   if (!activityComments || (activityComments && activityComments.length <= 0)) return <></>;
 
@@ -44,6 +53,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
         activityComment.activity_type === "COMMENT" ? (
           <IssueCommentCard
             projectId={projectId}
+            issueId={issueId}
             key={activityComment.id}
             workspaceSlug={workspaceSlug}
             commentId={activityComment.id}
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx b/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
index 319058a01..40162dc15 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity-filter.tsx
@@ -1,11 +1,12 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { Check, ListFilter } from "lucide-react";
+import { TActivityFilters, TActivityFilterOption } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button, PopoverMenu } from "@plane/ui";
 // helper
 import { cn } from "@/helpers/common.helper";
 // constants
-import { TActivityFilterOption, TActivityFilters } from "@/plane-web/constants/issues";
 
 type TActivityFilter = {
   selectedFilters: TActivityFilters[];
@@ -15,6 +16,9 @@ type TActivityFilter = {
 export const ActivityFilter: FC<TActivityFilter> = observer((props) => {
   const { selectedFilters = [], filterOptions } = props;
 
+  // hooks
+  const { t } = useTranslation();
+
   return (
     <PopoverMenu
       buttonClassName="outline-none"
@@ -25,7 +29,10 @@ export const ActivityFilter: FC<TActivityFilter> = observer((props) => {
           prependIcon={<ListFilter className="h-3 w-3" />}
           className="relative"
         >
-          <span className="text-custom-text-200">Filters</span>
+          <span className="text-custom-text-200">{t("common.filters")}</span>
+          {selectedFilters.length < filterOptions.length && (
+            <span className="absolute h-2 w-2 -right-0.5 -top-0.5 bg-custom-primary-100 rounded-full" />
+          )}
         </Button>
       }
       panelClassName="p-2 rounded-md border border-custom-border-200 bg-custom-background-100"
@@ -50,7 +57,7 @@ export const ActivityFilter: FC<TActivityFilter> = observer((props) => {
             {item.isSelected && <Check className="h-2.5 w-2.5" />}
           </div>
           <div className={cn("whitespace-nowrap", item.isSelected ? "text-custom-text-100" : "text-custom-text-200")}>
-            {item.label}
+            {t(item.labelTranslationKey)}
           </div>
         </div>
       )}
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
index b10482b3c..f05f5b98d 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/archived-at.tsx
@@ -36,7 +36,7 @@ export const IssueArchivedAtActivity: FC<TIssueArchivedAtActivity> = observer((p
       ends={ends}
       customUserName={activity.new_value === "archive" ? "Plane" : undefined}
     >
-      {activity.new_value === "restore" ? "restored the issue" : "archived the issue"}.
+      {activity.new_value === "restore" ? "restored the work item" : "archived the work item"}.
     </IssueActivityBlockComponent>
   );
 });
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
index 03ae24617..f763c3bcc 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/cycle.tsx
@@ -30,7 +30,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
       <>
         {activity.verb === "created" ? (
           <>
-            <span>added this issue to the cycle </span>
+            <span>added this work item to the cycle </span>
             <a
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.new_identifier}`}
               target="_blank"
@@ -54,7 +54,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
           </>
         ) : (
           <>
-            <span>removed the issue from the cycle </span>
+            <span>removed the work item from the cycle </span>
             <a
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/cycles/${activity.old_identifier}`}
               target="_blank"
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
index 2ce383061..8099620fe 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/default.tsx
@@ -27,7 +27,7 @@ export const IssueDefaultActivity: FC<TIssueDefaultActivity> = observer((props)
       icon={<LayersIcon width={14} height={14} className="text-custom-text-200" aria-hidden="true" />}
       ends={ends}
     >
-      <>{activity.verb === "created" ? " created the issue." : " deleted an issue."}</>
+      <>{activity.verb === "created" ? " created the work item." : " deleted a work item."}</>
     </IssueActivityBlockComponent>
   );
 });
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
index 91d50b0da..661b513ec 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/helpers/issue-link.tsx
@@ -3,6 +3,7 @@
 import { FC } from "react";
 // hooks
 import { Tooltip } from "@plane/ui";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { useIssueDetail } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // ui
@@ -21,23 +22,29 @@ export const IssueLink: FC<TIssueLink> = (props) => {
   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
-      tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}
+      tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This work item has been deleted"}
       isMobile={isMobile}
     >
       <a
         aria-disabled={activity.issue === null}
-        href={`${
-          activity.issue_detail
-            ? `/${activity.workspace_detail?.slug}/projects/${activity.project}/issues/${activity.issue}`
-            : "#"
-        }`}
+        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-custom-text-100 hover:underline"
       >
-        {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}{" "}
+        {activity.issue_detail
+          ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
+          : "Work items"}{" "}
         <span className="font-normal">{activity.issue_detail?.name}</span>
       </a>
     </Tooltip>
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
index 129831c6a..f949f5859 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/inbox.tsx
@@ -21,15 +21,15 @@ export const IssueInboxActivity: FC<TIssueInboxActivity> = observer((props) => {
   const getInboxActivityMessage = () => {
     switch (activity?.verb) {
       case "-1":
-        return "declined this issue from intake.";
+        return "declined this work item from intake.";
       case "0":
-        return "snoozed this issue.";
+        return "snoozed this work item.";
       case "1":
-        return "accepted this issue from intake.";
+        return "accepted this work item from intake.";
       case "2":
-        return "declined this issue from intake by marking a duplicate issue.";
+        return "declined this work item from intake by marking a duplicate work item.";
       default:
-        return "updated intake issue status.";
+        return "updated intake work item status.";
     }
   };
 
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
index 2864350a4..bd0e49c3b 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/label.tsx
@@ -14,9 +14,11 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
   const {
     activity: { getActivityById },
   } = useIssueDetail();
-  const { projectLabels } = useLabel();
+  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 (
@@ -29,11 +31,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
         {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 === ""
-              ? projectLabels?.find((l) => l.id === activity.new_identifier)?.color
-              : projectLabels?.find((l) => l.id === activity.old_identifier)?.color
-          }
+          color={activity.old_value === "" ? newLabelColor : oldLabelColor}
         />
         {showIssue && (activity.old_value === "" ? ` to ` : ` from `)}
         {showIssue && <IssueLink activityId={activityId} />}
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
index b3d61d398..88a8c35a4 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/actions/module.tsx
@@ -30,7 +30,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) =>
       <>
         {activity.verb === "created" ? (
           <>
-            <span>added this issue to the module </span>
+            <span>added this work item to the module </span>
             <a
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.new_identifier}`}
               target="_blank"
@@ -54,7 +54,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) =>
           </>
         ) : (
           <>
-            <span>removed the issue from the module </span>
+            <span>removed the work item from the module </span>
             <a
               href={`/${activity.workspace_detail?.slug}/projects/${activity.project}/modules/${activity.old_identifier}`}
               target="_blank"
diff --git a/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx b/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
index 148cf1f26..d8d0b59dd 100644
--- a/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/activity/activity-list.tsx
@@ -82,6 +82,7 @@ export const IssueActivityItem: FC<TIssueActivityItem> = observer((props) => {
       return <IssueAttachmentActivity {...componentDefaultProps} showIssue={false} />;
     case "archived_at":
       return <IssueArchivedAtActivity {...componentDefaultProps} />;
+    case "intake":
     case "inbox":
       return <IssueInboxActivity {...componentDefaultProps} />;
     case "type":
diff --git a/web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx b/web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
index 8b9a3eff0..9a35ef1da 100644
--- a/web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/comments/comment-block.tsx
@@ -28,11 +28,13 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = observer((props) => {
     <div className={`relative flex gap-3 ${ends === "top" ? `pb-2` : ends === "bottom" ? `pt-2` : `py-2`}`}>
       <div className="absolute left-[13px] top-0 bottom-0 w-0.5 bg-custom-background-80" aria-hidden />
       <div className="flex-shrink-0 relative w-7 h-7 rounded-full flex justify-center items-center z-[3] bg-gray-500 text-white border border-white uppercase font-medium">
-        {comment.actor_detail.avatar_url && comment.actor_detail.avatar_url !== "" ? (
+        {comment.actor_detail?.avatar_url && comment.actor_detail?.avatar_url !== "" ? (
           <img
-            src={getFileURL(comment.actor_detail.avatar_url)}
+            src={getFileURL(comment.actor_detail?.avatar_url)}
             alt={
-              comment.actor_detail.is_bot ? comment.actor_detail.first_name + " Bot" : comment.actor_detail.display_name
+              comment.actor_detail?.is_bot
+                ? comment.actor_detail?.first_name + " Bot"
+                : comment.actor_detail?.display_name
             }
             height={30}
             width={30}
@@ -40,9 +42,9 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = observer((props) => {
           />
         ) : (
           <>
-            {comment.actor_detail.is_bot
-              ? comment.actor_detail.first_name.charAt(0)
-              : comment.actor_detail.display_name.charAt(0)}
+            {comment.actor_detail?.is_bot
+              ? comment.actor_detail?.first_name.charAt(0)
+              : comment.actor_detail?.display_name.charAt(0)}
           </>
         )}
         <div className="absolute top-2 left-4 w-5 h-5 rounded-full overflow-hidden flex justify-center items-center bg-custom-background-80">
@@ -53,9 +55,9 @@ export const IssueCommentBlock: FC<TIssueCommentBlock> = observer((props) => {
         <div className="w-full truncate space-y-1">
           <div>
             <div className="text-xs capitalize">
-              {comment.actor_detail.is_bot
-                ? comment.actor_detail.first_name + " Bot"
-                : comment.actor_detail.display_name}
+              {comment.actor_detail?.is_bot
+                ? comment.actor_detail?.first_name + " Bot"
+                : comment.actor_detail?.display_name}
             </div>
             <div className="text-xs text-custom-text-200">commented {calculateTimeAgo(comment.created_at)}</div>
           </div>
diff --git a/web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx b/web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
index 53998f01b..96f0960b6 100644
--- a/web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/comments/comment-card.tsx
@@ -4,14 +4,20 @@ import { FC, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
 import { Check, Globe2, Lock, Pencil, Trash2, X } from "lucide-react";
+// plane constants
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
+// plane editor
 import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
+// plane types
 import { TIssueComment } from "@plane/types";
-// ui
+// plane ui
 import { CustomMenu } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { LiteTextEditor, LiteTextReadOnlyEditor } from "@/components/editor";
-// constants
-import { EIssueCommentAccessSpecifier } from "@/constants/issue";
 // helpers
 import { isCommentEmpty } from "@/helpers/string.helper";
 // hooks
@@ -23,6 +29,7 @@ import { IssueCommentBlock } from "./comment-block";
 
 type TIssueCommentCard = {
   projectId: string;
+  issueId: string;
   workspaceSlug: string;
   commentId: string;
   activityOperations: TActivityOperations;
@@ -35,27 +42,29 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
   const {
     workspaceSlug,
     projectId,
+    issueId,
     commentId,
     activityOperations,
     ends,
     showAccessSpecifier = false,
     disabled = false,
   } = props;
-  // hooks
+  const { t } = useTranslation();
+  // states
+  const [isEditing, setIsEditing] = useState(false);
+  // refs
+  const editorRef = useRef<EditorRefApi>(null);
+  const showEditorRef = useRef<EditorReadOnlyRefApi>(null);
+  // store hooks
   const {
     comment: { getCommentById },
   } = useIssueDetail();
   const { data: currentUser } = useUser();
-  // refs
-  const editorRef = useRef<EditorRefApi>(null);
-  const showEditorRef = useRef<EditorReadOnlyRefApi>(null);
-  // state
-  const [isEditing, setIsEditing] = useState(false);
-
+  // derived values
   const comment = getCommentById(commentId);
   const workspaceStore = useWorkspace();
   const workspaceId = workspaceStore.getWorkspaceBySlug(comment?.workspace_detail?.slug as string)?.id as string;
-
+  // form info
   const {
     formState: { isSubmitting },
     handleSubmit,
@@ -65,12 +74,17 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
   } = useForm<Partial<TIssueComment>>({
     defaultValues: { comment_html: comment?.comment_html },
   });
+  // derived values
+  const commentHTML = watch("comment_html");
+  const isEmpty = isCommentEmpty(commentHTML);
+  const isEditorReadyToDiscard = editorRef.current?.isEditorReadyToDiscard();
+  const isSubmitButtonDisabled = isSubmitting || !isEditorReadyToDiscard;
 
-  const onEnter = (formData: Partial<TIssueComment>) => {
+  const onEnter = async (formData: Partial<TIssueComment>) => {
     if (isSubmitting || !comment) return;
     setIsEditing(false);
 
-    activityOperations.updateComment(comment.id, formData);
+    await activityOperations.updateComment(comment.id, formData);
 
     editorRef.current?.setEditorValue(formData?.comment_html ?? "<p></p>");
     showEditorRef.current?.setEditorValue(formData?.comment_html ?? "<p></p>");
@@ -82,10 +96,8 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
     }
   }, [isEditing, setFocus]);
 
-  const commentHTML = watch("comment_html");
-  const isEmpty = isCommentEmpty(commentHTML);
-
   if (!comment || !currentUser) return <></>;
+
   return (
     <IssueCommentBlock
       commentId={commentId}
@@ -94,8 +106,8 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
           {!disabled && currentUser?.id === comment.actor && (
             <CustomMenu ellipsis closeOnSelect>
               <CustomMenu.MenuItem onClick={() => setIsEditing(true)} className="flex items-center gap-1">
-                <Pencil className="h-3 w-3" />
-                Edit comment
+                <Pencil className="flex-shrink-0 size-3" />
+                {t("common.actions.edit")}
               </CustomMenu.MenuItem>
               {showAccessSpecifier && (
                 <>
@@ -106,8 +118,8 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
                       }
                       className="flex items-center gap-1"
                     >
-                      <Globe2 className="h-3 w-3" />
-                      Switch to public comment
+                      <Globe2 className="flex-shrink-0 size-3" />
+                      {t("issue.comments.switch.public")}
                     </CustomMenu.MenuItem>
                   ) : (
                     <CustomMenu.MenuItem
@@ -116,8 +128,8 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
                       }
                       className="flex items-center gap-1"
                     >
-                      <Lock className="h-3 w-3" />
-                      Switch to private comment
+                      <Lock className="flex-shrink-0 size-3" />
+                      {t("issue.comments.switch.private")}
                     </CustomMenu.MenuItem>
                   )}
                 </>
@@ -126,8 +138,8 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
                 onClick={() => activityOperations.removeComment(comment.id)}
                 className="flex items-center gap-1"
               >
-                <Trash2 className="h-3 w-3" />
-                Delete comment
+                <Trash2 className="flex-shrink-0 size-3" />
+                {t("common.actions.delete")}
               </CustomMenu.MenuItem>
             </CustomMenu>
           )}
@@ -145,6 +157,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
             <LiteTextEditor
               workspaceId={workspaceId}
               projectId={projectId}
+              issue_id={issueId}
               workspaceSlug={workspaceSlug}
               ref={editorRef}
               id={comment.id}
@@ -157,31 +170,34 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
                 }
               }}
               showSubmitButton={false}
-              uploadFile={async (file) => {
-                const { asset_id } = await activityOperations.uploadCommentAsset(file, comment.id);
+              uploadFile={async (blockId, file) => {
+                const { asset_id } = await activityOperations.uploadCommentAsset(blockId, file, comment.id);
                 return asset_id;
               }}
             />
           </div>
           <div className="flex gap-1 self-end">
-            <button
-              type="button"
-              onClick={handleSubmit(onEnter)}
-              disabled={isSubmitting || isEmpty}
-              className={`group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300  ${
-                isEmpty ? "cursor-not-allowed bg-gray-200" : "hover:bg-green-500"
-              }`}
-            >
-              <Check
-                className={`h-3 w-3 text-green-500 duration-300 ${isEmpty ? "text-black" : "group-hover:text-white"}`}
-              />
-            </button>
+            {!isEmpty && (
+              <button
+                type="button"
+                onClick={handleSubmit(onEnter)}
+                disabled={isSubmitButtonDisabled}
+                className={cn(
+                  "group rounded border border-green-500 text-green-500 hover:text-white bg-green-500/20 hover:bg-green-500 p-2 shadow-md duration-300",
+                  {
+                    "pointer-events-none": isSubmitButtonDisabled,
+                  }
+                )}
+              >
+                <Check className="size-3" />
+              </button>
+            )}
             <button
               type="button"
               className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
               onClick={() => setIsEditing(false)}
             >
-              <X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" />
+              <X className="size-3 text-red-500 duration-300 group-hover:text-white" />
             </button>
           </div>
         </form>
@@ -199,6 +215,7 @@ export const IssueCommentCard: FC<TIssueCommentCard> = observer((props) => {
             ref={showEditorRef}
             id={comment.id}
             initialValue={comment.comment_html ?? ""}
+            workspaceId={workspaceId}
             workspaceSlug={workspaceSlug}
             projectId={projectId}
           />
diff --git a/web/core/components/issues/issue-detail/issue-activity/comments/comment-create.tsx b/web/core/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
index ccaf97256..6abd2d6e4 100644
--- a/web/core/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/comments/comment-create.tsx
@@ -1,13 +1,12 @@
 import { FC, useRef, useState } from "react";
 import { useForm, Controller } from "react-hook-form";
+import { EIssueCommentAccessSpecifier } from "@plane/constants";
 // plane editor
 import { EditorRefApi } from "@plane/editor";
 // types
 import { TIssueComment } from "@plane/types";
 // components
 import { LiteTextEditor } from "@/components/editor";
-// constants
-import { EIssueCommentAccessSpecifier } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { isCommentEmpty } from "@/helpers/string.helper";
@@ -96,6 +95,7 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
                 id={"add_comment_" + issueId}
                 value={"<p></p>"}
                 projectId={projectId}
+                issue_id={issueId}
                 workspaceSlug={workspaceSlug}
                 onEnterKeyPress={(e) => {
                   if (!isEmpty && !isSubmitting) {
@@ -110,8 +110,8 @@ export const IssueCommentCreate: FC<TIssueCommentCreate> = (props) => {
                 handleAccessChange={onAccessChange}
                 showAccessSpecifier={showAccessSpecifier}
                 isSubmitting={isSubmitting}
-                uploadFile={async (file) => {
-                  const { asset_id } = await activityOperations.uploadCommentAsset(file);
+                uploadFile={async (blockId, file) => {
+                  const { asset_id } = await activityOperations.uploadCommentAsset(blockId, file);
                   setUploadedAssetIds((prev) => [...prev, asset_id]);
                   return asset_id;
                 }}
diff --git a/web/core/components/issues/issue-detail/issue-activity/comments/root.tsx b/web/core/components/issues/issue-detail/issue-activity/comments/root.tsx
index 29272bb91..8a7e92108 100644
--- a/web/core/components/issues/issue-detail/issue-activity/comments/root.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/comments/root.tsx
@@ -1,15 +1,15 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
 // components
-import { EmptyState } from "@/components/empty-state";
-// hooks
-import { EmptyStateType } from "@/constants/empty-state";
+import { SimpleEmptyState } from "@/components/empty-state";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
-// components
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// local components
 import { TActivityOperations } from "../root";
 import { IssueCommentCard } from "./comment-card";
-// types
 
 type TIssueCommentRoot = {
   projectId: string;
@@ -26,6 +26,9 @@ export const IssueCommentRoot: FC<TIssueCommentRoot> = observer((props) => {
   const {
     comment: { getCommentsByIssueId },
   } = useIssueDetail();
+  const { t } = useTranslation();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/comments" });
 
   const commentIds = getCommentsByIssueId(issueId);
   if (!commentIds) return <></>;
@@ -36,6 +39,7 @@ export const IssueCommentRoot: FC<TIssueCommentRoot> = observer((props) => {
         commentIds.map((commentId, index) => (
           <IssueCommentCard
             projectId={projectId}
+            issueId={issueId}
             key={commentId}
             workspaceSlug={workspaceSlug}
             commentId={commentId}
@@ -47,7 +51,11 @@ export const IssueCommentRoot: FC<TIssueCommentRoot> = observer((props) => {
         ))
       ) : (
         <div className="flex items-center justify-center py-9">
-          <EmptyState type={EmptyStateType.ISSUE_COMMENT_EMPTY_STATE} layout="screen-simple" />
+          <SimpleEmptyState
+            title={t("issue_comment.empty_state.general.title")}
+            description={t("issue_comment.empty_state.general.description")}
+            assetPath={resolvedPath}
+          />
         </div>
       )}
     </div>
diff --git a/web/core/components/issues/issue-detail/issue-activity/root.tsx b/web/core/components/issues/issue-detail/issue-activity/root.tsx
index 38f6b01c6..0133b5e61 100644
--- a/web/core/components/issues/issue-detail/issue-activity/root.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/root.tsx
@@ -1,25 +1,24 @@
 "use client";
 
-import { FC, useMemo, useState } from "react";
+import { FC, useMemo } from "react";
 import { observer } from "mobx-react";
-// types
+// plane package imports
+import { E_SORT_ORDER, TActivityFilters, defaultActivityFilters, EUserPermissions } from "@plane/constants";
+import { useLocalStorage } from "@plane/hooks";
+// i18n
+import { useTranslation } from "@plane/i18n";
+//types
 import { TFileSignedURLResponse, TIssueComment } from "@plane/types";
 import { EFileAssetType } from "@plane/types/src/enums";
-// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { IssueCommentCreate } from "@/components/issues";
 import { ActivitySortRoot, IssueActivityCommentRoot } from "@/components/issues/issue-detail";
+// constants
 // hooks
-import { useIssueDetail, useProject, useUser, useUserPermissions } from "@/hooks/store";
+import { useEditorAsset, useIssueDetail, useProject, useUser, useUserPermissions } from "@/hooks/store";
 // plane web components
 import { ActivityFilterRoot, IssueActivityWorklogCreateButton } from "@/plane-web/components/issues/worklog";
-// plane web constants
-import { TActivityFilters, defaultActivityFilters } from "@/plane-web/constants/issues";
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
-// services
-import { FileService } from "@/services/file.service";
-const fileService = new FileService();
 
 type TIssueActivity = {
   workspaceSlug: string;
@@ -33,17 +32,22 @@ export type TActivityOperations = {
   createComment: (data: Partial<TIssueComment>) => Promise<TIssueComment>;
   updateComment: (commentId: string, data: Partial<TIssueComment>) => Promise<void>;
   removeComment: (commentId: string) => Promise<void>;
-  uploadCommentAsset: (file: File, commentId?: string) => Promise<TFileSignedURLResponse>;
+  uploadCommentAsset: (blockId: string, file: File, commentId?: string) => Promise<TFileSignedURLResponse>;
 };
 
 export const IssueActivity: FC<TIssueActivity> = observer((props) => {
   const { workspaceSlug, projectId, issueId, disabled = false, isIntakeIssue = false } = props;
-  // state
-  const [selectedFilters, setSelectedFilters] = useState<TActivityFilters[]>(defaultActivityFilters);
+  // 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);
+  // store hooks
   const {
     issue: { getIssueById },
-    activity: { sortOrder, toggleSortOrder },
     createComment,
     updateComment,
     removeComment,
@@ -51,7 +55,8 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
   const { projectPermissionsByWorkspaceSlugAndProjectId } = useUserPermissions();
   const { getProjectById } = useProject();
   const { data: currentUser } = useUser();
-  //derived values
+  const { uploadEditorAsset } = useEditorAsset();
+  // derived values
   const issue = issueId ? getIssueById(issueId) : undefined;
   const currentUserProjectRole = projectPermissionsByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
   const isAdmin = (currentUserProjectRole ?? EUserPermissions.GUEST) === EUserPermissions.ADMIN;
@@ -60,14 +65,20 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
   const isWorklogButtonEnabled = !isIntakeIssue && !isGuest && (isAdmin || isAssigned);
   // toggle filter
   const toggleFilter = (filter: TActivityFilters) => {
-    setSelectedFilters((prevFilters) => {
-      if (prevFilters.includes(filter)) {
-        if (prevFilters.length === 1) return prevFilters; // Ensure at least one filter is applied
-        return prevFilters.filter((f) => f !== filter);
-      } else {
-        return [...prevFilters, filter];
-      }
-    });
+    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(_filters);
+  };
+
+  const toggleSortOrder = () => {
+    setSortOrder(sortOrder === E_SORT_ORDER.ASC ? E_SORT_ORDER.DESC : E_SORT_ORDER.ASC);
   };
 
   const activityOperations: TActivityOperations = useMemo(
@@ -77,16 +88,16 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
           const comment = await createComment(workspaceSlug, projectId, issueId, data);
           setToast({
-            title: "Success!",
+            title: t("common.success"),
             type: TOAST_TYPE.SUCCESS,
-            message: "Comment created successfully.",
+            message: t("issue.comments.create.success"),
           });
           return comment;
-        } catch (error) {
+        } catch {
           setToast({
-            title: "Error!",
+            title: t("common.error.label"),
             type: TOAST_TYPE.ERROR,
-            message: "Comment creation failed. Please try again later.",
+            message: t("issue.comments.create.error"),
           });
         }
       },
@@ -95,15 +106,15 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
           await updateComment(workspaceSlug, projectId, issueId, commentId, data);
           setToast({
-            title: "Success!",
+            title: t("common.success"),
             type: TOAST_TYPE.SUCCESS,
-            message: "Comment updated successfully.",
+            message: t("issue.comments.update.success"),
           });
-        } catch (error) {
+        } catch {
           setToast({
-            title: "Error!",
+            title: t("common.error.label"),
             type: TOAST_TYPE.ERROR,
-            message: "Comment update failed. Please try again later.",
+            message: t("issue.comments.update.error"),
           });
         }
       },
@@ -112,38 +123,39 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
           if (!workspaceSlug || !projectId || !issueId) throw new Error("Missing fields");
           await removeComment(workspaceSlug, projectId, issueId, commentId);
           setToast({
-            title: "Success!",
+            title: t("common.success"),
             type: TOAST_TYPE.SUCCESS,
-            message: "Comment removed successfully.",
+            message: t("issue.comments.remove.success"),
           });
-        } catch (error) {
+        } catch {
           setToast({
-            title: "Error!",
+            title: t("common.error.label"),
             type: TOAST_TYPE.ERROR,
-            message: "Comment remove failed. Please try again later.",
+            message: t("issue.comments.remove.error"),
           });
         }
       },
-      uploadCommentAsset: async (file, commentId) => {
+      uploadCommentAsset: async (blockId, file, commentId) => {
         try {
           if (!workspaceSlug || !projectId) throw new Error("Missing fields");
-          const res = await fileService.uploadProjectAsset(
-            workspaceSlug,
-            projectId,
-            {
+          const res = await uploadEditorAsset({
+            blockId,
+            data: {
               entity_identifier: commentId ?? "",
               entity_type: EFileAssetType.COMMENT_DESCRIPTION,
             },
-            file
-          );
+            file,
+            projectId,
+            workspaceSlug,
+          });
           return res;
         } catch (error) {
           console.log("Error in uploading comment asset:", error);
-          throw new Error("Asset upload failed. Please try again later.");
+          throw new Error(t("issue.comments.upload.error"));
         }
       },
     }),
-    [workspaceSlug, projectId, issueId, createComment, updateComment, removeComment]
+    [workspaceSlug, projectId, issueId, createComment, updateComment, uploadEditorAsset, removeComment]
   );
 
   const project = getProjectById(projectId);
@@ -153,7 +165,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
     <div className="space-y-4 pt-3">
       {/* header */}
       <div className="flex items-center justify-between">
-        <div className="text-lg text-custom-text-100">Activity</div>
+        <div className="text-lg text-custom-text-100">{t("common.activity")}</div>
         <div className="flex items-center gap-2">
           {isWorklogButtonEnabled && (
             <IssueActivityWorklogCreateButton
@@ -163,9 +175,9 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
               disabled={disabled}
             />
           )}
-          <ActivitySortRoot sortOrder={sortOrder} toggleSort={toggleSortOrder} />
+          <ActivitySortRoot sortOrder={sortOrder || E_SORT_ORDER.ASC} toggleSort={toggleSortOrder} />
           <ActivityFilterRoot
-            selectedFilters={selectedFilters}
+            selectedFilters={selectedFilters || defaultActivityFilters}
             toggleFilter={toggleFilter}
             isIntakeIssue={isIntakeIssue}
             projectId={projectId}
@@ -181,10 +193,11 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
               projectId={projectId}
               workspaceSlug={workspaceSlug}
               issueId={issueId}
-              selectedFilters={selectedFilters}
+              selectedFilters={selectedFilters || defaultActivityFilters}
               activityOperations={activityOperations}
               showAccessSpecifier={!!project.anchor}
               disabled={disabled}
+              sortOrder={sortOrder || E_SORT_ORDER.ASC}
             />
             {!disabled && (
               <IssueCommentCreate
diff --git a/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx b/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
index ed4d371b5..702cd4018 100644
--- a/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
+++ b/web/core/components/issues/issue-detail/issue-activity/sort-root.tsx
@@ -2,25 +2,32 @@
 
 import { FC, memo } from "react";
 import { ArrowUpWideNarrow, ArrowDownWideNarrow } from "lucide-react";
+// plane package imports
+import { E_SORT_ORDER } from "@plane/constants";
 import { getButtonStyling } from "@plane/ui";
-// helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "@plane/utils";
 
 export type TActivitySortRoot = {
-  sortOrder: "asc" | "desc";
+  sortOrder: E_SORT_ORDER;
   toggleSort: () => void;
+  className?: string;
+  iconClassName?: string;
 };
 export const ActivitySortRoot: FC<TActivitySortRoot> = memo((props) => (
   <div
-    className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300 cursor-pointer")}
+    className={cn(
+      getButtonStyling("neutral-primary", "sm"),
+      "px-2 text-custom-text-300 cursor-pointer",
+      props.className
+    )}
     onClick={() => {
       props.toggleSort();
     }}
   >
     {props.sortOrder === "asc" ? (
-      <ArrowUpWideNarrow className="size-4 " />
+      <ArrowUpWideNarrow className={cn("size-4", props.iconClassName)} />
     ) : (
-      <ArrowDownWideNarrow className="size-4 " />
+      <ArrowDownWideNarrow className={cn("size-4", props.iconClassName)} />
     )}
   </div>
 ));
diff --git a/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx b/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
index e0dedfaa5..6bf4bf757 100644
--- a/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
+++ b/web/core/components/issues/issue-detail/issue-detail-quick-actions.tsx
@@ -4,28 +4,34 @@ import React, { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { ArchiveIcon, ArchiveRestoreIcon, LinkIcon, Trash2 } from "lucide-react";
+import {
+  ISSUE_ARCHIVED,
+  ISSUE_DELETED,
+  ARCHIVABLE_STATE_GROUPS,
+  EIssuesStoreType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
 import { ArchiveIssueModal, DeleteIssueModal, IssueSubscription } from "@/components/issues";
-// constants
-import { ISSUE_ARCHIVED, ISSUE_DELETED } from "@/constants/event-tracker";
-import { EIssuesStoreType } from "@/constants/issue";
-import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
 import {
   useEventTracker,
   useIssueDetail,
   useIssues,
+  useProject,
   useProjectState,
   useUser,
   useUserPermissions,
 } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   workspaceSlug: string;
@@ -35,7 +41,7 @@ type Props = {
 
 export const IssueDetailQuickActions: FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, issueId } = props;
-
+  const { t } = useTranslation();
   // states
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
   const [archiveIssueModal, setArchiveIssueModal] = useState(false);
@@ -49,6 +55,7 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
   const { allowPermissions } = useUserPermissions();
   const { isMobile } = usePlatformOS();
   const { getStateById } = useProjectState();
+  const { getProjectIdentifierById } = useProject();
   const {
     issue: { getIssueById },
     removeIssue,
@@ -68,15 +75,24 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
   if (!issue) return <></>;
 
   const stateDetails = getStateById(issue.state_id);
+  const projectIdentifier = getProjectIdentifierById(projectId);
+
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug,
+    projectId,
+    issueId,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+  });
 
   // handlers
   const handleCopyText = () => {
     const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`).then(() => {
+    copyTextToClipboard(`${originURL}${workItemLink}`).then(() => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
+        title: t("common.link_copied"),
+        message: t("common.copied_to_clipboard"),
       });
     });
   };
@@ -92,19 +108,19 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
         router.push(redirectionPath);
         captureIssueEvent({
           eventName: ISSUE_DELETED,
-          payload: { id: issueId, state: "SUCCESS", element: "Issue detail page" },
+          payload: { id: issueId, state: "SUCCESS", element: "Work item detail page" },
           path: pathname,
         });
       });
     } catch (error) {
       setToast({
-        title: "Error!",
+        title: t("toast.error "),
         type: TOAST_TYPE.ERROR,
-        message: "Issue delete failed",
+        message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
       });
       captureIssueEvent({
         eventName: ISSUE_DELETED,
-        payload: { id: issueId, state: "FAILED", element: "Issue detail page" },
+        payload: { id: issueId, state: "FAILED", element: "Work item detail page" },
         path: pathname,
       });
     }
@@ -138,26 +154,33 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Restore success",
-          message: "Your issue can be found in project issues.",
+          title: t("issue.restore.success.title"),
+          message: t("issue.restore.success.message"),
         });
-        router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issueId}`);
+        router.push(workItemLink);
       })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Issue could not be restored. Please try again.",
+          title: t("toast.error"),
+          message: t("issue.restore.failed.message"),
         });
       })
       .finally(() => setIsRestoring(false));
   };
 
   // auth
-  const isEditable = allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT);
+  const isEditable = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
   const canRestoreIssue = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    EUserPermissionsLevel.PROJECT
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
   );
   const isArchivingAllowed = !issue?.archived_at && isEditable;
   const isInArchivableGroup = !!stateDetails && ARCHIVABLE_STATE_GROUPS.includes(stateDetails?.group);
@@ -182,7 +205,7 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
           <div className="flex flex-wrap items-center gap-2.5 text-custom-text-300">
-            <Tooltip tooltipContent="Copy link" isMobile={isMobile}>
+            <Tooltip tooltipContent={t("common.actions.copy_link")} isMobile={isMobile}>
               <button
                 type="button"
                 className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
@@ -215,9 +238,7 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
                 {isArchivingAllowed && (
                   <Tooltip
                     isMobile={isMobile}
-                    tooltipContent={
-                      isInArchivableGroup ? "Archive" : "Only completed or canceled issues can be archived"
-                    }
+                    tooltipContent={isInArchivableGroup ? t("common.actions.archive") : t("issue.archive.description")}
                   >
                     <button
                       type="button"
@@ -241,7 +262,7 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
             )}
 
             {isEditable && (
-              <Tooltip tooltipContent="Delete" isMobile={isMobile}>
+              <Tooltip tooltipContent={t("common.actions.delete")} isMobile={isMobile}>
                 <button
                   type="button"
                   className="grid h-5 w-5 place-items-center rounded hover:text-custom-text-200 focus:outline-none focus:ring-2 focus:ring-custom-primary"
diff --git a/web/core/components/issues/issue-detail/label/root.tsx b/web/core/components/issues/issue-detail/label/root.tsx
index daa5169b1..ba31a81d0 100644
--- a/web/core/components/issues/issue-detail/label/root.tsx
+++ b/web/core/components/issues/issue-detail/label/root.tsx
@@ -2,17 +2,18 @@
 
 import { FC, useMemo } from "react";
 import { observer } from "mobx-react";
-import { IIssueLabel, TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IIssueLabel, TIssue, TIssueServiceType } from "@plane/types";
 // components
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
-import { useIssueDetail, useLabel, useProjectInbox, useUserPermissions } from "@/hooks/store";
+import { useIssueDetail, useLabel, useProjectInbox } from "@/hooks/store";
 // ui
 // types
-import { LabelList, LabelCreate, IssueLabelSelectRoot } from "./";
+import { LabelList, IssueLabelSelectRoot } from "./";
 // TODO: Fix this import statement, as core should not import from ee
 // eslint-disable-next-line import/order
-import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
 
 export type TIssueLabel = {
   workspaceSlug: string;
@@ -21,6 +22,7 @@ export type TIssueLabel = {
   disabled: boolean;
   isInboxIssue?: boolean;
   onLabelUpdate?: (labelIds: string[]) => void;
+  issueServiceType?: TIssueServiceType;
 };
 
 export type TLabelOperations = {
@@ -29,17 +31,24 @@ export type TLabelOperations = {
 };
 
 export const IssueLabel: FC<TIssueLabel> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, disabled = false, isInboxIssue = false, onLabelUpdate } = props;
+  const {
+    workspaceSlug,
+    projectId,
+    issueId,
+    disabled = false,
+    isInboxIssue = false,
+    onLabelUpdate,
+    issueServiceType = EIssueServiceType.ISSUES,
+  } = props;
+  const { t } = useTranslation();
   // hooks
-  const { updateIssue } = useIssueDetail();
+  const { updateIssue } = useIssueDetail(issueServiceType);
   const { createLabel } = useLabel();
   const {
     issue: { getIssueById },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
   const { getIssueInboxByIssueId } = useProjectInbox();
-  const { allowPermissions } = useUserPermissions();
 
-  const canCreateLabel = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
   const issue = isInboxIssue ? getIssueInboxByIssueId(issueId)?.issue : getIssueById(issueId);
 
   const labelOperations: TLabelOperations = useMemo(
@@ -50,9 +59,9 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
           else await updateIssue(workspaceSlug, projectId, issueId, data);
         } catch (error) {
           setToast({
-            title: "Error!",
+            title: t("toast.error"),
             type: TOAST_TYPE.ERROR,
-            message: "Issue update failed",
+            message: t("entity.update.failed", { entity: t("issue.label", { count: 1 }) }),
           });
         }
       },
@@ -61,18 +70,18 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
           const labelResponse = await createLabel(workspaceSlug, projectId, data);
           if (!isInboxIssue)
             setToast({
-              title: "Success!",
+              title: t("toast.success"),
               type: TOAST_TYPE.SUCCESS,
-              message: "Label created successfully",
+              message: t("label.create.success"),
             });
           return labelResponse;
         } catch (error) {
-          let errMessage = "Label creation failed";
+          let errMessage = t("label.create.failed");
           if (error && (error as any).error === "Label with the same name already exists in the project")
-            errMessage = "Label already exists";
+            errMessage = t("label.create.already_exists");
 
           setToast({
-            title: "Error!",
+            title: t("toast.error"),
             type: TOAST_TYPE.ERROR,
             message: errMessage,
           });
@@ -103,16 +112,6 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
           labelOperations={labelOperations}
         />
       )}
-
-      {!disabled && canCreateLabel && (
-        <LabelCreate
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          issueId={issueId}
-          values={issue?.label_ids || []}
-          labelOperations={labelOperations}
-        />
-      )}
     </div>
   );
 });
diff --git a/web/core/components/issues/issue-detail/label/select/label-select.tsx b/web/core/components/issues/issue-detail/label/select/label-select.tsx
index 7fd700398..e89cd45fc 100644
--- a/web/core/components/issues/issue-detail/label/select/label-select.tsx
+++ b/web/core/components/issues/issue-detail/label/select/label-select.tsx
@@ -1,33 +1,43 @@
 import { Fragment, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Search, Tag } from "lucide-react";
+import { Check, Loader, Search, Tag } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+// plane imports
+import { EUserPermissionsLevel, EUserProjectRoles, getRandomLabelColor } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IIssueLabel } from "@plane/types";
 // helpers
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
-import { useLabel } from "@/hooks/store";
+import { useLabel, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// components
-
+//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: React.FC<IIssueLabelSelect> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, values, onSelect } = props;
+  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);
 
@@ -79,15 +89,29 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
       <div className="flex-shrink-0">
         <Tag className="h-2.5 w-2.5" />
       </div>
-      <div className="flex-shrink-0">Select Label</div>
+      <div className="flex-shrink-0">{t("label.select")}</div>
     </div>
   );
 
-  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const searchInputKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (query !== "" && e.key === "Escape") {
       e.stopPropagation();
       setQuery("");
     }
+
+    if (query !== "" && e.key === "Enter" && 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 <></>;
@@ -126,7 +150,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                   className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                   value={query}
                   onChange={(e) => setQuery(e.target.value)}
-                  placeholder="Search"
+                  placeholder={t("common.search.label")}
                   displayValue={(assigned: any) => assigned?.name}
                   onKeyDown={searchInputKeyDown}
                   tabIndex={baseTabIndex}
@@ -135,7 +159,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
             </div>
             <div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
               {isLoading ? (
-                <p className="text-center text-custom-text-200">Loading...</p>
+                <p className="text-center text-custom-text-200">{t("common.loading")}</p>
               ) : filteredOptions.length > 0 ? (
                 filteredOptions.map((option) => (
                   <Combobox.Option
@@ -159,10 +183,30 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                     )}
                   </Combobox.Option>
                 ))
+              ) : submitting ? (
+                <Loader className="spin  h-3.5 w-3.5" />
+              ) : canCreateLabel ? (
+                <Combobox.Option
+                  value={query}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!query.length) return;
+                    handleAddLabel(query);
+                  }}
+                  className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                >
+                  {query.length ? (
+                    <>
+                      {/* TODO: Translate here */}+ Add{" "}
+                      <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
+                    </>
+                  ) : (
+                    t("label.create.type")
+                  )}
+                </Combobox.Option>
               ) : (
-                <span className="flex items-center gap-2 p-1">
-                  <p className="text-left text-custom-text-200 ">No matching results</p>
-                </span>
+                <p className="text-left text-custom-text-200 ">{t("common.search.no_matching_results")}</p>
               )}
             </div>
           </div>
diff --git a/web/core/components/issues/issue-detail/label/select/root.tsx b/web/core/components/issues/issue-detail/label/select/root.tsx
index 00f96522b..a57a58742 100644
--- a/web/core/components/issues/issue-detail/label/select/root.tsx
+++ b/web/core/components/issues/issue-detail/label/select/root.tsx
@@ -26,6 +26,7 @@ export const IssueLabelSelectRoot: FC<TIssueLabelSelectRoot> = (props) => {
       issueId={issueId}
       values={values}
       onSelect={handleLabel}
+      onAddLabel={labelOperations.createLabel}
     />
   );
 };
diff --git a/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx b/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
index 99e350c61..8ddd77f87 100644
--- a/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
+++ b/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
@@ -3,8 +3,10 @@
 import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // plane types
-import type { TIssueLinkEditableFields } from "@plane/types";
+import type { TIssueLinkEditableFields, TIssueServiceType } from "@plane/types";
 // plane ui
 import { Button, Input, ModalCore } from "@plane/ui";
 // hooks
@@ -22,6 +24,7 @@ export type TIssueLinkCreateEditModal = {
   isModalOpen: boolean;
   handleOnClose?: () => void;
   linkOperations: TLinkOperationsModal;
+  issueServiceType?: TIssueServiceType;
 };
 
 const defaultValues: TIssueLinkCreateFormFieldOptions = {
@@ -30,8 +33,10 @@ const defaultValues: TIssueLinkCreateFormFieldOptions = {
 };
 
 export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observer((props) => {
+  // i18n
+  const { t } = useTranslation();
   // props
-  const { isModalOpen, handleOnClose, linkOperations } = props;
+  const { isModalOpen, handleOnClose, linkOperations, issueServiceType = EIssueServiceType.ISSUES } = props;
   // react hook form
   const {
     formState: { errors, isSubmitting },
@@ -42,7 +47,7 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observe
     defaultValues,
   });
   // store hooks
-  const { issueLinkData: preloadedData, setIssueLinkData } = useIssueDetail();
+  const { issueLinkData: preloadedData, setIssueLinkData } = useIssueDetail(issueServiceType);
 
   const onClose = () => {
     setIssueLinkData(null);
@@ -68,11 +73,13 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observe
     <ModalCore isOpen={isModalOpen} handleClose={onClose}>
       <form onSubmit={handleSubmit(handleFormSubmit)}>
         <div className="space-y-5 p-5">
-          <h3 className="text-xl font-medium text-custom-text-200">{preloadedData?.id ? "Update" : "Add"} link</h3>
+          <h3 className="text-xl font-medium text-custom-text-200">
+            {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-custom-text-200">
-                URL
+                {t("common.url")}
               </label>
               <Controller
                 control={control}
@@ -88,17 +95,17 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observe
                     onChange={onChange}
                     ref={ref}
                     hasError={Boolean(errors.url)}
-                    placeholder="Type or paste a URL"
+                    placeholder={t("common.type_or_paste_a_url")}
                     className="w-full"
                   />
                 )}
               />
-              {errors.url && <span className="text-xs text-red-500">URL is invalid</span>}
+              {errors.url && <span className="text-xs text-red-500">{t("common.url_is_invalid")}</span>}
             </div>
             <div>
               <label htmlFor="title" className="mb-2 text-custom-text-200">
-                Display title
-                <span className="text-[10px] block">Optional</span>
+                {t("common.display_title")}
+                <span className="text-[10px] block">{t("common.optional")}</span>
               </label>
               <Controller
                 control={control}
@@ -111,7 +118,7 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observe
                     onChange={onChange}
                     ref={ref}
                     hasError={Boolean(errors.title)}
-                    placeholder="What you'd like to see this link as"
+                    placeholder={t("common.link_title_placeholder")}
                     className="w-full"
                   />
                 )}
@@ -121,10 +128,18 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observe
         </div>
         <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
           <Button variant="neutral-primary" size="sm" onClick={onClose}>
-            Cancel
+            {t("common.cancel")}
           </Button>
           <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-            {preloadedData?.id ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"} link
+            {`${
+              preloadedData?.id
+                ? isSubmitting
+                  ? t("common.updating")
+                  : t("common.update")
+                : isSubmitting
+                  ? t("common.adding")
+                  : t("common.add")
+            } ${t("common.link")}`}
           </Button>
         </div>
       </form>
diff --git a/web/core/components/issues/issue-detail/links/link-item.tsx b/web/core/components/issues/issue-detail/links/link-item.tsx
index c7629b5dc..ce0070bd5 100644
--- a/web/core/components/issues/issue-detail/links/link-item.tsx
+++ b/web/core/components/issues/issue-detail/links/link-item.tsx
@@ -2,7 +2,10 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
-import { Pencil, Trash2, LinkIcon, ExternalLink } from "lucide-react";
+import { Pencil, Trash2, LinkIcon, Copy } from "lucide-react";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssueServiceType } from "@plane/types";
 // ui
 import { Tooltip, TOAST_TYPE, setToast, CustomMenu } from "@plane/ui";
 // helpers
@@ -17,17 +20,19 @@ type TIssueLinkItem = {
   linkId: string;
   linkOperations: TLinkOperationsModal;
   isNotAllowed: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
   // props
-  const { linkId, linkOperations, isNotAllowed } = props;
+  const { linkId, linkOperations, isNotAllowed, issueServiceType = EIssueServiceType.ISSUES } = props;
   // hooks
+  const { t } = useTranslation();
   const {
     toggleIssueLinkModal: toggleIssueLinkModalStore,
     setIssueLinkData,
     link: { getLinkById },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
   const { isMobile } = usePlatformOS();
   const linkDetail = getLinkById(linkId);
   if (!linkDetail) return <></>;
@@ -45,33 +50,33 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
         <div className="flex items-center gap-2.5 truncate flex-grow">
           <LinkIcon className="size-4 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200" />
           <Tooltip tooltipContent={linkDetail.url} isMobile={isMobile}>
-            <span
+            <a
+              href={linkDetail.url}
+              target="_blank"
+              rel="noopener noreferrer"
               className="truncate text-sm cursor-pointer flex-grow"
-              onClick={() => {
-                copyTextToClipboard(linkDetail.url);
-                setToast({
-                  type: TOAST_TYPE.SUCCESS,
-                  title: "Link copied!",
-                  message: "Link copied to clipboard",
-                });
-              }}
             >
               {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
-            </span>
+            </a>
           </Tooltip>
         </div>
         <div className="flex items-center gap-1 flex-shrink-0">
           <p className="p-1 text-xs align-bottom leading-5 text-custom-text-400 group-hover-text-custom-text-200">
             {calculateTimeAgoShort(linkDetail.created_at)}
           </p>
-          <a
-            href={linkDetail.url}
-            target="_blank"
-            rel="noopener noreferrer"
+          <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 place-items-center rounded p-1 text-custom-text-400 outline-none group-hover:text-custom-text-200 cursor-pointer hover:bg-custom-background-80"
           >
-            <ExternalLink className="h-3.5 w-3.5 stroke-[1.5]" />
-          </a>
+            <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
+          </span>
           <CustomMenu
             ellipsis
             buttonClassName="text-custom-text-400 group-hover:text-custom-text-200"
@@ -88,7 +93,7 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
               }}
             >
               <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
-              Edit
+              {t("common.actions.edit")}
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
               className="flex items-center gap-2"
@@ -99,7 +104,7 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
               }}
             >
               <Trash2 className="h-3 w-3" />
-              Delete
+              {t("common.actions.delete")}
             </CustomMenu.MenuItem>
           </CustomMenu>
         </div>
diff --git a/web/core/components/issues/issue-detail/links/link-list.tsx b/web/core/components/issues/issue-detail/links/link-list.tsx
index 7f20d5367..7ca128b98 100644
--- a/web/core/components/issues/issue-detail/links/link-list.tsx
+++ b/web/core/components/issues/issue-detail/links/link-list.tsx
@@ -1,5 +1,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 // computed
 import { useIssueDetail } from "@/hooks/store";
 import { IssueLinkItem } from "./link-item";
@@ -12,15 +14,16 @@ type TLinkList = {
   issueId: string;
   linkOperations: TLinkOperationsModal;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const LinkList: FC<TLinkList> = observer((props) => {
   // props
-  const { issueId, linkOperations, disabled = false } = props;
+  const { issueId, linkOperations, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
   // hooks
   const {
     link: { getLinksByIssueId },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   const issueLinks = getLinksByIssueId(issueId);
 
@@ -29,7 +32,13 @@ export const LinkList: FC<TLinkList> = observer((props) => {
   return (
     <div className="flex flex-col gap-2 py-4">
       {issueLinks.map((linkId) => (
-        <IssueLinkItem key={linkId} linkId={linkId} linkOperations={linkOperations} isNotAllowed={disabled} />
+        <IssueLinkItem
+          key={linkId}
+          linkId={linkId}
+          linkOperations={linkOperations}
+          isNotAllowed={disabled}
+          issueServiceType={issueServiceType}
+        />
       ))}
     </div>
   );
diff --git a/web/core/components/issues/issue-detail/main-content.tsx b/web/core/components/issues/issue-detail/main-content.tsx
index fb4dbc1fc..f48476164 100644
--- a/web/core/components/issues/issue-detail/main-content.tsx
+++ b/web/core/components/issues/issue-detail/main-content.tsx
@@ -2,10 +2,11 @@
 
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
+import { TNameDescriptionLoader } from "@plane/types";
 // components
 import {
   IssueActivity,
-  IssueUpdateStatus,
+  NameDescriptionUpdateStatus,
   IssueReaction,
   IssueParentDetail,
   IssueTitleInput,
@@ -38,7 +39,7 @@ type Props = {
 export const IssueMainContent: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, issueId, issueOperations, isEditable, isArchived } = props;
   // states
-  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  const [isSubmitting, setIsSubmitting] = useState<TNameDescriptionLoader>("saved");
   // hooks
   const windowSize = useSize();
   const { data: currentUser } = useUser();
@@ -54,11 +55,16 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
   const issue = issueId ? getIssueById(issueId) : undefined;
 
   // debounced duplicate issues swr
-  const { duplicateIssues } = useDebouncedDuplicateIssues(projectDetails?.workspace.toString(), projectDetails?.id, {
-    name: issue?.name,
-    description_html: getTextContent(issue?.description_html),
-    issueId: issue?.id,
-  });
+  const { duplicateIssues } = useDebouncedDuplicateIssues(
+    workspaceSlug,
+    projectDetails?.workspace.toString(),
+    projectDetails?.id,
+    {
+      name: issue?.name,
+      description_html: getTextContent(issue?.description_html),
+      issueId: issue?.id,
+    }
+  );
 
   useEffect(() => {
     if (isSubmitting === "submitted") {
@@ -87,7 +93,7 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
         <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">
-            <IssueUpdateStatus isSubmitting={isSubmitting} />
+            <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
             {duplicateIssues?.length > 0 && (
               <DeDupeIssuePopoverRoot
                 workspaceSlug={workspaceSlug}
diff --git a/web/core/components/issues/issue-detail/module-select.tsx b/web/core/components/issues/issue-detail/module-select.tsx
index c51e88481..d021958e8 100644
--- a/web/core/components/issues/issue-detail/module-select.tsx
+++ b/web/core/components/issues/issue-detail/module-select.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import xor from "lodash/xor";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 // hooks
 // components
 import { ModuleDropdown } from "@/components/dropdowns";
@@ -22,6 +23,7 @@ type TIssueModuleSelect = {
 
 export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props) => {
   const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
+  const { t } = useTranslation();
   // states
   const [isUpdating, setIsUpdating] = useState(false);
   // store hooks
@@ -59,7 +61,7 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
         projectId={projectId}
         value={issue?.module_ids ?? []}
         onChange={handleIssueModuleChange}
-        placeholder="No module"
+        placeholder={t("module.no_module")}
         disabled={disableSelect}
         className="group h-full w-full"
         buttonContainerClassName="w-full rounded"
diff --git a/web/core/components/issues/issue-detail/parent-select.tsx b/web/core/components/issues/issue-detail/parent-select.tsx
index af9b40df1..59cb3808a 100644
--- a/web/core/components/issues/issue-detail/parent-select.tsx
+++ b/web/core/components/issues/issue-detail/parent-select.tsx
@@ -4,8 +4,9 @@ import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { Pencil, X } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 // ui
-import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+import { Tooltip } from "@plane/ui";
 // components
 import { ParentIssuesListModal } from "@/components/issues";
 // helpers
@@ -16,30 +17,41 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
 // types
-import { TIssueOperations } from "./root";
 
 type TIssueParentSelect = {
   className?: string;
   disabled?: boolean;
   issueId: string;
-  issueOperations: TIssueOperations;
   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: React.FC<TIssueParentSelect> = observer((props) => {
-  const { className = "", disabled = false, issueId, issueOperations, projectId, workspaceSlug } = props;
+  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,
-    removeSubIssue,
-    subIssues: { setSubIssueHelpers, fetchSubIssues },
-  } = useIssueDetail();
+  const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
 
   // derived values
   const issue = getIssueById(issueId);
@@ -47,36 +59,6 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
   const parentIssueProjectDetails =
     parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
   const { isMobile } = usePlatformOS();
-  const handleParentIssue = async (_issueId: string | null = null) => {
-    try {
-      await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
-      await issueOperations.fetch(workspaceSlug, projectId, issueId, false);
-      _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: "Error!",
-        message: "Something went wrong",
-      });
-    }
-  };
 
   if (!issue) return <></>;
 
@@ -88,6 +70,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
         isOpen={isParentIssueModalOpen === issueId}
         handleClose={() => toggleParentIssueModal(null)}
         onChange={(issue: any) => handleParentIssue(issue?.id)}
+        searchEpic
       />
       <button
         type="button"
@@ -106,12 +89,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
         {issue.parent_id && parentIssue ? (
           <div className="flex items-center gap-1 bg-green-500/20 rounded px-1.5 py-1">
             <Tooltip tooltipHeading="Title" tooltipContent={parentIssue.name} isMobile={isMobile}>
-              <Link
-                href={`/${workspaceSlug}/projects/${parentIssue.project_id}/issues/${parentIssue?.id}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                onClick={(e) => e.stopPropagation()}
-              >
+              <Link href={workItemLink} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                 {parentIssue?.project_id && parentIssueProjectDetails && (
                   <IssueIdentifier
                     projectId={parentIssue.project_id}
@@ -125,7 +103,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
             </Tooltip>
 
             {!disabled && (
-              <Tooltip tooltipContent="Remove" position="bottom" isMobile={isMobile}>
+              <Tooltip tooltipContent={t("common.remove")} position="bottom" isMobile={isMobile}>
                 <span
                   onClick={(e) => {
                     e.preventDefault();
@@ -139,7 +117,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
             )}
           </div>
         ) : (
-          <span className="text-sm text-custom-text-400">Add parent issue</span>
+          <span className="text-sm text-custom-text-400">{t("issue.add.parent")}</span>
         )}
         {!disabled && (
           <span
diff --git a/web/core/components/issues/issue-detail/parent/root.tsx b/web/core/components/issues/issue-detail/parent/root.tsx
index c96ecd69a..66345b4ae 100644
--- a/web/core/components/issues/issue-detail/parent/root.tsx
+++ b/web/core/components/issues/issue-detail/parent/root.tsx
@@ -2,13 +2,17 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useRouter } from "next/navigation";
 import { MinusCircle } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 // component
 // ui
 import { ControlLink, CustomMenu } from "@plane/ui";
+// helpers
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
-import { useIssues, useProjectState } from "@/hooks/store";
+import { useIssues, useProject, useProjectState } from "@/hooks/store";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
@@ -27,13 +31,20 @@ export type TIssueParentDetail = {
 
 export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
   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
@@ -42,13 +53,24 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
 
   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 whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-80 px-2.5 py-1 text-xs">
-        <ControlLink
-          href={`/${workspaceSlug}/projects/${parentIssue?.project_id}/issues/${parentIssue.id}`}
-          onClick={() => handleRedirection(workspaceSlug, parentIssue, isMobile)}
-        >
+        <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 }} />
@@ -66,7 +88,7 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
 
         <CustomMenu ellipsis optionsClassName="p-1.5">
           <div className="border-b border-custom-border-300 text-xs font-medium text-custom-text-200">
-            Sibling issues
+            {t("issue.sibling.label")}
           </div>
 
           <IssueParentSiblings workspaceSlug={workspaceSlug} currentIssue={issue} parentIssue={parentIssue} />
@@ -76,7 +98,7 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
             className="flex items-center gap-2 py-2 text-red-500"
           >
             <MinusCircle className="h-4 w-4" />
-            <span> Remove Parent Issue</span>
+            <span>{t("issue.remove.parent.label")}</span>
           </CustomMenu.MenuItem>
         </CustomMenu>
       </div>
diff --git a/web/core/components/issues/issue-detail/parent/sibling-item.tsx b/web/core/components/issues/issue-detail/parent/sibling-item.tsx
index 8fb9bbd9a..2947e49df 100644
--- a/web/core/components/issues/issue-detail/parent/sibling-item.tsx
+++ b/web/core/components/issues/issue-detail/parent/sibling-item.tsx
@@ -5,6 +5,8 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 // ui
 import { CustomMenu } from "@plane/ui";
+// helpers
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
 import { useIssueDetail, useProject } from "@/hooks/store";
 // plane web components
@@ -23,19 +25,24 @@ export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = observer((pro
     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}>
-        <Link
-          href={`/${workspaceSlug}/projects/${issueDetail?.project_id as string}/issues/${issueDetail.id}`}
-          target="_blank"
-          className="flex items-center gap-2 py-0.5"
-        >
+        <Link href={workItemLink} target="_blank" className="flex items-center gap-2 py-0.5">
           {issueDetail.project_id && projectDetails?.identifier && (
             <IssueIdentifier
               projectId={issueDetail.project_id}
diff --git a/web/core/components/issues/issue-detail/parent/siblings.tsx b/web/core/components/issues/issue-detail/parent/siblings.tsx
index 30998c9aa..8c0314360 100644
--- a/web/core/components/issues/issue-detail/parent/siblings.tsx
+++ b/web/core/components/issues/issue-detail/parent/siblings.tsx
@@ -48,7 +48,7 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = observer((props) =>
         )
       ) : (
         <div className="flex items-center gap-2 whitespace-nowrap px-1 py-1 text-left text-xs text-custom-text-200">
-          No sibling issues
+          No sibling work items
         </div>
       )}
     </div>
diff --git a/web/core/components/issues/issue-detail/reactions/issue.tsx b/web/core/components/issues/issue-detail/reactions/issue.tsx
index 815e97936..9b723e785 100644
--- a/web/core/components/issues/issue-detail/reactions/issue.tsx
+++ b/web/core/components/issues/issue-detail/reactions/issue.tsx
@@ -20,10 +20,11 @@ export type TIssueReaction = {
   issueId: string;
   currentUser: IUser;
   disabled?: boolean;
+  className?: string;
 };
 
 export const IssueReaction: FC<TIssueReaction> = observer((props) => {
-  const { workspaceSlug, projectId, issueId, currentUser, disabled = false } = props;
+  const { workspaceSlug, projectId, issueId, currentUser, disabled = false, className = "" } = props;
   // hooks
   const {
     reaction: { getReactionsByIssueId, reactionsByUser, getReactionById },
@@ -92,7 +93,7 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
   };
 
   return (
-    <div className="relative mt-4 flex items-center gap-1.5">
+    <div className={cn("relative mt-4 flex items-center gap-1.5", className)}>
       {!disabled && (
         <ReactionSelector size="md" position="top" value={userReactions} onSelect={issueReactionOperations.react} />
       )}
diff --git a/web/core/components/issues/issue-detail/relation-select.tsx b/web/core/components/issues/issue-detail/relation-select.tsx
index 1796f5454..86fde40eb 100644
--- a/web/core/components/issues/issue-detail/relation-select.tsx
+++ b/web/core/components/issues/issue-detail/relation-select.tsx
@@ -11,6 +11,7 @@ import { RelatedIcon, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
 import { ExistingIssuesListModal } from "@/components/core";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
 import { useIssueDetail, useIssues, useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -50,7 +51,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: "Please select at least one issue.",
+        message: "Please select at least one work item.",
       });
       return;
     }
@@ -115,7 +116,13 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                   >
                     <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name} isMobile={isMobile}>
                       <Link
-                        href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${currentIssue.id}`}
+                        href={generateWorkItemLink({
+                          workspaceSlug,
+                          projectId: projectDetails?.id,
+                          issueId: currentIssue.id,
+                          projectIdentifier: projectDetails?.identifier,
+                          sequenceId: currentIssue?.sequence_id,
+                        })}
                         target="_blank"
                         rel="noopener noreferrer"
                         className="text-xs font-medium"
diff --git a/web/core/components/issues/issue-detail/root.tsx b/web/core/components/issues/issue-detail/root.tsx
index a5363e78c..ec9aaf7b2 100644
--- a/web/core/components/issues/issue-detail/root.tsx
+++ b/web/core/components/issues/issue-detail/root.tsx
@@ -4,24 +4,29 @@ import { FC, useMemo } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // types
+import {
+  EIssuesStoreType,
+  ISSUE_UPDATED,
+  ISSUE_DELETED,
+  ISSUE_ARCHIVED,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 // ui
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 // components
 import { EmptyState } from "@/components/common";
-import { IssuePeekOverview } from "@/components/issues";
+import { IssueDetailsSidebar, IssuePeekOverview } from "@/components/issues";
 // constants
-import { ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED } from "@/constants/event-tracker";
-import { EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useAppTheme, useEventTracker, useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // images
 import emptyIssue from "@/public/empty-state/issue.svg";
 // local components
 import { IssueMainContent } from "./main-content";
-import { IssueDetailsSidebar } from "./sidebar";
 
 export type TIssueOperations = {
   fetch: (workspaceSlug: string, projectId: string, issueId: string, loader?: boolean) => Promise<void>;
@@ -55,6 +60,7 @@ export type TIssueDetailRoot = {
 };
 
 export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
+  const { t } = useTranslation();
   const { workspaceSlug, projectId, issueId, is_archived = false } = props;
   // router
   const router = useAppRouter();
@@ -112,9 +118,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             path: pathname,
           });
           setToast({
-            title: "Error!",
+            title: t("common.error.label"),
             type: TOAST_TYPE.ERROR,
-            message: "Issue update failed",
+            message: t("entity.update.failed", { entity: t("issue.label") }),
           });
         }
       },
@@ -123,9 +129,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
           if (is_archived) await removeArchivedIssue(workspaceSlug, projectId, issueId);
           else await removeIssue(workspaceSlug, projectId, issueId);
           setToast({
-            title: "Success!",
+            title: t("common.success"),
             type: TOAST_TYPE.SUCCESS,
-            message: "Issue deleted successfully",
+            message: t("entity.delete.success", { entity: t("issue.label") }),
           });
           captureIssueEvent({
             eventName: ISSUE_DELETED,
@@ -135,9 +141,9 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         } catch (error) {
           console.log("Error in deleting issue:", error);
           setToast({
-            title: "Error!",
+            title: t("common.error.label"),
             type: TOAST_TYPE.ERROR,
-            message: "Issue delete failed",
+            message: t("entity.delete.failed", { entity: t("issue.label") }),
           });
           captureIssueEvent({
             eventName: ISSUE_DELETED,
@@ -178,8 +184,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Issue could not be added to the cycle. Please try again.",
+            title: t("common.error.label"),
+            message: t("issue.add.cycle.failed"),
           });
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
@@ -207,8 +213,8 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Issue could not be added to the cycle. Please try again.",
+            title: t("common.error.label"),
+            message: t("issue.add.cycle.failed"),
           });
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
@@ -225,14 +231,14 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         try {
           const removeFromCyclePromise = removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
           setPromiseToast(removeFromCyclePromise, {
-            loading: "Removing issue from the cycle...",
+            loading: t("issue.remove.cycle.loading"),
             success: {
-              title: "Success!",
-              message: () => "Issue removed from the cycle successfully.",
+              title: t("common.success"),
+              message: () => t("issue.remove.cycle.success"),
             },
             error: {
-              title: "Error!",
-              message: () => "Issue could not be removed from the cycle. Please try again.",
+              title: t("common.error.label"),
+              message: () => t("issue.remove.cycle.failed"),
             },
           });
           await removeFromCyclePromise;
@@ -261,14 +267,14 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         try {
           const removeFromModulePromise = removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
           setPromiseToast(removeFromModulePromise, {
-            loading: "Removing issue from the module...",
+            loading: t("issue.remove.module.loading"),
             success: {
-              title: "Success!",
-              message: () => "Issue removed from the module successfully.",
+              title: t("common.success"),
+              message: () => t("issue.remove.module.success"),
             },
             error: {
-              title: "Error!",
-              message: () => "Issue could not be removed from the module. Please try again.",
+              title: t("common.error.label"),
+              message: () => t("issue.remove.module.failed"),
             },
           });
           await removeFromModulePromise;
@@ -333,17 +339,22 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
   // issue details
   const issue = getIssueById(issueId);
   // checking if issue is editable, based on user role
-  const isEditable = allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT);
+  const isEditable = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug,
+    projectId
+  );
 
   return (
     <>
       {!issue ? (
         <EmptyState
           image={emptyIssue}
-          title="Issue does not exist"
-          description="The issue you are looking for does not exist, has been archived, or has been deleted."
+          title={t("issue.empty_state.issue_detail.title")}
+          description={t("issue.empty_state.issue_detail.description")}
           primaryButton={{
-            text: "View other issues",
+            text: t("issue.empty_state.issue_detail.primary_button.text"),
             onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/issues`),
           }}
         />
diff --git a/web/core/components/issues/issue-detail/sidebar.tsx b/web/core/components/issues/issue-detail/sidebar.tsx
index 102dc6e5a..1749ccba4 100644
--- a/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/web/core/components/issues/issue-detail/sidebar.tsx
@@ -3,6 +3,8 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { CalendarCheck2, CalendarClock, LayoutPanelTop, Signal, Tag, Triangle, UserCircle2, Users } from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ContrastIcon, DiceIcon, DoubleCircleIcon } from "@plane/ui";
 // components
@@ -14,7 +16,7 @@ import {
   StateDropdown,
 } from "@/components/dropdowns";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
-import { IssueCycleSelect, IssueLabel, IssueModuleSelect, IssueParentSelect } from "@/components/issues";
+import { IssueCycleSelect, IssueLabel, IssueModuleSelect } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
@@ -23,7 +25,7 @@ import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 import { useProjectEstimates, useIssueDetail, useProject, useProjectState, useMember } from "@/hooks/store";
 // plane web components
 import { IssueAdditionalPropertyValuesUpdate } from "@/plane-web/components/issue-types/values";
-import { IssueWorklogProperty } from "@/plane-web/components/issues";
+import { IssueParentSelectRoot, IssueWorklogProperty } from "@/plane-web/components/issues";
 // components
 import type { TIssueOperations } from "./root";
 
@@ -36,6 +38,7 @@ type Props = {
 };
 
 export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
+  const { t } = useTranslation();
   const { workspaceSlug, projectId, issueId, issueOperations, isEditable } = props;
   // store hooks
   const { getProjectById } = useProject();
@@ -64,13 +67,13 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
     <>
       <div className="flex items-center h-full w-full flex-col divide-y-2 divide-custom-border-200 overflow-hidden">
         <div className="h-full w-full overflow-y-auto px-6">
-          <h5 className="mt-6 text-sm font-medium">Properties</h5>
+          <h5 className="mt-6 text-sm font-medium">{t("common.properties")}</h5>
           {/* TODO: render properties using a common component */}
           <div className={`mb-2 mt-3 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
-                <span>State</span>
+                <span>{t("common.state")}</span>
               </div>
               <StateDropdown
                 value={issue?.state_id}
@@ -89,14 +92,14 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <Users className="h-4 w-4 flex-shrink-0" />
-                <span>Assignees</span>
+                <span>{t("common.assignees")}</span>
               </div>
               <MemberDropdown
                 value={issue?.assignee_ids ?? undefined}
                 onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
                 disabled={!isEditable}
                 projectId={projectId?.toString() ?? ""}
-                placeholder="Add assignees"
+                placeholder={t("issue.add.assignee")}
                 multiple
                 buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
                 className="group w-3/5 flex-grow"
@@ -113,7 +116,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <Signal className="h-4 w-4 flex-shrink-0" />
-                <span>Priority</span>
+                <span>{t("common.priority")}</span>
               </div>
               <PriorityDropdown
                 value={issue?.priority}
@@ -130,7 +133,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               <div className="flex h-8 items-center gap-2">
                 <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                   <UserCircle2 className="h-4 w-4 flex-shrink-0" />
-                  <span>Created by</span>
+                  <span>{t("common.created_by")}</span>
                 </div>
                 <div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
                   <ButtonAvatars showTooltip userIds={createdByDetails.id} />
@@ -142,10 +145,10 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <CalendarClock className="h-4 w-4 flex-shrink-0" />
-                <span>Start date</span>
+                <span>{t("common.order_by.start_date")}</span>
               </div>
               <DateDropdown
-                placeholder="Add start date"
+                placeholder={t("issue.add.start_date")}
                 value={issue.start_date}
                 onChange={(val) =>
                   issueOperations.update(workspaceSlug, projectId, issueId, {
@@ -168,10 +171,10 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
-                <span>Due date</span>
+                <span>{t("common.order_by.due_date")}</span>
               </div>
               <DateDropdown
-                placeholder="Add due date"
+                placeholder={t("issue.add.due_date")}
                 value={issue.target_date}
                 onChange={(val) =>
                   issueOperations.update(workspaceSlug, projectId, issueId, {
@@ -198,7 +201,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               <div className="flex h-8 items-center gap-2">
                 <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                   <Triangle className="h-4 w-4 flex-shrink-0" />
-                  <span>Estimate</span>
+                  <span>{t("common.estimate")}</span>
                 </div>
                 <EstimateDropdown
                   value={issue?.estimate_point ?? undefined}
@@ -211,7 +214,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
                   className="group w-3/5 flex-grow"
                   buttonContainerClassName="w-full text-left"
                   buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
-                  placeholder="None"
+                  placeholder={t("common.none")}
                   hideIcon
                   dropdownArrow
                   dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
@@ -223,7 +226,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               <div className="flex min-h-8 gap-2">
                 <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
                   <DiceIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>Modules</span>
+                  <span>{t("common.modules")}</span>
                 </div>
                 <IssueModuleSelect
                   className="w-3/5 flex-grow"
@@ -240,7 +243,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
               <div className="flex h-8 items-center gap-2">
                 <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                   <ContrastIcon className="h-4 w-4 flex-shrink-0" />
-                  <span>Cycle</span>
+                  <span>{t("common.cycle")}</span>
                 </div>
                 <IssueCycleSelect
                   className="w-3/5 flex-grow"
@@ -256,9 +259,9 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             <div className="flex h-8 items-center gap-2">
               <div className="flex w-2/5 flex-shrink-0 items-center gap-1 text-sm text-custom-text-300">
                 <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
-                <span>Parent</span>
+                <span>{t("common.parent")}</span>
               </div>
-              <IssueParentSelect
+              <IssueParentSelectRoot
                 className="h-full w-3/5 flex-grow"
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
@@ -271,7 +274,7 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
             <div className="flex min-h-8 gap-2">
               <div className="flex w-2/5 flex-shrink-0 gap-1 pt-2 text-sm text-custom-text-300">
                 <Tag className="h-4 w-4 flex-shrink-0" />
-                <span>Labels</span>
+                <span>{t("common.labels")}</span>
               </div>
               <div className="h-full min-h-8 w-3/5 flex-grow">
                 <IssueLabel
diff --git a/web/core/components/issues/issue-detail/subscription.tsx b/web/core/components/issues/issue-detail/subscription.tsx
index bc04a6432..e19e787f3 100644
--- a/web/core/components/issues/issue-detail/subscription.tsx
+++ b/web/core/components/issues/issue-detail/subscription.tsx
@@ -4,11 +4,13 @@ import { FC, useState } from "react";
 import isNil from "lodash/isNil";
 import { observer } from "mobx-react";
 import { Bell, BellOff } from "lucide-react";
+// plane-i18n
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // UI
 import { Button, Loader, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useIssueDetail, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export type TIssueSubscription = {
   workspaceSlug: string;
@@ -18,6 +20,7 @@ export type TIssueSubscription = {
 
 export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
   const { workspaceSlug, projectId, issueId } = props;
+  const { t } = useTranslation();
   // hooks
   const {
     subscription: { getSubscriptionByIssueId },
@@ -44,16 +47,18 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
       else await createSubscription(workspaceSlug, projectId, issueId);
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Success!",
-        message: `Issue ${isSubscribed ? `unsubscribed` : `subscribed`} successfully.!`,
+        title: t("toast.success"),
+        message: isSubscribed
+          ? t("issue.subscription.actions.unsubscribed")
+          : t("issue.subscription.actions.subscribed"),
       });
       setLoading(false);
     } catch (error) {
       setLoading(false);
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Something went wrong. Please try again later.",
+        title: t("toast.error"),
+        message: t("commons.error.message"),
       });
     }
   };
@@ -77,12 +82,12 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
       >
         {loading ? (
           <span>
-            <span className="hidden sm:block">Loading...</span>
+            <span className="hidden sm:block">{t("common.loading")}</span>
           </span>
         ) : isSubscribed ? (
-          <div className="hidden sm:block">Unsubscribe</div>
+          <div className="hidden sm:block">{t("common.actions.unsubscribe")}</div>
         ) : (
-          <div className="hidden sm:block">Subscribe</div>
+          <div className="hidden sm:block">{t("common.actions.subscribe")}</div>
         )}
       </Button>
     </div>
diff --git a/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
index 288a3a2ec..092ac047c 100644
--- a/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/base-calendar-root.tsx
@@ -3,18 +3,16 @@
 import { FC, useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { EIssueGroupByToServerOptions } from "@plane/constants";
+import { EIssueGroupByToServerOptions, EIssuesStoreType,EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { TGroupedIssues } from "@plane/types";
 // components
 import { TOAST_TYPE, setToast } from "@plane/ui";
 import { CalendarChart } from "@/components/issues";
 //constants
-import { EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useIssues, useCalendarView, useUserPermissions } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
 import { handleDragDrop } from "./utils";
@@ -23,23 +21,35 @@ export type CalendarStoreType =
   | EIssuesStoreType.PROJECT
   | EIssuesStoreType.MODULE
   | EIssuesStoreType.CYCLE
-  | EIssuesStoreType.PROJECT_VIEW;
+  | 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((props: IBaseCalendarRoot) => {
-  const { QuickActions, addIssuesToView, isCompletedCycle = false, viewId } = props;
+  const {
+    QuickActions,
+    addIssuesToView,
+    isCompletedCycle = false,
+    viewId,
+    isEpic = false,
+    canEditPropertiesBasedOnProject,
+  } = props;
 
   // router
-  const { workspaceSlug, projectId } = useParams();
+  const { workspaceSlug } = useParams();
 
   // hooks
-  const storeType = useIssueStoreType() as CalendarStoreType;
+  const storeType = isEpic ? EIssuesStoreType.EPIC : (useIssueStoreType() as CalendarStoreType);
   const { allowPermissions } = useUserPermissions();
   const { issues, issuesFilter, issueMap } = useIssues(storeType);
   const {
@@ -61,6 +71,8 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
     EUserPermissionsLevel.PROJECT
   );
 
+  const { enableInlineEditing } = issues?.viewFlags || {};
+
   const displayFilters = issuesFilter.issueFilters?.displayFilters;
 
   const groupedIssueIds = (issues.groupedIssueIds ?? {}) as TGroupedIssues;
@@ -69,9 +81,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
   const { startDate, endDate } = issueCalendarView.getStartAndEndDate(layout) ?? {};
 
   useEffect(() => {
-    startDate &&
-      endDate &&
-      layout &&
+    if (startDate && endDate && layout) {
       fetchIssues(
         "init-loader",
         {
@@ -83,21 +93,23 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
         },
         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) return;
+    if (!issueId || !destinationDate || !sourceDate || !issueProjectId) return;
 
     await handleDragDrop(
       issueId,
       sourceDate,
       destinationDate,
       workspaceSlug?.toString(),
-      projectId?.toString(),
+      issueProjectId,
       updateIssue
     ).catch((err) => {
       setToast({
@@ -125,6 +137,16 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
     [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-custom-background-100 pt-4">
@@ -145,7 +167,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
               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={!isEditingAllowed || isCompletedCycle}
+              readOnly={!canEditProperties(issue.project_id ?? undefined) || isCompletedCycle}
               placements={placement}
             />
           )}
@@ -154,9 +176,11 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
           getGroupIssueCount={getGroupIssueCount}
           addIssuesToView={addIssuesToView}
           quickAddCallback={quickAddIssue}
-          readOnly={!isEditingAllowed || isCompletedCycle}
+          readOnly={isCompletedCycle}
           updateFilters={updateFilters}
           handleDragAndDrop={handleDragAndDrop}
+          canEditProperties={canEditProperties}
+          isEpic={isEpic}
         />
       </div>
     </>
diff --git a/web/core/components/issues/issue-layouts/calendar/calendar.tsx b/web/core/components/issues/issue-layouts/calendar/calendar.tsx
index 9bac26879..9a0284f47 100644
--- a/web/core/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/calendar.tsx
@@ -4,6 +4,8 @@ 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 { EIssueLayoutTypes, EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 // types
 import type {
   IIssueDisplayFilterOptions,
@@ -21,15 +23,14 @@ import { Spinner } from "@plane/ui";
 import { CalendarHeader, CalendarIssueBlocks, CalendarWeekDays, CalendarWeekHeader } from "@/components/issues";
 // constants
 import { MONTHS_LIST } from "@/constants/calendar";
-import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // hooks
-import { useIssues, useUserPermissions } from "@/hooks/store";
+import { useIssues } from "@/hooks/store";
 import useSize from "@/hooks/use-window-size";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // store
+import { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import { ICycleIssuesFilter } from "@/store/issue/cycle";
 import { ICalendarStore } from "@/store/issue/issue_calendar_view.store";
 import { IModuleIssuesFilter } from "@/store/issue/module";
@@ -40,7 +41,12 @@ import { TRenderQuickActions } from "../list/list-view-types";
 import type { ICalendarWeek } from "./types";
 
 type Props = {
-  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  issuesFilterStore:
+    | IProjectIssuesFilter
+    | IModuleIssuesFilter
+    | ICycleIssuesFilter
+    | IProjectViewIssuesFilter
+    | IProjectEpicsFilter;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
   layout: "month" | "week" | undefined;
@@ -53,6 +59,7 @@ type Props = {
   quickActions: TRenderQuickActions;
   handleDragAndDrop: (
     issueId: string | undefined,
+    issueProjectId: string | undefined,
     sourceDate: string | undefined,
     destinationDate: string | undefined
   ) => Promise<void>;
@@ -63,6 +70,8 @@ type Props = {
     filterType: EIssueFilterType,
     filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
   ) => Promise<void>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEpic?: boolean;
 };
 
 export const CalendarChart: React.FC<Props> = observer((props) => {
@@ -81,7 +90,9 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
     getPaginationData,
     getGroupIssueCount,
     updateFilters,
+    canEditProperties,
     readOnly = false,
+    isEpic = false,
   } = props;
   // states
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
@@ -91,15 +102,10 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
   const {
     issues: { viewFlags },
   } = useIssues(EIssuesStoreType.PROJECT);
-  const { allowPermissions } = useUserPermissions();
 
   const [windowWidth] = useSize();
 
-  const { enableIssueCreation } = viewFlags || {};
-  const isEditingAllowed = allowPermissions(
-    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    EUserPermissionsLevel.PROJECT
-  );
+  const { enableIssueCreation, enableQuickAdd } = viewFlags || {};
 
   const calendarPayload = issueCalendarView.calendarPayload;
 
@@ -163,12 +169,14 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                         loadMoreIssues={loadMoreIssues}
                         getPaginationData={getPaginationData}
                         getGroupIssueCount={getGroupIssueCount}
-                        enableQuickIssueCreate
-                        disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+                        enableQuickIssueCreate={enableQuickAdd}
+                        disableIssueCreation={!enableIssueCreation}
                         quickActions={quickActions}
                         quickAddCallback={quickAddCallback}
                         addIssuesToView={addIssuesToView}
                         readOnly={readOnly}
+                        canEditProperties={canEditProperties}
+                        isEpic={isEpic}
                       />
                     ))}
                 </div>
@@ -185,12 +193,14 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                   loadMoreIssues={loadMoreIssues}
                   getPaginationData={getPaginationData}
                   getGroupIssueCount={getGroupIssueCount}
-                  enableQuickIssueCreate
-                  disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+                  enableQuickIssueCreate={enableQuickAdd}
+                  disableIssueCreation={!enableIssueCreation}
                   quickActions={quickActions}
                   quickAddCallback={quickAddCallback}
                   addIssuesToView={addIssuesToView}
                   readOnly={readOnly}
+                  canEditProperties={canEditProperties}
+                  isEpic={isEpic}
                 />
               )}
             </div>
@@ -209,13 +219,15 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
                 getPaginationData={getPaginationData}
                 getGroupIssueCount={getGroupIssueCount}
                 quickActions={quickActions}
-                enableQuickIssueCreate
-                disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+                enableQuickIssueCreate={enableQuickAdd}
+                disableIssueCreation={!enableIssueCreation}
                 quickAddCallback={quickAddCallback}
                 addIssuesToView={addIssuesToView}
                 readOnly={readOnly}
+                canEditProperties={canEditProperties}
                 isDragDisabled
                 isMobileView
+                isEpic={isEpic}
               />
             </div>
           </div>
@@ -235,13 +247,15 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
             loadMoreIssues={loadMoreIssues}
             getPaginationData={getPaginationData}
             getGroupIssueCount={getGroupIssueCount}
-            enableQuickIssueCreate
-            disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+            enableQuickIssueCreate={enableQuickAdd}
+            disableIssueCreation={!enableIssueCreation}
             quickAddCallback={quickAddCallback}
             addIssuesToView={addIssuesToView}
             readOnly={readOnly}
+            canEditProperties={canEditProperties}
             isDragDisabled
             isMobileView
+            isEpic={isEpic}
           />
         </div>
       </div>
diff --git a/web/core/components/issues/issue-layouts/calendar/day-tile.tsx b/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
index 54a638480..e80e629e6 100644
--- a/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -3,7 +3,7 @@
 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";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 import { observer } from "mobx-react";
 // types
 import { TGroupedIssues, TIssue, TIssueMap, TPaginationData } from "@plane/types";
@@ -18,6 +18,7 @@ import { MONTHS_LIST } from "@/constants/calendar";
 import { cn } from "@/helpers/common.helper";
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
+import { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import { ICycleIssuesFilter } from "@/store/issue/cycle";
 import { IModuleIssuesFilter } from "@/store/issue/module";
 import { IProjectIssuesFilter } from "@/store/issue/project";
@@ -25,7 +26,12 @@ import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 import { TRenderQuickActions } from "../list/list-view-types";
 
 type Props = {
-  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  issuesFilterStore:
+    | IProjectIssuesFilter
+    | IModuleIssuesFilter
+    | ICycleIssuesFilter
+    | IProjectViewIssuesFilter
+    | IProjectEpicsFilter;
   date: ICalendarDate;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
@@ -38,6 +44,7 @@ type Props = {
   quickActions: TRenderQuickActions;
   handleDragAndDrop: (
     issueId: string | undefined,
+    issueProjectId: string | undefined,
     sourceDate: string | undefined,
     destinationDate: string | undefined
   ) => Promise<void>;
@@ -45,6 +52,8 @@ type Props = {
   readOnly?: boolean;
   selectedDate: Date;
   setSelectedDate: (date: Date) => void;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEpic?: boolean;
 };
 
 export const CalendarDayTile: React.FC<Props> = observer((props) => {
@@ -65,6 +74,8 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
     selectedDate,
     handleDragAndDrop,
     setSelectedDate,
+    canEditProperties,
+    isEpic = false,
   } = props;
 
   const [isDraggingOver, setIsDraggingOver] = useState(false);
@@ -105,13 +116,18 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
               setToast({
                 type: TOAST_TYPE.ERROR,
                 title: "Error!",
-                message: "Due date cannot be before the start date of the issue.",
+                message: "Due date cannot be before the start date of the work item.",
               });
               return;
             }
           }
 
-          handleDragAndDrop(sourceData?.id, sourceData?.date, destinationData?.date);
+          handleDragAndDrop(
+            sourceData?.id,
+            issueDetails?.project_id ?? undefined,
+            sourceData?.date,
+            destinationData?.date
+          );
           highlightIssueOnDrop(source?.element?.id, false);
         },
       })
@@ -176,6 +192,8 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
               enableQuickIssueCreate={enableQuickIssueCreate}
               quickAddCallback={quickAddCallback}
               readOnly={readOnly}
+              canEditProperties={canEditProperties}
+              isEpic={isEpic}
             />
           </div>
         </div>
diff --git a/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index 9f9f5b5bd..05e5a1631 100644
--- a/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -9,6 +9,7 @@ import { Popover, Transition } from "@headlessui/react";
 import { MONTHS_LIST } from "@/constants/calendar";
 import { getDate } from "@/helpers/date-time.helper";
 import { useCalendarView } from "@/hooks/store";
+import { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import { ICycleIssuesFilter } from "@/store/issue/cycle";
 import { IModuleIssuesFilter } from "@/store/issue/module";
 import { IProjectIssuesFilter } from "@/store/issue/project";
@@ -16,7 +17,12 @@ import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 // helpers
 
 interface Props {
-  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  issuesFilterStore:
+    | IProjectIssuesFilter
+    | IModuleIssuesFilter
+    | ICycleIssuesFilter
+    | IProjectViewIssuesFilter
+    | IProjectEpicsFilter;
 }
 export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) => {
   const { issuesFilterStore } = props;
diff --git a/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
index 822f42488..35c2c281c 100644
--- a/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -9,6 +9,8 @@ import { Popover, Transition } from "@headlessui/react";
 // hooks
 // ui
 // icons
+import { EIssueFilterType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import {
   IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
@@ -20,16 +22,21 @@ import { ToggleSwitch } from "@plane/ui";
 // types
 // constants
 import { CALENDAR_LAYOUTS } from "@/constants/calendar";
-import { EIssueFilterType } from "@/constants/issue";
 import { useCalendarView } from "@/hooks/store";
 import useSize from "@/hooks/use-window-size";
+import { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import { ICycleIssuesFilter } from "@/store/issue/cycle";
 import { IModuleIssuesFilter } from "@/store/issue/module";
 import { IProjectIssuesFilter } from "@/store/issue/project";
 import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 
 interface ICalendarHeader {
-  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  issuesFilterStore:
+    | IProjectIssuesFilter
+    | IModuleIssuesFilter
+    | ICycleIssuesFilter
+    | IProjectViewIssuesFilter
+    | IProjectEpicsFilter;
   updateFilters?: (
     projectId: string,
     filterType: EIssueFilterType,
@@ -40,6 +47,8 @@ interface ICalendarHeader {
 export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((props) => {
   const { issuesFilterStore, updateFilters } = props;
 
+  const { t } = useTranslation();
+
   const { projectId } = useParams();
 
   const issueCalendarView = useCalendarView();
@@ -105,7 +114,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                   open ? "text-custom-text-100" : "text-custom-text-200"
                 }`}
               >
-                <div className="font-medium">Options</div>
+                <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"}`}
                 >
@@ -150,7 +159,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                     className="flex w-full items-center justify-between gap-2 rounded px-1 py-1.5 text-left text-xs hover:bg-custom-background-80"
                     onClick={handleToggleWeekends}
                   >
-                    Show weekends
+                    {t("common.actions.show_weekends")}
                     <ToggleSwitch
                       value={showWeekends}
                       onChange={() => {
diff --git a/web/core/components/issues/issue-layouts/calendar/header.tsx b/web/core/components/issues/issue-layouts/calendar/header.tsx
index c7e6232a0..e5943f33b 100644
--- a/web/core/components/issues/issue-layouts/calendar/header.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -2,6 +2,8 @@ import { observer } from "mobx-react";
 
 // components
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { EIssueFilterType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import {
   IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
@@ -11,15 +13,20 @@ import {
 import { Row } from "@plane/ui";
 import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "@/components/issues";
 // icons
-import { EIssueFilterType } from "@/constants/issue";
 import { useCalendarView } from "@/hooks/store/use-calendar-view";
+import { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import { ICycleIssuesFilter } from "@/store/issue/cycle";
 import { IModuleIssuesFilter } from "@/store/issue/module";
 import { IProjectIssuesFilter } from "@/store/issue/project";
 import { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 
 interface ICalendarHeader {
-  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  issuesFilterStore:
+    | IProjectIssuesFilter
+    | IModuleIssuesFilter
+    | ICycleIssuesFilter
+    | IProjectViewIssuesFilter
+    | IProjectEpicsFilter;
   updateFilters?: (
     projectId: string,
     filterType: EIssueFilterType,
@@ -31,6 +38,8 @@ interface ICalendarHeader {
 export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
   const { issuesFilterStore, updateFilters, setSelectedDate } = props;
 
+  const { t } = useTranslation();
+
   const issueCalendarView = useCalendarView();
 
   const calendarLayout = issuesFilterStore.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@@ -113,7 +122,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
           className="rounded bg-custom-background-80 px-2.5 py-1 text-xs font-medium text-custom-text-200 hover:text-custom-text-100"
           onClick={handleToday}
         >
-          Today
+          {t("common.today")}
         </button>
         <CalendarOptionsDropdown issuesFilterStore={issuesFilterStore} updateFilters={updateFilters} />
       </div>
diff --git a/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx b/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
index 6e63d6d79..2ca6a8f8e 100644
--- a/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx
@@ -15,10 +15,12 @@ type Props = {
   issueId: string;
   quickActions: TRenderQuickActions;
   isDragDisabled: boolean;
+  isEpic?: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
 };
 
 export const CalendarIssueBlockRoot: React.FC<Props> = observer((props) => {
-  const { issueId, quickActions, isDragDisabled } = props;
+  const { issueId, quickActions, isDragDisabled, isEpic = false, canEditProperties } = props;
 
   const issueRef = useRef<HTMLAnchorElement | null>(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -29,6 +31,8 @@ export const CalendarIssueBlockRoot: React.FC<Props> = observer((props) => {
 
   const issue = getIssueById(issueId);
 
+  const canDrag = !isDragDisabled && canEditProperties(issue?.project_id ?? undefined);
+
   useEffect(() => {
     const element = issueRef.current;
 
@@ -37,7 +41,7 @@ export const CalendarIssueBlockRoot: React.FC<Props> = observer((props) => {
     return combine(
       draggable({
         element,
-        canDrag: () => !isDragDisabled,
+        canDrag: () => canDrag,
         getInitialData: () => ({ id: issue?.id, date: issue?.target_date }),
         onDragStart: () => {
           setIsDragging(true);
@@ -47,7 +51,7 @@ export const CalendarIssueBlockRoot: React.FC<Props> = observer((props) => {
         },
       })
     );
-  }, [issueRef?.current, issue]);
+  }, [issueRef?.current, issue, canDrag]);
 
   useOutsideClickDetector(issueRef, () => {
     issueRef?.current?.classList?.remove(HIGHLIGHT_CLASS);
@@ -55,5 +59,13 @@ export const CalendarIssueBlockRoot: React.FC<Props> = observer((props) => {
 
   if (!issue) return null;
 
-  return <CalendarIssueBlock isDragging={isDragging} issue={issue} quickActions={quickActions} ref={issueRef} />;
+  return (
+    <CalendarIssueBlock
+      isDragging={isDragging}
+      issue={issue}
+      quickActions={quickActions}
+      ref={issueRef}
+      isEpic={isEpic}
+    />
+  );
 });
diff --git a/web/core/components/issues/issue-layouts/calendar/issue-block.tsx b/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
index 734ce25cf..127ebfb47 100644
--- a/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/issue-block.tsx
@@ -13,8 +13,9 @@ import { TIssue } from "@plane/types";
 import { Tooltip, ControlLink } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
-import { useIssueDetail, useIssues, useProjectState } from "@/hooks/store";
+import { useIssueDetail, useIssues, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -28,26 +29,29 @@ type Props = {
   issue: TIssue;
   quickActions: TRenderQuickActions;
   isDragging?: boolean;
+  isEpic?: boolean;
 };
 
 export const CalendarIssueBlock = observer(
   forwardRef<HTMLAnchorElement, Props>((props, ref) => {
-    const { issue, quickActions, isDragging = false } = props;
+    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, projectId } = useParams();
+    const { workspaceSlug } = useParams();
     const { getProjectStates } = useProjectState();
     const { getIsIssuePeeked } = useIssueDetail();
-    const { handleRedirection } = useIssuePeekOverviewRedirection();
+    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 = (issue: TIssue) => handleRedirection(workspaceSlug.toString(), issue, isMobile);
@@ -71,10 +75,20 @@ export const CalendarIssueBlock = observer(
 
     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 (
       <ControlLink
         id={`issue-${issue.id}`}
-        href={`/${workspaceSlug?.toString()}/projects/${projectId?.toString()}/issues/${issue.id}`}
+        href={workItemLink}
         onClick={() => handleIssuePeekOverview(issue)}
         className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400"
         disabled={!!issue?.tempId || isMobile}
diff --git a/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
index 8860fcb6a..9e7109fa3 100644
--- a/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 import { TIssue, TPaginationData } from "@plane/types";
 // components
 import { CalendarQuickAddIssueActions, CalendarIssueBlockRoot } from "@/components/issues";
@@ -22,6 +23,8 @@ type Props = {
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   readOnly?: boolean;
   isMobileView?: boolean;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEpic?: boolean;
 };
 
 export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
@@ -37,8 +40,11 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
     addIssuesToView,
     readOnly,
     isMobileView = false,
+    canEditProperties,
+    isEpic = false,
   } = props;
   const formattedDatePayload = renderFormattedPayloadDate(date);
+  const { t } = useTranslation();
 
   const {
     issues: { getGroupIssueCount, getPaginationData, getIssueLoader },
@@ -63,6 +69,8 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
             issueId={issueId}
             quickActions={quickActions}
             isDragDisabled={isDragDisabled || isMobileView}
+            canEditProperties={canEditProperties}
+            isEpic={isEpic}
           />
         </div>
       ))}
@@ -81,6 +89,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
             }}
             quickAddCallback={quickAddCallback}
             addIssuesToView={addIssuesToView}
+            isEpic={isEpic}
           />
         </div>
       )}
@@ -92,7 +101,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
             className="w-min whitespace-nowrap rounded text-xs px-1.5 py-1 font-medium  hover:bg-custom-background-80 text-custom-primary-100 hover:text-custom-primary-200"
             onClick={() => loadMoreIssues(formattedDatePayload)}
           >
-            Load More
+            {t("common.load_more")}
           </button>
         </div>
       )}
diff --git a/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx b/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
index 5a1becee2..a293d0141 100644
--- a/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/quick-add-issue-actions.tsx
@@ -1,10 +1,14 @@
 "use client";
 
 import { FC, useState } from "react";
-import { differenceInCalendarDays } from "date-fns";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { PlusIcon } from "lucide-react";
+// plane constants
+import { EIssueLayoutTypes } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { ISearchIssueResponse, TIssue } from "@plane/types";
 // ui
@@ -13,7 +17,6 @@ import { CustomMenu, setPromiseToast } from "@plane/ui";
 import { ExistingIssuesListModal } from "@/components/core";
 import { QuickAddIssueRoot } from "@/components/issues";
 // helpers
-import { EIssueLayoutTypes } from "@/constants/issue";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
@@ -23,10 +26,12 @@ type TCalendarQuickAddIssueActions = {
   quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
   addIssuesToView?: (issueIds: string[]) => Promise<any>;
   onOpen?: () => void;
+  isEpic?: boolean;
 };
 
 export const CalendarQuickAddIssueActions: FC<TCalendarQuickAddIssueActions> = observer((props) => {
-  const { prePopulatedData, quickAddCallback, addIssuesToView, onOpen } = props;
+  const { prePopulatedData, quickAddCallback, addIssuesToView, onOpen, isEpic = false } = props;
+  const { t } = useTranslation();
   // router
   const { workspaceSlug, projectId, moduleId } = useParams();
   // states
@@ -50,14 +55,14 @@ export const CalendarQuickAddIssueActions: FC<TCalendarQuickAddIssueActions> = o
     ).then(() => addIssuesToView?.(issueIds));
 
     setPromiseToast(addExistingIssuesPromise, {
-      loading: `Adding ${issueIds.length > 1 ? "issues" : "issue"} to cycle...`,
+      loading: t("issue.adding", { count: issueIds.length }),
       success: {
-        title: "Success!",
-        message: () => `${issueIds.length > 1 ? "Issues" : "Issue"} added to cycle successfully.`,
+        title: t("toast.success"),
+        message: () => t("entity.add.success", { entity: t("issue.label", { count: 2 }) }),
       },
       error: {
-        title: "Error!",
-        message: (err) => err?.message || "Something went wrong. Please try again.",
+        title: t("toast.error"),
+        message: (err) => err?.message || t("common.errors.default.message"),
       },
     });
   };
@@ -117,16 +122,23 @@ export const CalendarQuickAddIssueActions: FC<TCalendarQuickAddIssueActions> = o
               customButton={
                 <div className="flex w-full items-center gap-x-[6px] rounded-md px-2 py-1.5 text-custom-text-350 hover:text-custom-text-300">
                   <PlusIcon className="h-3.5 w-3.5 stroke-2 flex-shrink-0" />
-                  <span className="text-sm font-medium flex-shrink-0">New issue</span>
+                  <span className="text-sm font-medium flex-shrink-0">
+                    {isEpic ? t("epic.add.label") : t("issue.add.label")}
+                  </span>
                 </div>
               }
             >
-              <CustomMenu.MenuItem onClick={handleNewIssue}>New issue</CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={handleExistingIssue}>Add existing issue</CustomMenu.MenuItem>
+              <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}
       />
     </>
   );
-});
\ No newline at end of file
+});
diff --git a/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
index 8543e85de..ba85fb80f 100644
--- a/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -2,8 +2,8 @@ import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 //hooks
+import { EIssuesStoreType } from "@plane/constants";
 import { CycleIssueQuickActions } from "@/components/issues";
-import { EIssuesStoreType } from "@/constants/issue";
 import { useCycle, useIssues } from "@/hooks/store";
 // components
 import { BaseCalendarRoot } from "../base-calendar-root";
diff --git a/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx b/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx
index aaf746b34..296b4c5a3 100644
--- a/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -3,10 +3,10 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // hooks
 // components
+import { EIssuesStoreType } from "@plane/constants";
 import { ModuleIssueQuickActions } from "@/components/issues";
 // types
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
 import { useIssues } from "@/hooks/store";
 import { BaseCalendarRoot } from "../base-calendar-root";
 
diff --git a/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx b/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx
index cad7336de..9634f1f8b 100644
--- a/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -1,7 +1,32 @@
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 // hooks
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { ProjectIssueQuickActions } from "@/components/issues";
+// hooks
+import { useUserPermissions } from "@/hooks/store";
+// plane web constants
 // components
 import { BaseCalendarRoot } from "../base-calendar-root";
 
-export const CalendarLayout: React.FC = observer(() => <BaseCalendarRoot QuickActions={ProjectIssueQuickActions} />);
+export const CalendarLayout: React.FC = observer(() => {
+  // 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/web/core/components/issues/issue-layouts/calendar/week-days.tsx b/web/core/components/issues/issue-layouts/calendar/week-days.tsx
index 75f652f94..9aaa13229 100644
--- a/web/core/components/issues/issue-layouts/calendar/week-days.tsx
+++ b/web/core/components/issues/issue-layouts/calendar/week-days.tsx
@@ -5,6 +5,7 @@ import { CalendarDayTile } from "@/components/issues";
 // helpers
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 // types
+import { IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 import { ICycleIssuesFilter } from "@/store/issue/cycle";
 import { IModuleIssuesFilter } from "@/store/issue/module";
 import { IProjectIssuesFilter } from "@/store/issue/project";
@@ -13,7 +14,12 @@ import { TRenderQuickActions } from "../list/list-view-types";
 import { ICalendarDate, ICalendarWeek } from "./types";
 
 type Props = {
-  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
+  issuesFilterStore:
+    | IProjectIssuesFilter
+    | IModuleIssuesFilter
+    | ICycleIssuesFilter
+    | IProjectViewIssuesFilter
+    | IProjectEpicsFilter;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
   week: ICalendarWeek | undefined;
@@ -26,6 +32,7 @@ type Props = {
   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>;
@@ -33,6 +40,8 @@ type Props = {
   readOnly?: boolean;
   selectedDate: Date;
   setSelectedDate: (date: Date) => void;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  isEpic?: boolean;
 };
 
 export const CalendarWeekDays: React.FC<Props> = observer((props) => {
@@ -53,6 +62,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
     readOnly = false,
     selectedDate,
     setSelectedDate,
+    canEditProperties,
+    isEpic = false,
   } = props;
 
   const calendarLayout = issuesFilterStore?.issueFilters?.displayFilters?.calendar?.layout ?? "month";
@@ -88,6 +99,8 @@ export const CalendarWeekDays: React.FC<Props> = observer((props) => {
             addIssuesToView={addIssuesToView}
             readOnly={readOnly}
             handleDragAndDrop={handleDragAndDrop}
+            canEditProperties={canEditProperties}
+            isEpic={isEpic}
           />
         );
       })}
diff --git a/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx b/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
index 020062e4e..b4c3f7ae5 100644
--- a/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/archived-issues.tsx
@@ -1,31 +1,46 @@
 import size from "lodash/size";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane imports
+import { EIssueFilterType, EIssuesStoreType, EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions } from "@plane/types";
-// hooks
 // components
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-import { useIssues } from "@/hooks/store";
-// types
+import { DetailedEmptyState } from "@/components/empty-state";
+// hooks
+import { useIssues, useUserPermissions } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ProjectArchivedEmptyState: React.FC = observer(() => {
   // router
+  const router = useAppRouter();
   const { workspaceSlug, projectId } = useParams();
-  // theme
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { issuesFilter } = useIssues(EIssuesStoreType.ARCHIVED);
-
+  const { allowPermissions } = useUserPermissions();
+  // derived values
   const userFilters = issuesFilter?.issueFilters?.filters;
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
-
   const issueFilterCount = size(
     Object.fromEntries(
       Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
     )
   );
+  const additionalPath = issueFilterCount > 0 ? (activeLayout ?? "list") : undefined;
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const emptyFilterResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/empty-filters/",
+    additionalPath: additionalPath,
+  });
+  const archivedIssuesResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/archived/empty-issues",
+  });
 
   const handleClearAllFilters = () => {
     if (!workspaceSlug || !projectId) return;
@@ -38,20 +53,30 @@ export const ProjectArchivedEmptyState: React.FC = observer(() => {
     });
   };
 
-  const emptyStateType =
-    issueFilterCount > 0 ? EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER : EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES;
-  const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
-
   return (
     <div className="relative h-full w-full overflow-y-auto">
-      <EmptyState
-        type={emptyStateType}
-        additionalPath={additionalPath}
-        primaryButtonLink={
-          issueFilterCount > 0 ? undefined : `/${workspaceSlug}/projects/${projectId}/settings/automations`
-        }
-        secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
-      />
+      {issueFilterCount > 0 ? (
+        <DetailedEmptyState
+          title={t("project_issues.empty_state.issues_empty_filter.title")}
+          assetPath={emptyFilterResolvedPath}
+          secondaryButton={{
+            text: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
+            onClick: handleClearAllFilters,
+            disabled: !canPerformEmptyStateActions,
+          }}
+        />
+      ) : (
+        <DetailedEmptyState
+          title={t("project_issues.empty_state.no_archived_issues.title")}
+          description={t("project_issues.empty_state.no_archived_issues.description")}
+          assetPath={archivedIssuesResolvedPath}
+          primaryButton={{
+            text: t("project_issues.empty_state.no_archived_issues.primary_button.text"),
+            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`),
+            disabled: !canPerformEmptyStateActions,
+          }}
+        />
+      )}
     </div>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/empty-states/cycle.tsx b/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
index 1650bfc98..a29a4f280 100644
--- a/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/cycle.tsx
@@ -5,32 +5,58 @@ import isEmpty from "lodash/isEmpty";
 import size from "lodash/size";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// types
+// plane imports
+import { EIssueFilterType, EIssuesStoreType, EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions, ISearchIssueResponse } from "@plane/types";
-// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-import { useCommandPalette, useCycle, useEventTracker, useIssues } from "@/hooks/store";
+import { DetailedEmptyState } from "@/components/empty-state";
+import { useCommandPalette, useCycle, useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const CycleEmptyState: React.FC = observer(() => {
   // router
   const { workspaceSlug, projectId, cycleId } = useParams();
   // states
   const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { getCycleById } = useCycle();
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.CYCLE);
   const { toggleCreateIssueModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
-
+  const { allowPermissions } = useUserPermissions();
+  // derived values
   const cycleDetails = cycleId ? getCycleById(cycleId.toString()) : undefined;
   const userFilters = issuesFilter?.issueFilters?.filters;
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+  const issueFilterCount = size(
+    Object.fromEntries(
+      Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
+    )
+  );
+  const isCompletedCycleSnapshotAvailable = !isEmpty(cycleDetails?.progress_snapshot ?? {});
+  const isEmptyFilters = issueFilterCount > 0;
+  const isCompletedAndEmpty = isCompletedCycleSnapshotAvailable || cycleDetails?.status?.toLowerCase() === "completed";
+  const additionalPath = activeLayout ?? "list";
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const emptyFilterResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/empty-filters/",
+    additionalPath: additionalPath,
+  });
+  const noIssueResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/cycle-issues/",
+    additionalPath: additionalPath,
+  });
+  const completedNoIssuesResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/cycle/completed-no-issues",
+  });
 
   const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
@@ -43,24 +69,17 @@ export const CycleEmptyState: React.FC = observer(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
-          message: "Issues added to the cycle successfully.",
+          message: "Work items added to the cycle successfully.",
         })
       )
       .catch(() =>
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: "Selected issues could not be added to the cycle. Please try again.",
+          message: "Selected work items could not be added to the cycle. Please try again.",
         })
       );
   };
-  const issueFilterCount = size(
-    Object.fromEntries(
-      Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
-    )
-  );
-
-  const isCompletedCycleSnapshotAvailable = !isEmpty(cycleDetails?.progress_snapshot ?? {});
 
   const handleClearAllFilters = () => {
     if (!workspaceSlug || !projectId || !cycleId) return;
@@ -79,16 +98,6 @@ export const CycleEmptyState: React.FC = observer(() => {
     );
   };
 
-  const isEmptyFilters = issueFilterCount > 0;
-  const isCompletedAndEmpty = isCompletedCycleSnapshotAvailable || cycleDetails?.status?.toLowerCase() === "completed";
-
-  const emptyStateType = isCompletedAndEmpty
-    ? EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES
-    : isEmptyFilters
-      ? EmptyStateType.PROJECT_EMPTY_FILTER
-      : EmptyStateType.PROJECT_CYCLE_NO_ISSUES;
-  const additionalPath = isCompletedAndEmpty ? undefined : activeLayout ?? "list";
-
   return (
     <div className="relative h-full w-full overflow-y-auto">
       <ExistingIssuesListModal
@@ -100,21 +109,42 @@ export const CycleEmptyState: React.FC = observer(() => {
         handleOnSubmit={handleAddIssuesToCycle}
       />
       <div className="grid h-full w-full place-items-center">
-        <EmptyState
-          type={emptyStateType}
-          additionalPath={additionalPath}
-          primaryButtonOnClick={
-            !isCompletedAndEmpty && !isEmptyFilters
-              ? () => {
-                  setTrackElement("Cycle issue empty state");
-                  toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
-                }
-              : undefined
-          }
-          secondaryButtonOnClick={
-            !isCompletedAndEmpty && isEmptyFilters ? handleClearAllFilters : () => setCycleIssuesListModal(true)
-          }
-        />
+        {isCompletedAndEmpty ? (
+          <DetailedEmptyState
+            title={t("project_cycles.empty_state.completed_no_issues.title")}
+            description={t("project_cycles.empty_state.completed_no_issues.description")}
+            assetPath={completedNoIssuesResolvedPath}
+          />
+        ) : isEmptyFilters ? (
+          <DetailedEmptyState
+            title={t("project_issues.empty_state.issues_empty_filter.title")}
+            assetPath={emptyFilterResolvedPath}
+            secondaryButton={{
+              text: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
+              onClick: handleClearAllFilters,
+              disabled: !canPerformEmptyStateActions,
+            }}
+          />
+        ) : (
+          <DetailedEmptyState
+            title={t("project_cycles.empty_state.no_issues.title")}
+            description={t("project_cycles.empty_state.no_issues.description")}
+            assetPath={noIssueResolvedPath}
+            primaryButton={{
+              text: t("project_cycles.empty_state.no_issues.primary_button.text"),
+              onClick: () => {
+                setTrackElement("Cycle issue empty state");
+                toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);
+              },
+              disabled: !canPerformEmptyStateActions,
+            }}
+            secondaryButton={{
+              text: t("project_cycles.empty_state.no_issues.secondary_button.text"),
+              onClick: () => setCycleIssuesListModal(true),
+              disabled: !canPerformEmptyStateActions,
+            }}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/web/core/components/issues/issue-layouts/empty-states/draft-issues.tsx b/web/core/components/issues/issue-layouts/empty-states/draft-issues.tsx
index 88eed515c..bb10176ae 100644
--- a/web/core/components/issues/issue-layouts/empty-states/draft-issues.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/draft-issues.tsx
@@ -1,53 +1,6 @@
-import size from "lodash/size";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-import { IIssueFilterOptions } from "@plane/types";
-// hooks
-// components
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-import { useIssues } from "@/hooks/store";
-// types
 
-export const ProjectDraftEmptyState: React.FC = observer(() => {
-  // router
-  const { workspaceSlug, projectId } = useParams();
-  // store hooks
-  const { issuesFilter } = useIssues(EIssuesStoreType.DRAFT);
-
-  const userFilters = issuesFilter?.issueFilters?.filters;
-  const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
-
-  const issueFilterCount = size(
-    Object.fromEntries(
-      Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
-    )
-  );
-
-  const handleClearAllFilters = () => {
-    if (!workspaceSlug || !projectId) return;
-    const newFilters: IIssueFilterOptions = {};
-    Object.keys(userFilters ?? {}).forEach((key) => {
-      newFilters[key as keyof IIssueFilterOptions] = [];
-    });
-    issuesFilter.updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.FILTERS, {
-      ...newFilters,
-    });
-  };
-
-  const emptyStateType =
-    issueFilterCount > 0 ? EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER : EmptyStateType.PROJECT_DRAFT_NO_ISSUES;
-  const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
-
-  return (
-    <div className="relative h-full w-full overflow-y-auto">
-      <EmptyState
-        type={emptyStateType}
-        additionalPath={additionalPath}
-        secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
-      />
-    </div>
-  );
-});
+// FIXME: Project drafts is deprecated. Remove this component and all the related code.
+export const ProjectDraftEmptyState: React.FC = observer(() => (
+  <div className="relative h-full w-full overflow-y-auto" />
+));
diff --git a/web/core/components/issues/issue-layouts/empty-states/global-view.tsx b/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
index 107770f83..03d4c62ed 100644
--- a/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/global-view.tsx
@@ -1,43 +1,77 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane imports
+import { EIssuesStoreType, EUserPermissionsLevel, EUserWorkspaceRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EMPTY_STATE_DETAILS, EmptyStateType } from "@/constants/empty-state";
-import { EIssuesStoreType } from "@/constants/issue";
+import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 // hooks
-import { useCommandPalette, useEventTracker, useProject } from "@/hooks/store";
-// assets
+import { useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const GlobalViewEmptyState: React.FC = observer(() => {
   const { globalViewId } = useParams();
+  // plane imports
+  const { t } = useTranslation();
   // store hooks
   const { workspaceProjectIds } = useProject();
   const { toggleCreateIssueModal, toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
-
+  const { allowPermissions } = useUserPermissions();
+  // derived values
+  const hasMemberLevelPermission = allowPermissions(
+    [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
   const isDefaultView = ["all-issues", "assigned", "created", "subscribed"].includes(globalViewId?.toString() ?? "");
   const currentView = isDefaultView && globalViewId ? globalViewId : "custom-view";
+  const resolvedCurrentView = currentView?.toString();
+  const noProjectResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/projects" });
+  const globalViewsResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/all-issues/",
+    additionalPath: resolvedCurrentView,
+  });
 
-  const emptyStateType =
-    (workspaceProjectIds ?? []).length > 0 ? `workspace-${currentView}` : EmptyStateType.WORKSPACE_NO_PROJECTS;
-
-  return (
-    <EmptyState
-      type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS}
-      size="sm"
-      primaryButtonOnClick={
-        (workspaceProjectIds ?? []).length > 0
-          ? currentView !== "custom-view" && currentView !== "subscribed"
-            ? () => {
-                setTrackElement("All issues empty state");
-                toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-              }
-            : undefined
-          : () => {
+  if (workspaceProjectIds?.length === 0) {
+    return (
+      <DetailedEmptyState
+        size="sm"
+        title={t("workspace_projects.empty_state.no_projects.title")}
+        description={t("workspace_projects.empty_state.no_projects.description")}
+        assetPath={noProjectResolvedPath}
+        customPrimaryButton={
+          <ComicBoxButton
+            label={t("workspace_projects.empty_state.no_projects.primary_button.text")}
+            title={t("workspace_projects.empty_state.no_projects.primary_button.comic.title")}
+            description={t("workspace_projects.empty_state.no_projects.primary_button.comic.description")}
+            onClick={() => {
               setTrackElement("All issues empty state");
               toggleCreateProjectModal(true);
+            }}
+            disabled={!hasMemberLevelPermission}
+          />
+        }
+      />
+    );
+  }
+
+  return (
+    <DetailedEmptyState
+      size="sm"
+      title={t(`workspace_views.empty_state.${resolvedCurrentView}.title`)}
+      description={t(`workspace_views.empty_state.${resolvedCurrentView}.description`)}
+      assetPath={globalViewsResolvedPath}
+      primaryButton={
+        ["subscribed", "custom-view"].includes(resolvedCurrentView) === false
+          ? {
+              text: t(`workspace_views.empty_state.${resolvedCurrentView}.primary_button.text`),
+              onClick: () => {
+                setTrackElement("All issues empty state");
+                toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
+              },
+              disabled: !hasMemberLevelPermission,
             }
+          : undefined
       }
     />
   );
diff --git a/web/core/components/issues/issue-layouts/empty-states/index.tsx b/web/core/components/issues/issue-layouts/empty-states/index.tsx
index 752e00bfd..decf0e402 100644
--- a/web/core/components/issues/issue-layouts/empty-states/index.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/index.tsx
@@ -1,4 +1,6 @@
-import { EIssuesStoreType } from "@/constants/issue";
+import { EIssuesStoreType } from "@plane/constants";
+// plane web components
+import { TeamEmptyState, TeamViewEmptyState } from "@/plane-web/components/issues/issue-layouts/empty-states";
 // components
 import { ProjectArchivedEmptyState } from "./archived-issues";
 import { CycleEmptyState } from "./cycle";
@@ -6,6 +8,7 @@ import { ProjectDraftEmptyState } from "./draft-issues";
 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";
 
@@ -31,6 +34,12 @@ export const IssueLayoutEmptyState = (props: Props) => {
       return <GlobalViewEmptyState />;
     case EIssuesStoreType.PROFILE:
       return <ProfileViewEmptyState />;
+    case EIssuesStoreType.EPIC:
+      return <ProjectEpicsEmptyState />;
+    case EIssuesStoreType.TEAM:
+      return <TeamEmptyState />;
+    case EIssuesStoreType.TEAM_VIEW:
+      return <TeamViewEmptyState />;
     default:
       return null;
   }
diff --git a/web/core/components/issues/issue-layouts/empty-states/module.tsx b/web/core/components/issues/issue-layouts/empty-states/module.tsx
index 35ed83e00..55edda7fe 100644
--- a/web/core/components/issues/issue-layouts/empty-states/module.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/module.tsx
@@ -4,31 +4,52 @@ import { useState } from "react";
 import size from "lodash/size";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// types
+// plane imports
+import { EIssueFilterType, EIssuesStoreType, EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions, ISearchIssueResponse } from "@plane/types";
-// ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ExistingIssuesListModal } from "@/components/core";
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { DetailedEmptyState } from "@/components/empty-state";
 // hooks
-import { useCommandPalette, useEventTracker, useIssues } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ModuleEmptyState: React.FC = observer(() => {
   // router
   const { workspaceSlug, projectId, moduleId } = useParams();
   // states
   const [moduleIssuesListModal, setModuleIssuesListModal] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { issues, issuesFilter } = useIssues(EIssuesStoreType.MODULE);
   const { toggleCreateIssueModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
-
+  const { allowPermissions } = useUserPermissions();
+  // derived values
   const userFilters = issuesFilter?.issueFilters?.filters;
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
+  const issueFilterCount = size(
+    Object.fromEntries(
+      Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
+    )
+  );
+  const isEmptyFilters = issueFilterCount > 0;
+  const additionalPath = activeLayout ?? "list";
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const emptyFilterResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/empty-filters/",
+    additionalPath: additionalPath,
+  });
+  const moduleIssuesResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/module-issues/",
+    additionalPath: additionalPath,
+  });
 
   const handleAddIssuesToModule = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId || !moduleId) return;
@@ -40,24 +61,18 @@ export const ModuleEmptyState: React.FC = observer(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
-          message: "Issues added to the module successfully.",
+          message: "Work items added to the module successfully.",
         })
       )
       .catch(() =>
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: "Selected issues could not be added to the module. Please try again.",
+          message: "Selected work items could not be added to the module. Please try again.",
         })
       );
   };
 
-  const issueFilterCount = size(
-    Object.fromEntries(
-      Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
-    )
-  );
-
   const handleClearAllFilters = () => {
     if (!workspaceSlug || !projectId || !moduleId) return;
     const newFilters: IIssueFilterOptions = {};
@@ -75,10 +90,6 @@ export const ModuleEmptyState: React.FC = observer(() => {
     );
   };
 
-  const isEmptyFilters = issueFilterCount > 0;
-  const emptyStateType = isEmptyFilters ? EmptyStateType.PROJECT_EMPTY_FILTER : EmptyStateType.PROJECT_MODULE_ISSUES;
-  const additionalPath = activeLayout ?? "list";
-
   return (
     <div className="relative h-full w-full overflow-y-auto">
       <ExistingIssuesListModal
@@ -90,19 +101,36 @@ export const ModuleEmptyState: React.FC = observer(() => {
         handleOnSubmit={handleAddIssuesToModule}
       />
       <div className="grid h-full w-full place-items-center">
-        <EmptyState
-          type={emptyStateType}
-          additionalPath={additionalPath}
-          primaryButtonOnClick={
-            isEmptyFilters
-              ? undefined
-              : () => {
-                  setTrackElement("Module issue empty state");
-                  toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
-                }
-          }
-          secondaryButtonOnClick={isEmptyFilters ? handleClearAllFilters : () => setModuleIssuesListModal(true)}
-        />
+        {isEmptyFilters ? (
+          <DetailedEmptyState
+            title={t("project_issues.empty_state.issues_empty_filter.title")}
+            assetPath={emptyFilterResolvedPath}
+            secondaryButton={{
+              text: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
+              onClick: handleClearAllFilters,
+              disabled: !canPerformEmptyStateActions,
+            }}
+          />
+        ) : (
+          <DetailedEmptyState
+            title={t("project_module.empty_state.no_issues.title")}
+            description={t("project_module.empty_state.no_issues.description")}
+            assetPath={moduleIssuesResolvedPath}
+            primaryButton={{
+              text: t("project_module.empty_state.no_issues.primary_button.text"),
+              onClick: () => {
+                setTrackElement("Module issue empty state");
+                toggleCreateIssueModal(true, EIssuesStoreType.MODULE);
+              },
+              disabled: !canPerformEmptyStateActions,
+            }}
+            secondaryButton={{
+              text: t("project_module.empty_state.no_issues.secondary_button.text"),
+              onClick: () => setModuleIssuesListModal(true),
+              disabled: !canPerformEmptyStateActions,
+            }}
+          />
+        )}
       </div>
     </div>
   );
diff --git a/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx b/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
index 12a31df83..d67aad491 100644
--- a/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/profile-view.tsx
@@ -1,19 +1,30 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { useTranslation } from "@plane/i18n";
+import { DetailedEmptyState } from "@/components/empty-state";
 // constants
-import { EMPTY_STATE_DETAILS } from "@/constants/empty-state";
-
-// assets
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
+// TODO: If projectViewId changes, everything breaks. Figure out a better way to handle this.
 export const ProfileViewEmptyState: React.FC = observer(() => {
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { profileViewId } = useParams();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/profile/",
+    additionalPath: profileViewId?.toString(),
+  });
 
   if (!profileViewId) return null;
 
-  const emptyStateType = `profile-${profileViewId.toString()}`;
-
-  return <EmptyState type={emptyStateType as keyof typeof EMPTY_STATE_DETAILS} size="sm" />;
+  return (
+    <DetailedEmptyState
+      title={t(`profile.empty_state.${profileViewId.toString()}.title`)}
+      description={t(`profile.empty_state.${profileViewId.toString()}.description`)}
+      assetPath={resolvedPath}
+    />
+  );
 });
diff --git a/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx b/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx
new file mode 100644
index 000000000..e8bf3a9d5
--- /dev/null
+++ b/web/core/components/issues/issue-layouts/empty-states/project-epic.tsx
@@ -0,0 +1 @@
+export const ProjectEpicsEmptyState: React.FC = () => <></>;
diff --git a/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx b/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
index 5ec86340d..109b67c28 100644
--- a/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/project-issues.tsx
@@ -1,33 +1,46 @@
 import size from "lodash/size";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// types
+// plane imports
+import { EIssueFilterType, EIssuesStoreType, EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions } from "@plane/types";
 // components
-import { EmptyState } from "@/components/empty-state";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 // hooks
-import { useCommandPalette, useEventTracker, useIssues } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ProjectEmptyState: React.FC = observer(() => {
   // router
   const { workspaceSlug, projectId } = useParams();
+  // plane imports
+  const { t } = useTranslation();
   // store hooks
   const { toggleCreateIssueModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
-
   const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
-
+  const { allowPermissions } = useUserPermissions();
+  // derived values
   const userFilters = issuesFilter?.issueFilters?.filters;
   const activeLayout = issuesFilter?.issueFilters?.displayFilters?.layout;
-
   const issueFilterCount = size(
     Object.fromEntries(
       Object.entries(userFilters ?? {}).filter(([, value]) => value && Array.isArray(value) && value.length > 0)
     )
   );
+  const additionalPath = issueFilterCount > 0 ? (activeLayout ?? "list") : undefined;
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const emptyFilterResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/empty-filters/",
+    additionalPath: additionalPath,
+  });
+  const projectIssuesResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/onboarding/issues",
+  });
 
   const handleClearAllFilters = () => {
     if (!workspaceSlug || !projectId) return;
@@ -40,24 +53,37 @@ export const ProjectEmptyState: React.FC = observer(() => {
     });
   };
 
-  const emptyStateType = issueFilterCount > 0 ? EmptyStateType.PROJECT_EMPTY_FILTER : EmptyStateType.PROJECT_NO_ISSUES;
-  const additionalPath = issueFilterCount > 0 ? activeLayout ?? "list" : undefined;
-
   return (
     <div className="relative h-full w-full overflow-y-auto">
-      <EmptyState
-        type={emptyStateType}
-        additionalPath={additionalPath}
-        primaryButtonOnClick={
-          issueFilterCount > 0
-            ? undefined
-            : () => {
+      {issueFilterCount > 0 ? (
+        <DetailedEmptyState
+          title={t("project_issues.empty_state.issues_empty_filter.title")}
+          assetPath={emptyFilterResolvedPath}
+          secondaryButton={{
+            text: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
+            onClick: handleClearAllFilters,
+            disabled: !canPerformEmptyStateActions,
+          }}
+        />
+      ) : (
+        <DetailedEmptyState
+          title={t("project_issues.empty_state.no_issues.title")}
+          description={t("project_issues.empty_state.no_issues.description")}
+          assetPath={projectIssuesResolvedPath}
+          customPrimaryButton={
+            <ComicBoxButton
+              label={t("project_issues.empty_state.no_issues.primary_button.text")}
+              title={t("project_issues.empty_state.no_issues.primary_button.comic.title")}
+              description={t("project_issues.empty_state.no_issues.primary_button.comic.description")}
+              onClick={() => {
                 setTrackElement("Project issue empty state");
                 toggleCreateIssueModal(true, EIssuesStoreType.PROJECT);
-              }
-        }
-        secondaryButtonOnClick={issueFilterCount > 0 ? handleClearAllFilters : undefined}
-      />
+              }}
+              disabled={!canPerformEmptyStateActions}
+            />
+          }
+        />
+      )}
     </div>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/empty-states/project-view.tsx b/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
index 160834ea7..dd1760452 100644
--- a/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
+++ b/web/core/components/issues/issue-layouts/empty-states/project-view.tsx
@@ -1,12 +1,11 @@
 import { observer } from "mobx-react";
 import { PlusIcon } from "lucide-react";
 // components
+import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { EmptyState } from "@/components/common";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useCommandPalette, useEventTracker, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // assets
 import emptyIssue from "@/public/empty-state/issue.svg";
 
@@ -25,16 +24,16 @@ export const ProjectViewEmptyState: React.FC = observer(() => {
   return (
     <div className="grid h-full w-full place-items-center">
       <EmptyState
-        title="View issues will appear here"
-        description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
+        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."
         image={emptyIssue}
         primaryButton={
           isCreatingIssueAllowed
             ? {
-                text: "New issue",
+                text: "New work item",
                 icon: <PlusIcon className="h-3 w-3" strokeWidth={2} />,
                 onClick: () => {
-                  setTrackElement("View issue empty state");
+                  setTrackElement("View work item empty state");
                   toggleCreateIssueModal(true, EIssuesStoreType.PROJECT_VIEW);
                 },
               }
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
index dcc6c15e5..a64626047 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 // icons
 import { X } from "lucide-react";
 // helpers
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
 // constants
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
index 268358efe..03b659d93 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -1,6 +1,8 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // types
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
 // components
 import { Tag } from "@plane/ui";
@@ -22,7 +24,6 @@ import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
 import { useUserPermissions } from "@/hooks/store";
 // plane web components
 import { AppliedIssueTypeFilters } from "@/plane-web/components/issues";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   appliedFilters: IIssueFilterOptions;
@@ -49,6 +50,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
   } = props;
   // store hooks
   const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
 
   if (!appliedFilters) return null;
 
@@ -134,6 +136,13 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
                 values={value}
               />
             )}
+            {filterKey === "team_project" && (
+              <AppliedProjectFilters
+                editable={isEditingAllowed}
+                handleRemove={(val) => handleRemoveFilter("team_project", val)}
+                values={value}
+              />
+            )}
             {isEditingAllowed && (
               <button
                 type="button"
@@ -149,7 +158,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
       {isEditingAllowed && (
         <button type="button" onClick={handleClearAllFilters}>
           <Tag>
-            Clear all
+            {t("common.clear_all")}
             <X size={12} strokeWidth={2} />
           </Tag>
         </button>
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
index 92a9d8db3..91d720776 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
 import { AppliedFiltersList } from "@/components/issues";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
 // types
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
index e9f6302dc..2628fe41d 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@@ -1,10 +1,10 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
 import { Header, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
 // types
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
index ba0777eea..a596b4248 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
 import { AppliedFiltersList } from "@/components/issues";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
 // types
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
index 0b1003260..4aee53f32 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -6,31 +6,34 @@ import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
+import {
+  DEFAULT_GLOBAL_VIEWS_LIST,
+  EIssueFilterType,
+  EIssuesStoreType,
+  EViewAccess,
+  GLOBAL_VIEW_UPDATED,
+ EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IIssueFilterOptions, TStaticViewTypes } from "@plane/types";
 //ui
 // components
-import { Header, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant, Loader } from "@plane/ui";
 import { AppliedFiltersList } from "@/components/issues";
 import { UpdateViewComponent } from "@/components/views/update-view-component";
 import { CreateUpdateWorkspaceViewModal } from "@/components/workspace";
 // constants
-import { GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-import { EViewAccess } from "@/constants/views";
-import { DEFAULT_GLOBAL_VIEWS_LIST } from "@/constants/workspace";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useEventTracker, useGlobalView, useIssues, useLabel, useUser, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 import { getAreFiltersEqual } from "../../../utils";
 
 type Props = {
   globalViewId: string;
+  isLoading?: boolean;
 };
 
 export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
-  const { globalViewId } = props;
+  const { globalViewId, isLoading = false } = props;
   // router
   const { workspaceSlug } = useParams();
   // store hooks
@@ -154,14 +157,22 @@ export const GlobalViewsAppliedFiltersRoot = observer((props: Props) => {
         }}
       />
 
-      <AppliedFiltersList
-        labels={workspaceLabels ?? undefined}
-        appliedFilters={appliedFilters ?? {}}
-        handleClearAllFilters={handleClearAllFilters}
-        handleRemoveFilter={handleRemoveFilter}
-        disableEditing={isLocked}
-        alwaysAllowEditing
-      />
+      {isLoading ? (
+        <Loader className="flex flex-wrap items-stretch gap-2 bg-custom-background-100 truncate my-auto">
+          <Loader.Item height="36px" width="150px" />
+          <Loader.Item height="36px" width="100px" />
+          <Loader.Item height="36px" width="300px" />
+        </Loader>
+      ) : (
+        <AppliedFiltersList
+          labels={workspaceLabels ?? undefined}
+          appliedFilters={appliedFilters ?? {}}
+          handleClearAllFilters={handleClearAllFilters}
+          handleRemoveFilter={handleRemoveFilter}
+          disableEditing={isLocked}
+          alwaysAllowEditing
+        />
+      )}
 
       {!isDefaultView ? (
         <UpdateViewComponent
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
index 13f0fad8a..10820d354 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@@ -1,10 +1,10 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
 import { Header, EHeaderVariant } from "@plane/ui";
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel, useProjectState } from "@/hooks/store";
 // components
 // types
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
index fe1af5fb2..eebf4fd9d 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/profile-issues-root.tsx
@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import { IIssueFilterOptions } from "@plane/types";
 // hooks
 // components
 import { AppliedFiltersList } from "@/components/issues";
 // types
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useLabel } from "@/hooks/store";
 import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
 
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
index 57175ae1d..d44dc6dd8 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@@ -1,29 +1,31 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// types
+import { EIssueFilterType, EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IIssueFilterOptions } from "@plane/types";
-// hooks
-// components
+// ui
 import { Header, EHeaderVariant } from "@plane/ui";
+// components
 import { AppliedFiltersList, SaveFilterView } from "@/components/issues";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
+// hooks
 import { useLabel, useProjectState, useUserPermissions } from "@/hooks/store";
 import { useIssues } from "@/hooks/store/use-issues";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// plane web constants
 
-// types
+type TProjectAppliedFiltersRootProps = {
+  storeType?: EIssuesStoreType.PROJECT | EIssuesStoreType.EPIC;
+};
 
-export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
+export const ProjectAppliedFiltersRoot: React.FC<TProjectAppliedFiltersRootProps> = observer((props) => {
+  const { storeType = EIssuesStoreType.PROJECT } = props;
   // router
-  const { workspaceSlug, projectId } = useParams() as {
-    workspaceSlug: string;
-    projectId: string;
-  };
+  const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { projectLabels } = useLabel();
   const {
     issuesFilter: { issueFilters, updateFilters },
-  } = useIssues(EIssuesStoreType.PROJECT);
+  } = useIssues(storeType);
   const { allowPermissions } = useUserPermissions();
 
   const { projectStates } = useProjectState();
@@ -84,8 +86,8 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
       <Header.RightItem>
         {isEditingAllowed && (
           <SaveFilterView
-            workspaceSlug={workspaceSlug}
-            projectId={projectId}
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
             filterParams={{
               filters: appliedFilters,
               display_filters: issueFilters?.displayFilters,
diff --git a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
index 395d6044a..6812c8119 100644
--- a/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/core/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -6,6 +6,13 @@ import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
+import {
+  EIssueFilterType,
+  EIssuesStoreType,
+  EViewAccess,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
 import { IIssueFilterOptions } from "@plane/types";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
@@ -13,11 +20,8 @@ import { AppliedFiltersList } from "@/components/issues";
 import { CreateUpdateProjectViewModal } from "@/components/views";
 import { UpdateViewComponent } from "@/components/views/update-view-component";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-import { EViewAccess } from "@/constants/views";
 // hooks
 import { useIssues, useLabel, useProjectState, useProjectView, useUser, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 import { getAreFiltersEqual } from "../../../utils";
 
 export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
index 604b12581..12338658e 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -1,7 +1,12 @@
 import React from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueGroupByOptions } from "@plane/types";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  ILayoutDisplayFiltersOptions,
+  TIssueGroupByOptions,
+} from "@plane/types";
 // components
 import {
   FilterDisplayProperties,
@@ -10,8 +15,6 @@ import {
   FilterOrderBy,
   FilterSubGroupBy,
 } from "@/components/issues";
-// types
-import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
 
 type Props = {
   displayFilters: IIssueDisplayFilterOptions | undefined;
@@ -22,6 +25,7 @@ type Props = {
   ignoreGroupedFilters?: Partial<TIssueGroupByOptions>[];
   cycleViewDisabled?: boolean;
   moduleViewDisabled?: boolean;
+  isEpic?: boolean;
 };
 
 export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
@@ -34,6 +38,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
     ignoreGroupedFilters = [],
     cycleViewDisabled = false,
     moduleViewDisabled = false,
+    isEpic = false,
   } = props;
 
   const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
@@ -58,6 +63,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
             handleUpdate={handleDisplayPropertiesUpdate}
             cycleViewDisabled={cycleViewDisabled}
             moduleViewDisabled={moduleViewDisabled}
+            isEpic={isEpic}
           />
         </div>
       )}
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
index 1e6078382..9d8bd8aa1 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
@@ -1,10 +1,12 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane constants
+import { ISSUE_DISPLAY_PROPERTIES } from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayProperties } from "@plane/types";
-// constants
-import { ISSUE_DISPLAY_PROPERTIES } from "@/constants/issue";
 // plane web helpers
 import { shouldRenderDisplayProperty } from "@/plane-web/helpers/issue-filter.helper";
 // components
@@ -16,6 +18,7 @@ type Props = {
   handleUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
   cycleViewDisabled?: boolean;
   moduleViewDisabled?: boolean;
+  isEpic?: boolean;
 };
 
 export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
@@ -25,7 +28,10 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
     handleUpdate,
     cycleViewDisabled = false,
     moduleViewDisabled = false,
+    isEpic = false,
   } = props;
+  // hooks
+  const { t } = useTranslation();
   // router
   const { workspaceSlug, projectId: routerProjectId } = useParams();
   // states
@@ -45,12 +51,17 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
       default:
         return shouldRenderDisplayProperty({ workspaceSlug: workspaceSlug?.toString(), projectId, key: property.key });
     }
+  }).map((property) => {
+    if (isEpic && property.key === "sub_issue_count") {
+      return { ...property, title: "Work item count" };
+    }
+    return property;
   });
 
   return (
     <>
       <FilterHeader
-        title="Display Properties"
+        title={t("issue.display.properties.label")}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -72,7 +83,7 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
                   })
                 }
               >
-                {displayProperty.title}
+                {t(displayProperty.titleTranslationKey)}
               </button>
             </>
           ))}
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
index a5067377d..51780d227 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
@@ -1,12 +1,24 @@
 import React from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 import { IIssueDisplayFilterOptions, TIssueExtraOptions } from "@plane/types";
-
 // components
 import { FilterOption } from "@/components/issues";
-// types
-import { ISSUE_EXTRA_OPTIONS } from "@/constants/issue";
+
 // 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: {
@@ -19,7 +31,8 @@ type Props = {
 
 export const FilterExtraOptions: React.FC<Props> = observer((props) => {
   const { selectedExtraOptions, handleUpdate, enabledExtraOptions } = props;
-
+  // hooks
+  const { t } = useTranslation();
   const isExtraOptionEnabled = (option: TIssueExtraOptions) => enabledExtraOptions.includes(option);
 
   return (
@@ -32,7 +45,7 @@ export const FilterExtraOptions: React.FC<Props> = observer((props) => {
             key={option.key}
             isChecked={selectedExtraOptions?.[option.key] ? true : false}
             onClick={() => handleUpdate(option.key, !selectedExtraOptions?.[option.key])}
-            title={option.title}
+            title={t(option.titleTranslationKey)}
           />
         );
       })}
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
index c5adff75b..2622eae9d 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "@plane/types";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
-// types
-import { ISSUE_GROUP_BY_OPTIONS } from "@/constants/issue";
-// constants
 
 type Props = {
   displayFilters: IIssueDisplayFilterOptions | undefined;
@@ -16,7 +15,8 @@ type Props = {
 
 export const FilterGroupBy: React.FC<Props> = observer((props) => {
   const { displayFilters, groupByOptions, handleUpdate, ignoreGroupedFilters } = props;
-
+  // hooks
+  const { t } = useTranslation();
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
   const selectedGroupBy = displayFilters?.group_by ?? null;
@@ -25,7 +25,7 @@ export const FilterGroupBy: React.FC<Props> = observer((props) => {
   return (
     <>
       <FilterHeader
-        title="Group by"
+        title={t("common.group_by")}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -45,7 +45,7 @@ export const FilterGroupBy: React.FC<Props> = observer((props) => {
                 key={groupBy?.key}
                 isChecked={selectedGroupBy === groupBy?.key ? true : false}
                 onClick={() => handleUpdate(groupBy.key)}
-                title={groupBy.title}
+                title={t(groupBy.titleTranslationKey)}
                 multiple={false}
               />
             );
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx
index f3c0fdf13..d3d106a93 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/issue-grouping.tsx
@@ -1,20 +1,27 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { TIssueGroupingFilters } from "@plane/types";
-
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
-// types
-import { ISSUE_FILTER_OPTIONS } from "@/constants/issue";
 // constants
 
 type Props = {
   selectedIssueType: TIssueGroupingFilters | undefined;
   handleUpdate: (val: TIssueGroupingFilters) => void;
+  isEpic?: boolean;
 };
 
+const ISSUE_FILTER_OPTIONS: {
+  key: TIssueGroupingFilters;
+  title: string;
+}[] = [
+  { key: null, title: "All" },
+  { key: "active", title: "Active" },
+  { key: "backlog", title: "Backlog" },
+];
+
 export const FilterIssueGrouping: React.FC<Props> = observer((props) => {
-  const { selectedIssueType, handleUpdate } = props;
+  const { selectedIssueType, handleUpdate, isEpic = false } = props;
 
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
 
@@ -23,7 +30,7 @@ export const FilterIssueGrouping: React.FC<Props> = observer((props) => {
   return (
     <>
       <FilterHeader
-        title="Issue Grouping"
+        title={`${isEpic ? "Epic" : "Work item"} Grouping`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -34,7 +41,7 @@ export const FilterIssueGrouping: React.FC<Props> = observer((props) => {
               key={issueType?.key}
               isChecked={activeIssueType === issueType?.key ? true : false}
               onClick={() => handleUpdate(issueType?.key)}
-              title={issueType.title}
+              title={`${issueType.title} ${isEpic ? "Epics" : "Work items"}`}
               multiple={false}
             />
           ))}
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
index a9ff00b3d..5c4a6ba50 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { ISSUE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssueOrderByOptions } from "@plane/types";
 
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
-// types
-import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
-// constants
 
 type Props = {
   selectedOrderBy: TIssueOrderByOptions | undefined;
@@ -16,6 +15,8 @@ type Props = {
 
 export const FilterOrderBy: React.FC<Props> = observer((props) => {
   const { selectedOrderBy, handleUpdate, orderByOptions } = props;
+  // hooks
+  const { t } = useTranslation();
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
 
@@ -24,7 +25,7 @@ export const FilterOrderBy: React.FC<Props> = observer((props) => {
   return (
     <>
       <FilterHeader
-        title="Order by"
+        title={t("common.order_by.label")}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -35,7 +36,7 @@ export const FilterOrderBy: React.FC<Props> = observer((props) => {
               key={orderBy?.key}
               isChecked={activeOrderBy === orderBy?.key ? true : false}
               onClick={() => handleUpdate(orderBy.key)}
-              title={orderBy.title}
+              title={t(orderBy.titleTranslationKey)}
               multiple={false}
             />
           ))}
diff --git a/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx b/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
index 56dd86f36..e19f6d011 100644
--- a/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { ISSUE_GROUP_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueDisplayFilterOptions, TIssueGroupByOptions } from "@plane/types";
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
-// types
-import { ISSUE_GROUP_BY_OPTIONS } from "@/constants/issue";
 // constants
 
 type Props = {
@@ -15,6 +15,9 @@ type Props = {
 };
 
 export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
+  // hooks
+  const { t } = useTranslation();
+
   const { displayFilters, handleUpdate, subGroupByOptions, ignoreGroupedFilters } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -40,7 +43,7 @@ export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
                 key={subGroupBy?.key}
                 isChecked={selectedSubGroupBy === subGroupBy?.key ? true : false}
                 onClick={() => handleUpdate(subGroupBy.key)}
-                title={subGroupBy.title}
+                title={t(subGroupBy.titleTranslationKey)}
                 multiple={false}
               />
             );
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
index 0bf180aef..7791efc16 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@@ -2,8 +2,17 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Search, X } from "lucide-react";
+// i18n
+import { EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
-import { IIssueDisplayFilterOptions, IIssueFilterOptions, IIssueLabel, IState } from "@plane/types";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueFilterOptions,
+  IIssueLabel,
+  ILayoutDisplayFiltersOptions,
+  IState,
+} from "@plane/types";
 // components
 import {
   FilterAssignees,
@@ -20,12 +29,11 @@ import {
   FilterModule,
   FilterIssueGrouping,
 } from "@/components/issues";
-// constants
-import { ILayoutDisplayFiltersOptions } from "@/constants/issue";
 // hooks
+import { useMember } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
-import { FilterIssueTypes } from "@/plane-web/components/issues";
+import { FilterIssueTypes, FilterTeamProjects } from "@/plane-web/components/issues";
 
 type Props = {
   filters: IIssueFilterOptions;
@@ -33,11 +41,13 @@ type Props = {
   handleDisplayFiltersUpdate?: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
   handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
   layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+  projectId?: string;
   labels?: IIssueLabel[] | undefined;
   memberIds?: string[] | undefined;
   states?: IState[] | undefined;
   cycleViewDisabled?: boolean;
   moduleViewDisabled?: boolean;
+  isEpic?: boolean;
 };
 
 export const FilterSelection: React.FC<Props> = observer((props) => {
@@ -47,18 +57,36 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
     handleDisplayFiltersUpdate,
     handleFiltersUpdate,
     layoutDisplayFiltersOptions,
+    projectId,
     labels,
     memberIds,
     states,
     cycleViewDisabled = false,
     moduleViewDisabled = false,
+    isEpic = false,
   } = props;
+
+  // i18n
+  const { t } = useTranslation();
   // hooks
   const { isMobile } = usePlatformOS();
   const { moduleId, cycleId } = useParams();
+  const {
+    project: { getProjectMemberDetails },
+  } = useMember();
   // states
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
 
+  // filter guests from assignees
+  const assigneeIds = memberIds?.filter((id) => {
+    if (projectId) {
+      const memeberDetails = getProjectMemberDetails(id, projectId);
+      const isGuest = (memeberDetails?.role || EUserPermissions.GUEST) === EUserPermissions.GUEST;
+      if (isGuest && memeberDetails) return false;
+    }
+    return true;
+  });
+
   const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
 
   const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
@@ -72,7 +100,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
           <input
             type="text"
             className="w-full bg-custom-background-90 outline-none placeholder:text-custom-text-400"
-            placeholder="Search"
+            placeholder={t("common.search.label")}
             value={filtersSearchQuery}
             onChange={(e) => setFiltersSearchQuery(e.target.value)}
             autoFocus={!isMobile}
@@ -134,7 +162,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
             <FilterAssignees
               appliedFilters={filters.assignees ?? null}
               handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
-              memberIds={memberIds}
+              memberIds={assigneeIds}
               searchQuery={filtersSearchQuery}
             />
           </div>
@@ -208,6 +236,18 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
             />
           </div>
         )}
+
+        {/* team project */}
+        {isFilterEnabled("team_project") && (
+          <div className="py-2">
+            <FilterTeamProjects
+              appliedFilters={filters.team_project ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("team_project", val)}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
         {/* issue type */}
         {isDisplayFilterEnabled("type") && displayFilters && handleDisplayFiltersUpdate && (
           <div className="py-2">
@@ -218,6 +258,7 @@ export const FilterSelection: React.FC<Props> = observer((props) => {
                   type: val,
                 })
               }
+              isEpic={isEpic}
             />
           </div>
         )}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
index 609bb37f4..dee916534 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -2,16 +2,14 @@
 
 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/ui";
 
 // components
 import { FilterHeader, FilterOption } from "@/components/issues";
-
-// constants
-import { ISSUE_PRIORITIES } from "@/constants/issue";
-
 type Props = {
   appliedFilters: string[] | null;
   handleUpdate: (val: string) => void;
@@ -20,17 +18,17 @@ type Props = {
 
 export const FilterPriority: React.FC<Props> = observer((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})` : ""}`}
+        title={`Priority ${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
         isPreviewEnabled={previewEnabled}
         handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
       />
@@ -47,7 +45,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
index c9f4ae22e..c667696e7 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -1,11 +1,10 @@
 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";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -15,7 +14,6 @@ type Props = {
 
 export const FilterStartDate: React.FC<Props> = observer((props) => {
   const { appliedFilters, handleUpdate, searchQuery } = props;
-
   const [previewEnabled, setPreviewEnabled] = useState(true);
   const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
 
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
index 1ca11eec6..cdad192b6 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -2,12 +2,11 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-// components
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
 import { StateGroupIcon } from "@plane/ui";
+// components
 import { FilterHeader, FilterOption } from "@/components/issues";
-// icons
-import { STATE_GROUPS } from "@/constants/state";
-// constants
 
 type Props = {
   appliedFilters: string[] | null;
diff --git a/web/core/components/issues/issue-layouts/filters/header/filters/target-date.tsx b/web/core/components/issues/issue-layouts/filters/header/filters/target-date.tsx
index d4ef89584..bfd677681 100644
--- a/web/core/components/issues/issue-layouts/filters/header/filters/target-date.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/filters/target-date.tsx
@@ -1,11 +1,10 @@
 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";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
 
 type Props = {
   appliedFilters: string[] | null;
diff --git a/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
index 6eb8a0c6a..53d32aaea 100644
--- a/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
+++ b/web/core/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -1,12 +1,14 @@
 "use client";
 
 import React from "react";
-
+// plane constants
+import { EIssueLayoutTypes, ISSUE_LAYOUTS } from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Tooltip } from "@plane/ui";
 // types
-// constants
-import { EIssueLayoutTypes, ISSUE_LAYOUTS } from "@/constants/issue";
+import { IssueLayoutIcon } from "@/components/issues";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // hooks
 
@@ -19,7 +21,7 @@ type Props = {
 export const LayoutSelection: React.FC<Props> = (props) => {
   const { layouts, onChange, selectedLayout } = props;
   const { isMobile } = usePlatformOS();
-
+  const { t } = useTranslation();
   const handleOnChange = (layoutKey: EIssueLayoutTypes) => {
     if (selectedLayout !== layoutKey) {
       onChange(layoutKey);
@@ -29,7 +31,7 @@ export const LayoutSelection: React.FC<Props> = (props) => {
   return (
     <div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
       {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
-        <Tooltip key={layout.key} tooltipContent={layout.title} isMobile={isMobile}>
+        <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
           <button
             type="button"
             className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
@@ -37,7 +39,8 @@ export const LayoutSelection: React.FC<Props> = (props) => {
             }`}
             onClick={() => handleOnChange(layout.key)}
           >
-            <layout.icon
+            <IssueLayoutIcon
+              layout={layout.key}
               size={14}
               strokeWidth={2}
               className={`h-3.5 w-3.5 ${
diff --git a/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx b/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index af4b24470..43410d135 100644
--- a/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
+++ b/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
@@ -2,7 +2,14 @@ import React, { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane constants
-import { ALL_ISSUES } from "@plane/constants";
+import {
+  ALL_ISSUES,
+  EIssueLayoutTypes,
+  EIssuesStoreType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 import { setToast, TOAST_TYPE } from "@plane/ui";
 // hooks
@@ -10,7 +17,6 @@ import { GanttChartRoot, IBlockUpdateData, IssueGanttSidebar } from "@/component
 import { ETimeLineTypeType, TimeLineTypeContext } from "@/components/gantt-chart/contexts";
 import { QuickAddIssueRoot, IssueGanttBlock, GanttQuickAddIssueButton } from "@/components/issues";
 //constants
-import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 //hooks
@@ -19,7 +25,6 @@ import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 import { useTimeLineChart } from "@/hooks/use-timeline-chart";
 // plane web hooks
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-status";
 
 import { IssueLayoutHOC } from "../issue-layout-HOC";
@@ -27,16 +32,19 @@ import { IssueLayoutHOC } from "../issue-layout-HOC";
 interface IBaseGanttRoot {
   viewId?: string | undefined;
   isCompletedCycle?: boolean;
+  isEpic?: boolean;
 }
 
 export type GanttStoreType =
   | EIssuesStoreType.PROJECT
   | EIssuesStoreType.MODULE
   | EIssuesStoreType.CYCLE
-  | EIssuesStoreType.PROJECT_VIEW;
+  | EIssuesStoreType.PROJECT_VIEW
+  | EIssuesStoreType.EPIC;
 
 export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGanttRoot) => {
-  const { viewId, isCompletedCycle = false } = props;
+  const { viewId, isCompletedCycle = false, isEpic = false } = props;
+  const { t } = useTranslation();
   // router
   const { workspaceSlug, projectId } = useParams();
 
@@ -92,8 +100,8 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
       issues.updateIssueDates(workspaceSlug.toString(), projectId.toString(), updates).catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Error while updating Issue Dates, Please try again Later",
+          title: t("toast.error"),
+          message: "Error while updating work item dates, Please try again Later",
         });
       }),
     [issues]
@@ -110,6 +118,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
           target_date: renderFormattedPayloadDate(targetDate),
         }}
         quickAddCallback={quickAddIssue}
+        isEpic={isEpic}
       />
     ) : undefined;
 
@@ -119,12 +128,12 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
         <div className="h-full w-full">
           <GanttChartRoot
             border={false}
-            title="Issues"
-            loaderTitle="Issues"
+            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} />}
-            sidebarToRender={(props) => <IssueGanttSidebar {...props} showAllBlocks />}
+            blockToRender={(data: TIssue) => <IssueGanttBlock issueId={data.id} isEpic={isEpic} />}
+            sidebarToRender={(props) => <IssueGanttSidebar {...props} showAllBlocks isEpic={isEpic} />}
             enableBlockLeftResize={isAllowed}
             enableBlockRightResize={isAllowed}
             enableBlockMove={isAllowed}
@@ -136,6 +145,7 @@ export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGan
             canLoadMoreBlocks={nextPageResults}
             updateBlockDates={updateBlockDates}
             showAllBlocks
+            isEpic={isEpic}
           />
         </div>
       </TimeLineTypeContext.Provider>
diff --git a/web/core/components/issues/issue-layouts/gantt/blocks.tsx b/web/core/components/issues/issue-layouts/gantt/blocks.tsx
index efb2b6bd1..f74e42232 100644
--- a/web/core/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/web/core/components/issues/issue-layouts/gantt/blocks.tsx
@@ -8,8 +8,9 @@ import { Tooltip, ControlLink } from "@plane/ui";
 import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
-import { useIssueDetail, useIssues, useProjectState } from "@/hooks/store";
+import { useIssueDetail, useIssues, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -21,10 +22,11 @@ import { GanttStoreType } from "./base-gantt-root";
 
 type Props = {
   issueId: string;
+  isEpic?: boolean;
 };
 
 export const IssueGanttBlock: React.FC<Props> = observer((props) => {
-  const { issueId } = props;
+  const { issueId, isEpic } = props;
   // router
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
   const workspaceSlug = routerWorkspaceSlug?.toString();
@@ -35,7 +37,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
   } = useIssueDetail();
   // hooks
   const { isMobile } = usePlatformOS();
-  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
 
   // derived values
   const issueDetails = getIssueById(issueId);
@@ -78,7 +80,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
 
 // rendering issues on gantt sidebar
 export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
-  const { issueId } = props;
+  const { issueId, isEpic = false } = props;
   // router
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
   const workspaceSlug = routerWorkspaceSlug?.toString();
@@ -89,12 +91,14 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
   const { isMobile } = usePlatformOS();
   const storeType = useIssueStoreType() as GanttStoreType;
   const { issuesFilter } = useIssues(storeType);
+  const { getProjectIdentifierById } = useProject();
 
   // handlers
-  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
 
   // derived values
   const issueDetails = getIssueById(issueId);
+  const projectIdentifier = getProjectIdentifierById(issueDetails?.project_id);
 
   const handleIssuePeekOverview = (e: any) => {
     e.stopPropagation(true);
@@ -102,10 +106,19 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
     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={`/${workspaceSlug}/projects/${issueDetails?.project_id}/issues/${issueDetails?.id}`}
+      href={workItemLink}
       onClick={handleIssuePeekOverview}
       className="line-clamp-1 w-full cursor-pointer text-sm text-custom-text-100"
       disabled={!!issueDetails?.tempId}
diff --git a/web/core/components/issues/issue-layouts/group-drag-overlay.tsx b/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
index 822b2e0df..df62e37f6 100644
--- a/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
+++ b/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
@@ -1,12 +1,13 @@
+import { useRef } from "react";
 import { AlertCircle } from "lucide-react";
-// Plane
+// plane imports
+import { ISSUE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssueOrderByOptions } from "@plane/types";
-// constants
-import { ISSUE_ORDER_BY_OPTIONS } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
-// Plane-web
-import { WorkFlowDisabledMessage } from "@/plane-web/components/workflow";
+// plane web imports
+import { WorkFlowDisabledOverlay } from "@/plane-web/components/workflow";
 
 type Props = {
   dragColumnOrientation: "justify-start" | "justify-center" | "justify-end";
@@ -16,6 +17,7 @@ type Props = {
   dropErrorMessage?: string;
   orderBy: TIssueOrderByOptions | undefined;
   isDraggingOverColumn: boolean;
+  isEpic?: boolean;
 };
 
 export const GroupDragOverlay = (props: Props) => {
@@ -27,34 +29,42 @@ export const GroupDragOverlay = (props: Props) => {
     dropErrorMessage,
     orderBy,
     isDraggingOverColumn,
+    isEpic = false,
   } = props;
+  // hooks
+  const { t } = useTranslation();
+  // refs
+  const messageContainerRef = useRef<HTMLDivElement>(null);
 
   const shouldOverlayBeVisible = isDraggingOverColumn && canOverlayBeVisible;
-  const readableOrderBy = ISSUE_ORDER_BY_OPTIONS.find((orderByObj) => orderByObj.key === orderBy)?.title;
+  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 text-sm font-medium text-custom-text-300 rounded bg-custom-background-overlay ${dragColumnOrientation}`,
+        `absolute top-0 left-0 h-full w-full items-center text-sm font-medium text-custom-text-300 rounded bg-custom-background-80/85 ${dragColumnOrientation}`,
         {
           "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlayBeVisible,
+          "bg-red-200/60": workflowDisabledSource && isDropDisabled,
         },
         { hidden: !shouldOverlayBeVisible }
       )}
     >
       {workflowDisabledSource ? (
-        <WorkFlowDisabledMessage parentStateId={workflowDisabledSource} className="my-2" />
+        <WorkFlowDisabledOverlay
+          messageContainerRef={messageContainerRef}
+          workflowDisabledSource={workflowDisabledSource}
+          shouldOverlayBeVisible={shouldOverlayBeVisible}
+        />
       ) : (
         <div
-          className={cn(
-            "p-3 my-8 flex flex-col rounded items-center",
-            {
-              "text-custom-text-200": shouldOverlayBeVisible,
-            },
-            {
-              "text-custom-text-error": isDropDisabled,
-            }
-          )}
+          className={cn("p-3 my-8 flex flex-col rounded items-center", {
+            "text-custom-text-200": shouldOverlayBeVisible,
+            "text-custom-text-error": isDropDisabled,
+          })}
         >
           {dropErrorMessage ? (
             <div className="flex items-center">
@@ -65,10 +75,10 @@ export const GroupDragOverlay = (props: Props) => {
             <>
               {readableOrderBy && (
                 <span>
-                  The layout is ordered by <span className="font-semibold">{readableOrderBy}</span>.
+                  {t("issue.layouts.ordered_by_label")} <span className="font-semibold">{t(readableOrderBy)}</span>.
                 </span>
               )}
-              <span>Drop here to move the issue.</span>
+              <span>{t("entity.drop_here_to_move", { entity: isEpic ? "epic" : "work item" })}</span>
             </>
           )}
         </div>
diff --git a/web/core/components/issues/issue-layouts/index.ts b/web/core/components/issues/issue-layouts/index.ts
index 7877eeaf5..75bf1d599 100644
--- a/web/core/components/issues/issue-layouts/index.ts
+++ b/web/core/components/issues/issue-layouts/index.ts
@@ -12,6 +12,7 @@ export * from "./calendar";
 export * from "./gantt";
 export * from "./kanban";
 export * from "./spreadsheet";
+export * from "./layout-icon";
 
 // properties
 export * from "./properties";
@@ -21,4 +22,3 @@ export * from "./save-filter-view";
 
 // quick add
 export * from "./quick-add";
-
diff --git a/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx
index be911f757..24cf204f9 100644
--- a/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx
+++ b/web/core/components/issues/issue-layouts/issue-layout-HOC.tsx
@@ -1,4 +1,6 @@
 import { observer } from "mobx-react";
+// plane constants
+import { EIssueLayoutTypes } from "@plane/constants";
 import {
   CalendarLayoutLoader,
   GanttLayoutLoader,
@@ -6,7 +8,6 @@ import {
   ListLayoutLoader,
   SpreadsheetLayoutLoader,
 } from "@/components/ui";
-import { EIssueLayoutTypes } from "@/constants/issue";
 import { useIssues } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { IssueLayoutEmptyState } from "./empty-states";
diff --git a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index a2d58064b..33ab962a5 100644
--- a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -6,16 +6,22 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 import { autoScrollForElements } from "@atlaskit/pragmatic-drag-and-drop-auto-scroll/element";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+import {
+  EIssueLayoutTypes,
+  EIssueServiceType,
+  EIssueFilterType,
+  EIssuesStoreType,
+  ISSUE_DELETED,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
 import { DeleteIssueModal } from "@/components/issues";
 //constants
-import { ISSUE_DELETED } from "@/constants/event-tracker";
-import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 //hooks
 import { useEventTracker, useIssueDetail, useIssues, useKanbanView, useUserPermissions } from "@/hooks/store";
 import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // store
 // ui
 // types
@@ -32,17 +38,29 @@ export type KanbanStoreType =
   | EIssuesStoreType.CYCLE
   | EIssuesStoreType.PROJECT_VIEW
   | EIssuesStoreType.DRAFT
-  | EIssuesStoreType.PROFILE;
+  | 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;
 }
 
 export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBaseKanBanLayout) => {
-  const { QuickActions, addIssuesToView, canEditPropertiesBasedOnProject, isCompletedCycle = false, viewId } = props;
+  const {
+    QuickActions,
+    addIssuesToView,
+    canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
+    viewId,
+    isEpic = false,
+  } = props;
   // router
   const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
@@ -53,7 +71,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
   const { issueMap, issuesFilter, issues } = useIssues(storeType);
   const {
     issue: { getIssueById },
-  } = useIssueDetail();
+  } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
   const {
     fetchIssues,
     fetchNextIssues,
@@ -176,11 +194,11 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         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={!isEditingAllowed || isCompletedCycle}
+        readOnly={!canEditProperties(issue.project_id ?? undefined) || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isEditingAllowed, isCompletedCycle, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
+    [isCompletedCycle, canEditProperties, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
   );
 
   const handleDeleteIssue = async () => {
@@ -246,7 +264,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
                 isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
               } transition duration-300`}
             >
-              Drop here to delete the issue.
+              Drop here to delete the work item.
             </div>
           </div>
 
@@ -272,6 +290,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
               scrollableContainerRef={scrollableContainerRef}
               handleOnDrop={handleOnDrop}
               loadMoreIssues={fetchMoreIssues}
+              isEpic={isEpic}
             />
           </div>
         </div>
diff --git a/web/core/components/issues/issue-layouts/kanban/block.tsx b/web/core/components/issues/issue-layouts/kanban/block.tsx
index cf2be2887..5e2495d85 100644
--- a/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -6,6 +6,7 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane helpers
+import { EIssueServiceType } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
@@ -16,8 +17,9 @@ import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { HIGHLIGHT_CLASS } from "@/components/issues/issue-layouts/utils";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
-import { useIssueDetail, useKanbanView } from "@/hooks/store";
+import { useIssueDetail, useKanbanView, useProject } from "@/hooks/store";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
@@ -35,11 +37,13 @@ interface IssueBlockProps {
   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 {
@@ -49,10 +53,11 @@ interface IssueDetailsBlockProps {
   updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
   quickActions: TRenderQuickActions;
   isReadOnly: boolean;
+  isEpic?: boolean;
 }
 
 const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((props) => {
-  const { cardRef, issue, updateIssue, quickActions, isReadOnly, displayProperties } = props;
+  const { cardRef, issue, updateIssue, quickActions, isReadOnly, displayProperties, isEpic = false } = props;
   // hooks
   const { isMobile } = usePlatformOS();
 
@@ -98,6 +103,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
         activeLayout="Kanban"
         updateIssue={updateIssue}
         isReadOnly={isReadOnly}
+        isEpic={isEpic}
       />
     </>
   );
@@ -111,11 +117,13 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
     issuesMap,
     displayProperties,
     canDropOverIssue,
+    canDragIssuesInCurrentGrouping,
     updateIssue,
     quickActions,
     canEditProperties,
     scrollableContainerRef,
     shouldRenderByDefault,
+    isEpic = false,
   } = props;
 
   const cardRef = useRef<HTMLAnchorElement | null>(null);
@@ -123,8 +131,9 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
   const workspaceSlug = routerWorkspaceSlug?.toString();
   // hooks
-  const { getIsIssuePeeked } = useIssueDetail();
-  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { getProjectIdentifierById } = useProject();
+  const { getIsIssuePeeked } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
   const { isMobile } = usePlatformOS();
 
   // handlers
@@ -139,7 +148,18 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
 
   const canEditIssueProperties = canEditProperties(issue?.project_id ?? undefined);
 
-  const isDragAllowed = !issue?.tempId && canEditIssueProperties;
+  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);
@@ -195,19 +215,20 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
         className={cn("group/kanban-block relative mb-2", { "z-[1]": isCurrentBlockDragging })}
         onDragStart={() => {
           if (isDragAllowed) setIsCurrentBlockDragging(true);
-          else
+          else {
             setToast({
               type: TOAST_TYPE.WARNING,
-              title: "Cannot move issue",
-              message: "Drag and drop is disabled for the current grouping",
+              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={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
-            issue.id
-          }`}
+          href={workItemLink}
           ref={cardRef}
           className={cn(
             "block rounded border-[1px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
@@ -233,6 +254,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
               updateIssue={updateIssue}
               quickActions={quickActions}
               isReadOnly={!canEditIssueProperties}
+              isEpic={isEpic}
             />
           </RenderIfVisible>
         </ControlLink>
diff --git a/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx
index 078184ac9..2fb4da801 100644
--- a/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -16,7 +16,9 @@ interface IssueBlocksListProps {
   quickActions: TRenderQuickActions;
   canEditProperties: (projectId: string | undefined) => boolean;
   canDropOverIssue: boolean;
+  canDragIssuesInCurrentGrouping: boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isEpic?: boolean;
 }
 
 export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = observer((props) => {
@@ -27,10 +29,12 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = observer((p
     issueIds,
     displayProperties,
     canDropOverIssue,
+    canDragIssuesInCurrentGrouping,
     updateIssue,
     quickActions,
     canEditProperties,
     scrollableContainerRef,
+    isEpic = false,
   } = props;
 
   return (
@@ -57,8 +61,10 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = observer((p
                 quickActions={quickActions}
                 draggableId={draggableId}
                 canDropOverIssue={canDropOverIssue}
+                canDragIssuesInCurrentGrouping={canDragIssuesInCurrentGrouping}
                 canEditProperties={canEditProperties}
                 scrollableContainerRef={scrollableContainerRef}
+                isEpic={isEpic}
               />
             );
           })}
diff --git a/web/core/components/issues/issue-layouts/kanban/default.tsx b/web/core/components/issues/issue-layouts/kanban/default.tsx
index d1144995c..d13615404 100644
--- a/web/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/default.tsx
@@ -1,5 +1,7 @@
 import { MutableRefObject } from "react";
 import { observer } from "mobx-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 import {
   GroupByColumnTypes,
   IGroupByColumn,
@@ -18,10 +20,11 @@ import { ContentWrapper } from "@plane/ui";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
 import { KanbanColumnLoader } from "@/components/ui";
 // hooks
-import { useCycle, useKanbanView, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
+import { useKanbanView } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // types
 // parent components
+import { useWorkFlowFDragNDrop } from "@/plane-web/components/workflow";
 import { TRenderQuickActions } from "../list/list-view-types";
 import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation, getApproximateCardHeight } from "../utils";
 // components
@@ -58,6 +61,7 @@ export interface IKanBan {
   handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   showEmptyGroup?: boolean;
   subGroupIndex?: number;
+  isEpic?: boolean;
 }
 
 export const KanBan: React.FC<IKanBan> = observer((props) => {
@@ -86,31 +90,24 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
     isDropDisabled,
     dropErrorMessage,
     subGroupIndex = 0,
+    isEpic = false,
   } = props;
-
+  // i18n
+  const { t } = useTranslation();
+  // store hooks
   const storeType = useIssueStoreType();
-
-  const member = useMember();
-  const project = useProject();
-  const label = useLabel();
-  const cycle = useCycle();
-  const moduleInfo = useModule();
-  const projectState = useProjectState();
   const issueKanBanView = useKanbanView();
-
+  // derived values
   const isDragDisabled = !issueKanBanView?.getCanUserDragDrop(group_by, sub_group_by);
 
-  const list = getGroupByColumns(
-    group_by as GroupByColumnTypes,
-    project,
-    cycle,
-    moduleInfo,
-    label,
-    projectState,
-    member,
-    true,
-    isWorkspaceLevel(storeType)
-  );
+  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;
 
@@ -143,7 +140,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
   const isSubGroup = !!sub_group_id && sub_group_id !== "null";
 
   return (
-    <ContentWrapper className={`flex-row relative gap-4 py-4`}>
+    <ContentWrapper className={`flex-row relative gap-4 !pt-2 !pb-0`}>
       {list &&
         list.length > 0 &&
         list.map((subList: IGroupByColumn, groupIndex) => {
@@ -174,10 +171,15 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
                     title={subList.name}
                     count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
                     issuePayload={subList.payload}
-                    disableIssueCreation={disableIssueCreation || isGroupByCreatedBy}
+                    disableIssueCreation={
+                      disableIssueCreation ||
+                      isGroupByCreatedBy ||
+                      getIsWorkflowWorkItemCreationDisabled(subList.id, sub_group_id)
+                    }
                     addIssuesToView={addIssuesToView}
                     collapsedGroups={collapsedGroups}
                     handleCollapsedGroups={handleCollapsedGroups}
+                    isEpic={isEpic}
                   />
                 </div>
               )}
@@ -221,6 +223,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
                     scrollableContainerRef={scrollableContainerRef}
                     loadMoreIssues={loadMoreIssues}
                     handleOnDrop={handleOnDrop}
+                    isEpic={isEpic}
                   />
                 </RenderIfVisible>
               )}
diff --git a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
index 4303946dc..77d6a08aa 100644
--- a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -15,6 +15,8 @@ import { CreateUpdateIssueModal } from "@/components/issues";
 // hooks
 import { useEventTracker } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
+import { CreateUpdateEpicModal } from "@/plane-web/components/epics/epic-modal";
+// types
 // Plane-web
 import { WorkFlowGroupTree } from "@/plane-web/components/workflow";
 
@@ -30,6 +32,7 @@ interface IHeaderGroupByCard {
   issuePayload: Partial<TIssue>;
   disableIssueCreation?: boolean;
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  isEpic?: boolean;
 }
 
 export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
@@ -45,6 +48,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
     issuePayload,
     disableIssueCreation,
     addIssuesToView,
+    isEpic = false,
   } = props;
   const verticalAlignPosition = sub_group_by ? false : collapsedGroups?.group_by.includes(column_id);
   // states
@@ -73,26 +77,30 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
-        message: "Issues added to the cycle successfully.",
+        message: "Work items added to the cycle successfully.",
       });
     } catch (error) {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: "Selected issues could not be added to the cycle. Please try again.",
+        message: "Selected work items could not be added to the cycle. Please try again.",
       });
     }
   };
 
   return (
     <>
-      <CreateUpdateIssueModal
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        data={issuePayload}
-        storeType={storeType}
-        isDraft={isDraftIssue}
-      />
+      {isEpic ? (
+        <CreateUpdateEpicModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
+      ) : (
+        <CreateUpdateIssueModal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          data={issuePayload}
+          storeType={storeType}
+          isDraft={isDraftIssue}
+        />
+      )}
 
       {renderExistingIssueModal && (
         <ExistingIssuesListModal
@@ -163,7 +171,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
                   setIsOpen(true);
                 }}
               >
-                <span className="flex items-center justify-start gap-2">Create issue</span>
+                <span className="flex items-center justify-start gap-2">Create work item</span>
               </CustomMenu.MenuItem>
               <CustomMenu.MenuItem
                 onClick={() => {
@@ -171,7 +179,7 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
                   setOpenExistingIssueListModal(true);
                 }}
               >
-                <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+                <span className="flex items-center justify-start gap-2">Add an existing work item</span>
               </CustomMenu.MenuItem>
             </CustomMenu>
           ) : (
diff --git a/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx b/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index 15720b543..02ae41d6a 100644
--- a/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -5,6 +5,10 @@ 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 { EIssueLayoutTypes, DRAG_ALLOWED_GROUPS } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 //types
 import {
   TGroupedIssues,
@@ -20,7 +24,6 @@ import { KanbanQuickAddIssueButton, QuickAddIssueRoot } from "@/components/issue
 import { highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
 import { KanbanIssueBlockLoader } from "@/components/ui";
 // helpers
-import { EIssueLayoutTypes } from "@/constants/issue";
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useProjectState } from "@/hooks/store";
@@ -56,6 +59,7 @@ interface IKanbanGroup {
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
   orderBy: TIssueOrderByOptions | undefined;
+  isEpic?: boolean;
 }
 
 export const KanbanGroup = observer((props: IKanbanGroup) => {
@@ -79,7 +83,10 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
     quickAddCallback,
     scrollableContainerRef,
     handleOnDrop,
+    isEpic = false,
   } = props;
+  // i18n
+  const { t } = useTranslation();
   // hooks
   const projectState = useProjectState();
 
@@ -106,10 +113,8 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
   );
   const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false);
 
-  const { workflowDisabledSource, isWorkflowDropDisabled, handleWorkFlowState } = useWorkFlowFDragNDrop(
-    group_by,
-    sub_group_by
-  );
+  const { workflowDisabledSource, isWorkflowDropDisabled, handleWorkFlowState, getIsWorkflowWorkItemCreationDisabled } =
+    useWorkFlowFDragNDrop(group_by, sub_group_by);
 
   // Enable Kanban Columns as Drop Targets
   useEffect(() => {
@@ -151,7 +156,7 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
             dropErrorMessage &&
               setToast({
                 type: TOAST_TYPE.WARNING,
-                title: "Warning!",
+                title: t("common.warning"),
                 message: dropErrorMessage,
               });
             return;
@@ -250,14 +255,17 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
       className="w-full sticky bottom-0 p-3 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 hover:underline cursor-pointer"
       onClick={loadMoreIssuesInThisGroup}
     >
-      {" "}
-      Load More &darr;
+      {t("common.load_more")} &darr;
     </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
@@ -277,6 +285,7 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
         dropErrorMessage={dropErrorMessage}
         orderBy={orderBy}
         isDraggingOverColumn={isDraggingOverColumn}
+        isEpic={isEpic}
       />
       <KanbanIssueBlocksList
         sub_group_id={sub_group_id}
@@ -289,22 +298,27 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
         canEditProperties={canEditProperties}
         scrollableContainerRef={scrollableContainerRef}
         canDropOverIssue={!canOverlayBeVisible}
+        canDragIssuesInCurrentGrouping={canDragIssuesInCurrentGrouping}
+        isEpic={isEpic}
       />
 
       {shouldLoadMore && (isSubGroup ? <>{loadMore}</> : <KanbanIssueBlockLoader ref={setIntersectionElement} />)}
 
-      {enableQuickIssueCreate && !disableIssueCreation && (
-        <div className="w-full bg-custom-background-90 py-0.5 sticky bottom-0">
-          <QuickAddIssueRoot
-            layout={EIssueLayoutTypes.KANBAN}
-            QuickAddButton={KanbanQuickAddIssueButton}
-            prePopulatedData={{
-              ...(group_by && prePopulateQuickAddData(group_by, sub_group_by, groupId, sub_group_id)),
-            }}
-            quickAddCallback={quickAddCallback}
-          />
-        </div>
-      )}
+      {enableQuickIssueCreate &&
+        !disableIssueCreation &&
+        !getIsWorkflowWorkItemCreationDisabled(groupId, sub_group_id) && (
+          <div className="w-full bg-custom-background-90 py-0.5 sticky bottom-0">
+            <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/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx b/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
index 591947978..0dce7e181 100644
--- a/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@@ -2,12 +2,11 @@ import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { CycleIssueQuickActions } from "@/components/issues";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useCycle, useIssues, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";
 
diff --git a/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx b/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
index fb1e360d8..0e46fc505 100644
--- a/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // hook
+import { EIssuesStoreType } from "@plane/constants";
 import { ModuleIssueQuickActions } from "@/components/issues";
-import { EIssuesStoreType } from "@/constants/issue";
 import { useIssues } from "@/hooks/store";
 // components
 // types
diff --git a/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx b/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
index 58ff4154b..fed04333e 100644
--- a/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
@@ -1,9 +1,9 @@
 import { observer } from "mobx-react";
 // hooks
 import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { ProjectIssueQuickActions } from "@/components/issues";
 import { useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 // components
 // types
diff --git a/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx b/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx
index 76209419c..32f22a459 100644
--- a/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/roots/project-root.tsx
@@ -1,9 +1,32 @@
 import { observer } from "mobx-react";
-// mobx store
-import { ProjectIssueQuickActions } from "@/components/issues";
+import { useParams } from "next/navigation";
 // components
-// types
-// constants
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { ProjectIssueQuickActions } from "@/components/issues";
+// hooks
+import { useUserPermissions } from "@/hooks/store";
+// plane web constants
+// local components
 import { BaseKanBanRoot } from "../base-kanban-root";
 
-export const KanBanLayout: React.FC = observer(() => <BaseKanBanRoot QuickActions={ProjectIssueQuickActions} />);
+export const KanBanLayout: React.FC = observer(() => {
+  // 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/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
index ba1dce5c1..d1397c559 100644
--- a/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -15,9 +15,9 @@ import {
 // UI
 import { Row } from "@plane/ui";
 // hooks
-import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // components
+import { useWorkFlowFDragNDrop } from "@/plane-web/components/workflow";
 import { TRenderQuickActions } from "../list/list-view-types";
 import { getGroupByColumns, isWorkspaceLevel, GroupDropLocation } from "../utils";
 import { KanBan } from "./default";
@@ -53,35 +53,40 @@ const visibilitySubGroupByGroupCount = (subGroupIssueCount: number, showEmptyGro
 };
 
 const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = observer(
-  ({ getGroupIssueCount, sub_group_by, group_by, list, collapsedGroups, handleCollapsedGroups, showEmptyGroup }) => (
-    <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;
+  ({ getGroupIssueCount, sub_group_by, group_by, list, collapsedGroups, handleCollapsedGroups, showEmptyGroup }) => {
+    const { getIsWorkflowWorkItemCreationDisabled } = useWorkFlowFDragNDrop(group_by, sub_group_by);
 
-          const subGroupByVisibilityToggle = visibilitySubGroupByGroupCount(groupCount, showEmptyGroup);
+    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;
 
-          if (subGroupByVisibilityToggle === false) return <></>;
+            const subGroupByVisibilityToggle = visibilitySubGroupByGroupCount(groupCount, showEmptyGroup);
 
-          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}
-              />
-            </div>
-          );
-        })}
-    </div>
-  )
+            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)}
+                />
+              </div>
+            );
+          })}
+      </div>
+    );
+  }
 );
 
 interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
@@ -166,7 +171,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                   <HeaderSubGroupByCard
                     column_id={_list.id}
                     icon={_list.icon}
-                    title={_list.name || ""}
+                    title={_list.name}
                     count={issueCount}
                     collapsedGroups={collapsedGroups}
                     handleCollapsedGroups={handleCollapsedGroups}
@@ -262,38 +267,19 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     quickAddCallback,
     scrollableContainerRef,
   } = props;
-
+  // store hooks
   const storeType = useIssueStoreType();
-
-  const member = useMember();
-  const project = useProject();
-  const label = useLabel();
-  const cycle = useCycle();
-  const projectModule = useModule();
-  const projectState = useProjectState();
-
-  const groupByList = getGroupByColumns(
-    group_by as GroupByColumnTypes,
-    project,
-    cycle,
-    projectModule,
-    label,
-    projectState,
-    member,
-    true,
-    isWorkspaceLevel(storeType)
-  );
-  const subGroupByList = getGroupByColumns(
-    sub_group_by as GroupByColumnTypes,
-    project,
-    cycle,
-    projectModule,
-    label,
-    projectState,
-    member,
-    true,
-    isWorkspaceLevel(storeType)
-  );
+  // derived values
+  const groupByList = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+  });
+  const subGroupByList = getGroupByColumns({
+    groupBy: sub_group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+  });
 
   if (!groupByList || !subGroupByList) return null;
 
diff --git a/web/core/components/issues/issue-layouts/layout-icon.tsx b/web/core/components/issues/issue-layouts/layout-icon.tsx
new file mode 100644
index 000000000..01243c374
--- /dev/null
+++ b/web/core/components/issues/issue-layouts/layout-icon.tsx
@@ -0,0 +1,19 @@
+import { List, Kanban, Calendar, Sheet, GanttChartSquare, LucideProps } from "lucide-react";
+import { EIssueLayoutTypes } from "@plane/constants";
+
+export const IssueLayoutIcon = ({ layout, ...props }: { layout: EIssueLayoutTypes } & LucideProps) => {
+  switch (layout) {
+    case EIssueLayoutTypes.LIST:
+      return <List {...props} />;
+    case EIssueLayoutTypes.KANBAN:
+      return <Kanban {...props} />;
+    case EIssueLayoutTypes.CALENDAR:
+      return <Calendar {...props} />;
+    case EIssueLayoutTypes.SPREADSHEET:
+      return <Sheet {...props} />;
+    case EIssueLayoutTypes.GANTT:
+      return <GanttChartSquare {...props} />;
+    default:
+      return null;
+  }
+};
diff --git a/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/web/core/components/issues/issue-layouts/list/base-list-root.tsx
index d73ca6ff7..ceccd87d2 100644
--- a/web/core/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/base-list-root.tsx
@@ -1,17 +1,23 @@
 import { FC, useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
-// types
 import { useParams } from "next/navigation";
+// plane constants
+import {
+  EIssueLayoutTypes,
+  EIssueFilterType,
+  EIssuesStoreType,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
+// types
 import { GroupByColumnTypes, TGroupedIssues, TIssueKanbanFilters } from "@plane/types";
 // constants
-import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useIssues, useUserPermissions } from "@/hooks/store";
 // hooks
 import { useGroupIssuesDragNDrop } from "@/hooks/use-group-dragndrop";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // components
 import { IssueLayoutHOC } from "../issue-layout-HOC";
 import { List } from "./default";
@@ -26,16 +32,28 @@ type ListStoreType =
   | EIssuesStoreType.DRAFT
   | EIssuesStoreType.PROFILE
   | EIssuesStoreType.ARCHIVED
-  | EIssuesStoreType.WORKSPACE_DRAFT;
+  | 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((props: IBaseListRoot) => {
-  const { QuickActions, viewId, addIssuesToView, canEditPropertiesBasedOnProject, isCompletedCycle = false } = props;
+  const {
+    QuickActions,
+    viewId,
+    addIssuesToView,
+    canEditPropertiesBasedOnProject,
+    isCompletedCycle = false,
+    isEpic = false,
+  } = props;
   // router
   const storeType = useIssueStoreType() as ListStoreType;
   //stores
@@ -100,11 +118,11 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
         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={!isEditingAllowed || isCompletedCycle}
+        readOnly={!canEditProperties(issue.project_id ?? undefined) || isCompletedCycle}
       />
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isEditingAllowed, isCompletedCycle, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
+    [isCompletedCycle, canEditProperties, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
   );
 
   const loadMoreIssues = useCallback(
@@ -154,6 +172,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => {
           handleOnDrop={handleOnDrop}
           handleCollapsedGroups={handleCollapsedGroups}
           collapsedGroups={collapsedGroups}
+          isEpic={isEpic}
         />
       </div>
     </IssueLayoutHOC>
diff --git a/web/core/components/issues/issue-layouts/list/block-root.tsx b/web/core/components/issues/issue-layouts/list/block-root.tsx
index 4d13e3ef9..bcb2ef189 100644
--- a/web/core/components/issues/issue-layouts/list/block-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/block-root.tsx
@@ -5,6 +5,7 @@ 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";
+import { EIssueServiceType } from "@plane/constants";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
@@ -39,6 +40,7 @@ type Props = {
   isParentIssueBeingDragged?: boolean;
   isLastChild?: boolean;
   shouldRenderByDefault?: boolean;
+  isEpic?: boolean;
 };
 
 export const IssueBlockRoot: FC<Props> = observer((props) => {
@@ -59,6 +61,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
     isLastChild = false,
     selectionHelpers,
     shouldRenderByDefault,
+    isEpic = false,
   } = props;
   // states
   const [isExpanded, setExpanded] = useState<boolean>(false);
@@ -69,7 +72,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
   // hooks
   const { isMobile } = usePlatformOS();
   // store hooks
-  const { subIssues: subIssuesStore } = useIssueDetail();
+  const { subIssues: subIssuesStore } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
 
   const isSubIssue = nestingLevel !== 0;
 
@@ -150,10 +153,12 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
           canDrag={!isSubIssue && isDragAllowed}
           isCurrentBlockDragging={isParentIssueBeingDragged || isCurrentBlockDragging}
           setIsCurrentBlockDragging={setIsCurrentBlockDragging}
+          isEpic={isEpic}
         />
       </RenderIfVisible>
 
       {isExpanded &&
+        !isEpic &&
         subIssues?.map((subIssueId) => (
           <IssueBlockRoot
             key={`${subIssueId}`}
diff --git a/web/core/components/issues/issue-layouts/list/block.tsx b/web/core/components/issues/issue-layouts/list/block.tsx
index 0b0700b0f..65126b5a3 100644
--- a/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/web/core/components/issues/issue-layouts/list/block.tsx
@@ -6,6 +6,7 @@ import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ChevronRight } from "lucide-react";
+import { EIssueServiceType } from "@plane/constants";
 // types
 import { TIssue, IIssueDisplayProperties, TIssueMap } from "@plane/types";
 // ui
@@ -15,12 +16,14 @@ import { MultipleSelectEntityAction } from "@/components/core";
 import { IssueProperties } from "@/components/issues/issue-layouts/properties";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
 import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
+import { IssueStats } from "@/plane-web/components/issues/issue-layouts/issue-stats";
 // types
 import { TRenderQuickActions } from "./list-view-types";
 
@@ -40,6 +43,7 @@ interface IssueBlockProps {
   isCurrentBlockDragging: boolean;
   setIsCurrentBlockDragging: React.Dispatch<React.SetStateAction<boolean>>;
   canDrag: boolean;
+  isEpic?: boolean;
 }
 
 export const IssueBlock = observer((props: IssueBlockProps) => {
@@ -59,6 +63,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
     isCurrentBlockDragging,
     setIsCurrentBlockDragging,
     canDrag,
+    isEpic = false,
   } = props;
   // ref
   const issueRef = useRef<HTMLDivElement | null>(null);
@@ -69,7 +74,12 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   // hooks
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
   const { getProjectIdentifierById } = useProject();
-  const { getIsIssuePeeked, peekIssue, setPeekIssue, subIssues: subIssuesStore } = useIssueDetail();
+  const {
+    getIsIssuePeeked,
+    peekIssue,
+    setPeekIssue,
+    subIssues: subIssuesStore,
+  } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
 
   const handleIssuePeekOverview = (issue: TIssue) =>
     workspaceSlug &&
@@ -85,8 +95,11 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
       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();
 
@@ -98,7 +111,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
     return combine(
       draggable({
         element,
-        canDrag: () => canDrag,
+        canDrag: () => isDraggingAllowed,
         getInitialData: () => ({ id: issueId, type: "ISSUE", groupId }),
         onDragStart: () => {
           setIsCurrentBlockDragging(true);
@@ -108,11 +121,10 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
         },
       })
     );
-  }, [canDrag, issueId, groupId, setIsCurrentBlockDragging]);
+  }, [isDraggingAllowed, issueId, groupId, setIsCurrentBlockDragging]);
 
   if (!issue) return null;
 
-  const canEditIssueProperties = canEditProperties(issue.project_id ?? undefined);
   const projectIdentifier = getProjectIdentifierById(issue.project_id);
   const isIssueSelected = selectionHelpers.getIsEntitySelected(issue.id);
   const isIssueActive = selectionHelpers.getIsEntityActive(issue.id);
@@ -138,10 +150,19 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   //TODO: add better logic. This is to have a min width for ID/Key based on the length of project identifier
   const keyMinWidth = displayProperties?.key ? (projectIdentifier?.length ?? 0) * 7 : 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={`/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}`}
+      href={workItemLink}
       onClick={() => handleIssuePeekOverview(issue)}
       className="w-full cursor-pointer"
       disabled={!!issue?.tempId || issue?.is_draft}
@@ -161,24 +182,26 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
           }
         )}
         onDragStart={() => {
-          if (!canDrag) {
+          if (!isDraggingAllowed) {
             setToast({
               type: TOAST_TYPE.WARNING,
-              title: "Cannot move issue",
-              message: "Drag and drop is disabled for the current grouping",
+              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 truncate">
+        <div className="flex gap-2 w-full 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 && (
+              {projectId && canSelectIssues && !isEpic && (
                 <Tooltip
                   tooltipContent={
                     <>
-                      Only issues within the current
+                      Only work items within the current
                       <br />
                       project can be selected.
                     </>
@@ -216,7 +239,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
 
               {/* sub-issues chevron */}
               <div className="size-4 grid place-items-center flex-shrink-0">
-                {subIssuesCount > 0 && (
+                {subIssuesCount > 0 && !isEpic && (
                   <button
                     type="button"
                     className="size-4 grid place-items-center rounded-sm text-custom-text-400 hover:text-custom-text-300"
@@ -244,8 +267,9 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
               disabled={isCurrentBlockDragging}
               renderByDefault={false}
             >
-              <p className="w-full truncate cursor-pointer text-sm text-custom-text-100">{issue.name}</p>
+              <p className="truncate cursor-pointer text-sm text-custom-text-100">{issue.name}</p>
             </Tooltip>
+            {isEpic && <IssueStats issueId={issue.id} />}
           </div>
           {!issue?.tempId && (
             <div
@@ -271,6 +295,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                 updateIssue={updateIssue}
                 displayProperties={displayProperties}
                 activeLayout="List"
+                isEpic={isEpic}
               />
               <div
                 className={cn("hidden", {
diff --git a/web/core/components/issues/issue-layouts/list/blocks-list.tsx b/web/core/components/issues/issue-layouts/list/blocks-list.tsx
index a415dc0eb..4c84322d1 100644
--- a/web/core/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/web/core/components/issues/issue-layouts/list/blocks-list.tsx
@@ -19,6 +19,7 @@ interface Props {
   isDragAllowed: boolean;
   canDropOverIssue: boolean;
   selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
 }
 
 export const IssueBlocksList: FC<Props> = (props) => {
@@ -34,6 +35,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
     selectionHelpers,
     isDragAllowed,
     canDropOverIssue,
+    isEpic = false,
   } = props;
 
   return (
@@ -57,6 +59,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
             isLastChild={index === issueIds.length - 1}
             isDragAllowed={isDragAllowed}
             canDropOverIssue={canDropOverIssue}
+            isEpic={isEpic}
           />
         ))}
     </div>
diff --git a/web/core/components/issues/issue-layouts/list/default.tsx b/web/core/components/issues/issue-layouts/list/default.tsx
index fca8d68eb..be7e78365 100644
--- a/web/core/components/issues/issue-layouts/list/default.tsx
+++ b/web/core/components/issues/issue-layouts/list/default.tsx
@@ -18,9 +18,7 @@ import {
 } from "@plane/types";
 // components
 import { MultipleSelectGroup } from "@/components/core";
-
 // hooks
-import { useCycle, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // plane web components
 import { IssueBulkOperationsRoot } from "@/plane-web/components/issues";
@@ -50,6 +48,7 @@ export interface IList {
   loadMoreIssues: (groupId?: string) => void;
   handleCollapsedGroups: (value: string) => void;
   collapsedGroups: TIssueKanbanFilters;
+  isEpic?: boolean;
 }
 
 export const List: React.FC<IList> = observer((props) => {
@@ -72,32 +71,21 @@ export const List: React.FC<IList> = observer((props) => {
     loadMoreIssues,
     handleCollapsedGroups,
     collapsedGroups,
+    isEpic = false,
   } = props;
 
   const storeType = useIssueStoreType();
-  // store hooks
-  const member = useMember();
-  const project = useProject();
-  const label = useLabel();
-  const projectState = useProjectState();
-  const cycle = useCycle();
-  const projectModule = useModule();
   // plane web hooks
   const isBulkOperationsEnabled = useBulkOperationStatus();
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
-  const groups = getGroupByColumns(
-    group_by as GroupByColumnTypes,
-    project,
-    cycle,
-    projectModule,
-    label,
-    projectState,
-    member,
-    true,
-    isWorkspaceLevel(storeType)
-  );
+  const groups = getGroupByColumns({
+    groupBy: group_by as GroupByColumnTypes,
+    includeNone: true,
+    isWorkspaceLevel: isWorkspaceLevel(storeType),
+    isEpic: isEpic,
+  });
 
   // Enable Auto Scroll for Main Kanban
   useEffect(() => {
@@ -136,7 +124,11 @@ export const List: React.FC<IList> = observer((props) => {
   return (
     <div className="relative size-full flex flex-col">
       {groups && (
-        <MultipleSelectGroup containerRef={containerRef} entities={entities} disabled={!isBulkOperationsEnabled}>
+        <MultipleSelectGroup
+          containerRef={containerRef}
+          entities={entities}
+          disabled={!isBulkOperationsEnabled || isEpic}
+        >
           {(helpers) => (
             <>
               <div
@@ -168,6 +160,7 @@ export const List: React.FC<IList> = observer((props) => {
                     selectionHelpers={helpers}
                     handleCollapsedGroups={handleCollapsedGroups}
                     collapsedGroups={collapsedGroups}
+                    isEpic={isEpic}
                   />
                 ))}
               </div>
diff --git a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
index 6d2f57a99..4ba026989 100644
--- a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
+++ b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -18,6 +18,8 @@ import { cn } from "@/helpers/common.helper";
 import { useEventTracker } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { TSelectionHelper } from "@/hooks/use-multiple-select";
+// plane-web
+import { CreateUpdateEpicModal } from "@/plane-web/components/epics/epic-modal";
 // Plane-web
 import { WorkFlowGroupTree } from "@/plane-web/components/workflow";
 
@@ -33,6 +35,7 @@ interface IHeaderGroupByCard {
   addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
   selectionHelpers: TSelectionHelper;
   handleCollapsedGroups: (value: string) => void;
+  isEpic?: boolean;
 }
 
 export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
@@ -48,6 +51,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
     addIssuesToView,
     selectionHelpers,
     handleCollapsedGroups,
+    isEpic = false,
   } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -77,13 +81,13 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Success!",
-        message: "Issues added to the cycle successfully.",
+        message: "Work items added to the cycle successfully.",
       });
     } catch (error) {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: "Selected issues could not be added to the cycle. Please try again.",
+        message: "Selected work items could not be added to the cycle. Please try again.",
       });
     }
   };
@@ -134,7 +138,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
                   setIsOpen(true);
                 }}
               >
-                <span className="flex items-center justify-start gap-2">Create issue</span>
+                <span className="flex items-center justify-start gap-2">Create work item</span>
               </CustomMenu.MenuItem>
               <CustomMenu.MenuItem
                 onClick={() => {
@@ -142,7 +146,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
                   setOpenExistingIssueListModal(true);
                 }}
               >
-                <span className="flex items-center justify-start gap-2">Add an existing issue</span>
+                <span className="flex items-center justify-start gap-2">Add an existing work item</span>
               </CustomMenu.MenuItem>
             </CustomMenu>
           ) : (
@@ -157,13 +161,17 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
             </div>
           ))}
 
-        <CreateUpdateIssueModal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          data={issuePayload}
-          storeType={storeType}
-          isDraft={isDraftIssue}
-        />
+        {isEpic ? (
+          <CreateUpdateEpicModal isOpen={isOpen} onClose={() => setIsOpen(false)} data={issuePayload} />
+        ) : (
+          <CreateUpdateIssueModal
+            isOpen={isOpen}
+            onClose={() => setIsOpen(false)}
+            data={issuePayload}
+            storeType={storeType}
+            isDraft={isDraftIssue}
+          />
+        )}
 
         {renderExistingIssueModal && (
           <ExistingIssuesListModal
diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx
index aae8d9713..8605dc9dd 100644
--- a/web/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/web/core/components/issues/issue-layouts/list/list-group.tsx
@@ -4,9 +4,11 @@ import { MutableRefObject, 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";
-import { useParams } from "next/navigation";
-import { cn } from "@plane/editor";
-// plane packages
+// plane constants
+import { EIssueLayoutTypes, DRAG_ALLOWED_GROUPS } from "@plane/constants";
+// plane i18n
+import { useTranslation } from "@plane/i18n";
+// plane ui
 import {
   IGroupByColumn,
   TIssueMap,
@@ -17,10 +19,10 @@ import {
   TIssueKanbanFilters,
 } from "@plane/types";
 import { Row, setToast, TOAST_TYPE } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { ListLoaderItemRow } from "@/components/ui";
-// constants
-import { DRAG_ALLOWED_GROUPS, EIssueLayoutTypes } from "@/constants/issue";
 // hooks
 import { useProjectState } from "@/hooks/store";
 import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
@@ -65,6 +67,7 @@ interface Props {
   selectionHelpers: TSelectionHelper;
   handleCollapsedGroups: (value: string) => void;
   collapsedGroups: TIssueKanbanFilters;
+  isEpic?: boolean;
 }
 
 export const ListGroup = observer((props: Props) => {
@@ -91,14 +94,14 @@ export const ListGroup = observer((props: Props) => {
     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 { projectId } = useParams();
+  const { t } = useTranslation();
   const projectState = useProjectState();
 
   const {
@@ -107,7 +110,9 @@ export const ListGroup = observer((props: Props) => {
 
   const [intersectionElement, setIntersectionElement] = useState<HTMLDivElement | null>(null);
 
-  const { workflowDisabledSource, isWorkflowDropDisabled, handleWorkFlowState } = useWorkFlowFDragNDrop(group_by);
+  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;
@@ -129,7 +134,7 @@ export const ListGroup = observer((props: Props) => {
       }
       onClick={() => loadMoreIssues(group.id)}
     >
-      Load More &darr;
+      {t("common.load_more")} &darr;
     </div>
   );
 
@@ -208,10 +213,10 @@ export const ListGroup = observer((props: Props) => {
           if (!source || !destination) return;
 
           if (isWorkflowDropDisabled || group.isDropDisabled) {
-            group.dropErrorMessage &&
+            if (group.dropErrorMessage)
               setToast({
                 type: TOAST_TYPE.WARNING,
-                title: "Warning!",
+                title: t("common.warning"),
                 message: group.dropErrorMessage,
               });
             return;
@@ -237,8 +242,7 @@ export const ListGroup = observer((props: Props) => {
     isWorkflowDropDisabled,
   ]);
 
-  const isDragAllowed =
-    !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by) && canEditProperties(projectId?.toString());
+  const isDragAllowed = !!group_by && DRAG_ALLOWED_GROUPS.includes(group_by);
   const canOverlayBeVisible = isWorkflowDropDisabled || orderBy !== "sort_order" || !!group.isDropDisabled;
 
   const isGroupByCreatedBy = group_by === "created_by";
@@ -261,14 +265,17 @@ export const ListGroup = observer((props: Props) => {
           groupID={group.id}
           groupBy={group_by}
           icon={group.icon}
-          title={group.name || ""}
+          title={group.name}
           count={groupIssueCount}
           issuePayload={group.payload}
           canEditProperties={canEditProperties}
-          disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle}
+          disableIssueCreation={
+            disableIssueCreation || isGroupByCreatedBy || isCompletedCycle || isWorkflowIssueCreationDisabled
+          }
           addIssuesToView={addIssuesToView}
           selectionHelpers={selectionHelpers}
           handleCollapsedGroups={handleCollapsedGroups}
+          isEpic={isEpic}
         />
       </Row>
       {shouldExpand && (
@@ -281,6 +288,7 @@ export const ListGroup = observer((props: Props) => {
             dropErrorMessage={group.dropErrorMessage}
             orderBy={orderBy}
             isDraggingOverColumn={isDraggingOverColumn}
+            isEpic={isEpic}
           />
           {groupIssueIds && (
             <IssueBlocksList
@@ -295,22 +303,28 @@ export const ListGroup = observer((props: Props) => {
               isDragAllowed={isDragAllowed}
               canDropOverIssue={!canOverlayBeVisible}
               selectionHelpers={selectionHelpers}
+              isEpic={isEpic}
             />
           )}
 
           {shouldLoadMore && (group_by ? <>{loadMore}</> : <ListLoaderItemRow ref={setIntersectionElement} />)}
 
-          {enableIssueQuickAdd && !disableIssueCreation && !isGroupByCreatedBy && !isCompletedCycle && (
-            <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-custom-border-200 bg-custom-background-100 "
-                quickAddCallback={quickAddCallback}
-              />
-            </div>
-          )}
+          {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-custom-border-200 bg-custom-background-100 "
+                  quickAddCallback={quickAddCallback}
+                  isEpic={isEpic}
+                />
+              </div>
+            )}
         </div>
       )}
     </div>
diff --git a/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx b/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
index 12c604ee6..2d3eb4a8a 100644
--- a/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
@@ -2,12 +2,11 @@ import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
+import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { CycleIssueQuickActions } from "@/components/issues";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useCycle, useIssues, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // types
 import { BaseListRoot } from "../base-list-root";
 
diff --git a/web/core/components/issues/issue-layouts/list/roots/module-root.tsx b/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
index 66c5109d1..257a6be97 100644
--- a/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // mobx store
+import { EIssuesStoreType } from "@plane/constants";
 import { ModuleIssueQuickActions } from "@/components/issues";
-import { EIssuesStoreType } from "@/constants/issue";
 import { useIssues } from "@/hooks/store";
 // components
 // types
diff --git a/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx b/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
index af3c65fe9..0ebf46b50 100644
--- a/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
@@ -2,9 +2,9 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
 import { useParams } from "next/navigation";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { ProjectIssueQuickActions } from "@/components/issues";
 import { useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 // components
 // types
diff --git a/web/core/components/issues/issue-layouts/list/roots/project-root.tsx b/web/core/components/issues/issue-layouts/list/roots/project-root.tsx
index 5fe8bceab..bb98b73e1 100644
--- a/web/core/components/issues/issue-layouts/list/roots/project-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/roots/project-root.tsx
@@ -1,20 +1,22 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// hooks
-import { ProjectIssueQuickActions } from "@/components/issues";
 // components
-// types
-// constants
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { ProjectIssueQuickActions } from "@/components/issues";
+// hooks
 import { useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// plane web constants
+// components
 import { BaseListRoot } from "../base-list-root";
 
 export const ListLayout: FC = observer(() => {
-  const { workspaceSlug, projectId } = useParams();
+  // router
+  const { workspaceSlug } = useParams();
+  // hooks
   const { allowPermissions } = useUserPermissions();
 
-  if (!workspaceSlug || !projectId) return null;
+  if (!workspaceSlug) return null;
 
   const canEditPropertiesBasedOnProject = (projectId: string) =>
     allowPermissions(
diff --git a/web/core/components/issues/issue-layouts/properties/all-properties.tsx b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
index 36bb6fafc..bd5b5839d 100644
--- a/web/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/web/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -1,12 +1,15 @@
 "use client";
 
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, SyntheticEvent } from "react";
 import xor from "lodash/xor";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 // icons
 import { CalendarCheck2, CalendarClock, Layers, Link, Paperclip } from "lucide-react";
 // types
+import { ISSUE_UPDATED } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 import { TIssue, IIssueDisplayProperties, TIssuePriorities } from "@plane/types";
 // ui
 import { Tooltip } from "@plane/ui";
@@ -21,11 +24,10 @@ import {
   StateDropdown,
 } from "@/components/dropdowns";
 // constants
-import { ISSUE_UPDATED } from "@/constants/event-tracker";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
-import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
+import { generateWorkItemLink, shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 // hooks
 import { useEventTracker, useLabel, useIssues, useProjectState, useProject, useProjectEstimates } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -42,10 +44,13 @@ export interface IIssueProperties {
   isReadOnly: boolean;
   className: string;
   activeLayout: string;
+  isEpic?: boolean;
 }
 
 export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
-  const { issue, updateIssue, displayProperties, activeLayout, isReadOnly, className } = props;
+  const { issue, updateIssue, displayProperties, activeLayout, isReadOnly, className, isEpic = false } = props;
+  // i18n
+  const { t } = useTranslation();
   // store hooks
   const { getProjectById } = useProject();
   const { labelMap } = useLabel();
@@ -95,7 +100,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   );
 
   const handleState = (stateId: string) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { state_id: stateId }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -110,7 +115,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handlePriority = (value: TIssuePriorities) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { priority: value }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -125,7 +130,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handleLabel = (ids: string[]) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { label_ids: ids }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -140,7 +145,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handleAssignee = (ids: string[]) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { assignee_ids: ids }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -194,7 +199,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   );
 
   const handleStartDate = (date: Date | null) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { start_date: date ? renderFormattedPayloadDate(date) : null }).then(
         () => {
           captureIssueEvent({
@@ -211,7 +216,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handleTargetDate = (date: Date | null) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { target_date: date ? renderFormattedPayloadDate(date) : null }).then(
         () => {
           captureIssueEvent({
@@ -228,7 +233,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   };
 
   const handleEstimate = (value: string | undefined) => {
-    updateIssue &&
+    if (updateIssue)
       updateIssue(issue.project_id, issue.id, { estimate_point: value }).then(() => {
         captureIssueEvent({
           eventName: ISSUE_UPDATED,
@@ -242,17 +247,17 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       });
   };
 
-  const redirectToIssueDetail = () => {
-    router.push(
-      `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`
-    );
-    // router.push({
-    //   pathname: `/${workspaceSlug}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${
-    //     issue.id
-    //   }`,
-    //   hash: "sub-issues",
-    // });
-  };
+  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;
 
@@ -264,7 +269,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
   const maxDate = getDate(issue.target_date);
   maxDate?.setDate(maxDate.getDate());
 
-  const handleEventPropagation = (e: React.MouseEvent) => {
+  const handleEventPropagation = (e: SyntheticEvent<HTMLDivElement>) => {
     e.stopPropagation();
     e.preventDefault();
   };
@@ -274,7 +279,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
       {/* basic properties */}
       {/* state */}
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="state">
-        <div className="h-5" onClick={handleEventPropagation}>
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
           <StateDropdown
             buttonContainerClassName="truncate max-w-40"
             value={issue.state_id}
@@ -290,7 +295,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
 
       {/* priority */}
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="priority">
-        <div className="h-5" onClick={handleEventPropagation}>
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
           <PriorityDropdown
             value={issue?.priority}
             onChange={handlePriority}
@@ -303,29 +308,14 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         </div>
       </WithDisplayPropertiesHOC>
 
-      {/* label */}
-      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="labels">
-        <div className="h-5" onClick={handleEventPropagation}>
-          <IssuePropertyLabels
-            projectId={issue?.project_id || null}
-            value={issue?.label_ids || null}
-            defaultOptions={defaultLabelOptions}
-            onChange={handleLabel}
-            disabled={isReadOnly}
-            renderByDefault={isMobile}
-            hideDropdownArrow
-          />
-        </div>
-      </WithDisplayPropertiesHOC>
-
       {/* start date */}
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="start_date">
-        <div className="h-5" onClick={handleEventPropagation}>
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
           <DateDropdown
             value={issue.start_date ?? null}
             onChange={handleStartDate}
             maxDate={maxDate}
-            placeholder="Start date"
+            placeholder={t("common.order_by.start_date")}
             icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
             optionsClassName="z-10"
@@ -338,12 +328,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
 
       {/* target/due date */}
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="due_date">
-        <div className="h-5" onClick={handleEventPropagation}>
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
           <DateDropdown
             value={issue?.target_date ?? null}
             onChange={handleTargetDate}
             minDate={minDate}
-            placeholder="Due date"
+            placeholder={t("common.order_by.due_date")}
             icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
             buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
             buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
@@ -358,7 +348,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
 
       {/* assignee */}
       <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="assignee">
-        <div className="h-5" onClick={handleEventPropagation}>
+        <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
           <MemberDropdown
             projectId={issue?.project_id}
             value={issue?.assignee_ids}
@@ -368,7 +358,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             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"
+            placeholder={t("common.assignees")}
             optionsClassName="z-10"
             tooltipContent=""
             renderByDefault={isMobile}
@@ -376,48 +366,54 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         </div>
       </WithDisplayPropertiesHOC>
 
-      {/* modules */}
-      {projectDetails?.module_view && (
-        <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules">
-          <div className="h-5" 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>
-      )}
+      <>
+        {!isEpic && (
+          <>
+            {/* modules */}
+            {projectDetails?.module_view && (
+              <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="modules">
+                <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">
-          <div className="h-5" 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>
-      )}
+            {/* cycles */}
+            {projectDetails?.cycle_view && (
+              <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="cycle">
+                <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">
-          <div className="h-5" onClick={handleEventPropagation}>
+          <div className="h-5" onFocus={handleEventPropagation} onClick={handleEventPropagation}>
             <EstimateDropdown
               value={issue.estimate_point ?? undefined}
               onChange={handleEstimate}
@@ -439,12 +435,13 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         shouldRenderProperty={(properties) => !!properties.sub_issue_count && !!subIssueCount}
       >
         <Tooltip
-          tooltipHeading="Sub-issues"
+          tooltipHeading={isEpic ? t("issues.label", { count: 2 }) : t("common.sub_work_items")}
           tooltipContent={`${subIssueCount}`}
           isMobile={isMobile}
           renderByDefault={false}
         >
           <div
+            onFocus={handleEventPropagation}
             onClick={(e) => {
               e.stopPropagation();
               e.preventDefault();
@@ -470,13 +467,14 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         shouldRenderProperty={(properties) => !!properties.attachment_count && !!issue.attachment_count}
       >
         <Tooltip
-          tooltipHeading="Attachments"
+          tooltipHeading={t("common.attachments")}
           tooltipContent={`${issue.attachment_count}`}
           isMobile={isMobile}
           renderByDefault={false}
         >
           <div
             className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"
+            onFocus={handleEventPropagation}
             onClick={handleEventPropagation}
           >
             <Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@@ -492,13 +490,14 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         shouldRenderProperty={(properties) => !!properties.link && !!issue.link_count}
       >
         <Tooltip
-          tooltipHeading="Links"
+          tooltipHeading={t("common.links")}
           tooltipContent={`${issue.link_count}`}
           isMobile={isMobile}
           renderByDefault={false}
         >
           <div
             className="flex h-5 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded border-[0.5px] border-custom-border-300 px-2.5 py-1"
+            onFocus={handleEventPropagation}
             onClick={handleEventPropagation}
           >
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
@@ -506,6 +505,20 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
+
+      {/* label */}
+      <WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="labels">
+        <IssuePropertyLabels
+          projectId={issue?.project_id || null}
+          value={issue?.label_ids || null}
+          defaultOptions={defaultLabelOptions}
+          onChange={handleLabel}
+          disabled={isReadOnly}
+          renderByDefault={isMobile}
+          hideDropdownArrow
+          maxRender={3}
+        />
+      </WithDisplayPropertiesHOC>
     </div>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/properties/index.ts b/web/core/components/issues/issue-layouts/properties/index.ts
index 8bdc3ea3f..668979012 100644
--- a/web/core/components/issues/issue-layouts/properties/index.ts
+++ b/web/core/components/issues/issue-layouts/properties/index.ts
@@ -1,2 +1,3 @@
 export * from "./labels";
 export * from "./all-properties";
+export * from "./label-dropdown";
diff --git a/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx b/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
new file mode 100644
index 000000000..54edb6935
--- /dev/null
+++ b/web/core/components/issues/issue-layouts/properties/label-dropdown.tsx
@@ -0,0 +1,307 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Placement } from "@popperjs/core";
+import { useParams } from "next/navigation";
+import { usePopper } from "react-popper";
+import { Check, ChevronDown, Loader, Search } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane imports
+import { EUserPermissionsLevel, EUserProjectRoles, getRandomLabelColor } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+// types
+import { IIssueLabel } from "@plane/types";
+// components
+import { ComboDropDown } from "@plane/ui";
+// hooks
+import { useLabel, useUserPermissions } from "@/hooks/store";
+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 const 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(
+    () =>
+      query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase())),
+    [options, query]
+  );
+
+  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));
+  }, [storeLabels, workspaceSlug, projectId, fetchProjectLabels]);
+
+  const toggleDropdown = useCallback(() => {
+    if (!isOpen) onOpen();
+    setIsOpen((prevIsOpen) => !prevIsOpen);
+    if (isOpen && onClose) onClose();
+  }, [onOpen, onClose, isOpen]);
+
+  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("");
+    }
+
+    if (query !== "" && e.key === "Enter" && 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 w-full h-full items-center justify-center gap-1 text-xs ${fullWidth && "hover:bg-custom-background-80"} ${
+          disabled
+            ? "cursor-not-allowed text-custom-text-200"
+            : value.length <= maxRender
+              ? "cursor-pointer"
+              : "cursor-pointer hover:bg-custom-background-80"
+        }  ${buttonClassName}`}
+        onClick={handleOnClick}
+        disabled={disabled}
+      >
+        {label}
+        {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
+      </button>
+    ),
+    [buttonClassName, disabled, fullWidth, handleOnClick, hideDropdownArrow, label, maxRender, value.length]
+  );
+
+  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={`w-auto max-w-full h-full flex-shrink-0 text-left ${className}`}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        onKeyDown={handleKeyDown}
+        button={comboButton}
+        renderByDefault={renderByDefault}
+        multiple
+      >
+        {isOpen && (
+          <Combobox.Options className="fixed z-10" static>
+            <div
+              className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
+              ref={setPopperElement}
+              style={styles.popper}
+              {...attributes.popper}
+            >
+              <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
+                <Search className="h-3.5 w-3.5 text-custom-text-300" />
+                <Combobox.Input
+                  ref={inputRef}
+                  className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 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`}>
+                {isLoading ? (
+                  <p className="text-center text-custom-text-200">{t("common.loading")}</p>
+                ) : filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <Combobox.Option
+                      key={option.value}
+                      value={option.value}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          e.stopPropagation();
+                        }
+                      }}
+                      className={({ active, selected }) =>
+                        `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
+                          active ? "bg-custom-background-80" : ""
+                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                      }
+                    >
+                      {({ selected }) => (
+                        <>
+                          {option.content}
+                          {selected && (
+                            <div className="flex-shrink-0">
+                              <Check className={`h-3.5 w-3.5`} />
+                            </div>
+                          )}
+                        </>
+                      )}
+                    </Combobox.Option>
+                  ))
+                ) : submitting ? (
+                  <Loader className="spin  h-3.5 w-3.5" />
+                ) : canCreateLabel ? (
+                  <p
+                    onClick={() => {
+                      if (!query.length) return;
+                      handleAddLabel(query);
+                    }}
+                    className={`text-left text-custom-text-200 ${query.length ? "cursor-pointer" : "cursor-default"}`}
+                  >
+                    {/* TODO: translate here */}
+                    {query.length ? (
+                      <>
+                        + Add <span className="text-custom-text-100">&quot;{query}&quot;</span> to labels
+                      </>
+                    ) : (
+                      t("label.create.type")
+                    )}
+                  </p>
+                ) : (
+                  <p className="text-left text-custom-text-200 ">{t("common.search.no_matching_results")}</p>
+                )}
+              </div>
+            </div>
+          </Combobox.Options>
+        )}
+      </ComboDropDown>
+    </div>
+  );
+};
diff --git a/web/core/components/issues/issue-layouts/properties/labels.tsx b/web/core/components/issues/issue-layouts/properties/labels.tsx
index 823137cb8..7c0ed4cd2 100644
--- a/web/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/core/components/issues/issue-layouts/properties/labels.tsx
@@ -1,27 +1,27 @@
 "use client";
 
-import { Fragment, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-import { usePopper } from "react-popper";
-import { Check, ChevronDown, Search, Tags } from "lucide-react";
-import { Combobox } from "@headlessui/react";
+import { Tags } from "lucide-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueLabel } from "@plane/types";
 // ui
-import { ComboDropDown, Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/ui";
 // hooks
+import { cn } from "@plane/utils";
 import { useLabel } from "@/hooks/store";
-import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+import { LabelDropdown } from "./label-dropdown";
 
 export interface IIssuePropertyLabels {
   projectId: string | null;
   value: string[];
-  defaultOptions?: any;
+  defaultOptions?: unknown;
   onChange: (data: string[]) => void;
   disabled?: boolean;
   hideDropdownArrow?: boolean;
@@ -35,6 +35,7 @@ export interface IIssuePropertyLabels {
   onClose?: () => void;
   renderByDefault?: boolean;
   fullWidth?: boolean;
+  fullHeight?: boolean;
 }
 
 export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
@@ -46,283 +47,180 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     onClose,
     disabled,
     hideDropdownArrow = false,
-    className,
     buttonClassName = "",
-    optionsClassName = "",
     placement,
     maxRender = 2,
     noLabelBorder = false,
     placeholderText,
     renderByDefault = true,
     fullWidth = false,
+    fullHeight = false,
   } = props;
-  // router
-  const { workspaceSlug: routerWorkspaceSlug } = useParams();
-  const workspaceSlug = routerWorkspaceSlug?.toString();
+  // 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);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
   // store hooks
-  const { fetchProjectLabels, getProjectLabels } = useLabel();
+  const { getProjectLabels } = useLabel();
   const { isMobile } = usePlatformOS();
   const storeLabels = getProjectLabels(projectId);
 
-  const onOpen = () => {
-    if (!storeLabels && workspaceSlug && projectId)
-      fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
-  };
-
   const handleClose = () => {
     if (!isOpen) return;
     setIsOpen(false);
-    setQuery("");
-    onClose && onClose();
-  };
-
-  const toggleDropdown = () => {
-    if (!isOpen) onOpen();
-    setIsOpen((prevIsOpen) => !prevIsOpen);
-    if (isOpen) onClose && onClose();
-  };
-
-  const handleKeyDown = useDropdownKeyDown(toggleDropdown, handleClose);
-
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    toggleDropdown();
+    if (onClose) onClose();
   };
 
   useOutsideClickDetector(dropdownRef, handleClose);
 
-  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (query !== "" && e.key === "Escape") {
-      e.stopPropagation();
-      setQuery("");
-    }
-  };
-
   useEffect(() => {
     if (isOpen && inputRef.current && !isMobile) {
       inputRef.current.focus();
     }
   }, [isOpen, isMobile]);
 
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: placement ?? "bottom-start",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
-  });
-
   if (!value) return null;
 
-  let projectLabels: IIssueLabel[] = defaultOptions;
+  let projectLabels: IIssueLabel[] = defaultOptions as IIssueLabel[];
   if (storeLabels && storeLabels.length > 0) projectLabels = storeLabels;
 
-  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 label = (
-    <div className="flex h-full w-full flex-wrap items-center gap-2 overflow-hidden">
-      {value.length > 0 ? (
-        value.length <= maxRender ? (
-          <>
-            {projectLabels
-              ?.filter((l) => value.includes(l?.id))
-              .map((label) => (
-                <Tooltip
-                  key={label.id}
-                  position="top"
-                  tooltipHeading="Labels"
-                  tooltipContent={label?.name ?? ""}
-                  isMobile={isMobile}
-                  renderByDefault={renderByDefault}
-                >
-                  <div
-                    key={label?.id}
-                    className={`flex overflow-hidden hover:bg-custom-background-80 ${
-                      !disabled && "cursor-pointer"
-                    } h-full ${fullWidth && "w-full"} max-w-full flex-shrink-0 items-center rounded px-2.5 text-xs ${noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"}`}
-                  >
-                    <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
-                      <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-[100px] truncate">{label?.name}</div>
-                    </div>
-                  </div>
-                </Tooltip>
-              ))}
-          </>
-        ) : (
-          <div
-            className={`flex h-full ${fullWidth && "w-full"} flex-shrink-0 items-center rounded px-2.5 text-xs ${
-              disabled ? "cursor-not-allowed" : "cursor-pointer"
-            } ${noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"}`}
-          >
-            <Tooltip
-              isMobile={isMobile}
-              position="top"
-              tooltipHeading="Labels"
-              tooltipContent={projectLabels
-                ?.filter((l) => value.includes(l?.id))
-                .map((l) => l?.name)
-                .join(", ")}
-              renderByDefault={false}
-            >
-              <div className="flex h-full items-center gap-1.5 text-custom-text-200">
-                <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
-                {`${value.length} Labels`}
-              </div>
-            </Tooltip>
-          </div>
-        )
-      ) : (
-        <Tooltip
-          position="top"
-          tooltipHeading="Labels"
-          tooltipContent="None"
-          isMobile={isMobile}
-          renderByDefault={false}
+  const NoLabel = useMemo(
+    () => (
+      <Tooltip
+        position="top"
+        tooltipHeading={t("common.labels")}
+        tooltipContent="None"
+        isMobile={isMobile}
+        renderByDefault={false}
+      >
+        <div
+          className={cn(
+            "flex h-full items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80",
+            noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300",
+            fullWidth && "w-full"
+          )}
         >
-          <div
-            className={`flex h-full ${fullWidth && "w-full"} items-center justify-center gap-2 rounded px-2.5 py-1 text-xs hover:bg-custom-background-80 ${
-              noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"
-            }`}
-          >
-            <Tags className="h-3.5 w-3.5" strokeWidth={2} />
-            {placeholderText}
-          </div>
-        </Tooltip>
-      )}
-    </div>
+          <Tags className="h-3.5 w-3.5" strokeWidth={2} />
+          {placeholderText}
+        </div>
+      </Tooltip>
+    ),
+    [placeholderText, fullWidth, noLabelBorder, isMobile]
   );
 
-  const comboButton = (
-    <button
-      ref={setReferenceElement}
-      type="button"
-      className={`clickable flex w-full h-full items-center justify-between gap-1 text-xs ${fullWidth && "hover:bg-custom-background-80"} ${
-        disabled
-          ? "cursor-not-allowed text-custom-text-200"
-          : value.length <= maxRender
-            ? "cursor-pointer"
-            : "cursor-pointer hover:bg-custom-background-80"
-      }  ${buttonClassName}`}
-      onClick={handleOnClick}
-      disabled={disabled}
-    >
-      {label}
-      {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
-    </button>
+  const LabelSummary = useMemo(
+    () => (
+      <div
+        className={cn(
+          "flex h-5 flex-shrink-0 items-center justify-center rounded px-2.5 text-xs",
+          fullWidth && "w-full",
+          noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300",
+          disabled ? "cursor-not-allowed" : "cursor-pointer"
+        )}
+      >
+        <Tooltip
+          isMobile={isMobile}
+          position="top"
+          tooltipHeading={t("common.labels")}
+          tooltipContent={projectLabels
+            ?.filter((l) => value.includes(l?.id))
+            .map((l) => l?.name)
+            .join(", ")}
+          renderByDefault={false}
+        >
+          <div className="flex h-full items-center gap-1.5 text-custom-text-200">
+            <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+            {`${value.length} Labels`}
+          </div>
+        </Tooltip>
+      </div>
+    ),
+    [fullWidth, disabled, noLabelBorder, isMobile, projectLabels, value]
+  );
+
+  const LabelItem = useCallback(
+    ({ label }: { label: IIssueLabel }) => (
+      <Tooltip
+        key={label.id}
+        position="top"
+        tooltipHeading={t("common.labels")}
+        tooltipContent={label?.name ?? ""}
+        isMobile={isMobile}
+        renderByDefault={renderByDefault}
+      >
+        <div
+          key={label?.id}
+          className={cn(
+            "flex overflow-hidden justify-center hover:bg-custom-background-80 max-w-full h-full flex-shrink-0 items-center rounded px-2.5 text-xs",
+            !disabled && "cursor-pointer",
+            fullWidth && "w-full",
+            noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"
+          )}
+        >
+          <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
+            <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>
+    ),
+    [disabled, fullWidth, isMobile, noLabelBorder, renderByDefault]
   );
 
   return (
-    <ComboDropDown
-      as="div"
-      ref={dropdownRef}
-      className={`w-auto max-w-full h-full flex-shrink-0 text-left ${className}`}
-      value={value}
-      onChange={onChange}
-      disabled={disabled}
-      onKeyDown={handleKeyDown}
-      button={comboButton}
-      renderByDefault={renderByDefault}
-      multiple
-    >
-      {isOpen && (
-        <Combobox.Options className="fixed z-10" static>
-          <div
-            className={`z-10 my-1 w-48 h-auto whitespace-nowrap rounded border border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none ${optionsClassName}`}
-            ref={setPopperElement}
-            style={styles.popper}
-            {...attributes.popper}
-          >
-            <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
-              <Search className="h-3.5 w-3.5 text-custom-text-300" />
-              <Combobox.Input
-                ref={inputRef}
-                className="w-full bg-transparent px-2 py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name || ""}
-                onKeyDown={searchInputKeyDown}
+    <>
+      {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} />}
               />
-            </div>
-            <div className={`mt-2 max-h-48 space-y-1 overflow-y-scroll`}>
-              {isLoading ? (
-                <p className="text-center text-custom-text-200">Loading...</p>
-              ) : filteredOptions.length > 0 ? (
-                filteredOptions.map((option) => (
-                  <Combobox.Option
-                    key={option.value}
-                    value={option.value}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter") {
-                        e.preventDefault();
-                        e.stopPropagation();
-                      }
-                    }}
-                    className={({ active, selected }) =>
-                      `flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 hover:bg-custom-background-80 ${
-                        active ? "bg-custom-background-80" : ""
-                      } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                    }
-                  >
-                    {({ selected }) => (
-                      <>
-                        {option.content}
-                        {selected && (
-                          <div className="flex-shrink-0">
-                            <Check className={`h-3.5 w-3.5`} />
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </Combobox.Option>
-                ))
-              ) : (
-                <span className="flex items-center gap-2 p-1">
-                  <p className="text-left text-custom-text-200 ">No matching results</p>
-                </span>
-              )}
-            </div>
-          </div>
-        </Combobox.Options>
+            ))
+        ) : (
+          <LabelDropdown
+            projectId={projectId}
+            value={value}
+            onChange={onChange}
+            hideDropdownArrow={hideDropdownArrow}
+            buttonClassName={buttonClassName}
+            placement={placement}
+            fullWidth={fullWidth}
+            fullHeight={fullHeight}
+            label={LabelSummary}
+          />
+        )
+      ) : (
+        <LabelDropdown
+          projectId={projectId}
+          value={value}
+          onChange={onChange}
+          hideDropdownArrow={hideDropdownArrow}
+          buttonClassName={buttonClassName}
+          placement={placement}
+          fullWidth={fullWidth}
+          fullHeight={fullHeight}
+          label={NoLabel}
+        />
       )}
-    </ComboDropDown>
+    </>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
index 9ecbe44d0..1dca91a93 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/all-issue.tsx
@@ -6,19 +6,18 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
 // types
+import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType } from "@plane/constants";
 import { TIssue } from "@plane/types";
 // ui
 import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
-// constants
-import { EIssuesStoreType } from "@/constants/issue";
-import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useEventTracker, useProjectState } from "@/hooks/store";
+import { useEventTracker, useProject, useProjectState } from "@/hooks/store";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
 
@@ -44,22 +43,30 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
   // store hooks
   const { setTrackElement } = useEventTracker();
   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 issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+  });
 
-  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+  const handleOpenInNewTab = () => window.open(workItemLink, "_blank");
   const handleCopyIssueLink = () =>
-    copyUrlToClipboard(issueLink).then(() =>
+    copyUrlToClipboard(workItemLink, false).then(() =>
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
-        message: "Issue link copied to clipboard",
+        message: "Work item link copied to clipboard",
       })
     );
 
@@ -109,7 +116,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
     {
       key: "archive",
       title: "Archive",
-      description: isInArchivableGroup ? undefined : "Only completed or canceled\nissues can be archived",
+      description: isInArchivableGroup ? undefined : "Only completed or canceled\nwork items can be archived",
       icon: ArchiveIcon,
       className: "items-start",
       iconClassName: "mt-1",
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
index e6349fac8..5957712e2 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/archived-issue.tsx
@@ -6,17 +6,16 @@ import { useParams } from "next/navigation";
 // icons
 import { ArchiveRestoreIcon, ExternalLink, Link, Trash2 } from "lucide-react";
 // ui
+import { EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { DeleteIssueModal } from "@/components/issues";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
 
@@ -45,7 +44,8 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
   // auth
   const isEditingAllowed =
     allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT) && !readOnly;
-  const isRestoringAllowed = handleRestore && isEditingAllowed;
+  const isRestoringAllowed =
+    handleRestore && allowPermissions([EUserPermissions.ADMIN, EUserPermissions.MEMBER], EUserPermissionsLevel.PROJECT);
 
   const issueLink = `${workspaceSlug}/projects/${issue.project_id}/archives/issues/${issue.id}`;
 
@@ -55,7 +55,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
-        message: "Issue link copied to clipboard",
+        message: "Work item link copied to clipboard",
       })
     );
   const handleIssueRestore = async () => {
@@ -65,14 +65,14 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Restore success",
-          message: "Your issue can be found in project issues.",
+          message: "Your work item can be found in project work items.",
         });
       })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: "Issue could not be restored. Please try again.",
+          message: "Work item could not be restored. Please try again.",
         });
       });
   };
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
index 3f455f990..9d752b630 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx
@@ -6,20 +6,18 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react";
 // types
+import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { TIssue } from "@plane/types";
 // ui
 import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
-// constants
-import { EIssuesStoreType } from "@/constants/issue";
-import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useEventTracker, useIssues, useProjectState, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useEventTracker, useIssues, useProject, useProjectState, useUserPermissions } from "@/hooks/store";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
 
@@ -48,8 +46,10 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
   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;
@@ -59,16 +59,22 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
 
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
-  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+  });
 
-  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+  const handleOpenInNewTab = () => window.open(workItemLink, "_blank");
 
   const handleCopyIssueLink = () =>
-    copyUrlToClipboard(issueLink).then(() =>
+    copyUrlToClipboard(workItemLink, false).then(() =>
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
-        message: "Issue link copied to clipboard",
+        message: "Work item link copied to clipboard",
       })
     );
 
@@ -128,7 +134,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
     {
       key: "archive",
       title: "Archive",
-      description: isInArchivableGroup ? undefined : "Only completed or canceled\nissues can be archived",
+      description: isInArchivableGroup ? undefined : "Only completed or canceled\nwork items can be archived",
       icon: ArchiveIcon,
       className: "items-start",
       iconClassName: "mt-1",
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
index d9bc00c5f..0a1860066 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/draft-issue.tsx
@@ -6,18 +6,18 @@ import { observer } from "mobx-react";
 // icons
 import { Pencil, Trash2 } from "lucide-react";
 // types
+import { EIssuesStoreType,EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 // ui
 import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 // components
 import { CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
 // constant
-import { EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useEventTracker, useIssues, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
 
@@ -40,6 +40,8 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
   const { allowPermissions } = useUserPermissions();
   const { setTrackElement } = useEventTracker();
   const { issuesFilter } = useIssues(EIssuesStoreType.PROJECT);
+
+  const { t } = useTranslation();
   // derived values
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
   // auth
@@ -59,7 +61,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "edit",
-      title: "Edit",
+      title: "edit",
       icon: Pencil,
       action: () => {
         setTrackElement(activeLayout);
@@ -70,7 +72,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
     },
     {
       key: "delete",
-      title: "Delete",
+      title: "delete",
       icon: Trash2,
       action: () => {
         setTrackElement(activeLayout);
@@ -138,7 +140,7 @@ export const DraftIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
-                <h5>{item.title}</h5>
+                <h5>{t(item.title ?? "")}</h5>
                 {item.description && (
                   <p
                     className={cn("text-custom-text-300 whitespace-pre-line", {
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
index c4ce4ce52..c2f0aa994 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/module-issue.tsx
@@ -6,20 +6,18 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Copy, ExternalLink, Link, Pencil, Trash2, XCircle } from "lucide-react";
 // types
+import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { TIssue } from "@plane/types";
 // ui
 import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
-// constants
-import { EIssuesStoreType } from "@/constants/issue";
-import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useIssues, useEventTracker, useProjectState, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useIssues, useEventTracker, useProjectState, useUserPermissions, useProject } from "@/hooks/store";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
 
@@ -48,8 +46,10 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
   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;
@@ -59,16 +59,22 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
 
   const activeLayout = `${issuesFilter.issueFilters?.displayFilters?.layout} layout`;
 
-  const issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+  });
 
-  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+  const handleOpenInNewTab = () => window.open(workItemLink, "_blank");
 
   const handleCopyIssueLink = () =>
-    copyUrlToClipboard(issueLink).then(() =>
+    copyUrlToClipboard(workItemLink, false).then(() =>
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
-        message: "Issue link copied to clipboard",
+        message: "Work item link copied to clipboard",
       })
     );
 
@@ -125,7 +131,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
     {
       key: "archive",
       title: "Archive",
-      description: isInArchivableGroup ? undefined : "Only completed or canceled\nissues can be archived",
+      description: isInArchivableGroup ? undefined : "Only completed or canceled\nwork items can be archived",
       icon: ArchiveIcon,
       className: "items-start",
       iconClassName: "mt-1",
diff --git a/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx b/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
index a1f8ff7c0..ac346a4f4 100644
--- a/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
+++ b/web/core/components/issues/issue-layouts/quick-action-dropdowns/project-issue.tsx
@@ -1,25 +1,24 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import omit from "lodash/omit";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import { Copy, ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
+import { ARCHIVABLE_STATE_GROUPS, EIssuesStoreType, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import { TIssue } from "@plane/types";
 // ui
 import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ArchiveIssueModal, CreateUpdateIssueModal, DeleteIssueModal } from "@/components/issues";
-// constants
-import { EIssuesStoreType } from "@/constants/issue";
-import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useEventTracker, useIssues, useProjectState, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useEventTracker, useIssues, useProject, useProjectState, useUserPermissions } from "@/hooks/store";
 // types
 import { IQuickActionProps } from "../list/list-view-types";
 
@@ -35,6 +34,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
     placements = "bottom-end",
     parentRef,
   } = props;
+  // i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
@@ -48,26 +49,40 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
   const { setTrackElement } = useEventTracker();
   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) && !readOnly;
+    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 issueLink = `${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`;
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issue?.project_id,
+    issueId: issue?.id,
+    projectIdentifier,
+    sequenceId: issue?.sequence_id,
+  });
+
   const handleCopyIssueLink = () =>
-    copyUrlToClipboard(issueLink).then(() =>
+    copyUrlToClipboard(workItemLink, false).then(() =>
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: "Link copied",
-        message: "Issue link copied to clipboard",
+        message: "Work item link copied to clipboard",
       })
     );
-  const handleOpenInNewTab = () => window.open(`/${issueLink}`, "_blank");
+  const handleOpenInNewTab = () => window.open(workItemLink, "_blank");
 
   const isDraftIssue = pathname?.includes("draft-issues") || false;
 
@@ -81,62 +96,65 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
     ["id"]
   );
 
-  const MENU_ITEMS: TContextMenuItem[] = [
-    {
-      key: "edit",
-      title: "Edit",
-      icon: Pencil,
-      action: () => {
-        setTrackElement(activeLayout);
-        setIssueToEdit(issue);
-        setCreateUpdateIssueModal(true);
+  const MENU_ITEMS: TContextMenuItem[] = useMemo(
+    () => [
+      {
+        key: "edit",
+        title: t("common.actions.edit"),
+        icon: Pencil,
+        action: () => {
+          setTrackElement(activeLayout);
+          setIssueToEdit(issue);
+          setCreateUpdateIssueModal(true);
+        },
+        shouldRender: isEditingAllowed,
       },
-      shouldRender: isEditingAllowed,
-    },
-    {
-      key: "make-a-copy",
-      title: "Make a copy",
-      icon: Copy,
-      action: () => {
-        setTrackElement(activeLayout);
-        setCreateUpdateIssueModal(true);
+      {
+        key: "make-a-copy",
+        title: t("common.actions.make_a_copy"),
+        icon: Copy,
+        action: () => {
+          setTrackElement(activeLayout);
+          setCreateUpdateIssueModal(true);
+        },
+        shouldRender: isEditingAllowed,
       },
-      shouldRender: isEditingAllowed,
-    },
-    {
-      key: "open-in-new-tab",
-      title: "Open in new tab",
-      icon: ExternalLink,
-      action: handleOpenInNewTab,
-    },
-    {
-      key: "copy-link",
-      title: "Copy link",
-      icon: Link,
-      action: handleCopyIssueLink,
-    },
-    {
-      key: "archive",
-      title: "Archive",
-      description: isInArchivableGroup ? undefined : "Only completed or canceled\nissues can be archived",
-      icon: ArchiveIcon,
-      className: "items-start",
-      iconClassName: "mt-1",
-      action: () => setArchiveIssueModal(true),
-      disabled: !isInArchivableGroup,
-      shouldRender: isArchivingAllowed,
-    },
-    {
-      key: "delete",
-      title: "Delete",
-      icon: Trash2,
-      action: () => {
-        setTrackElement(activeLayout);
-        setDeleteIssueModal(true);
+      {
+        key: "open-in-new-tab",
+        title: t("common.actions.open_in_new_tab"),
+        icon: ExternalLink,
+        action: handleOpenInNewTab,
       },
-      shouldRender: isDeletingAllowed,
-    },
-  ];
+      {
+        key: "copy-link",
+        title: t("common.actions.copy_link"),
+        icon: Link,
+        action: handleCopyIssueLink,
+      },
+      {
+        key: "archive",
+        title: t("common.actions.archive"),
+        description: isInArchivableGroup ? undefined : t("issue.archive.description"),
+        icon: ArchiveIcon,
+        className: "items-start",
+        iconClassName: "mt-1",
+        action: () => setArchiveIssueModal(true),
+        disabled: !isInArchivableGroup,
+        shouldRender: isArchivingAllowed,
+      },
+      {
+        key: "delete",
+        title: t("common.actions.delete"),
+        icon: Trash2,
+        action: () => {
+          setTrackElement(activeLayout);
+          setDeleteIssueModal(true);
+        },
+        shouldRender: isDeletingAllowed,
+      },
+    ],
+    [t]
+  );
 
   return (
     <>
diff --git a/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx b/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
index eb9dd35a8..af96c0a91 100644
--- a/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/button/gantt.tsx
@@ -1,12 +1,13 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { PlusIcon } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { Row } from "@plane/ui";
 import { TQuickAddIssueButton } from "../root";
 
 export const GanttQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
-  const { onClick } = props;
-
+  const { onClick, isEpic = false } = props;
+  const { t } = useTranslation();
   return (
     <button
       type="button"
@@ -15,7 +16,7 @@ export const GanttQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((prop
     >
       <Row className="flex py-2 gap-2">
         <PlusIcon className="h-3.5 w-3.5 stroke-2 my-auto" />
-        <span className="text-sm font-medium">New Issue</span>
+        <span className="text-sm font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
       </Row>
     </button>
   );
diff --git a/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx b/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
index 5338cba9d..deadd9e4c 100644
--- a/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
@@ -1,18 +1,19 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { PlusIcon } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TQuickAddIssueButton } from "../root";
 
 export const KanbanQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
-  const { onClick } = props;
-
+  const { onClick, isEpic = false } = props;
+  const { t } = useTranslation();
   return (
     <div
       className="flex w-full cursor-pointer items-center gap-2 py-1.5 text-custom-text-350 hover:text-custom-text-300"
       onClick={onClick}
     >
       <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-      <span className="text-sm font-medium">New Issue</span>
+      <span className="text-sm font-medium">{isEpic ? t("epic.new") : t("issue.new")}</span>
     </div>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/quick-add/button/list.tsx b/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
index 09b90dbf4..1b09e8e3c 100644
--- a/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/button/list.tsx
@@ -1,19 +1,20 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { PlusIcon } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { Row } from "@plane/ui";
 import { TQuickAddIssueButton } from "../root";
 
 export const ListQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
-  const { onClick } = props;
-
+  const { onClick, isEpic = false } = props;
+  const { t } = useTranslation();
   return (
     <Row
       className="flex w-full cursor-pointer items-center gap-2 py-3 text-custom-text-350 hover:text-custom-text-300"
       onClick={onClick}
     >
       <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-      <span className="text-sm font-medium">New Issue</span>
+      <span className="text-sm font-medium">{isEpic ? t("epic.new") : t("issue.new")}</span>
     </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx b/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
index b5663bb56..1a0bb7d46 100644
--- a/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/button/spreadsheet.tsx
@@ -1,11 +1,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { PlusIcon } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TQuickAddIssueButton } from "../root";
 
 export const SpreadsheetAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
-  const { onClick } = props;
-
+  const { onClick, isEpic = false } = props;
+  const { t } = useTranslation();
   return (
     <div className="flex items-center">
       <button
@@ -14,7 +15,7 @@ export const SpreadsheetAddIssueButton: FC<TQuickAddIssueButton> = observer((pro
         onClick={onClick}
       >
         <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-        <span className="text-sm font-medium">New Issue</span>
+        <span className="text-sm font-medium">{isEpic ? t("epic.add.label") : t("issue.add.label")}</span>
       </button>
     </div>
   );
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx b/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
index 66e799056..765a54af7 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/calendar.tsx
@@ -3,12 +3,13 @@ import { observer } from "mobx-react";
 import { TQuickAddIssueForm } from "../root";
 
 export const CalendarQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, isOpen, projectDetail, register, onSubmit } = props;
+  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"
-        }`}
+      className={`z-20 w-full transition-all ${
+        isOpen ? "scale-100 opacity-100" : "pointer-events-none scale-95 opacity-0"
+      }`}
     >
       <form
         ref={ref}
@@ -19,9 +20,9 @@ export const CalendarQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props
         <input
           type="text"
           autoComplete="off"
-          placeholder="Issue Title"
+          placeholder={isEpic ? "Epic Title" : "Work item Title"}
           {...register("name", {
-            required: "Issue title is required.",
+            required: `${isEpic ? "Epic" : "Work item"} title is required.`,
           })}
           className="w-full rounded-md bg-transparent py-1.5 pr-2 text-sm md:text-xs font-medium leading-5 text-custom-text-200 outline-none"
         />
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx b/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
index d0afadb09..19f047676 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/gantt.tsx
@@ -1,11 +1,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 import { cn } from "@/helpers/common.helper";
 import { TQuickAddIssueForm } from "../root";
 
 export const GanttQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, projectDetail, hasError, register, onSubmit } = props;
-
+  const { ref, projectDetail, hasError, register, onSubmit, isEpic } = props;
+  const { t } = useTranslation();
   return (
     <div className={cn("shadow-custom-shadow-sm", hasError && "border border-red-500/20 bg-red-500/10")}>
       <form
@@ -18,15 +19,17 @@ export const GanttQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) =
           <input
             type="text"
             autoComplete="off"
-            placeholder="Issue Title"
+            placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
             {...register("name", {
-              required: "Issue title is required.",
+              required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
             className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-custom-text-200 outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-xs bg-custom-background-100 italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
+      <div className="px-3 py-2 text-xs bg-custom-background-100 italic text-custom-text-200">
+        {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
+      </div>
     </div>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx b/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
index 8111f539e..92e1811b3 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 import { TQuickAddIssueForm } from "../root";
 
 export const KanbanQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, projectDetail, register, onSubmit } = props;
-
+  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+  const { t } = useTranslation();
   return (
     <div className="m-1 overflow-hidden rounded shadow-custom-shadow-sm">
       <form ref={ref} onSubmit={onSubmit} className="flex w-full items-center gap-x-3 bg-custom-background-100 p-3">
@@ -12,15 +13,17 @@ export const KanbanQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props)
           <h4 className="text-xs font-medium leading-5 text-custom-text-300">{projectDetail?.identifier ?? "..."}</h4>
           <input
             autoComplete="off"
-            placeholder="Issue Title"
+            placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
             {...register("name", {
-              required: "Issue title is required.",
+              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-sm font-medium leading-5 text-custom-text-200 outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-xs italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
+      <div className="px-3 py-2 text-xs italic text-custom-text-200">
+        {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
+      </div>
     </div>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/list.tsx b/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
index 0a894511f..a977a2918 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/list.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 import { TQuickAddIssueForm } from "../root";
 
 export const ListQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, projectDetail, register, onSubmit } = props;
-
+  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+  const { t } = useTranslation();
   return (
     <div className="shadow-custom-shadow-sm">
       <form
@@ -17,15 +18,17 @@ export const ListQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) =>
           <input
             type="text"
             autoComplete="off"
-            placeholder="Issue Title"
+            placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
             {...register("name", {
-              required: "Issue title is required.",
+              required: isEpic ? t("epic.title.required") : t("issue.title.required"),
             })}
             className="w-full rounded-md bg-transparent px-2 py-3 text-sm font-medium leading-5 text-custom-text-200 outline-none"
           />
         </div>
       </form>
-      <div className="px-3 py-2 text-xs italic text-custom-text-200">{`Press 'Enter' to add another issue`}</div>
+      <div className="px-3 py-2 text-xs italic text-custom-text-200">
+        {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
+      </div>
     </div>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx b/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
index b4317f359..494f2c636 100644
--- a/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/form/spreadsheet.tsx
@@ -1,10 +1,11 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 import { TQuickAddIssueForm } from "../root";
 
 export const SpreadsheetQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
-  const { ref, projectDetail, register, onSubmit } = props;
-
+  const { ref, projectDetail, register, onSubmit, isEpic } = props;
+  const { t } = useTranslation();
   return (
     <div className="pb-2">
       <form
@@ -16,15 +17,15 @@ export const SpreadsheetQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((pr
         <input
           type="text"
           autoComplete="off"
-          placeholder="Issue Title"
+          placeholder={isEpic ? t("epic.title.label") : t("issue.title.label")}
           {...register("name", {
-            required: "Issue title is required.",
+            required: isEpic ? t("epic.title.required") : t("issue.title.required"),
           })}
           className="w-full rounded-md bg-transparent py-3 text-sm leading-5 text-custom-text-200 outline-none"
         />
       </form>
       <p className="ml-3 mt-3 text-xs italic text-custom-text-200">
-        Press {"'"}Enter{"'"} to add another issue
+        {isEpic ? t("epic.add.press_enter") : t("issue.add.press_enter")}
       </p>
     </div>
   );
diff --git a/web/core/components/issues/issue-layouts/quick-add/root.tsx b/web/core/components/issues/issue-layouts/quick-add/root.tsx
index 4cdf2e8c0..6bc6997a4 100644
--- a/web/core/components/issues/issue-layouts/quick-add/root.tsx
+++ b/web/core/components/issues/issue-layouts/quick-add/root.tsx
@@ -5,15 +5,16 @@ import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
 import { useForm, UseFormRegister } from "react-hook-form";
 import { PlusIcon } from "lucide-react";
-// types
+// plane constants
+import { EIssueLayoutTypes, EIssueServiceType, ISSUE_CREATED } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 import { IProject, TIssue } from "@plane/types";
 // ui
 import { setPromiseToast } from "@plane/ui";
 // components
 import { CreateIssueToastActionItems } from "@/components/issues";
 // constants
-import { ISSUE_CREATED } from "@/constants/event-tracker";
-import { EIssueLayoutTypes } from "@/constants/issue";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { createIssuePayload } from "@/helpers/issue.helper";
@@ -29,9 +30,11 @@ export type TQuickAddIssueForm = {
   hasError: boolean;
   register: UseFormRegister<TIssue>;
   onSubmit: () => void;
+  isEpic: boolean;
 };
 
 export type TQuickAddIssueButton = {
+  isEpic?: boolean;
   onClick: () => void;
 };
 
@@ -44,6 +47,7 @@ type TQuickAddIssueRoot = {
   containerClassName?: string;
   setIsQuickAddOpen?: (isOpen: boolean) => void;
   quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  isEpic?: boolean;
 };
 
 const defaultValues: Partial<TIssue> = {
@@ -60,7 +64,10 @@ export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
     containerClassName = "",
     setIsQuickAddOpen,
     quickAddCallback,
+    isEpic = false,
   } = props;
+  // i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
@@ -108,21 +115,23 @@ export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
     if (quickAddCallback) {
       const quickAddPromise = quickAddCallback(projectId.toString(), { ...payload });
       setPromiseToast<any>(quickAddPromise, {
-        loading: "Adding issue...",
+        loading: isEpic ? t("epic.adding") : t("issue.adding"),
         success: {
-          title: "Success!",
-          message: () => "Issue created successfully.",
+          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: "Error!",
-          message: (err) => err?.message || "Some error occurred. Please try again.",
+          title: t("common.error.label"),
+          message: (err) => err?.message || t("common.error.message"),
         },
       });
 
@@ -164,10 +173,11 @@ export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
           register={register}
           onSubmit={handleSubmit(onSubmitHandler)}
           onClose={() => handleIsOpen(false)}
+          isEpic={isEpic}
         />
       ) : (
         <>
-          {QuickAddButton && <QuickAddButton onClick={() => handleIsOpen(true)} />}
+          {QuickAddButton && <QuickAddButton isEpic={isEpic} onClick={() => handleIsOpen(true)} />}
           {customQuickAddButton && <>{customQuickAddButton}</>}
           {!QuickAddButton && !customQuickAddButton && (
             <div
@@ -175,7 +185,7 @@ export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
               onClick={() => handleIsOpen(true)}
             >
               <PlusIcon className="h-3.5 w-3.5 stroke-2" />
-              <span className="text-sm font-medium">New Issue</span>
+              <span className="text-sm font-medium">{t(`${isEpic ? "epic.new" : "issue.new"}`)}</span>
             </div>
           )}
         </>
diff --git a/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
index d9d6e45f9..372c5605b 100644
--- a/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/all-issue-layout-root.tsx
@@ -4,7 +4,13 @@ import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 import useSWR from "swr";
 // plane constants
-import { ALL_ISSUES } from "@plane/constants";
+import {
+  ALL_ISSUES,
+  EIssueLayoutTypes,
+  EIssueFilterType,
+  EIssuesStoreType,
+  ISSUE_DISPLAY_FILTERS_BY_PAGE
+,EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IIssueDisplayFilterOptions } from "@plane/types";
 // hooks
 // components
@@ -12,20 +18,12 @@ import { EmptyState } from "@/components/common";
 import { SpreadsheetView } from "@/components/issues/issue-layouts";
 import { AllIssueQuickActions } from "@/components/issues/issue-layouts/quick-action-dropdowns";
 import { SpreadsheetLayoutLoader } from "@/components/ui";
-// constants
-import {
-  EIssueFilterType,
-  EIssueLayoutTypes,
-  EIssuesStoreType,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-} from "@/constants/issue";
 // hooks
 import { useGlobalView, useIssues, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // store
 import emptyView from "@/public/empty-state/view.svg";
 import { IssuePeekOverview } from "../../peek-overview";
@@ -34,10 +32,12 @@ import { TRenderQuickActions } from "../list/list-view-types";
 
 type Props = {
   isDefaultView: boolean;
+  isLoading?: boolean;
+  toggleLoading: (value: boolean) => void;
 };
 
 export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
-  const { isDefaultView } = props;
+  const { isDefaultView, isLoading = false, toggleLoading } = props;
   // router
   const { workspaceSlug, globalViewId } = useParams();
   const router = useAppRouter();
@@ -74,11 +74,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
       Object.keys(routeFilters).forEach((key) => {
         const filterKey: any = key;
         const filterValue = routeFilters[key]?.toString() || undefined;
-        if (
-          ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet.filters.includes(filterKey) &&
-          filterKey &&
-          filterValue
-        )
+        if (ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.spreadsheet.filters.includes(filterKey) && filterKey && filterValue)
           issueFilters = { ...issueFilters, [filterKey]: filterValue.split(",") };
       });
 
@@ -97,7 +93,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
     if (workspaceSlug && globalViewId) fetchNextIssues(workspaceSlug.toString(), globalViewId.toString());
   }, [fetchNextIssues, workspaceSlug, globalViewId]);
 
-  const { isLoading } = useSWR(
+  const { isLoading: globalViewsLoading } = useSWR(
     workspaceSlug ? `WORKSPACE_GLOBAL_VIEWS_${workspaceSlug}` : null,
     async () => {
       if (workspaceSlug) {
@@ -107,11 +103,12 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  useSWR(
+  const { isLoading: issuesLoading } = useSWR(
     workspaceSlug && globalViewId ? `WORKSPACE_GLOBAL_VIEW_ISSUES_${workspaceSlug}_${globalViewId}` : null,
     async () => {
       if (workspaceSlug && globalViewId) {
         clear();
+        toggleLoading(true);
         await fetchFilters(workspaceSlug.toString(), globalViewId.toString());
         await fetchIssues(
           workspaceSlug.toString(),
@@ -123,6 +120,7 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
           }
         );
         routerFilterParams();
+        toggleLoading(false);
       }
     },
     { revalidateIfStale: false, revalidateOnFocus: false }
@@ -176,21 +174,21 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
   );
 
   // when the call is not loading and the view does not exist and the view is not a default view, show empty state
-  if (!isLoading && !viewDetails && !isDefaultView) {
+  if (!isLoading && !globalViewsLoading && !issuesLoading && !viewDetails && !isDefaultView) {
     return (
       <EmptyState
         image={emptyView}
         title="View does not exist"
         description="The view you are looking for does not exist or you don't have permission to view it."
         primaryButton={{
-          text: "Go to All Issues",
+          text: "Go to All work items",
           onClick: () => router.push(`/${workspaceSlug}/workspace-views/all-issues`),
         }}
       />
     );
   }
 
-  if (getIssueLoader() === "init-loader" || !globalViewId || !groupedIssueIds) {
+  if ((isLoading && issuesLoading && getIssueLoader() === "init-loader") || !globalViewId || !groupedIssueIds) {
     return <SpreadsheetLayoutLoader />;
   }
 
diff --git a/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
index 7e94dbfbe..86f299ef2 100644
--- a/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/archived-issue-layout-root.tsx
@@ -4,9 +4,9 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 // mobx store
 // components
+import { EIssuesStoreType } from "@plane/constants";
 import { LogoSpinner } from "@/components/common";
 import { ArchivedIssueListLayout, ArchivedIssueAppliedFiltersRoot, IssuePeekOverview } from "@/components/issues";
-import { EIssuesStoreType } from "@/constants/issue";
 // ui
 import { useIssues } from "@/hooks/store";
 import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
diff --git a/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx
index 1b69156ba..a9c9fe0e8 100644
--- a/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -3,7 +3,8 @@ import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// hooks
+// plane constants
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/constants";
 // components
 import { LogoSpinner } from "@/components/common";
 import { TransferIssues, TransferIssuesModal } from "@/components/cycles";
@@ -17,7 +18,6 @@ import {
   IssuePeekOverview,
 } from "@/components/issues";
 // constants
-import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useCycle, useIssues } from "@/hooks/store";
 import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
@@ -86,7 +86,11 @@ export const CycleLayoutRoot: React.FC = observer(() => {
 
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.CYCLE}>
-      <TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
+      <TransferIssuesModal
+        handleClose={() => setTransferIssuesModal(false)}
+        cycleId={cycleId.toString()}
+        isOpen={transferIssuesModal}
+      />
       <div className="relative flex h-full w-full flex-col overflow-hidden">
         {cycleStatus === "completed" && (
           <TransferIssues
diff --git a/web/core/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
index c13ff104e..13597c578 100644
--- a/web/core/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/draft-issue-layout-root.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
+// plane constants
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/constants";
+// components
 import { LogoSpinner } from "@/components/common";
 import { IssuePeekOverview } from "@/components/issues/peek-overview";
-import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useIssues } from "@/hooks/store";
 import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
diff --git a/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
index b4eb7c464..f64f28cc7 100644
--- a/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// mobx store
+// plane constants
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/constants";
 // components
 import { Row, ERowVariant } from "@plane/ui";
 import { LogoSpinner } from "@/components/common";
@@ -16,7 +17,6 @@ import {
   ModuleSpreadsheetLayout,
 } from "@/components/issues";
 // constants
-import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 import { useIssues } from "@/hooks/store";
 import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
 // types
diff --git a/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
index 853f13dd4..4007468dc 100644
--- a/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -4,6 +4,8 @@ import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
+// plane constants
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/constants";
 // components
 import { Spinner } from "@plane/ui";
 import { LogoSpinner } from "@/components/common";
@@ -16,8 +18,6 @@ import {
   ProjectSpreadsheetLayout,
   IssuePeekOverview,
 } from "@/components/issues";
-// constants
-import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useIssues } from "@/hooks/store";
 import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
diff --git a/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
index 8c8441757..fd0a54a31 100644
--- a/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
+++ b/web/core/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// mobx store
+// plane constants
+import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/constants";
 // components
 import { LogoSpinner } from "@/components/common";
 import {
@@ -14,8 +15,6 @@ import {
   ProjectViewListLayout,
   ProjectViewSpreadsheetLayout,
 } from "@/components/issues";
-// constants
-import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 import { useIssues } from "@/hooks/store";
 import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
 // types
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx b/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
index 332b61b62..f8d2f32c3 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/base-spreadsheet-root.tsx
@@ -1,22 +1,15 @@
 import { FC, useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// plane constants
-import { ALL_ISSUES } from "@plane/constants";
+// plane imports
+import { ALL_ISSUES, EIssueLayoutTypes, EIssuesStoreType, EIssueFilterType , EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IIssueDisplayFilterOptions } from "@plane/types";
 // hooks
-import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
-// hooks
 import { useIssues, useUserPermissions } from "@/hooks/store";
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-// views
-// stores
-// components
+// local imports
 import { IssueLayoutHOC } from "../issue-layout-HOC";
-// types
-// constants
 import { IQuickActionProps, TRenderQuickActions } from "../list/list-view-types";
 import { SpreadsheetView } from "./spreadsheet-view";
 
@@ -24,16 +17,21 @@ export type SpreadsheetStoreType =
   | EIssuesStoreType.PROJECT
   | EIssuesStoreType.MODULE
   | EIssuesStoreType.CYCLE
-  | EIssuesStoreType.PROJECT_VIEW;
+  | 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((props: IBaseSpreadsheetRoot) => {
-  const { QuickActions, canEditPropertiesBasedOnProject, isCompletedCycle = false, viewId } = props;
+  const { QuickActions, canEditPropertiesBasedOnProject, isCompletedCycle = false, viewId, isEpic = false } = props;
   // router
   const { projectId } = useParams();
   // store hooks
@@ -78,9 +76,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
 
   const handleDisplayFiltersUpdate = useCallback(
     (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
-      if (!projectId) return;
-
-      updateFilters(projectId.toString(), EIssueFilterType.DISPLAY_FILTERS, {
+      updateFilters(projectId?.toString() ?? "", EIssueFilterType.DISPLAY_FILTERS, {
         ...updatedDisplayFilter,
       });
     },
@@ -99,11 +95,11 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
         handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)}
         handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)}
         portalElement={portalElement}
-        readOnly={!isEditingAllowed || isCompletedCycle}
+        readOnly={!canEditProperties(issue.project_id ?? undefined) || isCompletedCycle}
         placements={placement}
       />
     ),
-    [isEditingAllowed, isCompletedCycle, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
+    [isCompletedCycle, canEditProperties, removeIssue, updateIssue, removeIssueFromView, archiveIssue, restoreIssue]
   );
 
   if (!Array.isArray(issueIds)) return null;
@@ -123,6 +119,7 @@ export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
         disableIssueCreation={!enableIssueCreation || !isEditingAllowed || isCompletedCycle}
         canLoadMoreIssues={!!nextPageResults}
         loadMoreIssues={fetchNextIssues}
+        isEpic={isEpic}
       />
     </IssueLayoutHOC>
   );
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
index d4a7886a0..f9f17d4f5 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/cycle-column.tsx
@@ -32,7 +32,7 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
       if (cycleId) await addCycleToIssue(workspaceSlug.toString(), issue.project_id, cycleId, issue.id);
       else await removeCycleFromIssue(workspaceSlug.toString(), issue.project_id, issue.id);
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: "Work item updated",
         payload: {
           ...issue,
           cycle_id: cycleId,
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
index 5cf0e3d20..0bda0c126 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/header-column.tsx
@@ -1,25 +1,168 @@
 "use client";
-
+import { FC } from "react";
 //ui
-import { ArrowDownWideNarrow, ArrowUpNarrowWide, CheckIcon, ChevronDownIcon, Eraser, MoveRight } from "lucide-react";
+import {
+  ArrowDownWideNarrow,
+  ArrowUpNarrowWide,
+  CheckIcon,
+  ChevronDownIcon,
+  Eraser,
+  MoveRight,
+  CalendarDays,
+  Link2,
+  Signal,
+  Tag,
+  Triangle,
+  Paperclip,
+  CalendarCheck2,
+  CalendarClock,
+  Users,
+} from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "@plane/types";
-import { CustomMenu, Row } from "@plane/ui";
-//hooks
-import { SPREADSHEET_PROPERTY_DETAILS } from "@/constants/spreadsheet";
+import { LayersIcon, DoubleCircleIcon, DiceIcon, ContrastIcon, CustomMenu, Row } from "@plane/ui";
+// ui
+import { ISvgIcons } from "@plane/ui/src/icons/type";
 import useLocalStorage from "@/hooks/use-local-storage";
-//types
-//constants
 
 interface Props {
   property: keyof IIssueDisplayProperties;
   displayFilters: IIssueDisplayFilterOptions;
   handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
   onClose: () => void;
+  isEpic?: boolean;
 }
 
-export const HeaderColumn = (props: Props) => {
-  const { displayFilters, handleDisplayFilterUpdate, property, onClose } = props;
+export const SPREADSHEET_PROPERTY_DETAILS: {
+  [key in keyof IIssueDisplayProperties]: {
+    i18n_title: string;
+    ascendingOrderKey: TIssueOrderByOptions;
+    ascendingOrderTitle: string;
+    descendingOrderKey: TIssueOrderByOptions;
+    descendingOrderTitle: string;
+    icon: FC<ISvgIcons>;
+  };
+} = {
+  assignee: {
+    i18n_title: "common.assignees",
+    ascendingOrderKey: "assignees__first_name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-assignees__first_name",
+    descendingOrderTitle: "Z",
+    icon: Users,
+  },
+  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: CalendarCheck2,
+  },
+  estimate: {
+    i18n_title: "common.estimate",
+    ascendingOrderKey: "estimate_point__key",
+    ascendingOrderTitle: "Low",
+    descendingOrderKey: "-estimate_point__key",
+    descendingOrderTitle: "High",
+    icon: Triangle,
+  },
+  labels: {
+    i18n_title: "common.labels",
+    ascendingOrderKey: "labels__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-labels__name",
+    descendingOrderTitle: "Z",
+    icon: Tag,
+  },
+  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: Signal,
+  },
+  start_date: {
+    i18n_title: "common.order_by.start_date",
+    ascendingOrderKey: "-start_date",
+    ascendingOrderTitle: "New",
+    descendingOrderKey: "start_date",
+    descendingOrderTitle: "Old",
+    icon: CalendarClock,
+  },
+  state: {
+    i18n_title: "common.state",
+    ascendingOrderKey: "state__name",
+    ascendingOrderTitle: "A",
+    descendingOrderKey: "-state__name",
+    descendingOrderTitle: "Z",
+    icon: DoubleCircleIcon,
+  },
+  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,
+  },
+};
 
+export const HeaderColumn = (props: Props) => {
+  const { displayFilters, handleDisplayFilterUpdate, property, onClose, isEpic = false } = props;
+  // i18n
+  const { t } = useTranslation();
   const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
     "spreadsheetViewSorting",
     ""
@@ -37,6 +180,8 @@ export const HeaderColumn = (props: Props) => {
     setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
   };
 
+  if (!propertyDetails) return null;
+
   return (
     <CustomMenu
       customButtonClassName="clickable !w-full"
@@ -46,7 +191,7 @@ export const HeaderColumn = (props: Props) => {
         <Row className="flex w-full cursor-pointer items-center justify-between gap-1.5 py-2 text-sm text-custom-text-200 hover:text-custom-text-100">
           <div className="flex items-center gap-1.5">
             {<propertyDetails.icon className="h-4 w-4 text-custom-text-400" />}
-            {propertyDetails.title}
+            {property === "sub_issue_count" && isEpic ? t("issue.label", { count: 2 }) : t(propertyDetails.i18n_title)}
           </div>
           <div className="ml-3 flex">
             {activeSortingProperty === property && (
@@ -115,7 +260,7 @@ export const HeaderColumn = (props: Props) => {
           >
             <div className="flex items-center gap-2 px-1">
               <Eraser className="h-3 w-3" />
-              <span>Clear sorting</span>
+              <span>{t("common.actions.clear_sorting")}</span>
             </div>
           </CustomMenu.MenuItem>
         )}
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
index 5afa6cc55..49de4064a 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@@ -37,6 +37,7 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
         onClose={onClose}
         noLabelBorder
         fullWidth
+        fullHeight
       />
     </div>
   );
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
index a20948bf0..b95610cdd 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/module-column.tsx
@@ -42,7 +42,7 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
       changeModulesInIssue(workspaceSlug.toString(), issue.project_id, issue.id, modulesToAdd, modulesToRemove);
 
       captureIssueEvent({
-        eventName: "Issue updated",
+        eventName: "Work item updated",
         payload: {
           ...issue,
           module_ids: moduleIds,
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
index 4db6da507..d19369669 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/columns/sub-issue-column.tsx
@@ -18,16 +18,19 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
   // router
   const router = useAppRouter();
   // hooks
-  const { workspaceSlug } = useParams();
+  const { workspaceSlug, epicId } = useParams();
   // derived values
   const subIssueCount = issue?.sub_issues_count ?? 0;
 
   const redirectToIssueDetail = () => {
     router.push(
-      `/${workspaceSlug?.toString()}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}issues/${issue.id}#sub-issues`
+      `/${workspaceSlug?.toString()}/projects/${issue.project_id}/${issue.archived_at ? "archives/" : ""}${epicId ? "epics" : "issues"}/${issue.id}#sub-issues`
     );
   };
 
+  const issueLabel = epicId ? "work item" : "sub-work item";
+  const label = `${subIssueCount} ${issueLabel}${subIssueCount !== 1 ? "s" : ""}`;
+
   return (
     <Row
       onClick={subIssueCount ? redirectToIssueDetail : () => {}}
@@ -38,7 +41,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
         }
       )}
     >
-      {subIssueCount} {subIssueCount === 1 ? "sub-issue" : "sub-issues"}
+      {label}
     </Row>
   );
 });
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
index dcd8773a0..b6addcc32 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/issue-column.tsx
@@ -3,8 +3,23 @@ import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // types
 import { IIssueDisplayProperties, TIssue } from "@plane/types";
-// constants
-import { SPREADSHEET_PROPERTY_DETAILS } from "@/constants/spreadsheet";
+// components
+import {
+  SpreadsheetAssigneeColumn,
+  SpreadsheetAttachmentColumn,
+  SpreadsheetCreatedOnColumn,
+  SpreadsheetDueDateColumn,
+  SpreadsheetEstimateColumn,
+  SpreadsheetLabelColumn,
+  SpreadsheetModuleColumn,
+  SpreadsheetCycleColumn,
+  SpreadsheetLinkColumn,
+  SpreadsheetPriorityColumn,
+  SpreadsheetStartDateColumn,
+  SpreadsheetStateColumn,
+  SpreadsheetSubIssueColumn,
+  SpreadsheetUpdatedOnColumn,
+} from "@/components/issues/issue-layouts/spreadsheet";
 // hooks
 import { useEventTracker } from "@/hooks/store";
 // components
@@ -19,6 +34,30 @@ type Props = {
   isEstimateEnabled: boolean;
 };
 
+type TSpreadsheetColumn = React.FC<{
+  issue: TIssue;
+  onClose: () => void;
+  onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
+  disabled: boolean;
+}>;
+
+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 IssueColumn = observer((props: Props) => {
   const { displayProperties, issueDetail, disableUserActions, property, updateIssue, isEstimateEnabled } = props;
   // router
@@ -28,7 +67,9 @@ export const IssueColumn = observer((props: Props) => {
 
   const shouldRenderProperty = property === "estimate" ? isEstimateEnabled : true;
 
-  const { Column } = SPREADSHEET_PROPERTY_DETAILS[property];
+  const Column = SPREADSHEET_COLUMNS[property];
+
+  if (!Column) return null;
 
   return (
     <WithDisplayPropertiesHOC
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx b/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
index 5c4e9e927..0c87dfae5 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx
@@ -4,6 +4,7 @@ import { Dispatch, MouseEvent, MutableRefObject, SetStateAction, useRef, useStat
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { EIssueServiceType, SPREADSHEET_SELECT_GROUP } from "@plane/constants";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
@@ -13,10 +14,9 @@ import { ControlLink, Row, Tooltip } from "@plane/ui";
 // components
 import { MultipleSelectEntityAction } from "@/components/core";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
-// constants
-import { SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
 // helper
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
 import { useIssueDetail, useIssues, useProject } from "@/hooks/store";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
@@ -44,6 +44,7 @@ interface Props {
   spacingLeft?: number;
   selectionHelpers: TSelectionHelper;
   shouldRenderByDefault?: boolean;
+  isEpic?: boolean;
 }
 
 export const SpreadsheetIssueRow = observer((props: Props) => {
@@ -62,11 +63,12 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
     spacingLeft = 6,
     selectionHelpers,
     shouldRenderByDefault,
+    isEpic = false,
   } = props;
   // states
   const [isExpanded, setExpanded] = useState<boolean>(false);
   // store hooks
-  const { subIssues: subIssuesStore } = useIssueDetail();
+  const { subIssues: subIssuesStore } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
   const { issueMap } = useIssues();
 
   // derived values
@@ -110,10 +112,12 @@ export const SpreadsheetIssueRow = observer((props: Props) => {
           setExpanded={setExpanded}
           spreadsheetColumnsList={spreadsheetColumnsList}
           selectionHelpers={selectionHelpers}
+          isEpic={isEpic}
         />
       </RenderIfVisible>
 
       {isExpanded &&
+        !isEpic &&
         subIssues?.map((subIssueId: string) => (
           <SpreadsheetIssueRow
             key={subIssueId}
@@ -152,6 +156,7 @@ interface IssueRowDetailsProps {
   spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
   spacingLeft?: number;
   selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
 }
 
 const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
@@ -170,6 +175,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
     spreadsheetColumnsList,
     spacingLeft = 6,
     selectionHelpers,
+    isEpic = false,
   } = props;
   // states
   const [isMenuActive, setIsMenuActive] = useState(false);
@@ -180,8 +186,8 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   const { workspaceSlug, projectId } = useParams();
   // hooks
   const { getProjectIdentifierById } = useProject();
-  const { getIsIssuePeeked, peekIssue } = useIssueDetail();
-  const { handleRedirection } = useIssuePeekOverviewRedirection();
+  const { getIsIssuePeeked, peekIssue } = useIssueDetail(isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const { handleRedirection } = useIssuePeekOverviewRedirection(isEpic);
   const { isMobile } = usePlatformOS();
 
   // handlers
@@ -226,6 +232,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   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;
 
@@ -234,6 +241,15 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
     ? (getProjectIdentifierById(issueDetail.project_id)?.length ?? 0 + 5) * 7
     : 0;
 
+  const workItemLink = generateWorkItemLink({
+    workspaceSlug: workspaceSlug?.toString(),
+    projectId: issueDetail?.project_id,
+    issueId,
+    projectIdentifier,
+    sequenceId: issueDetail?.sequence_id,
+    isEpic,
+  });
+
   return (
     <>
       <td
@@ -243,7 +259,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
         className="relative md:sticky left-0 z-10 group/list-block bg-custom-background-100"
       >
         <ControlLink
-          href={`/${workspaceSlug}/projects/${issueDetail.project_id}/issues/${issueId}`}
+          href={workItemLink}
           onClick={() => handleIssuePeekOverview(issueDetail)}
           className={cn(
             "group clickable cursor-pointer h-11 w-[28rem] flex items-center text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200 bg-transparent group-[.selected-issue-row]:bg-custom-primary-100/5 group-[.selected-issue-row]:hover:bg-custom-primary-100/10",
@@ -263,7 +279,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
                 <Tooltip
                   tooltipContent={
                     <>
-                      Only issues within the current
+                      Only work items within the current
                       <br />
                       project can be selected.
                     </>
@@ -307,7 +323,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
 
               {/* sub-issues chevron */}
               <div className="grid place-items-center size-4">
-                {subIssuesCount > 0 && (
+                {subIssuesCount > 0 && !isEpic && (
                   <button
                     type="button"
                     className="grid place-items-center size-4 rounded-sm text-custom-text-400 hover:text-custom-text-300"
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx b/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
index cf0f92bdf..707a114ce 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@@ -2,8 +2,8 @@ import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // hooks
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useCycle, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // components
 import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx b/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
index 34c52c01e..d79059863 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@@ -1,9 +1,33 @@
 import React from "react";
 import { observer } from "mobx-react";
-// mobx store
-import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
+import { useParams } from "next/navigation";
+// components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { ProjectIssueQuickActions } from "@/components/issues";
+// hooks
+import { useUserPermissions } from "@/hooks/store";
+// plane web constants
+// local components
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 
-export const ProjectSpreadsheetLayout: React.FC = observer(() => (
-  <BaseSpreadsheetRoot QuickActions={ProjectIssueQuickActions} />
-));
+export const ProjectSpreadsheetLayout: React.FC = observer(() => {
+  // 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/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
index e66fe74df..f75c4ddb3 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header-column.tsx
@@ -12,9 +12,17 @@ interface Props {
   isEstimateEnabled: boolean;
   displayFilters: IIssueDisplayFilterOptions;
   handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  isEpic?: boolean;
 }
 export const SpreadsheetHeaderColumn = observer((props: Props) => {
-  const { displayProperties, displayFilters, property, isEstimateEnabled, handleDisplayFilterUpdate } = props;
+  const {
+    displayProperties,
+    displayFilters,
+    property,
+    isEstimateEnabled,
+    handleDisplayFilterUpdate,
+    isEpic = false,
+  } = props;
 
   //hooks
   const tableHeaderCellRef = useRef<HTMLTableCellElement | null>(null);
@@ -39,6 +47,7 @@ export const SpreadsheetHeaderColumn = observer((props: Props) => {
           onClose={() => {
             tableHeaderCellRef?.current?.focus();
           }}
+          isEpic={isEpic}
         />
       </th>
     </WithDisplayPropertiesHOC>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
index ca4ea948e..d58fc2654 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-header.tsx
@@ -1,13 +1,13 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// constants
+import { SPREADSHEET_SELECT_GROUP } from "@plane/constants";
 // ui
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 // components
 import { Row } from "@plane/ui";
 import { MultipleSelectGroupAction } from "@/components/core";
 import { SpreadsheetHeaderColumn } from "@/components/issues/issue-layouts";
-// constants
-import { SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -21,6 +21,7 @@ interface Props {
   isEstimateEnabled: boolean;
   spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
   selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
 }
 
 export const SpreadsheetHeader = observer((props: Props) => {
@@ -32,6 +33,7 @@ export const SpreadsheetHeader = observer((props: Props) => {
     isEstimateEnabled,
     spreadsheetColumnsList,
     selectionHelpers,
+    isEpic = false,
   } = props;
   // router
   const { projectId } = useParams();
@@ -62,7 +64,7 @@ export const SpreadsheetHeader = observer((props: Props) => {
                 />
               </div>
             )}
-            <span className="flex h-full w-full flex-grow items-center py-2.5">Issues</span>
+            <span className="flex h-full w-full flex-grow items-center py-2.5">{`${isEpic ? "Epics" : "Work items"}`}</span>
           </Row>
         </th>
 
@@ -74,6 +76,7 @@ export const SpreadsheetHeader = observer((props: Props) => {
             displayFilters={displayFilters}
             handleDisplayFilterUpdate={handleDisplayFilterUpdate}
             isEstimateEnabled={isEstimateEnabled}
+            isEpic={isEpic}
           />
         ))}
       </tr>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
index 2bf3ce365..7f6e5669a 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-table.tsx
@@ -29,6 +29,7 @@ type Props = {
   loadMoreIssues: () => void;
   spreadsheetColumnsList: (keyof IIssueDisplayProperties)[];
   selectionHelpers: TSelectionHelper;
+  isEpic?: boolean;
 };
 
 export const SpreadsheetTable = observer((props: Props) => {
@@ -47,6 +48,7 @@ export const SpreadsheetTable = observer((props: Props) => {
     loadMoreIssues,
     spreadsheetColumnsList,
     selectionHelpers,
+    isEpic = false,
   } = props;
 
   // states
@@ -110,6 +112,7 @@ export const SpreadsheetTable = observer((props: Props) => {
         isEstimateEnabled={isEstimateEnabled}
         spreadsheetColumnsList={spreadsheetColumnsList}
         selectionHelpers={selectionHelpers}
+        isEpic={isEpic}
       />
       <tbody>
         {issueIds.map((id) => (
@@ -127,6 +130,7 @@ export const SpreadsheetTable = observer((props: Props) => {
             isScrolled={isScrolled}
             spreadsheetColumnsList={spreadsheetColumnsList}
             selectionHelpers={selectionHelpers}
+            isEpic={isEpic}
           />
         ))}
       </tbody>
diff --git a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
index 167aa46f4..230bb5a2b 100644
--- a/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/core/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@@ -1,14 +1,13 @@
 import React, { useRef } from "react";
 import { observer } from "mobx-react";
+// plane constants
+import { EIssueLayoutTypes, SPREADSHEET_SELECT_GROUP } from "@plane/constants";
 // types
 import { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 // components
 import { LogoSpinner } from "@/components/common";
 import { MultipleSelectGroup } from "@/components/core";
 import { QuickAddIssueRoot, SpreadsheetAddIssueButton } from "@/components/issues";
-// constants
-import { EIssueLayoutTypes } from "@/constants/issue";
-import { SPREADSHEET_PROPERTY_LIST, SPREADSHEET_SELECT_GROUP } from "@/constants/spreadsheet";
 // hooks
 import { useProject } from "@/hooks/store";
 // plane web components
@@ -19,6 +18,23 @@ import { useBulkOperationStatus } from "@/plane-web/hooks/use-bulk-operation-sta
 import { TRenderQuickActions } from "../list/list-view-types";
 import { SpreadsheetTable } from "./spreadsheet-table";
 
+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",
+];
+
 type Props = {
   displayProperties: IIssueDisplayProperties;
   displayFilters: IIssueDisplayFilterOptions;
@@ -34,6 +50,7 @@ type Props = {
   enableQuickCreateIssue?: boolean;
   disableIssueCreation?: boolean;
   isWorkspaceLevel?: boolean;
+  isEpic?: boolean;
 };
 
 export const SpreadsheetView: React.FC<Props> = observer((props) => {
@@ -51,6 +68,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
     canLoadMoreIssues,
     loadMoreIssues,
     isWorkspaceLevel = false,
+    isEpic = false,
   } = props;
   // refs
   const containerRef = useRef<HTMLTableElement | null>(null);
@@ -85,7 +103,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
         entities={{
           [SPREADSHEET_SELECT_GROUP]: issueIds,
         }}
-        disabled={!isBulkOperationsEnabled}
+        disabled={!isBulkOperationsEnabled || isEpic}
       >
         {(helpers) => (
           <>
@@ -105,6 +123,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                 loadMoreIssues={loadMoreIssues}
                 spreadsheetColumnsList={spreadsheetColumnsList}
                 selectionHelpers={helpers}
+                isEpic={isEpic}
               />
             </div>
             <div className="border-t border-custom-border-100">
@@ -114,6 +133,7 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
                     layout={EIssueLayoutTypes.SPREADSHEET}
                     QuickAddButton={SpreadsheetAddIssueButton}
                     quickAddCallback={quickAddCallback}
+                    isEpic={isEpic}
                   />
                 )}
               </div>
diff --git a/web/core/components/issues/issue-layouts/utils.tsx b/web/core/components/issues/issue-layouts/utils.tsx
index 21f40a5bc..8f2e9b531 100644
--- a/web/core/components/issues/issue-layouts/utils.tsx
+++ b/web/core/components/issues/issue-layouts/utils.tsx
@@ -11,6 +11,7 @@ import uniq from "lodash/uniq";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import { ContrastIcon } from "lucide-react";
 // plane types
+import { EIssuesStoreType, ISSUE_PRIORITIES, STATE_GROUPS } from "@plane/constants";
 import {
   GroupByColumnTypes,
   IGroupByColumn,
@@ -29,20 +30,15 @@ import {
 import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
-// constants
-import { ISSUE_PRIORITIES, EIssuesStoreType } from "@/constants/issue";
-import { STATE_GROUPS } from "@/constants/state";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { getFileURL } from "@/helpers/file.helper";
 // store
-import { ICycleStore } from "@/store/cycle.store";
+import { store } from "@/lib/store-context";
+// plane web store
+import { getTeamProjectColumns } from "@/plane-web/components/issues/issue-layouts/utils";
+// store
 import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/base-issues.store";
-import { ILabelStore } from "@/store/label.store";
-import { IMemberRootStore } from "@/store/member";
-import { IModuleStore } from "@/store/module.store";
-import { IProjectStore } from "@/store/project/project.store";
-import { IStateStore } from "@/store/state.store";
 
 export const HIGHLIGHT_CLASS = "highlight";
 export const HIGHLIGHT_WITH_LINE = "highlight-with-line";
@@ -65,51 +61,64 @@ export type IssueUpdates = {
 export const isWorkspaceLevel = (type: EIssuesStoreType) =>
   [EIssuesStoreType.PROFILE, EIssuesStoreType.GLOBAL].includes(type) ? true : false;
 
-export const getGroupByColumns = (
-  groupBy: GroupByColumnTypes | null,
-  project: IProjectStore,
-  cycle: ICycleStore,
-  module: IModuleStore,
-  label: ILabelStore,
-  projectState: IStateStore,
-  member: IMemberRootStore,
-  includeNone?: boolean,
-  isWorkspaceLevel?: boolean
-): IGroupByColumn[] | undefined => {
-  switch (groupBy) {
-    case "project":
-      return getProjectColumns(project);
-    case "cycle":
-      return getCycleColumns(project, cycle);
-    case "module":
-      return getModuleColumns(project, module);
-    case "state":
-      return getStateColumns(projectState);
-    case "state_detail.group":
-      return getStateGroupColumns();
-    case "priority":
-      return getPriorityColumns();
-    case "labels":
-      return getLabelsColumns(label, isWorkspaceLevel) as any;
-    case "assignees":
-      return getAssigneeColumns(member) as any;
-    case "created_by":
-      return getCreatedByColumns(member) as any;
-    default:
-      if (includeNone) return [{ id: `All Issues`, name: `All Issues`, payload: {}, icon: undefined }];
-  }
+type TGetGroupByColumns = {
+  groupBy: GroupByColumnTypes | null;
+  includeNone: boolean;
+  isWorkspaceLevel: boolean;
+  isEpic?: boolean;
 };
 
-const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined => {
-  const { workspaceProjectIds: projectIds, projectMap } = project;
+// 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,
+}: 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, () => IGroupByColumn[] | undefined> = {
+    project: getProjectColumns,
+    cycle: getCycleColumns,
+    module: getModuleColumns,
+    state: getStateColumns,
+    "state_detail.group": getStateGroupColumns,
+    priority: getPriorityColumns,
+    labels: () => getLabelsColumns(isWorkspaceLevel),
+    assignees: getAssigneeColumns,
+    created_by: getCreatedByColumns,
+    team_project: getTeamProjectColumns,
+  };
+
+  // Get and return the columns for the specified group by option
+  return groupByColumnMap[groupBy]?.();
+};
+
+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
-    .filter((projectId) => !!projectMap[projectId])
-    .map((projectId) => {
+    .map((projectId: string) => {
       const project = projectMap[projectId];
-
+      if (!project) return;
       return {
         id: project.id,
         name: project.name,
@@ -120,78 +129,71 @@ const getProjectColumns = (project: IProjectStore): IGroupByColumn[] | undefined
         ),
         payload: { project_id: project.id },
       };
-    }) as any;
+    })
+    .filter((column) => column !== undefined) as IGroupByColumn[];
 };
 
-const getCycleColumns = (projectStore: IProjectStore, cycleStore: ICycleStore): IGroupByColumn[] | undefined => {
-  const { currentProjectDetails } = projectStore;
-  const { getProjectCycleIds, getCycleById } = cycleStore;
-
+const getCycleColumns = (): IGroupByColumn[] | undefined => {
+  const { currentProjectDetails } = store.projectRoot.project;
+  // Check for the current project details
   if (!currentProjectDetails || !currentProjectDetails?.id) return;
-
-  const cycleIds = currentProjectDetails?.id ? getProjectCycleIds(currentProjectDetails?.id) : undefined;
-  if (!cycleIds) return;
-
-  const cycles = [];
-
-  cycleIds.map((cycleId) => {
-    const cycle = getCycleById(cycleId);
-    if (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 as TCycleGroups} className="h-3.5 w-3.5" />,
-        payload: { cycle_id: cycle.id },
-        isDropDisabled,
-        dropErrorMessage: isDropDisabled ? "Issue cannot be moved to completed cycles" : undefined,
-      });
-    }
+  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 as TCycleGroups} 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: <ContrastIcon className="h-3.5 w-3.5" />,
+    payload: {},
   });
-
-  return cycles as any;
+  return cycles;
 };
 
-const getModuleColumns = (projectStore: IProjectStore, moduleStore: IModuleStore): IGroupByColumn[] | undefined => {
-  const { currentProjectDetails } = projectStore;
-  const { getProjectModuleIds, getModuleById } = moduleStore;
-
+const getModuleColumns = (): IGroupByColumn[] | undefined => {
+  // get current project details
+  const { currentProjectDetails } = store.projectRoot.project;
   if (!currentProjectDetails || !currentProjectDetails?.id) return;
-
-  const moduleIds = currentProjectDetails?.id ? getProjectModuleIds(currentProjectDetails?.id) : undefined;
-  if (!moduleIds) return;
-
-  const modules = [];
-
-  moduleIds.map((moduleId) => {
-    const moduleInfo = getModuleById(moduleId);
-    if (moduleInfo)
-      modules.push({
-        id: moduleInfo.id,
-        name: moduleInfo.name,
-        icon: <DiceIcon className="h-3.5 w-3.5" />,
-        payload: { module_ids: [moduleInfo.id] },
-      });
-  }) as any;
+  // 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: <DiceIcon className="h-3.5 w-3.5" />,
+      payload: { module_ids: [module.id] },
+    });
+  });
   modules.push({
     id: "None",
     name: "None",
     icon: <DiceIcon className="h-3.5 w-3.5" />,
+    payload: {},
   });
-
-  return modules as any;
+  return modules;
 };
 
-const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefined => {
-  const { projectStates } = projectState;
+const getStateColumns = (): IGroupByColumn[] | undefined => {
+  const { projectStates } = store.state;
   if (!projectStates) return;
-
+  // map project states to group by columns
   return projectStates.map((state) => ({
     id: state.id,
     name: state.name,
@@ -201,12 +203,12 @@ const getStateColumns = (projectState: IStateStore): IGroupByColumn[] | undefine
       </div>
     ),
     payload: { state_id: state.id },
-  })) as any;
+  }));
 };
 
-const getStateGroupColumns = () => {
+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,
@@ -219,9 +221,9 @@ const getStateGroupColumns = () => {
   }));
 };
 
-const getPriorityColumns = () => {
+const getPriorityColumns = (): IGroupByColumn[] => {
   const priorities = ISSUE_PRIORITIES;
-
+  // map priorities to group by columns
   return priorities.map((priority) => ({
     id: priority.key,
     name: priority.title,
@@ -230,14 +232,14 @@ const getPriorityColumns = () => {
   }));
 };
 
-const getLabelsColumns = (label: ILabelStore, isWorkspaceLevel: boolean = false) => {
-  const { workspaceLabels, projectLabels } = label;
-
+const getLabelsColumns = (isWorkspaceLevel: boolean = false): 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,
@@ -248,15 +250,14 @@ const getLabelsColumns = (label: ILabelStore, isWorkspaceLevel: boolean = false)
   }));
 };
 
-const getAssigneeColumns = (member: IMemberRootStore) => {
+const getAssigneeColumns = (): IGroupByColumn[] | undefined => {
   const {
     project: { projectMemberIds },
     getUserDetails,
-  } = member;
-
+  } = store.memberRoot;
   if (!projectMemberIds) return;
-
-  const assigneeColumns: any = projectMemberIds.map((memberId) => {
+  // Map project member ids to group by assignee columns
+  const assigneeColumns: IGroupByColumn[] = projectMemberIds.map((memberId) => {
     const member = getUserDetails(memberId);
     return {
       id: memberId,
@@ -265,20 +266,17 @@ const getAssigneeColumns = (member: IMemberRootStore) => {
       payload: { assignee_ids: [memberId] },
     };
   });
-
   assigneeColumns.push({ id: "None", name: "None", icon: <Avatar size="md" />, payload: {} });
-
   return assigneeColumns;
 };
 
-const getCreatedByColumns = (member: IMemberRootStore) => {
+const getCreatedByColumns = (): IGroupByColumn[] | undefined => {
   const {
     project: { projectMemberIds },
     getUserDetails,
-  } = member;
-
+  } = store.memberRoot;
   if (!projectMemberIds) return;
-
+  // Map project member ids to group by created by columns
   return projectMemberIds.map((memberId) => {
     const member = getUserDetails(memberId);
     return {
diff --git a/web/core/components/issues/issue-modal/base.tsx b/web/core/components/issues/issue-modal/base.tsx
index 798af2577..5151d2286 100644
--- a/web/core/components/issues/issue-modal/base.tsx
+++ b/web/core/components/issues/issue-modal/base.tsx
@@ -3,14 +3,14 @@
 import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+import { EIssuesStoreType, ISSUE_CREATED, ISSUE_UPDATED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import type { TBaseIssue, TIssue } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 import { CreateIssueToastActionItems, IssuesModalProps } from "@/components/issues";
 // constants
-import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker";
-import { EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useEventTracker, useCycle, useIssues, useModule, useIssueDetail, useUser } from "@/hooks/store";
@@ -21,7 +21,7 @@ import { FileService } from "@/services/file.service";
 const fileService = new FileService();
 // local components
 import { DraftIssueLayout } from "./draft-issue-layout";
-import { IssueFormRoot } from "./form";
+import { type IssueFormProps, IssueFormRoot } from "./form";
 
 export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((props) => {
   const {
@@ -41,7 +41,11 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
   } = props;
   const issueStoreType = useIssueStoreType();
 
-  const storeType = issueStoreFromProps ?? issueStoreType;
+  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
@@ -52,6 +56,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
   const [uploadedAssetIds, setUploadedAssetIds] = useState<string[]>([]);
   const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
   // store hooks
+  const { t } = useTranslation();
   const { captureIssueEvent } = useEventTracker();
   const { workspaceSlug, projectId: routerProjectId, cycleId, moduleId } = useParams();
   const { projectsWithCreatePermissions } = useUser();
@@ -90,7 +95,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
 
   useEffect(() => {
     // fetching issue details
-    if (isOpen) fetchIssueDetail(data?.id);
+    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
@@ -113,7 +118,8 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
 
     // clearing up the description state when we leave the component
     return () => setDescription(undefined);
-  }, [data, projectId, isOpen, activeProjectId]);
+    // 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;
@@ -185,19 +191,21 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
       if (!response) throw new Error();
 
       // check if we should add issue to cycle/module
-      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);
+      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
@@ -206,15 +214,15 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
           issueId: response.id,
           issueTypeId: response.type_id,
           projectId: response.project_id,
-          workspaceSlug: workspaceSlug.toString(),
+          workspaceSlug: workspaceSlug?.toString(),
           isDraft: is_draft_issue,
         });
       }
 
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Success!",
-        message: `${is_draft_issue ? "Draft created." : "Issue created successfully."} `,
+        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()}
@@ -236,8 +244,8 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
     } catch (error) {
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: `${is_draft_issue ? "Draft issue" : "Issue"} could not be created. Please try again.`,
+        title: t("error"),
+        message: t(is_draft_issue ? "draft_creation_failed" : "issue_creation_failed"),
       });
       captureIssueEvent({
         eventName: ISSUE_CREATED,
@@ -276,14 +284,14 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
         issueId: data.id,
         issueTypeId: payload.type_id,
         projectId: payload.project_id,
-        workspaceSlug: workspaceSlug.toString(),
+        workspaceSlug: workspaceSlug?.toString(),
         isDraft: isDraft,
       });
 
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Success!",
-        message: "Issue updated successfully.",
+        title: t("success"),
+        message: t("issue_updated_successfully"),
       });
       captureIssueEvent({
         eventName: ISSUE_UPDATED,
@@ -295,8 +303,8 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
       console.error(error);
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Issue could not be updated. Please try again.",
+        title: t("error"),
+        message: t("issue_could_not_be_updated"),
       });
       captureIssueEvent({
         eventName: ISSUE_UPDATED,
@@ -333,6 +341,30 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
   // don't open the modal if there are no projects
   if (!projectIdsWithCreatePermissions || projectIdsWithCreatePermissions.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,
+    storeType: storeType,
+  };
+
   return (
     <ModalCore
       isOpen={isOpen}
@@ -342,51 +374,9 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
       className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"
     >
       {withDraftIssueWrapper ? (
-        <DraftIssueLayout
-          changesMade={changesMade}
-          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,
-          }}
-          issueTitleRef={issueTitleRef}
-          onAssetUpload={handleUpdateUploadedAssetIds}
-          onChange={handleFormChange}
-          onClose={handleClose}
-          onSubmit={(payload) => handleFormSubmit(payload, isDraft)}
-          projectId={activeProjectId}
-          isCreateMoreToggleEnabled={createMore}
-          onCreateMoreToggleChange={handleCreateMoreToggleChange}
-          isDraft={isDraft}
-          moveToIssue={moveToIssue}
-          isDuplicateModalOpen={isDuplicateModalOpen}
-          handleDuplicateIssueModal={handleDuplicateIssueModal}
-          isProjectSelectionDisabled={isProjectSelectionDisabled}
-        />
+        <DraftIssueLayout {...commonIssueModalProps} changesMade={changesMade} onChange={handleFormChange} />
       ) : (
-        <IssueFormRoot
-          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}
-          isCreateMoreToggleEnabled={createMore}
-          onCreateMoreToggleChange={handleCreateMoreToggleChange}
-          onSubmit={(payload) => handleFormSubmit(payload, isDraft)}
-          projectId={activeProjectId}
-          isDraft={isDraft}
-          moveToIssue={moveToIssue}
-          modalTitle={modalTitle}
-          primaryButtonText={primaryButtonText}
-          isDuplicateModalOpen={isDuplicateModalOpen}
-          handleDuplicateIssueModal={handleDuplicateIssueModal}
-          isProjectSelectionDisabled={isProjectSelectionDisabled}
-        />
+        <IssueFormRoot {...commonIssueModalProps} />
       )}
     </ModalCore>
   );
diff --git a/web/core/components/issues/issue-modal/components/default-properties.tsx b/web/core/components/issues/issue-modal/components/default-properties.tsx
index c1978260a..a3a1c0f03 100644
--- a/web/core/components/issues/issue-modal/components/default-properties.tsx
+++ b/web/core/components/issues/issue-modal/components/default-properties.tsx
@@ -4,6 +4,9 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { Control, Controller } from "react-hook-form";
 import { LayoutPanelTop } from "lucide-react";
+// plane imports
+import { ETabIndices, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import { ISearchIssueResponse, TIssue } from "@plane/types";
 // ui
@@ -20,8 +23,6 @@ import {
 } from "@/components/dropdowns";
 import { ParentIssuesListModal } from "@/components/issues";
 import { IssueLabelSelect } from "@/components/issues/select";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
@@ -30,7 +31,6 @@ import { useProjectEstimates, useProject, useUserPermissions } from "@/hooks/sto
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type TIssueDefaultPropertiesProps = {
   control: Control<TIssue>;
@@ -65,6 +65,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
   // states
   const [parentIssueListModalOpen, setParentIssueListModalOpen] = useState(false);
   // store hooks
+  const { t } = useTranslation();
   const { areEstimateEnabledByProjectId } = useProjectEstimates();
   const { getProjectById } = useProject();
   const { isMobile } = usePlatformOS();
@@ -98,6 +99,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
               projectId={projectId ?? undefined}
               buttonVariant="border-with-text"
               tabIndex={getIndex("state_id")}
+              isForWorkItemCreation={!id}
             />
           </div>
         )}
@@ -133,7 +135,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
               }}
               buttonVariant={value?.length > 0 ? "transparent-without-text" : "border-with-text"}
               buttonClassName={value?.length > 0 ? "hover:bg-transparent" : ""}
-              placeholder="Assignees"
+              placeholder={t("assignees")}
               multiple
               tabIndex={getIndex("assignee_ids")}
             />
@@ -172,7 +174,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
               }}
               buttonVariant="border-with-text"
               maxDate={maxDate ?? undefined}
-              placeholder="Start date"
+              placeholder={t("start_date")}
               tabIndex={getIndex("start_date")}
             />
           </div>
@@ -191,7 +193,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
               }}
               buttonVariant="border-with-text"
               minDate={minDate ?? undefined}
-              placeholder="Due date"
+              placeholder={t("due_date")}
               tabIndex={getIndex("target_date")}
             />
           </div>
@@ -209,7 +211,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
                   onChange(cycleId);
                   handleFormChange();
                 }}
-                placeholder="Cycle"
+                placeholder={t("cycle.label", { count: 1 })}
                 value={value}
                 buttonVariant="border-with-text"
                 tabIndex={getIndex("cycle_id")}
@@ -231,7 +233,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
                   onChange(moduleIds);
                   handleFormChange();
                 }}
-                placeholder="Modules"
+                placeholder={t("modules")}
                 buttonVariant="border-with-text"
                 tabIndex={getIndex("module_ids")}
                 multiple
@@ -256,7 +258,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
                 projectId={projectId}
                 buttonVariant="border-with-text"
                 tabIndex={getIndex("estimate_point")}
-                placeholder="Estimate"
+                placeholder={t("estimate")}
               />
             </div>
           )}
@@ -288,7 +290,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
           >
             <>
               <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
-                Change parent issue
+                {t("change_parent_issue")}
               </CustomMenu.MenuItem>
               <Controller
                 control={control}
@@ -301,7 +303,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
                       handleFormChange();
                     }}
                   >
-                    Remove parent issue
+                    {t("remove_parent_issue")}
                   </CustomMenu.MenuItem>
                 )}
               />
@@ -314,7 +316,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
             onClick={() => setParentIssueListModalOpen(true)}
           >
             <LayoutPanelTop className="h-3 w-3 flex-shrink-0" />
-            <span className="whitespace-nowrap">Add parent</span>
+            <span className="whitespace-nowrap">{t("add_parent")}</span>
           </button>
         )}
       </div>
@@ -332,6 +334,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
             }}
             projectId={projectId ?? undefined}
             issueId={isDraft ? undefined : id}
+            searchEpic
           />
         )}
       />
diff --git a/web/core/components/issues/issue-modal/components/description-editor.tsx b/web/core/components/issues/issue-modal/components/description-editor.tsx
index 316668d01..b19fc62db 100644
--- a/web/core/components/issues/issue-modal/components/description-editor.tsx
+++ b/web/core/components/issues/issue-modal/components/description-editor.tsx
@@ -4,8 +4,12 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Control, Controller } from "react-hook-form";
 import { Sparkle } from "lucide-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
 // editor
 import { EditorRefApi } from "@plane/editor";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { TIssue } from "@plane/types";
 import { EFileAssetType } from "@plane/types/src/enums";
@@ -14,18 +18,19 @@ import { Loader, setToast, TOAST_TYPE } from "@plane/ui";
 // components
 import { GptAssistantPopover } from "@/components/core";
 import { RichTextEditor } from "@/components/editor";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
-import { getDescriptionPlaceholder } from "@/helpers/issue.helper";
+import { getDescriptionPlaceholderI18n } from "@/helpers/issue.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
-import { useInstance, useWorkspace } from "@/hooks/store";
+import { useEditorAsset, useInstance, useWorkspace } from "@/hooks/store";
 import useKeypress from "@/hooks/use-keypress";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web services
+import { WorkspaceService } from "@/plane-web/services";
 // services
 import { AIService } from "@/services/ai.service";
-import { FileService } from "@/services/file.service";
+const workspaceService = new WorkspaceService();
+const aiService = new AIService();
 
 type TIssueDescriptionEditorProps = {
   control: Control<TIssue>;
@@ -46,10 +51,6 @@ type TIssueDescriptionEditorProps = {
   onClose: () => void;
 };
 
-// services
-const aiService = new AIService();
-const fileService = new FileService();
-
 export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = observer((props) => {
   const {
     control,
@@ -69,12 +70,16 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
     onAssetUpload,
     onClose,
   } = props;
+  // i18n
+  const { t } = useTranslation();
   // states
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   // store hooks
   const { getWorkspaceBySlug } = useWorkspace();
-  const workspaceId = getWorkspaceBySlug(workspaceSlug?.toString())?.id as string;
+  const workspaceId = getWorkspaceBySlug(workspaceSlug?.toString())?.id ?? "";
   const { config } = useInstance();
+  const { uploadEditorAsset } = useEditorAsset();
+  // platform
   const { isMobile } = usePlatformOS();
 
   const { getIndex } = getTabIndex(ETabIndices.ISSUE_FORM, isMobile);
@@ -114,7 +119,7 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
     aiService
       .createGptTask(workspaceSlug.toString(), {
         prompt: issueName,
-        task: "Generate a proper description for this issue.",
+        task: "Generate a proper description for this work item.",
       })
       .then((res) => {
         if (res.response === "")
@@ -122,7 +127,7 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
             type: TOAST_TYPE.ERROR,
             title: "Error!",
             message:
-              "Issue title isn't informative enough to generate the description. Please try with a different title.",
+              "Work item title isn't informative enough to generate the description. Please try with a different title.",
           });
         else handleAiAssistance(res.response_html);
       })
@@ -187,21 +192,28 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
                 onEnterKeyPress={() => submitBtnRef?.current?.click()}
                 ref={editorRef}
                 tabIndex={getIndex("description_html")}
-                placeholder={getDescriptionPlaceholder}
+                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 (file) => {
+                uploadFile={async (blockId, file) => {
                   try {
-                    const { asset_id } = await fileService.uploadProjectAsset(
-                      workspaceSlug,
-                      projectId,
-                      {
+                    const { asset_id } = await uploadEditorAsset({
+                      blockId,
+                      data: {
                         entity_identifier: issueId ?? "",
                         entity_type: isDraft
                           ? EFileAssetType.DRAFT_ISSUE_DESCRIPTION
                           : EFileAssetType.ISSUE_DESCRIPTION,
                       },
-                      file
-                    );
+                      file,
+                      projectId,
+                      workspaceSlug,
+                    });
                     onAssetUpload(asset_id);
                     return asset_id;
                   } catch (error) {
@@ -249,12 +261,13 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
                     type="button"
                     className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-90 hover:bg-custom-background-80"
                     onClick={() => setGptAssistantModal((prevData) => !prevData)}
-                    tabIndex={getIndex("ai_assistant")}
+                    tabIndex={-1}
                   >
                     <Sparkle className="h-4 w-4" />
                     AI
                   </button>
                 }
+                workspaceId={workspaceId}
                 workspaceSlug={workspaceSlug}
                 projectId={projectId}
               />
diff --git a/web/core/components/issues/issue-modal/components/parent-tag.tsx b/web/core/components/issues/issue-modal/components/parent-tag.tsx
index 1ef97ba3b..583bc850b 100644
--- a/web/core/components/issues/issue-modal/components/parent-tag.tsx
+++ b/web/core/components/issues/issue-modal/components/parent-tag.tsx
@@ -4,10 +4,10 @@ import React from "react";
 import { observer } from "mobx-react";
 import { Control, Controller } from "react-hook-form";
 import { X } from "lucide-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
 // types
 import { ISearchIssueResponse, TIssue } from "@plane/types";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
diff --git a/web/core/components/issues/issue-modal/components/project-select.tsx b/web/core/components/issues/issue-modal/components/project-select.tsx
index d2e4ca745..29268b4ad 100644
--- a/web/core/components/issues/issue-modal/components/project-select.tsx
+++ b/web/core/components/issues/issue-modal/components/project-select.tsx
@@ -3,12 +3,12 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { Control, Controller } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
 // types
 import { TIssue } from "@plane/types";
 // components
 import { ProjectDropdown } from "@/components/dropdowns";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { shouldRenderProject } from "@/helpers/project.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
@@ -46,6 +46,7 @@ export const IssueProjectSelect: React.FC<TIssueProjectSelectProps> = observer((
                 onChange(projectId);
                 handleFormChange();
               }}
+              multiple={false}
               buttonVariant="border-with-text"
               renderCondition={(project) => shouldRenderProject(project)}
               tabIndex={getIndex("project_id")}
diff --git a/web/core/components/issues/issue-modal/components/title-input.tsx b/web/core/components/issues/issue-modal/components/title-input.tsx
index 2499289e1..124899e9e 100644
--- a/web/core/components/issues/issue-modal/components/title-input.tsx
+++ b/web/core/components/issues/issue-modal/components/title-input.tsx
@@ -3,12 +3,13 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { Control, Controller, FieldErrors } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
 // types
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 // ui
 import { Input } from "@plane/ui";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
@@ -25,26 +26,27 @@ export const IssueTitleInput: React.FC<TIssueTitleInputProps> = observer((props)
   const { control, issueTitleRef, 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 "Title is required";
+      return t("title_is_required");
     }
     return undefined;
   };
   return (
-    <>
+    <div>
       <Controller
         control={control}
         name="name"
         rules={{
           validate: validateWhitespace,
-          required: "Title is required",
+          required: t("title_is_required"),
           maxLength: {
             value: 255,
-            message: "Title should be less than 255 characters",
+            message: t("title_should_be_less_than_255_characters"),
           },
         }}
         render={({ field: { value, onChange, ref } }) => (
@@ -59,14 +61,14 @@ export const IssueTitleInput: React.FC<TIssueTitleInputProps> = observer((props)
             }}
             ref={issueTitleRef || ref}
             hasError={Boolean(errors.name)}
-            placeholder="Title"
+            placeholder={t("title")}
             className="w-full text-base"
-            tabIndex={getIndex("name")}
             autoFocus
+            tabIndex={getIndex("name")}
           />
         )}
       />
       <span className="text-xs font-medium text-red-500">{errors?.name?.message}</span>
-    </>
+    </div>
   );
 });
diff --git a/web/core/components/issues/issue-modal/context/index.ts b/web/core/components/issues/issue-modal/context/index.ts
index 61ad8c43a..e396ff2c1 100644
--- a/web/core/components/issues/issue-modal/context/index.ts
+++ b/web/core/components/issues/issue-modal/context/index.ts
@@ -1 +1 @@
-export * from "./issue-modal";
+export * from "./issue-modal-context";
diff --git a/web/core/components/issues/issue-modal/context/issue-modal.tsx b/web/core/components/issues/issue-modal/context/issue-modal-context.tsx
similarity index 100%
rename from web/core/components/issues/issue-modal/context/issue-modal.tsx
rename to web/core/components/issues/issue-modal/context/issue-modal-context.tsx
diff --git a/web/core/components/issues/issue-modal/draft-issue-layout.tsx b/web/core/components/issues/issue-modal/draft-issue-layout.tsx
index d74cb7606..0e714cca4 100644
--- a/web/core/components/issues/issue-modal/draft-issue-layout.tsx
+++ b/web/core/components/issues/issue-modal/draft-issue-layout.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+import { useTranslation } from "@plane/i18n";
 // types
 import type { TIssue } from "@plane/types";
 // ui
@@ -16,51 +17,15 @@ import { isEmptyHtmlString } from "@/helpers/string.helper";
 import { useIssueModal } from "@/hooks/context/use-issue-modal";
 import { useEventTracker, useWorkspaceDraftIssues } from "@/hooks/store";
 // local components
-import { IssueFormRoot } from "./form";
+import { IssueFormRoot, type IssueFormProps } from "./form";
 
-export interface DraftIssueProps {
+export interface DraftIssueProps extends IssueFormProps {
   changesMade: Partial<TIssue> | null;
-  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: (saveDraftIssueInLocalStorage?: boolean) => void;
-  onSubmit: (formData: 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;
-  isProjectSelectionDisabled?: boolean;
 }
 
 export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
-  const {
-    changesMade,
-    data,
-    issueTitleRef,
-    onAssetUpload,
-    onChange,
-    onClose,
-    onSubmit,
-    projectId,
-    isCreateMoreToggleEnabled,
-    onCreateMoreToggleChange,
-    isDraft,
-    moveToIssue = false,
-    modalTitle,
-    primaryButtonText,
-    isDuplicateModalOpen,
-    handleDuplicateIssueModal,
-    isProjectSelectionDisabled = false,
-  } = props;
+  const { changesMade, data, onChange, onClose, projectId } = props;
   // states
   const [issueDiscardModal, setIssueDiscardModal] = useState(false);
   // router params
@@ -71,10 +36,11 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
   const { captureIssueEvent } = useEventTracker();
   const { handleCreateUpdatePropertyValues } = useIssueModal();
   const { createIssue } = useWorkspaceDraftIssues();
+  const { t } = useTranslation();
 
   const handleClose = () => {
     if (data?.id) {
-      onClose(false);
+      onClose();
       setIssueDiscardModal(false);
     } else {
       if (changesMade) {
@@ -93,11 +59,11 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
             delete changesMade.description_html;
         });
         if (isEmpty(changesMade)) {
-          onClose(false);
+          onClose();
           setIssueDiscardModal(false);
         } else setIssueDiscardModal(true);
       } else {
-        onClose(false);
+        onClose();
         setIssueDiscardModal(false);
       }
     }
@@ -116,27 +82,27 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
       .then((res) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Draft created.",
+          title: `${t("success")}!`,
+          message: t("workspace_draft_issues.toasts.created.success"),
         });
         captureIssueEvent({
-          eventName: "Draft issue created",
+          eventName: "Draft work item created",
           payload: { ...res, state: "SUCCESS" },
           path: pathname,
         });
         onChange(null);
         setIssueDiscardModal(false);
-        onClose(false);
+        onClose();
         return res;
       })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Issue could not be created. Please try again.",
+          title: `${t("error")}!`,
+          message: t("workspace_draft_issues.toasts.created.error"),
         });
         captureIssueEvent({
-          eventName: "Draft issue created",
+          eventName: "Draft work item created",
           payload: { ...payload, state: "FAILED" },
           path: pathname,
         });
@@ -162,27 +128,10 @@ export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
         onDiscard={() => {
           onChange(null);
           setIssueDiscardModal(false);
-          onClose(false);
+          onClose();
         }}
       />
-      <IssueFormRoot
-        isCreateMoreToggleEnabled={isCreateMoreToggleEnabled}
-        onCreateMoreToggleChange={onCreateMoreToggleChange}
-        data={data}
-        issueTitleRef={issueTitleRef}
-        onAssetUpload={onAssetUpload}
-        onChange={onChange}
-        onClose={handleClose}
-        onSubmit={onSubmit}
-        projectId={projectId}
-        isDraft={isDraft}
-        moveToIssue={moveToIssue}
-        modalTitle={modalTitle}
-        primaryButtonText={primaryButtonText}
-        isDuplicateModalOpen={isDuplicateModalOpen}
-        handleDuplicateIssueModal={handleDuplicateIssueModal}
-        isProjectSelectionDisabled={isProjectSelectionDisabled}
-      />
+      <IssueFormRoot {...props} onClose={handleClose} />
     </>
   );
 });
diff --git a/web/core/components/issues/issue-modal/form.tsx b/web/core/components/issues/issue-modal/form.tsx
index 5f182d24e..7471853cb 100644
--- a/web/core/components/issues/issue-modal/form.tsx
+++ b/web/core/components/issues/issue-modal/form.tsx
@@ -5,7 +5,10 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useForm } from "react-hook-form";
 // editor
+import { ETabIndices, EIssuesStoreType } from "@plane/constants";
 import { EditorRefApi } from "@plane/editor";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import type { TIssue, ISearchIssueResponse, TWorkspaceDraftIssue } from "@plane/types";
 // hooks
@@ -19,7 +22,6 @@ import {
   IssueTitleInput,
 } from "@/components/issues/issue-modal/components";
 import { CreateLabelModal } from "@/components/labels";
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getTextContent } from "@/helpers/editor.helper";
@@ -72,9 +74,11 @@ export interface IssueFormProps {
   isDuplicateModalOpen: boolean;
   handleDuplicateIssueModal: (isOpen: boolean) => void;
   isProjectSelectionDisabled?: boolean;
+  storeType: EIssuesStoreType;
 }
 
 export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
+  const { t } = useTranslation();
   const {
     data,
     issueTitleRef,
@@ -86,15 +90,16 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
     isCreateMoreToggleEnabled,
     onCreateMoreToggleChange,
     isDraft,
-    moveToIssue,
-    modalTitle = `${data?.id ? "Update" : isDraft ? "Create a draft" : "Create new issue"}`,
+    moveToIssue = false,
+    modalTitle = `${data?.id ? t("update") : isDraft ? t("create_a_draft") : t("create_new_issue")}`,
     primaryButtonText = {
-      default: `${data?.id ? "Update" : isDraft ? "Save to Drafts" : "Save"}`,
-      loading: `${data?.id ? "Updating" : "Saving"}`,
+      default: `${data?.id ? t("update") : isDraft ? t("save_to_drafts") : t("save")}`,
+      loading: `${data?.id ? t("updating") : t("saving")}`,
     },
     isDuplicateModalOpen,
     handleDuplicateIssueModal,
     isProjectSelectionDisabled = false,
+    storeType,
   } = props;
 
   // states
@@ -195,8 +200,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
     if (!editorRef.current?.isEditorReadyToDiscard()) {
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Editor is not ready to discard changes.",
+        title: t("error"),
+        message: t("editor_is_not_ready_to_discard_changes"),
       });
       return;
     }
@@ -249,7 +254,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
         issueId: data.id,
         issueTypeId: data.type_id,
         projectId: data.project_id,
-        workspaceSlug: workspaceSlug.toString(),
+        workspaceSlug: workspaceSlug?.toString(),
         isDraft: true,
       });
 
@@ -261,7 +266,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: "Failed to move issue to project. Please try again.",
+        message: "Failed to move work item to project. Please try again.",
       });
     } finally {
       setIsMoving(false);
@@ -280,6 +285,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
 
   // debounced duplicate issues swr
   const { duplicateIssues } = useDebouncedDuplicateIssues(
+    workspaceSlug?.toString(),
     projectDetails?.workspace.toString(),
     projectId ?? undefined,
     {
@@ -373,7 +379,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     disabled={!!data?.id || !!data?.sourceIssueId || isProjectSelectionDisabled}
                     handleFormChange={handleFormChange}
                   />
-                  {projectId && (
+                  {projectId && storeType !== EIssuesStoreType.EPIC && (
                     <IssueTypeSelect
                       control={control}
                       projectId={projectId}
@@ -387,7 +393,11 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   <DeDupeButtonRoot
                     workspaceSlug={workspaceSlug?.toString()}
                     isDuplicateModalOpen={isDuplicateModalOpen}
-                    label={`${duplicateIssues.length} duplicate issue${duplicateIssues.length > 1 ? "s" : ""} found!`}
+                    label={
+                      duplicateIssues.length === 1
+                        ? `${duplicateIssues.length} ${t("duplicate_issue_found")}`
+                        : `${duplicateIssues.length} ${t("duplicate_issues_found")}`
+                    }
                     handleOnClick={() => handleDuplicateIssueModal(!isDuplicateModalOpen)}
                   />
                 )}
@@ -475,7 +485,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                   setSelectedParentIssue={setSelectedParentIssue}
                 />
               </div>
-              <div className="flex items-center justify-end gap-4 py-3">
+              <div className="flex items-center justify-end gap-4 py-3" tabIndex={getIndex("create_more")}>
                 {!data?.id && (
                   <div
                     className="inline-flex items-center gap-1.5 cursor-pointer"
@@ -483,42 +493,44 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     onKeyDown={(e) => {
                       if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
                     }}
-                    tabIndex={getIndex("create_more")}
                     role="button"
                   >
                     <ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
-                    <span className="text-xs">Create more</span>
+                    <span className="text-xs">{t("create_more")}</span>
                   </div>
                 )}
                 <div className="flex items-center gap-2">
-                  <Button
-                    variant="neutral-primary"
-                    size="sm"
-                    onClick={() => {
-                      if (editorRef.current?.isEditorReadyToDiscard()) {
-                        onClose();
-                      } else {
-                        setToast({
-                          type: TOAST_TYPE.ERROR,
-                          title: "Error!",
-                          message: "Editor is still processing changes. Please wait before proceeding.",
-                        });
-                      }
-                    }}
-                    tabIndex={getIndex("discard_button")}
-                  >
-                    Discard
-                  </Button>
-                  <Button
-                    variant={moveToIssue ? "neutral-primary" : "primary"}
-                    type="submit"
-                    size="sm"
-                    ref={submitBtnRef}
-                    loading={isSubmitting}
-                    tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}
-                  >
-                    {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
-                  </Button>
+                  <div tabIndex={getIndex("discard_button")}>
+                    <Button
+                      variant="neutral-primary"
+                      size="sm"
+                      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 ? "neutral-primary" : "primary"}
+                      type="submit"
+                      size="sm"
+                      ref={submitBtnRef}
+                      loading={isSubmitting}
+                    >
+                      {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
+                    </Button>
+                  </div>
+
                   {moveToIssue && (
                     <Button
                       variant="primary"
@@ -528,7 +540,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       onClick={handleMoveToProjects}
                       disabled={isMoving}
                     >
-                      Add to project
+                      {t("add_to_project")}
                     </Button>
                   )}
                 </div>
diff --git a/web/core/components/issues/issue-modal/modal.tsx b/web/core/components/issues/issue-modal/modal.tsx
index 3c8a639ee..56569bef8 100644
--- a/web/core/components/issues/issue-modal/modal.tsx
+++ b/web/core/components/issues/issue-modal/modal.tsx
@@ -3,11 +3,11 @@
 import React from "react";
 import { observer } from "mobx-react";
 // types
+import { EIssuesStoreType } from "@plane/constants";
 import type { TIssue } from "@plane/types";
 // components
 import { CreateUpdateIssueModalBase } from "@/components/issues";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
 // plane web providers
 import { IssueModalProvider } from "@/plane-web/components/issues";
 
diff --git a/web/core/components/issues/issue-update-status.tsx b/web/core/components/issues/issue-update-status.tsx
index 6eb064b52..37c4bf19a 100644
--- a/web/core/components/issues/issue-update-status.tsx
+++ b/web/core/components/issues/issue-update-status.tsx
@@ -1,12 +1,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { RefreshCw } from "lucide-react";
+// types
+import { TNameDescriptionLoader } from "@plane/types";
 
 type Props = {
-  isSubmitting: "submitting" | "submitted" | "saved";
+  isSubmitting: TNameDescriptionLoader;
 };
 
-export const IssueUpdateStatus: React.FC<Props> = observer((props) => {
+export const NameDescriptionUpdateStatus: React.FC<Props> = observer((props) => {
   const { isSubmitting } = props;
 
   return (
@@ -17,7 +19,7 @@ export const IssueUpdateStatus: React.FC<Props> = observer((props) => {
         }`}
       >
         {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
-          <RefreshCw className="h-4 w-4 stroke-custom-text-300" />
+          <RefreshCw className="animate-spin size-3.5 stroke-custom-text-300" />
         )}
         <span className="text-sm text-custom-text-300">{isSubmitting === "submitting" ? "Saving..." : "Saved"}</span>
       </div>
diff --git a/web/core/components/issues/parent-issues-list-modal.tsx b/web/core/components/issues/parent-issues-list-modal.tsx
index fab6bbaf1..e289caf2a 100644
--- a/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/web/core/components/issues/parent-issues-list-modal.tsx
@@ -6,13 +6,16 @@ import { useParams } from "next/navigation";
 import { Rocket, Search } from "lucide-react";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { ISearchIssueResponse } from "@plane/types";
 // ui
-import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
+import { Loader } from "@plane/ui";
 // components
 import { IssueSearchModalEmptyState } from "@/components/core";
 // helpers
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
 import useDebounce from "@/hooks/use-debounce";
@@ -29,6 +32,7 @@ type Props = {
   onChange: (issue: ISearchIssueResponse) => void;
   projectId: string | undefined;
   issueId?: string;
+  searchEpic?: boolean;
 };
 
 // services
@@ -41,12 +45,15 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   onChange,
   projectId,
   issueId,
+  searchEpic = false,
 }) => {
+  // i18n
+  const { t } = useTranslation();
+
   const [isLoading, setIsLoading] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
   const [isSearching, setIsSearching] = useState(false);
-  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
   const { isMobile } = usePlatformOS();
   const debouncedSearchTerm: string = useDebounce(searchTerm, 500);
 
@@ -57,7 +64,6 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   const handleClose = () => {
     onClose();
     setSearchTerm("");
-    setIsWorkspaceLevel(false);
   };
 
   useEffect(() => {
@@ -69,16 +75,17 @@ export const ParentIssuesListModal: React.FC<Props> = ({
     projectService
       .projectIssuesSearch(workspaceSlug as string, projectId as string, {
         search: debouncedSearchTerm,
-        parent: true,
+        parent: searchEpic ? undefined : true,
         issue_id: issueId,
-        workspace_search: isWorkspaceLevel,
+        workspace_search: false,
+        epic: searchEpic ? true : undefined,
       })
       .then((res) => setIssues(res))
       .finally(() => {
         setIsSearching(false);
         setIsLoading(false);
       });
-  }, [debouncedSearchTerm, isOpen, issueId, isWorkspaceLevel, projectId, workspaceSlug]);
+  }, [debouncedSearchTerm, isOpen, issueId, projectId, workspaceSlug]);
 
   return (
     <>
@@ -121,35 +128,13 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                     />
                     <Combobox.Input
                       className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-custom-text-100 outline-none placeholder:text-custom-text-400 focus:ring-0 sm:text-sm"
-                      placeholder="Type to search..."
+                      placeholder={t("common.search.placeholder")}
                       value={searchTerm}
                       onChange={(e) => setSearchTerm(e.target.value)}
                       displayValue={() => ""}
                       tabIndex={baseTabIndex}
                     />
                   </div>
-                  <div className="flex p-2 sm:justify-end">
-                    <Tooltip tooltipContent="Toggle workspace level search" isMobile={isMobile}>
-                      <div
-                        className={`flex flex-shrink-0 cursor-pointer items-center gap-1 text-xs ${
-                          isWorkspaceLevel ? "text-custom-text-100" : "text-custom-text-200"
-                        }`}
-                      >
-                        <ToggleSwitch
-                          value={isWorkspaceLevel}
-                          onChange={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                          label="Workspace level"
-                        />
-                        <button
-                          type="button"
-                          onClick={() => setIsWorkspaceLevel((prevData) => !prevData)}
-                          className="flex-shrink-0"
-                        >
-                          Workspace Level
-                        </button>
-                      </div>
-                    </Tooltip>
-                  </div>
                   <Combobox.Options
                     static
                     className="max-h-80 scroll-py-2 overflow-y-auto vertical-scrollbar scrollbar-md"
@@ -213,7 +198,13 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                                   <span className="truncate">{issue.name}</span>
                                 </div>
                                 <a
-                                  href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+                                  href={generateWorkItemLink({
+                                    workspaceSlug: workspaceSlug.toString(),
+                                    projectId: issue?.project_id,
+                                    issueId: issue?.id,
+                                    projectIdentifier: issue.project__identifier,
+                                    sequenceId: issue?.sequence_id,
+                                  })}
                                   target="_blank"
                                   className="z-1 relative hidden flex-shrink-0 text-custom-text-200 hover:text-custom-text-100 group-hover:block"
                                   rel="noopener noreferrer"
diff --git a/web/core/components/issues/peek-overview/error.tsx b/web/core/components/issues/peek-overview/error.tsx
index a7bd98470..f0b8cec49 100644
--- a/web/core/components/issues/peek-overview/error.tsx
+++ b/web/core/components/issues/peek-overview/error.tsx
@@ -32,8 +32,8 @@ export const IssuePeekOverviewError: FC<TIssuePeekOverviewError> = (props) => {
       <div className="w-full h-full">
         <EmptyState
           image={emptyIssue ?? undefined}
-          title="Issue does not exist"
-          description="The issue you are looking for does not exist, has been archived, or has been deleted."
+          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/web/core/components/issues/peek-overview/header.tsx b/web/core/components/issues/peek-overview/header.tsx
index 9967ad067..570e2a31a 100644
--- a/web/core/components/issues/peek-overview/header.tsx
+++ b/web/core/components/issues/peek-overview/header.tsx
@@ -4,6 +4,12 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { ArchiveRestoreIcon, Link2, MoveDiagonal, MoveRight, Trash2 } from "lucide-react";
+// plane imports
+import { ARCHIVABLE_STATE_GROUPS } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// types
+import { TNameDescriptionLoader } from "@plane/types";
 // ui
 import {
   ArchiveIcon,
@@ -16,32 +22,32 @@ import {
   setToast,
 } from "@plane/ui";
 // components
-import { IssueSubscription, IssueUpdateStatus } from "@/components/issues";
-import { ARCHIVABLE_STATE_GROUPS } from "@/constants/state";
+import { IssueSubscription, NameDescriptionUpdateStatus } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // store hooks
-import { useIssueDetail, useProjectState, useUser } from "@/hooks/store";
+import { useIssueDetail, useProject, useProjectState, useUser } from "@/hooks/store";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 export type TPeekModes = "side-peek" | "modal" | "full-screen";
 
-const PEEK_OPTIONS: { key: TPeekModes; icon: any; title: string }[] = [
+const PEEK_OPTIONS: { key: TPeekModes; icon: any; i18n_title: string }[] = [
   {
     key: "side-peek",
     icon: SidePanelIcon,
-    title: "Side Peek",
+    i18n_title: "common.side_peek ",
   },
   {
     key: "modal",
     icon: CenterPanelIcon,
-    title: "Modal",
+    i18n_title: "common.modal",
   },
   {
     key: "full-screen",
     icon: FullScreenPanelIcon,
-    title: "Full Screen",
+    i18n_title: "common.full_screen",
   },
 ];
 
@@ -58,7 +64,7 @@ export type PeekOverviewHeaderProps = {
   toggleDeleteIssueModal: (issueId: string | null) => void;
   toggleArchiveIssueModal: (issueId: string | null) => void;
   handleRestoreIssue: () => void;
-  isSubmitting: "submitting" | "submitted" | "saved";
+  isSubmitting: TNameDescriptionLoader;
 };
 
 export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((props) => {
@@ -77,6 +83,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
     handleRestoreIssue,
     isSubmitting,
   } = props;
+  const { t } = useTranslation();
   // store hooks
   const { data: currentUser } = useUser();
   const {
@@ -84,21 +91,30 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
   } = useIssueDetail();
   const { getStateById } = useProjectState();
   const { isMobile } = usePlatformOS();
+  const { getProjectIdentifierById } = useProject();
   // derived values
   const issueDetails = getIssueById(issueId);
   const stateDetails = issueDetails ? getStateById(issueDetails?.state_id) : undefined;
   const currentMode = PEEK_OPTIONS.find((m) => m.key === peekMode);
+  const projectIdentifier = getProjectIdentifierById(issueDetails?.project_id);
 
-  const issueLink = `${workspaceSlug}/projects/${projectId}/${isArchived ? "archives/" : ""}issues/${issueId}`;
+  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(issueLink).then(() => {
+    copyUrlToClipboard(workItemLink, false).then(() => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "Issue link copied to clipboard.",
+        title: t("common.link_copied"),
+        message: t("common.copied_to_clipboard"),
       });
     });
   };
@@ -114,14 +130,14 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
       }`}
     >
       <div className="flex items-center gap-4">
-        <Tooltip tooltipContent="Close the peek view" isMobile={isMobile}>
+        <Tooltip tooltipContent={t("common.close_peek_view")} isMobile={isMobile}>
           <button onClick={removeRoutePeekId}>
             <MoveRight className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
           </button>
         </Tooltip>
 
-        <Tooltip tooltipContent="Open issue in full screen" isMobile={isMobile}>
-          <Link href={`/${issueLink}`} onClick={() => removeRoutePeekId()}>
+        <Tooltip tooltipContent={t("issue.open_in_full_screen")} isMobile={isMobile}>
+          <Link href={workItemLink} onClick={() => removeRoutePeekId()}>
             <MoveDiagonal className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
           </Link>
         </Tooltip>
@@ -131,7 +147,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
               value={currentMode}
               onChange={(val: any) => setPeekMode(val)}
               customButton={
-                <Tooltip tooltipContent="Toggle peek view layout" isMobile={isMobile}>
+                <Tooltip tooltipContent={t("common.toggle_peek_view_layout")} isMobile={isMobile}>
                   <button type="button" className="">
                     <currentMode.icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
                   </button>
@@ -148,7 +164,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
                     }`}
                   >
                     <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
-                    {mode.title}
+                    {t(mode.i18n_title)}
                   </div>
                 </CustomSelect.Option>
               ))}
@@ -157,12 +173,12 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
         )}
       </div>
       <div className="flex items-center gap-x-4">
-        <IssueUpdateStatus isSubmitting={isSubmitting} />
+        <NameDescriptionUpdateStatus isSubmitting={isSubmitting} />
         <div className="flex items-center gap-4">
           {currentUser && !isArchived && (
             <IssueSubscription workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} />
           )}
-          <Tooltip tooltipContent="Copy link" isMobile={isMobile}>
+          <Tooltip tooltipContent={t("common.actions.copy_link")} isMobile={isMobile}>
             <button type="button" onClick={handleCopyText}>
               <Link2 className="h-4 w-4 -rotate-45 text-custom-text-300 hover:text-custom-text-200" />
             </button>
@@ -170,7 +186,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
           {isArchivingAllowed && (
             <Tooltip
               isMobile={isMobile}
-              tooltipContent={isInArchivableGroup ? "Archive" : "Only completed or canceled issues can be archived"}
+              tooltipContent={isInArchivableGroup ? t("common.actions.archive") : t("issue.archive.description")}
             >
               <button
                 type="button"
@@ -188,14 +204,14 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
             </Tooltip>
           )}
           {isRestoringAllowed && (
-            <Tooltip tooltipContent="Restore" isMobile={isMobile}>
+            <Tooltip tooltipContent={t("common.actions.restore")} isMobile={isMobile}>
               <button type="button" onClick={handleRestoreIssue}>
                 <ArchiveRestoreIcon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
               </button>
             </Tooltip>
           )}
           {!disabled && (
-            <Tooltip tooltipContent="Delete" isMobile={isMobile}>
+            <Tooltip tooltipContent={t("common.actions.delete")} isMobile={isMobile}>
               <button type="button" onClick={() => toggleDeleteIssueModal(issueId)}>
                 <Trash2 className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
               </button>
diff --git a/web/core/components/issues/peek-overview/issue-detail.tsx b/web/core/components/issues/peek-overview/issue-detail.tsx
index 74aba71fd..421aa6521 100644
--- a/web/core/components/issues/peek-overview/issue-detail.tsx
+++ b/web/core/components/issues/peek-overview/issue-detail.tsx
@@ -1,6 +1,8 @@
 "use-client";
 import { FC, useEffect } from "react";
 import { observer } from "mobx-react";
+// types
+import { TNameDescriptionLoader } from "@plane/types";
 // components
 import { IssueParentDetail, TIssueOperations } from "@/components/issues";
 // helpers
@@ -25,8 +27,8 @@ interface IPeekOverviewIssueDetails {
   issueOperations: TIssueOperations;
   disabled: boolean;
   isArchived: boolean;
-  isSubmitting: "submitting" | "submitted" | "saved";
-  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
+  isSubmitting: TNameDescriptionLoader;
+  setIsSubmitting: (value: TNameDescriptionLoader) => void;
 }
 
 export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer((props) => {
@@ -55,11 +57,16 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = observer(
   const issue = issueId ? getIssueById(issueId) : undefined;
   const projectDetails = issue?.project_id ? getProjectById(issue?.project_id) : undefined;
   // debounced duplicate issues swr
-  const { duplicateIssues } = useDebouncedDuplicateIssues(projectDetails?.workspace.toString(), projectDetails?.id, {
-    name: issue?.name,
-    description_html: getTextContent(issue?.description_html),
-    issueId: issue?.id,
-  });
+  const { duplicateIssues } = useDebouncedDuplicateIssues(
+    workspaceSlug,
+    projectDetails?.workspace.toString(),
+    projectDetails?.id,
+    {
+      name: issue?.name,
+      description_html: getTextContent(issue?.description_html),
+      issueId: issue?.id,
+    }
+  );
 
   if (!issue || !issue.project_id) return <></>;
 
diff --git a/web/core/components/issues/peek-overview/properties.tsx b/web/core/components/issues/peek-overview/properties.tsx
index d000c9b6f..e3e5d5145 100644
--- a/web/core/components/issues/peek-overview/properties.tsx
+++ b/web/core/components/issues/peek-overview/properties.tsx
@@ -3,7 +3,8 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Signal, Tag, Triangle, LayoutPanelTop, CalendarClock, CalendarCheck2, Users, UserCircle2 } from "lucide-react";
-// hooks
+// i18n
+import { useTranslation } from "@plane/i18n";
 // ui icons
 import { DiceIcon, DoubleCircleIcon, ContrastIcon } from "@plane/ui";
 // components
@@ -15,13 +16,7 @@ import {
   StateDropdown,
 } from "@/components/dropdowns";
 import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
-import {
-  IssueCycleSelect,
-  IssueModuleSelect,
-  IssueParentSelect,
-  IssueLabel,
-  TIssueOperations,
-} from "@/components/issues";
+import { IssueCycleSelect, IssueModuleSelect, IssueLabel, TIssueOperations } from "@/components/issues";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
@@ -29,7 +24,7 @@ import { shouldHighlightIssueDueDate } from "@/helpers/issue.helper";
 import { useIssueDetail, useMember, useProject, useProjectState } from "@/hooks/store";
 // plane web components
 import { IssueAdditionalPropertyValuesUpdate } from "@/plane-web/components/issue-types/values";
-import { IssueWorklogProperty } from "@/plane-web/components/issues";
+import { IssueParentSelectRoot, IssueWorklogProperty } from "@/plane-web/components/issues";
 
 interface IPeekOverviewProperties {
   workspaceSlug: string;
@@ -41,6 +36,7 @@ interface IPeekOverviewProperties {
 
 export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
   const { workspaceSlug, projectId, issueId, issueOperations, disabled } = props;
+  const { t } = useTranslation();
   // store hooks
   const { getProjectById } = useProject();
   const {
@@ -64,14 +60,14 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
   return (
     <div>
-      <h6 className="text-sm font-medium">Properties</h6>
+      <h6 className="text-sm font-medium">{t("common.properties")}</h6>
       {/* TODO: render properties using a common component */}
       <div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
         {/* state */}
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
             <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
-            <span>State</span>
+            <span>{t("common.state")}</span>
           </div>
           <StateDropdown
             value={issue?.state_id}
@@ -91,14 +87,14 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
             <Users className="h-4 w-4 flex-shrink-0" />
-            <span>Assignees</span>
+            <span>{t("common.assignees")}</span>
           </div>
           <MemberDropdown
             value={issue?.assignee_ids ?? undefined}
             onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
             disabled={disabled}
             projectId={projectId}
-            placeholder="Add assignees"
+            placeholder={t("issue.add.assignee")}
             multiple
             buttonVariant={issue?.assignee_ids?.length > 1 ? "transparent-without-text" : "transparent-with-text"}
             className="w-3/4 flex-grow group"
@@ -114,7 +110,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
             <Signal className="h-4 w-4 flex-shrink-0" />
-            <span>Priority</span>
+            <span>{t("common.priority")}</span>
           </div>
           <PriorityDropdown
             value={issue?.priority}
@@ -132,7 +128,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           <div className="flex w-full items-center gap-3 h-8">
             <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
               <UserCircle2 className="h-4 w-4 flex-shrink-0" />
-              <span>Created by</span>
+              <span>{t("common.created_by")}</span>
             </div>
             <div className="w-full h-full flex items-center gap-1.5 rounded px-2 py-0.5 text-sm justify-between cursor-not-allowed">
               <ButtonAvatars
@@ -150,7 +146,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
             <CalendarClock className="h-4 w-4 flex-shrink-0" />
-            <span>Start date</span>
+            <span>{t("common.order_by.start_date")}</span>
           </div>
           <DateDropdown
             value={issue.start_date}
@@ -159,7 +155,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
                 start_date: val ? renderFormattedPayloadDate(val) : null,
               })
             }
-            placeholder="Add start date"
+            placeholder={t("issue.add.start_date")}
             buttonVariant="transparent-with-text"
             maxDate={maxDate ?? undefined}
             disabled={disabled}
@@ -177,7 +173,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
             <CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
-            <span>Due date</span>
+            <span>{t("common.order_by.due_date")}</span>
           </div>
           <DateDropdown
             value={issue.target_date}
@@ -186,7 +182,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
                 target_date: val ? renderFormattedPayloadDate(val) : null,
               })
             }
-            placeholder="Add due date"
+            placeholder={t("issue.add.due_date")}
             buttonVariant="transparent-with-text"
             minDate={minDate ?? undefined}
             disabled={disabled}
@@ -208,7 +204,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           <div className="flex w-full items-center gap-3 h-8">
             <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
               <Triangle className="h-4 w-4 flex-shrink-0" />
-              <span>Estimate</span>
+              <span>{t("common.estimate")}</span>
             </div>
             <EstimateDropdown
               value={issue.estimate_point ?? undefined}
@@ -231,7 +227,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           <div className="flex w-full items-center gap-3 min-h-8 h-full">
             <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
               <DiceIcon className="h-4 w-4 flex-shrink-0" />
-              <span>Modules</span>
+              <span>{t("common.modules")}</span>
             </div>
             <IssueModuleSelect
               className="w-3/4 flex-grow"
@@ -248,7 +244,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
           <div className="flex w-full items-center gap-3 h-8">
             <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
               <ContrastIcon className="h-4 w-4 flex-shrink-0" />
-              <span>Cycle</span>
+              <span>{t("common.cycle")}</span>
             </div>
             <IssueCycleSelect
               className="w-3/4 flex-grow"
@@ -265,9 +261,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <div className="flex w-full items-center gap-3 h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
             <LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
-            <p>Parent</p>
+            <p>{t("common.parent")}</p>
           </div>
-          <IssueParentSelect
+          <IssueParentSelectRoot
             className="w-3/4 flex-grow h-full"
             disabled={disabled}
             issueId={issueId}
@@ -281,7 +277,7 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
         <div className="flex w-full items-center gap-3 min-h-8">
           <div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
             <Tag className="h-4 w-4 flex-shrink-0" />
-            <span>Labels</span>
+            <span>{t("common.labels")}</span>
           </div>
           <div className="flex w-full flex-col gap-3 truncate">
             <IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
diff --git a/web/core/components/issues/peek-overview/root.tsx b/web/core/components/issues/peek-overview/root.tsx
index 70eb51d81..5ed6403bc 100644
--- a/web/core/components/issues/peek-overview/root.tsx
+++ b/web/core/components/issues/peek-overview/root.tsx
@@ -4,28 +4,41 @@ import { FC, useEffect, useState, useMemo, useCallback } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // plane types
+import {
+  EIssuesStoreType,
+  ISSUE_UPDATED,
+  ISSUE_DELETED,
+  ISSUE_ARCHIVED,
+  ISSUE_RESTORED,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TIssue } from "@plane/types";
 // plane ui
 import { TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
 // components
 import { IssueView, TIssueOperations } from "@/components/issues";
 // constants
-import { ISSUE_UPDATED, ISSUE_DELETED, ISSUE_ARCHIVED, ISSUE_RESTORED } from "@/constants/event-tracker";
-import { EIssuesStoreType } from "@/constants/issue";
 // hooks
 import { useEventTracker, useIssueDetail, useIssues, useUserPermissions } from "@/hooks/store";
-import { useIssuesStore } from "@/hooks/use-issue-layout-store";
-// plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 
 interface IIssuePeekOverview {
   embedIssue?: boolean;
   embedRemoveCurrentNotification?: () => void;
   is_draft?: boolean;
+  storeType?: EIssuesStoreType;
 }
 
 export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
-  const { embedIssue = false, embedRemoveCurrentNotification, is_draft = false } = props;
+  const {
+    embedIssue = false,
+    embedRemoveCurrentNotification,
+    is_draft = false,
+    storeType: issueStoreFromProps,
+  } = props;
+  const { t } = useTranslation();
   // router
   const pathname = usePathname();
   // store hook
@@ -40,8 +53,9 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
     issue: { fetchIssue, getIsFetchingIssueDetails },
     fetchActivities,
   } = useIssueDetail();
-
-  const { issues } = useIssuesStore();
+  const issueStoreType = useIssueStoreType();
+  const storeType = issueStoreFromProps ?? issueStoreType;
+  const { issues } = useIssues(storeType);
   const { captureIssueEvent } = useEventTracker();
   // state
   const [error, setError] = useState(false);
@@ -85,9 +99,9 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
                 path: pathname,
               });
               setToast({
-                title: "Error!",
+                title: t("toast.error"),
                 type: TOAST_TYPE.ERROR,
-                message: "Issue update failed",
+                message: t("entity.update.failed", { entity: t("issue.label", { count: 1 }) }),
               });
             });
         }
@@ -104,9 +118,9 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
           });
         } catch {
           setToast({
-            title: "Error!",
+            title: t("toast.error"),
             type: TOAST_TYPE.ERROR,
-            message: "Issue delete failed",
+            message: t("entity.delete.failed", { entity: t("issue.label", { count: 1 }) }),
           });
           captureIssueEvent({
             eventName: ISSUE_DELETED,
@@ -137,8 +151,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
           await restoreIssue(workspaceSlug, projectId, issueId);
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Restore success",
-            message: "Your issue can be found in project issues.",
+            title: t("issue.restore.success.title"),
+            message: t("issue.restore.success.message"),
           });
           captureIssueEvent({
             eventName: ISSUE_RESTORED,
@@ -148,8 +162,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         } catch {
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Issue could not be restored. Please try again.",
+            title: t("toast.error"),
+            message: t("issue.restore.failed.message"),
           });
           captureIssueEvent({
             eventName: ISSUE_RESTORED,
@@ -174,8 +188,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         } catch {
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Issue could not be added to the cycle. Please try again.",
+            title: t("toast.error"),
+            message: t("issue.add.cycle.failed"),
           });
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
@@ -203,8 +217,8 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         } catch {
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: "Issue could not be added to the cycle. Please try again.",
+            title: t("toast.error"),
+            message: t("issue.add.cycle.failed"),
           });
           captureIssueEvent({
             eventName: ISSUE_UPDATED,
@@ -221,14 +235,14 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         try {
           const removeFromCyclePromise = issues.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
           setPromiseToast(removeFromCyclePromise, {
-            loading: "Removing issue from the cycle...",
+            loading: t("issue.remove.cycle.loading"),
             success: {
-              title: "Success!",
-              message: () => "Issue removed from the cycle successfully.",
+              title: t("toast.success"),
+              message: () => t("issue.remove.cycle.success"),
             },
             error: {
-              title: "Error!",
-              message: () => "Issue could not be removed from the cycle. Please try again.",
+              title: t("toast.error"),
+              message: () => t("issue.remove.cycle.failed"),
             },
           });
           await removeFromCyclePromise;
@@ -284,14 +298,14 @@ export const IssuePeekOverview: FC<IIssuePeekOverview> = observer((props) => {
         try {
           const removeFromModulePromise = issues.removeIssuesFromModule(workspaceSlug, projectId, moduleId, [issueId]);
           setPromiseToast(removeFromModulePromise, {
-            loading: "Removing issue from the module...",
+            loading: t("issue.remove.module.loading"),
             success: {
-              title: "Success!",
-              message: () => "Issue removed from the module successfully.",
+              title: t("toast.success"),
+              message: () => t("issue.remove.module.success"),
             },
             error: {
-              title: "Error!",
-              message: () => "Issue could not be removed from the module. Please try again.",
+              title: t("toast.error"),
+              message: () => t("issue.remove.module.failed"),
             },
           });
           await removeFromModulePromise;
diff --git a/web/core/components/issues/peek-overview/view.tsx b/web/core/components/issues/peek-overview/view.tsx
index 8a9a7f2e2..c80212556 100644
--- a/web/core/components/issues/peek-overview/view.tsx
+++ b/web/core/components/issues/peek-overview/view.tsx
@@ -1,5 +1,10 @@
 import { FC, useRef, useState } from "react";
 import { observer } from "mobx-react";
+// constants
+import { EIssueServiceType } from "@plane/constants";
+// types
+import { TNameDescriptionLoader } from "@plane/types";
+// components
 import {
   DeleteIssueModal,
   IssuePeekOverviewHeader,
@@ -49,7 +54,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   } = props;
   // states
   const [peekMode, setPeekMode] = useState<TPeekModes>("side-peek");
-  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
+  const [isSubmitting, setIsSubmitting] = useState<TNameDescriptionLoader>("saved");
   // ref
   const issuePeekOverviewRef = useRef<HTMLDivElement>(null);
   // store hooks
@@ -62,6 +67,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
     toggleArchiveIssueModal,
     issue: { getIssueById, getIsLocalDBIssueDescription },
   } = useIssueDetail();
+  const { isAnyModalOpen: isAnyEpicModalOpen } = useIssueDetail(EIssueServiceType.EPICS);
   const issue = getIssueById(issueId);
   // remove peek id
   const removeRoutePeekId = () => {
@@ -75,7 +81,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
     issuePeekOverviewRef,
     () => {
       if (!embedIssue) {
-        if (!isAnyModalOpen) {
+        if (!isAnyModalOpen && !isAnyEpicModalOpen) {
           removeRoutePeekId();
         }
       }
diff --git a/web/core/components/issues/relations/issue-list-item.tsx b/web/core/components/issues/relations/issue-list-item.tsx
index 9ac1253ae..c90d8c1a8 100644
--- a/web/core/components/issues/relations/issue-list-item.tsx
+++ b/web/core/components/issues/relations/issue-list-item.tsx
@@ -4,10 +4,14 @@ import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { X, Pencil, Trash, Link as LinkIcon } from "lucide-react";
 // Plane
-import { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssue, TIssueServiceType } from "@plane/types";
 import { ControlLink, CustomMenu, Tooltip } from "@plane/ui";
 // components
 import { RelationIssueProperty } from "@/components/issues/relations";
+// helpers
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
 import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
@@ -15,55 +19,71 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
 import { IssueIdentifier } from "@/plane-web/components/issues";
 import { TIssueRelationTypes } from "@/plane-web/types";
-//
-import { TRelationIssueOperations } from "../issue-detail-widgets/relations/helper";
+// local imports
+import { useRelationOperations } from "../issue-detail-widgets/relations/helper";
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   relationKey: TIssueRelationTypes;
   relationIssueId: string;
   disabled: boolean;
-  issueOperations: TRelationIssueOperations;
   handleIssueCrudState: (key: "update" | "delete", issueId: string, issue?: TIssue | null) => void;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const RelationIssueListItem: FC<Props> = observer((props) => {
   const {
     workspaceSlug,
-    projectId,
     issueId,
     relationKey,
     relationIssueId,
     disabled = false,
-    issueOperations,
     handleIssueCrudState,
+    issueServiceType = EIssueServiceType.ISSUES,
   } = props;
 
+  const { t } = useTranslation();
+
   // store hooks
   const {
     issue: { getIssueById },
     removeRelation,
     toggleCreateIssueModal,
     toggleDeleteIssueModal,
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
   const project = useProject();
   const { getProjectStates } = useProjectState();
-  const { handleRedirection } = useIssuePeekOverviewRedirection();
   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;
   const currentIssueStateDetail =
     (issue?.project_id && getProjectStates(issue?.project_id)?.find((state) => issue?.state_id == state.id)) ||
     undefined;
+  if (!issue || !projectId) return <></>;
 
-  if (!issue) 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) => handleRedirection(workspaceSlug, issue, isMobile);
+  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();
@@ -82,7 +102,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
   const handleCopyIssueLink = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
     e.preventDefault();
-    issueOperations.copyText(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`);
+    issueOperations.copyText(workItemLink);
   };
 
   const handleRemoveRelation = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -95,7 +115,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
     <div key={relationIssueId}>
       <ControlLink
         id={`issue-${issue.id}`}
-        href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+        href={workItemLink}
         onClick={() => handleIssuePeekOverview(issue)}
         className="w-full cursor-pointer"
       >
@@ -137,6 +157,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                 issueId={relationIssueId}
                 disabled={disabled}
                 issueOperations={issueOperations}
+                issueServiceType={issueServiceType}
               />
             </div>
             <div className="flex-shrink-0 text-sm">
@@ -145,7 +166,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={handleEditIssue}>
                     <div className="flex items-center gap-2">
                       <Pencil className="h-3.5 w-3.5" strokeWidth={2} />
-                      <span>Edit issue</span>
+                      <span>{t("common.actions.edit")}</span>
                     </div>
                   </CustomMenu.MenuItem>
                 )}
@@ -153,7 +174,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                 <CustomMenu.MenuItem onClick={handleCopyIssueLink}>
                   <div className="flex items-center gap-2">
                     <LinkIcon className="h-3.5 w-3.5" strokeWidth={2} />
-                    <span>Copy issue link</span>
+                    <span>{t("common.actions.copy_link")}</span>
                   </div>
                 </CustomMenu.MenuItem>
 
@@ -161,7 +182,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={handleRemoveRelation}>
                     <div className="flex items-center gap-2">
                       <X className="h-3.5 w-3.5" strokeWidth={2} />
-                      <span>Remove relation</span>
+                      <span>{t("common.actions.remove_relation")}</span>
                     </div>
                   </CustomMenu.MenuItem>
                 )}
@@ -170,7 +191,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={handleDeleteIssue}>
                     <div className="flex items-center gap-2">
                       <Trash className="h-3.5 w-3.5" strokeWidth={2} />
-                      <span>Delete issue</span>
+                      <span>{t("common.actions.delete")}</span>
                     </div>
                   </CustomMenu.MenuItem>
                 )}
diff --git a/web/core/components/issues/relations/issue-list.tsx b/web/core/components/issues/relations/issue-list.tsx
index 1b89788a4..f27c068cb 100644
--- a/web/core/components/issues/relations/issue-list.tsx
+++ b/web/core/components/issues/relations/issue-list.tsx
@@ -2,35 +2,32 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 // Plane
-import { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssue, TIssueServiceType } from "@plane/types";
 // components
 import { RelationIssueListItem } from "@/components/issues/relations";
 // Plane-web
 import { TIssueRelationTypes } from "@/plane-web/types";
-//
-import { TRelationIssueOperations } from "../issue-detail-widgets/relations/helper";
 
 type Props = {
   workspaceSlug: string;
-  projectId: string;
   issueId: string;
   issueIds: string[];
   relationKey: TIssueRelationTypes;
-  issueOperations: TRelationIssueOperations;
   handleIssueCrudState: (key: "update" | "delete", issueId: string, issue?: TIssue | null) => void;
   disabled?: boolean;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const RelationIssueList: FC<Props> = observer((props) => {
   const {
     workspaceSlug,
-    projectId,
     issueId,
     issueIds,
     relationKey,
     disabled = false,
-    issueOperations,
     handleIssueCrudState,
+    issueServiceType = EIssueServiceType.ISSUES,
   } = props;
 
   return (
@@ -41,13 +38,12 @@ export const RelationIssueList: FC<Props> = observer((props) => {
           <RelationIssueListItem
             key={relationIssueId}
             workspaceSlug={workspaceSlug}
-            projectId={projectId}
             issueId={issueId}
             relationKey={relationKey}
             relationIssueId={relationIssueId}
             disabled={disabled}
             handleIssueCrudState={handleIssueCrudState}
-            issueOperations={issueOperations}
+            issueServiceType={issueServiceType}
           />
         ))}
     </div>
diff --git a/web/core/components/issues/relations/properties.tsx b/web/core/components/issues/relations/properties.tsx
index 543a88c4d..b301c8b1f 100644
--- a/web/core/components/issues/relations/properties.tsx
+++ b/web/core/components/issues/relations/properties.tsx
@@ -1,8 +1,9 @@
 "use client";
 import React, { FC } from "react";
 import { observer } from "mobx-react";
+import { EIssueServiceType } from "@plane/constants";
 // components
-import { TIssuePriorities } from "@plane/types";
+import { TIssuePriorities, TIssueServiceType } from "@plane/types";
 import { PriorityDropdown, MemberDropdown, StateDropdown } from "@/components/dropdowns";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
@@ -14,14 +15,15 @@ type Props = {
   issueId: string;
   disabled: boolean;
   issueOperations: TRelationIssueOperations;
+  issueServiceType?: TIssueServiceType;
 };
 
 export const RelationIssueProperty: FC<Props> = observer((props) => {
-  const { workspaceSlug, issueId, disabled, issueOperations } = props;
+  const { workspaceSlug, issueId, disabled, issueOperations, issueServiceType = EIssueServiceType.ISSUES } = props;
   // hooks
   const {
     issue: { getIssueById },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   // derived value
   const issue = getIssueById(issueId);
diff --git a/web/core/components/issues/select/label.tsx b/web/core/components/issues/select/label.tsx
index bde585a16..2dc21e7f4 100644
--- a/web/core/components/issues/select/label.tsx
+++ b/web/core/components/issues/select/label.tsx
@@ -4,8 +4,8 @@ import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Check, Component, Plus, Search, Tag } from "lucide-react";
 import { Combobox } from "@headlessui/react";
-// plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
 // components
 import { IssueLabelsList } from "@/components/ui";
 // helpers
@@ -39,6 +39,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
     createLabelEnabled = false,
     buttonClassName,
   } = props;
+  const { t } = useTranslation();
   // router
   const { workspaceSlug } = useParams();
   // store hooks
@@ -111,31 +112,29 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
       disabled={disabled}
       onKeyDown={handleKeyDown}
     >
-      <Combobox.Button as={Fragment}>
-        <button
-          type="button"
-          ref={setReferenceElement}
-          className={cn("h-full flex cursor-pointer items-center gap-2 text-xs text-custom-text-200", buttonClassName)}
-          onClick={handleOnClick}
-        >
-          {label ? (
-            label
-          ) : value && value.length > 0 ? (
-            <span className="flex items-center justify-center gap-2 text-xs h-full">
-              <IssueLabelsList
-                labels={value.map((v) => projectLabels?.find((l) => l.id === v)) ?? []}
-                length={3}
-                showLength
-              />
-            </span>
-          ) : (
-            <div className="h-full flex items-center justify-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80">
-              <Tag className="h-3 w-3 flex-shrink-0" />
-              <span>Labels</span>
-            </div>
-          )}
-        </button>
-      </Combobox.Button>
+      <button
+        type="button"
+        ref={setReferenceElement}
+        className={cn("h-full flex cursor-pointer items-center gap-2 text-xs text-custom-text-200", buttonClassName)}
+        onClick={handleOnClick}
+      >
+        {label ? (
+          label
+        ) : value && value.length > 0 ? (
+          <span className="flex items-center justify-center gap-2 text-xs h-full">
+            <IssueLabelsList
+              labels={value.map((v) => projectLabels?.find((l) => l.id === v)) ?? []}
+              length={3}
+              showLength
+            />
+          </span>
+        ) : (
+          <div className="h-full flex items-center justify-center gap-1 rounded border-[0.5px] border-custom-border-300 px-2 py-1 text-xs hover:bg-custom-background-80">
+            <Tag className="h-3 w-3 flex-shrink-0" />
+            <span>{t("labels")}</span>
+          </div>
+        )}
+      </button>
 
       {isDropdownOpen && (
         <Combobox.Options className="fixed z-10" static>
@@ -152,7 +151,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                 ref={inputRef}
                 className="w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
                 onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search"
+                placeholder={t("search")}
                 displayValue={(assigned: any) => assigned?.name}
               />
             </div>
@@ -232,10 +231,10 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                       );
                   })
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">No matching results</p>
+                  <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                <p className="text-custom-text-400 italic py-1 px-1.5">{t("loading")}</p>
               )}
               {createLabelEnabled && (
                 <button
@@ -244,7 +243,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
                   onClick={() => setIsOpen(true)}
                 >
                   <Plus className="h-3 w-3" aria-hidden="true" />
-                  <span className="whitespace-nowrap">Create new label</span>
+                  <span className="whitespace-nowrap">{t("create_new_label")}</span>
                 </button>
               )}
             </div>
diff --git a/web/core/components/issues/sub-issues/issue-list-item.tsx b/web/core/components/issues/sub-issues/issue-list-item.tsx
index c4486c2ae..4d10587fd 100644
--- a/web/core/components/issues/sub-issues/issue-list-item.tsx
+++ b/web/core/components/issues/sub-issues/issue-list-item.tsx
@@ -3,11 +3,14 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
-import { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TIssue, TIssueServiceType } from "@plane/types";
 // ui
 import { ControlLink, CustomMenu, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
 import { useIssueDetail, useProject, useProjectState } from "@/hooks/store";
 import useIssuePeekOverviewRedirection from "@/hooks/use-issue-peek-overview-redirection";
@@ -36,6 +39,7 @@ export interface ISubIssues {
   ) => void;
   subIssueOperations: TSubIssueOperations;
   issueId: string;
+  issueServiceType?: TIssueServiceType;
 }
 
 export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
@@ -49,14 +53,16 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
     disabled,
     handleIssueCrudState,
     subIssueOperations,
+    issueServiceType = EIssueServiceType.ISSUES,
   } = props;
-
+  const { t } = useTranslation();
   const {
     issue: { getIssueById },
+  } = useIssueDetail(issueServiceType);
+  const {
     subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
-    toggleCreateIssueModal,
-    toggleDeleteIssueModal,
   } = useIssueDetail();
+  const { toggleCreateIssueModal, toggleDeleteIssueModal } = useIssueDetail(issueServiceType);
   const project = useProject();
   const { getProjectStates } = useProjectState();
   const { handleRedirection } = useIssuePeekOverviewRedirection();
@@ -80,11 +86,19 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
   // 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={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
+        href={workItemLink}
         onClick={() => handleIssuePeekOverview(issue)}
         className="w-full cursor-pointer"
       >
@@ -163,6 +177,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                 issueId={issueId}
                 disabled={disabled}
                 subIssueOperations={subIssueOperations}
+                issueServiceType={issueServiceType}
               />
             </div>
 
@@ -179,7 +194,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                   >
                     <div className="flex items-center gap-2">
                       <Pencil className="h-3.5 w-3.5" strokeWidth={2} />
-                      <span>Edit issue</span>
+                      <span>{t("issue.edit")}</span>
                     </div>
                   </CustomMenu.MenuItem>
                 )}
@@ -188,12 +203,12 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                   onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
-                    subIssueOperations.copyText(`${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`);
+                    subIssueOperations.copyText(workItemLink);
                   }}
                 >
                   <div className="flex items-center gap-2">
                     <LinkIcon className="h-3.5 w-3.5" strokeWidth={2} />
-                    <span>Copy issue link</span>
+                    <span>{t("issue.copy_link")}</span>
                   </div>
                 </CustomMenu.MenuItem>
 
@@ -208,7 +223,9 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                   >
                     <div className="flex items-center gap-2">
                       <X className="h-3.5 w-3.5" strokeWidth={2} />
-                      <span>Remove parent issue</span>
+                      {issueServiceType === EIssueServiceType.ISSUES
+                        ? t("issue.remove.parent.label")
+                        : t("issue.remove.label")}
                     </div>
                   </CustomMenu.MenuItem>
                 )}
@@ -224,7 +241,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
                   >
                     <div className="flex items-center gap-2">
                       <Trash className="h-3.5 w-3.5" strokeWidth={2} />
-                      <span>Delete issue</span>
+                      <span>{t("issue.delete.label")}</span>
                     </div>
                   </CustomMenu.MenuItem>
                 )}
diff --git a/web/core/components/issues/sub-issues/issues-list.tsx b/web/core/components/issues/sub-issues/issues-list.tsx
index 2178f086f..9fe1a9aba 100644
--- a/web/core/components/issues/sub-issues/issues-list.tsx
+++ b/web/core/components/issues/sub-issues/issues-list.tsx
@@ -1,6 +1,7 @@
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
-import { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssue, TIssueServiceType } from "@plane/types";
 // hooks
 import { useIssueDetail } from "@/hooks/store";
 // components
@@ -21,6 +22,7 @@ export interface IIssueList {
     issue?: TIssue | null
   ) => void;
   subIssueOperations: TSubIssueOperations;
+  issueServiceType?: TIssueServiceType;
 }
 
 export const IssueList: FC<IIssueList> = observer((props) => {
@@ -33,11 +35,12 @@ export const IssueList: FC<IIssueList> = observer((props) => {
     disabled,
     handleIssueCrudState,
     subIssueOperations,
+    issueServiceType = EIssueServiceType.ISSUES,
   } = props;
   // hooks
   const {
     subIssues: { subIssuesByIssueId },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   const subIssueIds = subIssuesByIssueId(parentIssueId);
 
@@ -57,6 +60,7 @@ export const IssueList: FC<IIssueList> = observer((props) => {
               disabled={disabled}
               handleIssueCrudState={handleIssueCrudState}
               subIssueOperations={subIssueOperations}
+              issueServiceType={issueServiceType}
             />
           </Fragment>
         ))}
diff --git a/web/core/components/issues/sub-issues/properties.tsx b/web/core/components/issues/sub-issues/properties.tsx
index 948f97721..731487668 100644
--- a/web/core/components/issues/sub-issues/properties.tsx
+++ b/web/core/components/issues/sub-issues/properties.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { TIssueServiceType } from "@plane/types";
 // hooks
 import { PriorityDropdown, MemberDropdown, StateDropdown } from "@/components/dropdowns";
 import { useIssueDetail } from "@/hooks/store";
@@ -12,14 +13,15 @@ export interface IIssueProperty {
   issueId: string;
   disabled: boolean;
   subIssueOperations: TSubIssueOperations;
+  issueServiceType?: TIssueServiceType;
 }
 
 export const IssueProperty: React.FC<IIssueProperty> = (props) => {
-  const { workspaceSlug, parentIssueId, issueId, disabled, subIssueOperations } = props;
+  const { workspaceSlug, parentIssueId, issueId, disabled, subIssueOperations, issueServiceType } = props;
   // hooks
   const {
     issue: { getIssueById },
-  } = useIssueDetail();
+  } = useIssueDetail(issueServiceType);
 
   const issue = getIssueById(issueId);
 
diff --git a/web/core/components/issues/sub-issues/root.tsx b/web/core/components/issues/sub-issues/root.tsx
index 84db36c4c..509ea7135 100644
--- a/web/core/components/issues/sub-issues/root.tsx
+++ b/web/core/components/issues/sub-issues/root.tsx
@@ -135,11 +135,11 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
     () => ({
       copyText: (text: string) => {
         const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-        copyTextToClipboard(`${originURL}/${text}`).then(() => {
+        copyTextToClipboard(`${originURL}${text}`).then(() => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Link Copied!",
-            message: "Issue link copied to clipboard.",
+            message: "Work item link copied to clipboard.",
           });
         });
       },
@@ -150,7 +150,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
-            message: "Error fetching sub-issues",
+            message: "Error fetching sub-work items",
           });
         }
       },
@@ -160,13 +160,13 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
-            message: "Sub-issues added successfully",
+            message: "Sub-work items added successfully",
           });
         } catch (error) {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
-            message: "Error adding sub-issue",
+            message: "Error adding sub-work item",
           });
         }
       },
@@ -194,7 +194,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
-            message: "Sub-issue updated successfully",
+            message: "Sub-work item updated successfully",
           });
           setSubIssueHelpers(parentIssueId, "issue_loader", issueId);
         } catch (error) {
@@ -210,7 +210,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
-            message: "Error updating sub-issue",
+            message: "Error updating sub-work item",
           });
         }
       },
@@ -221,7 +221,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
             title: "Success!",
-            message: "Sub-issue removed successfully",
+            message: "Sub-work item removed successfully",
           });
           captureIssueEvent({
             eventName: "Sub-issue removed",
@@ -246,7 +246,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
-            message: "Error removing sub-issue",
+            message: "Error removing sub-work item",
           });
         }
       },
@@ -269,7 +269,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           setToast({
             type: TOAST_TYPE.ERROR,
             title: "Error!",
-            message: "Error deleting issue",
+            message: "Error deleting work item",
           });
         }
       },
@@ -335,7 +335,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                         />
                       )}
                     </div>
-                    <div>Sub-issues</div>
+                    <div>Sub-work items</div>
                   </button>
                   <div className="flex items-center gap-2 text-custom-text-300">
                     <CircularProgressIndicator
@@ -358,7 +358,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
                     label={
                       <>
                         <Plus className="h-3 w-3" />
-                        Add sub-issue
+                        Add sub-work item
                       </>
                     }
                     buttonClassName="whitespace-nowrap"
@@ -410,12 +410,12 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
           ) : (
             !disabled && (
               <div className="flex items-center justify-between">
-                <div className="text-xs italic text-custom-text-300">No sub-issues yet</div>
+                <div className="text-xs italic text-custom-text-300">No sub-work items yet</div>
                 <CustomMenu
                   label={
                     <>
                       <Plus className="h-3 w-3" />
-                      Add sub-issue
+                      Add sub-work item
                     </>
                   }
                   buttonClassName="whitespace-nowrap"
@@ -465,7 +465,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
               }}
               onSubmit={async (_issue: TIssue) => {
                 if (_issue.parent_id) {
-                  await subIssueOperations.addSubIssue(workspaceSlug, projectId, parentIssueId, [_issue.id]);
+                  await subIssueOperations.addSubIssue(workspaceSlug, projectId, _issue.parent_id, [_issue.id]);
                 }
               }}
             />
diff --git a/web/core/components/issues/title-input.tsx b/web/core/components/issues/title-input.tsx
index bf52924ce..463b81a79 100644
--- a/web/core/components/issues/title-input.tsx
+++ b/web/core/components/issues/title-input.tsx
@@ -2,6 +2,8 @@
 
 import { FC, useState, useEffect, useCallback } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+import { TNameDescriptionLoader } from "@plane/types";
 // components
 import { TextArea } from "@plane/ui";
 // types
@@ -14,8 +16,8 @@ export type IssueTitleInputProps = {
   disabled?: boolean;
   value: string | undefined | null;
   workspaceSlug: string;
-  isSubmitting: "submitting" | "submitted" | "saved";
-  setIsSubmitting: (value: "submitting" | "submitted" | "saved") => void;
+  isSubmitting: TNameDescriptionLoader;
+  setIsSubmitting: (value: TNameDescriptionLoader) => void;
   issueOperations: TIssueOperations;
   projectId: string;
   issueId: string;
@@ -36,6 +38,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
     className,
     containerClassName,
   } = props;
+  const { t } = useTranslation();
   // states
   const [title, setTitle] = useState("");
   const [isLengthVisible, setIsLengthVisible] = useState(false);
@@ -118,7 +121,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
           value={title}
           onChange={handleTitleChange}
           maxLength={255}
-          placeholder="Issue title"
+          placeholder={t("issue.title.label")}
           onFocus={() => setIsLengthVisible(true)}
           onBlur={() => setIsLengthVisible(false)}
         />
@@ -134,7 +137,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
           /255
         </div>
       </div>
-      {title?.length === 0 && <span className="text-sm font-medium text-red-500">Title is required</span>}
+      {title?.length === 0 && <span className="text-sm font-medium text-red-500">{t("form.title.required")}</span>}
     </div>
   );
 });
diff --git a/web/core/components/issues/workspace-draft/delete-modal.tsx b/web/core/components/issues/workspace-draft/delete-modal.tsx
index 9eefe0d03..69f6f15bf 100644
--- a/web/core/components/issues/workspace-draft/delete-modal.tsx
+++ b/web/core/components/issues/workspace-draft/delete-modal.tsx
@@ -2,14 +2,15 @@
 
 import { useEffect, useState } from "react";
 // types
+import { PROJECT_ERROR_MESSAGES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TWorkspaceDraftIssue } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PROJECT_ERROR_MESSAGES } from "@/constants/project";
 // hooks
 import { useIssues, useUser, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
@@ -25,7 +26,7 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
   // store hooks
   const { issueMap } = useIssues();
   const { allowPermissions } = useUserPermissions();
-
+  const { t } = useTranslation();
   const { data: currentUser } = useUser();
 
   // derived values
@@ -52,9 +53,10 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
 
     if (!authorized) {
       setToast({
-        title: PROJECT_ERROR_MESSAGES.permissionError.title,
+        title: t(PROJECT_ERROR_MESSAGES.permissionError.i18n_title),
         type: TOAST_TYPE.ERROR,
-        message: PROJECT_ERROR_MESSAGES.permissionError.message,
+        message:
+          PROJECT_ERROR_MESSAGES.permissionError.i18n_message && t(PROJECT_ERROR_MESSAGES.permissionError.i18n_message),
       });
       onClose();
       return;
@@ -64,20 +66,20 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
         .then(() => {
           setToast({
             type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: `draft deleted.`,
+            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 issue";
+          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: currentError.title,
+            title: t(currentError.i18n_title),
             type: TOAST_TYPE.ERROR,
-            message: currentError.message,
+            message: currentError.i18n_message && t(currentError.i18n_message),
           });
         })
         .finally(() => onClose());
@@ -89,8 +91,13 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
       handleSubmit={handleIssueDelete}
       isSubmitting={isDeleting}
       isOpen={isOpen}
-      title="Delete draft"
-      content={<>Are you sure you want to delete this draft? This can&apos;t be undone.</>}
+      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/web/core/components/issues/workspace-draft/draft-issue-block.tsx b/web/core/components/issues/workspace-draft/draft-issue-block.tsx
index d1ae6e01c..ab2639858 100644
--- a/web/core/components/issues/workspace-draft/draft-issue-block.tsx
+++ b/web/core/components/issues/workspace-draft/draft-issue-block.tsx
@@ -4,11 +4,11 @@ import { omit } from "lodash";
 import { observer } from "mobx-react";
 import { Copy, Pencil, SquareStackIcon, Trash2 } from "lucide-react";
 // types
+import { EIssuesStoreType } from "@plane/constants";
 import { TWorkspaceDraftIssue } from "@plane/types";
 // ui
 import { Row, TContextMenuItem, Tooltip } from "@plane/ui";
 // constants
-import { EIssuesStoreType } from "@/constants/issue";
 // helper
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -57,7 +57,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "edit",
-      title: "Edit",
+      title: "edit",
       icon: Pencil,
       action: () => {
         setIssueToEdit(issue);
@@ -66,7 +66,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
     },
     {
       key: "make-a-copy",
-      title: "Make a copy",
+      title: "make_a_copy",
       icon: Copy,
       action: () => {
         setCreateUpdateIssueModal(true);
@@ -74,7 +74,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
     },
     {
       key: "move-to-issues",
-      title: "Move to project",
+      title: "move_to_project",
       icon: SquareStackIcon,
       action: () => {
         setMoveToIssue(true);
@@ -84,7 +84,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
     },
     {
       key: "delete",
-      title: "Delete",
+      title: "delete",
       icon: Trash2,
       action: () => {
         setDeleteIssueModal(true);
diff --git a/web/core/components/issues/workspace-draft/draft-issue-properties.tsx b/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
index 156e3c730..92f61f8e0 100644
--- a/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
+++ b/web/core/components/issues/workspace-draft/draft-issue-properties.tsx
@@ -160,16 +160,14 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
 
       {/* label */}
 
-      <div className="h-5" onClick={handleEventPropagation}>
-        <IssuePropertyLabels
-          projectId={issue?.project_id || null}
-          value={issue?.label_ids || null}
-          defaultOptions={defaultLabelOptions}
-          onChange={handleLabel}
-          renderByDefault={isMobile}
-          hideDropdownArrow
-        />
-      </div>
+      <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}>
diff --git a/web/core/components/issues/workspace-draft/empty-state.tsx b/web/core/components/issues/workspace-draft/empty-state.tsx
index 4a1292d61..1c0b51fbb 100644
--- a/web/core/components/issues/workspace-draft/empty-state.tsx
+++ b/web/core/components/issues/workspace-draft/empty-state.tsx
@@ -2,15 +2,27 @@
 
 import { FC, Fragment, useState } from "react";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { observer } from "mobx-react";
+import { EIssuesStoreType, EUserPermissionsLevel, EUserWorkspaceRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { CreateUpdateIssueModal } from "@/components/issues";
 // constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EIssuesStoreType } from "@/constants/issue";
+import { useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
-export const WorkspaceDraftEmptyState: FC = () => {
+export const WorkspaceDraftEmptyState: FC = observer(() => {
   // 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
+  );
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/cycles" });
 
   return (
     <Fragment>
@@ -21,13 +33,19 @@ export const WorkspaceDraftEmptyState: FC = () => {
         isDraft
       />
       <div className="relative h-full w-full overflow-y-auto">
-        <EmptyState
-          type={EmptyStateType.WORKSPACE_DRAFT_ISSUES}
-          primaryButtonOnClick={() => {
-            setIsDraftIssueModalOpen(true);
+        <DetailedEmptyState
+          title={t("workspace_draft_issues.empty_state.title")}
+          description={t("workspace_draft_issues.empty_state.description")}
+          assetPath={resolvedPath}
+          primaryButton={{
+            text: t("workspace_draft_issues.empty_state.primary_button.text"),
+            onClick: () => {
+              setIsDraftIssueModalOpen(true);
+            },
+            disabled: !canPerformEmptyStateActions
           }}
         />
       </div>
     </Fragment>
   );
-};
+});
diff --git a/web/core/components/issues/workspace-draft/quick-action.tsx b/web/core/components/issues/workspace-draft/quick-action.tsx
index 884e81a91..676c79ba6 100644
--- a/web/core/components/issues/workspace-draft/quick-action.tsx
+++ b/web/core/components/issues/workspace-draft/quick-action.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
 // helpers
@@ -14,6 +15,8 @@ export interface Props {
 export const WorkspaceDraftIssueQuickActions: React.FC<Props> = observer((props) => {
   const { parentRef, MENU_ITEMS } = props;
 
+  const { t } = useTranslation();
+
   return (
     <>
       <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
@@ -44,7 +47,7 @@ export const WorkspaceDraftIssueQuickActions: React.FC<Props> = observer((props)
           >
             {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
             <div>
-              <h5>{item.title}</h5>
+              <h5>{t(item.title || "")}</h5>
               {item.description && (
                 <p
                   className={cn("text-custom-text-300 whitespace-pre-line", {
diff --git a/web/core/components/issues/workspace-draft/root.tsx b/web/core/components/issues/workspace-draft/root.tsx
index 177b8af55..540839cd2 100644
--- a/web/core/components/issues/workspace-draft/root.tsx
+++ b/web/core/components/issues/workspace-draft/root.tsx
@@ -3,15 +3,19 @@
 import { FC, Fragment } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
+// plane imports
+import { EDraftIssuePaginationType } from "@plane/constants";
+import { EUserPermissionsLevel, EUserWorkspaceRoles } from "@plane/constants/src/user";
+import { useTranslation } from "@plane/i18n";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 // constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { EDraftIssuePaginationType } from "@/constants/workspace-drafts";
+
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useCommandPalette, useProject, useWorkspaceDraftIssues } from "@/hooks/store";
+import { useCommandPalette, useProject, useUserPermissions, useWorkspaceDraftIssues } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { useWorkspaceIssueProperties } from "@/hooks/use-workspace-issue-properties";
 // components
 import { DraftIssueBlock } from "./draft-issue-block";
@@ -24,18 +28,28 @@ type TWorkspaceDraftIssuesRoot = {
 
 export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer((props) => {
   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
+  );
+  const noProjectResolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/projects" });
 
   //swr hook for fetching issue properties
   useWorkspaceIssueProperties(workspaceSlug);
 
   // fetching issues
   const { isLoading } = useSWR(
-    workspaceSlug && issueIds.length <= 0 ? `WORKSPACE_DRAFT_ISSUES_${workspaceSlug}` : null,
-    workspaceSlug && issueIds.length <= 0 ? async () => await fetchIssues(workspaceSlug, "init-loader") : null
+    workspaceSlug ? `WORKSPACE_DRAFT_ISSUES_${workspaceSlug}` : null,
+    workspaceSlug ? async () => await fetchIssues(workspaceSlug, "init-loader") : null,
+    { revalidateOnFocus: false, revalidateIfStale: false }
   );
 
   // handle nest issues
@@ -50,12 +64,22 @@ export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer(
 
   if (workspaceProjectIds?.length === 0)
     return (
-      <EmptyState
-        type={EmptyStateType.WORKSPACE_NO_PROJECTS}
+      <DetailedEmptyState
         size="sm"
-        primaryButtonOnClick={() => {
-          toggleCreateProjectModal(true);
-        }}
+        title={t("workspace_projects.empty_state.no_projects.title")}
+        description={t("workspace_projects.empty_state.no_projects.description")}
+        assetPath={noProjectResolvedPath}
+        customPrimaryButton={
+          <ComicBoxButton
+            label={t("workspace_projects.empty_state.no_projects.primary_button.text")}
+            title={t("workspace_projects.empty_state.no_projects.primary_button.comic.title")}
+            description={t("workspace_projects.empty_state.no_projects.primary_button.comic.description")}
+            onClick={() => {
+              toggleCreateProjectModal(true);
+            }}
+            disabled={!hasMemberLevelPermission}
+          />
+        }
       />
     );
 
diff --git a/web/core/components/labels/create-label-modal.tsx b/web/core/components/labels/create-label-modal.tsx
index 950dd6f98..57af83c80 100644
--- a/web/core/components/labels/create-label-modal.tsx
+++ b/web/core/components/labels/create-label-modal.tsx
@@ -7,13 +7,12 @@ import { TwitterPicker } from "react-color";
 import { Controller, useForm } from "react-hook-form";
 import { ChevronDown } from "lucide-react";
 import { Dialog, Popover, Transition } from "@headlessui/react";
+// plane imports
+import { ETabIndices, LABEL_COLOR_OPTIONS, getRandomLabelColor } from "@plane/constants";
 // types
 import type { IIssueLabel, IState } from "@plane/types";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "@/constants/label";
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 // hooks
diff --git a/web/core/components/labels/create-update-label-inline.tsx b/web/core/components/labels/create-update-label-inline.tsx
index 8d06ff154..ddbe220b9 100644
--- a/web/core/components/labels/create-update-label-inline.tsx
+++ b/web/core/components/labels/create-update-label-inline.tsx
@@ -6,14 +6,13 @@ import { useParams } from "next/navigation";
 import { TwitterPicker } from "react-color";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 import { Popover, Transition } from "@headlessui/react";
+// plane imports
+import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueLabel } from "@plane/types";
-// ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "@/constants/label";
 // hooks
 import { useLabel } from "@/hooks/store";
-// types
 
 type Props = {
   labelForm: boolean;
@@ -48,6 +47,8 @@ export const CreateUpdateLabelInline = observer(
       defaultValues,
     });
 
+    const { t } = useTranslation();
+
     const handleClose = () => {
       setLabelForm(false);
       reset(defaultValues);
@@ -66,7 +67,7 @@ export const CreateUpdateLabelInline = observer(
           setToast({
             title: "Error!",
             type: TOAST_TYPE.ERROR,
-            message: error?.detail ?? error.error ?? "Something went wrong. Please try again later.",
+            message: error?.detail ?? error.error ?? t("common.something_went_wrong"),
           });
           reset(formData);
         });
@@ -85,7 +86,7 @@ export const CreateUpdateLabelInline = observer(
           setToast({
             title: "Oops!",
             type: TOAST_TYPE.ERROR,
-            message: error?.error ?? "Error while updating the label",
+            message: error?.error ?? t("project_settings.labels.toast.error"),
           });
           reset(formData);
         });
@@ -173,10 +174,10 @@ export const CreateUpdateLabelInline = observer(
               control={control}
               name="name"
               rules={{
-                required: "Label title is required",
+                required: t("project_settings.labels.label_title_is_required"),
                 maxLength: {
                   value: 255,
-                  message: "Label name should not exceed 255 characters",
+                  message: t("project_settings.labels.label_max_char"),
                 },
               }}
               render={({ field: { value, onChange, ref } }) => (
@@ -189,17 +190,17 @@ export const CreateUpdateLabelInline = observer(
                   onChange={onChange}
                   ref={ref}
                   hasError={Boolean(errors.name)}
-                  placeholder="Label title"
+                  placeholder={t("project_settings.labels.label_title")}
                   className="w-full"
                 />
               )}
             />
           </div>
           <Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
-            Cancel
+            {t("cancel")}
           </Button>
           <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
-            {isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
+            {isUpdating ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}
           </Button>
         </form>
         {errors.name?.message && <p className="p-0.5 pl-8 text-sm text-red-500">{errors.name?.message}</p>}
diff --git a/web/core/components/labels/delete-label-modal.tsx b/web/core/components/labels/delete-label-modal.tsx
index dfad0aeff..00aa409b0 100644
--- a/web/core/components/labels/delete-label-modal.tsx
+++ b/web/core/components/labels/delete-label-modal.tsx
@@ -61,7 +61,7 @@ export const DeleteLabelModal: React.FC<Props> = observer((props) => {
       content={
         <>
           Are you sure you want to delete <span className="font-medium text-custom-text-100">{data?.name}</span>? This
-          will remove the label from all the issue and from any views where the label is being filtered upon.
+          will remove the label from all the work item and from any views where the label is being filtered upon.
         </>
       }
     />
diff --git a/web/core/components/labels/label-drag-n-drop-HOC.tsx b/web/core/components/labels/label-drag-n-drop-HOC.tsx
index 57e1b3a14..8cc87d4c6 100644
--- a/web/core/components/labels/label-drag-n-drop-HOC.tsx
+++ b/web/core/components/labels/label-drag-n-drop-HOC.tsx
@@ -9,10 +9,12 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
 import { observer } from "mobx-react";
 import { createRoot } from "react-dom/client";
 // types
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IIssueLabel, InstructionType } from "@plane/types";
 // ui
 import { DropIndicator } from "@plane/ui";
 // components
+import { useUserPermissions } from "@/hooks/store";
 import { LabelName } from "./label-block/label-name";
 import { TargetData, getCanDrop, getInstructionFromPayload } from "./label-utils";
 
@@ -58,11 +60,14 @@ export const LabelDndHOC = observer((props: Props) => {
   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) return;
+    if (!element || !isEditable) return;
 
     return combine(
       draggable({
diff --git a/web/core/components/labels/project-setting-label-list.tsx b/web/core/components/labels/project-setting-label-list.tsx
index 2fc9c8382..b36e1c6c6 100644
--- a/web/core/components/labels/project-setting-label-list.tsx
+++ b/web/core/components/labels/project-setting-label-list.tsx
@@ -3,39 +3,40 @@
 import React, { 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 { IIssueLabel } from "@plane/types";
-// hooks
 import { Button, Loader } from "@plane/ui";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import {
   CreateUpdateLabelInline,
   DeleteLabelModal,
   ProjectSettingLabelGroup,
   ProjectSettingLabelItem,
 } from "@/components/labels";
-import { EmptyStateType } from "@/constants/empty-state";
+// hooks
 import { useLabel, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-// components
-// ui
-// types
-// constants
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// plane web imports
 
 export const ProjectSettingsLabelList: React.FC = observer(() => {
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // refs
+  const scrollToRef = useRef<HTMLFormElement>(null);
   // states
   const [showLabelForm, setLabelForm] = useState(false);
   const [isUpdating, setIsUpdating] = useState(false);
   const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabel | null>(null);
-  // refs
-  const scrollToRef = useRef<HTMLFormElement>(null);
-  // router
-  const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel();
   const { allowPermissions } = useUserPermissions();
-
   // derived values
   const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/project-settings/labels" });
 
   const newLabel = () => {
     setIsUpdating(false);
@@ -72,7 +73,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
         <h3 className="text-xl font-medium">Labels</h3>
         {isEditable && (
           <Button variant="primary" onClick={newLabel} size="sm">
-            Add label
+            {t("common.add_label")}
           </Button>
         )}
       </div>
@@ -94,7 +95,11 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
         {projectLabels ? (
           projectLabels.length === 0 && !showLabelForm ? (
             <div className="flex items-center justify-center h-full w-full">
-              <EmptyState type={EmptyStateType.PROJECT_SETTINGS_LABELS} />
+              <DetailedEmptyState
+                title={t("project_settings.empty_state.labels.title")}
+                description={t("project_settings.empty_state.labels.description")}
+                assetPath={resolvedPath}
+              />
             </div>
           ) : (
             projectLabelsTree && (
diff --git a/web/core/components/modules/analytics-sidebar/issue-progress.tsx b/web/core/components/modules/analytics-sidebar/issue-progress.tsx
index e51e46ed4..a29334ff8 100644
--- a/web/core/components/modules/analytics-sidebar/issue-progress.tsx
+++ b/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -6,13 +6,14 @@ import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { AlertCircle, ChevronUp, ChevronDown } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IIssueFilterOptions, TModulePlotType } from "@plane/types";
 import { CustomSelect, Spinner } from "@plane/ui";
 // components
 import ProgressChart from "@/components/core/sidebar/progress-chart";
 import { ModuleProgressStats } from "@/components/modules";
 // constants
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { getDate } from "@/helpers/date-time.helper";
 // hooks
@@ -27,8 +28,8 @@ type TModuleAnalyticsProgress = {
 };
 
 const moduleBurnDownChartOptions = [
-  { value: "burndown", label: "Issues" },
-  { value: "points", label: "Points" },
+  { value: "burndown", i18n_label: "issues" },
+  { value: "points", i18n_label: "points" },
 ];
 
 export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((props) => {
@@ -47,6 +48,8 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
   // state
   const [loader, setLoader] = useState(false);
 
+  const { t } = useTranslation();
+
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const plotType: TModulePlotType = getPlotTypeByModuleId(moduleId);
@@ -154,7 +157,7 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
             {isModuleDateValid ? (
               <div className="relative w-full flex justify-between items-center gap-2">
                 <Disclosure.Button className="relative flex items-center gap-2 w-full">
-                  <div className="font-medium text-custom-text-200 text-sm">Progress</div>
+                  <div className="font-medium text-custom-text-200 text-sm">{t("progress")}</div>
                   {progressHeaderPercentage > 0 && (
                     <div className="flex h-5 w-9 items-center justify-center rounded bg-amber-500/20 text-xs font-medium text-amber-500">{`${progressHeaderPercentage}%`}</div>
                   )}
@@ -165,14 +168,16 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
                       <CustomSelect
                         value={plotType}
                         label={
-                          <span>{moduleBurnDownChartOptions.find((v) => v.value === plotType)?.label ?? "None"}</span>
+                          <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}>
-                            {item.label}
+                            {t(item.i18n_label)}
                           </CustomSelect.Option>
                         ))}
                       </CustomSelect>
@@ -195,8 +200,8 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
                   <AlertCircle height={14} width={14} className="text-custom-text-200" />
                   <span className="text-xs italic text-custom-text-200">
                     {moduleDetails?.start_date && moduleDetails?.target_date
-                      ? "This module isn't active yet."
-                      : "Invalid date. Please enter valid date."}
+                      ? t("project_module.empty_state.sidebar.in_active")
+                      : t("project_module.empty_state.sidebar.invalid_date")}
                   </span>
                 </div>
               </div>
@@ -209,11 +214,11 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
                   <div className="relative flex items-center gap-2">
                     <div className="flex items-center justify-center gap-1 text-xs">
                       <span className="h-2.5 w-2.5 rounded-full bg-[#A9BBD0]" />
-                      <span>Ideal</span>
+                      <span>{t("ideal")}</span>
                     </div>
                     <div className="flex items-center justify-center gap-1 text-xs">
                       <span className="h-2.5 w-2.5 rounded-full bg-[#4C8FFF]" />
-                      <span>Current</span>
+                      <span>{t("current")}</span>
                     </div>
                   </div>
                   {moduleStartDate && moduleEndDate && completionChartDistributionData && (
@@ -232,7 +237,7 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
                           startDate={moduleStartDate}
                           endDate={moduleEndDate}
                           totalIssues={totalIssues}
-                          plotTitle={"issues"}
+                          plotTitle={"work items"}
                         />
                       )}
                     </Fragment>
diff --git a/web/core/components/modules/analytics-sidebar/progress-stats.tsx b/web/core/components/modules/analytics-sidebar/progress-stats.tsx
index 3fc7849a4..5c92786d7 100644
--- a/web/core/components/modules/analytics-sidebar/progress-stats.tsx
+++ b/web/core/components/modules/analytics-sidebar/progress-stats.tsx
@@ -4,6 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { Tab } from "@headlessui/react";
+import { useTranslation } from "@plane/i18n";
 import {
   IIssueFilterOptions,
   IIssueFilters,
@@ -73,6 +74,7 @@ type TStateStatComponent = {
 
 export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) => {
   const { distribution, isEditable, filters, handleFiltersUpdate } = props;
+  const { t } = useTranslation();
   return (
     <div>
       {distribution && distribution.length > 0 ? (
@@ -104,7 +106,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
                     <div className="h-4 w-4 rounded-full border-2 border-custom-border-200 bg-custom-background-80">
                       <img src="/user.png" height="100%" width="100%" className="rounded-full" alt="User" />
                     </div>
-                    <span>No assignee</span>
+                    <span>{t("no_assignee")}</span>
                   </div>
                 }
                 completed={assignee?.completed ?? 0}
@@ -117,7 +119,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
           <div className="flex h-20 w-20 items-center justify-center rounded-full bg-custom-background-80">
             <Image src={emptyMembers} className="h-12 w-12" alt="empty members" />
           </div>
-          <h6 className="text-base text-custom-text-300">No assignees yet</h6>
+          <h6 className="text-base text-custom-text-300">{t("no_assignees_yet")}</h6>
         </div>
       )}
     </div>
@@ -135,14 +137,14 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
               <SingleProgressStats
                 key={label.id}
                 title={
-                  <div className="flex items-center gap-2">
-                    <span
-                      className="block h-3 w-3 rounded-full"
+                  <div className="flex items-center gap-2 truncate">
+                    <div
+                      className="h-3 w-3 rounded-full flex-shrink-0"
                       style={{
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-xs">{label.title ?? "No labels"}</span>
+                    <p className="text-xs text-ellipsis truncate">{label.title ?? "No labels"}</p>
                   </div>
                 }
                 completed={label.completed}
diff --git a/web/core/components/modules/analytics-sidebar/root.tsx b/web/core/components/modules/analytics-sidebar/root.tsx
index cf3ae40c8..8f31bbb80 100644
--- a/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/web/core/components/modules/analytics-sidebar/root.tsx
@@ -18,6 +18,16 @@ import {
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane types
+import {
+  MODULE_STATUS,
+  MODULE_LINK_CREATED,
+  MODULE_LINK_DELETED,
+  MODULE_LINK_UPDATED,
+  MODULE_UPDATED,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ILinkDetails, IModule, ModuleLink } from "@plane/types";
 // plane ui
 import {
@@ -40,13 +50,7 @@ import {
   ModuleAnalyticsProgress,
   ModuleLinksList,
 } from "@/components/modules";
-import {
-  MODULE_LINK_CREATED,
-  MODULE_LINK_DELETED,
-  MODULE_LINK_UPDATED,
-  MODULE_UPDATED,
-} from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
+
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
@@ -55,7 +59,6 @@ import { useModule, useEventTracker, useProjectEstimates, useUserPermissions } f
 import { useAppRouter } from "@/hooks/use-app-router";
 // plane web constants
 import { EEstimateSystem } from "@/plane-web/constants/estimates";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const defaultValues: Partial<IModule> = {
   lead_id: "",
@@ -84,7 +87,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const { workspaceSlug, projectId } = useParams();
 
   // store hooks
-
+  const { t } = useTranslation();
   const { allowPermissions } = useUserPermissions();
 
   const { getModuleById, updateModuleDetails, createModuleLink, updateModuleLink, deleteModuleLink, restoreModule } =
@@ -257,11 +260,13 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
 
   const issueCount =
-    moduleDetails.total_issues === 0 ? "0 Issue" : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
+    moduleDetails.total_issues === 0
+      ? "0 work items"
+      : `${moduleDetails.completed_issues}/${moduleDetails.total_issues}`;
 
   const issueEstimatePointCount =
     moduleDetails.total_estimate_points === 0
-      ? "0 Issue"
+      ? "0 work items"
       : `${moduleDetails.completed_estimate_points}/${moduleDetails.total_estimate_points}`;
 
   const isEditingAllowed = allowPermissions(
@@ -318,7 +323,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                     {isInArchivableGroup ? (
                       <div className="flex items-center gap-2">
                         <ArchiveIcon className="h-3 w-3" />
-                        Archive module
+                        {t("archive_module")}
                       </div>
                     ) : (
                       <div className="flex items-start gap-2">
@@ -326,7 +331,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                         <div className="-mt-1">
                           <p>Archive module</p>
                           <p className="text-xs text-custom-text-400">
-                            Only completed or cancelled <br /> module can be archived.
+                            {t("project_module.quick_actions.archive_module_description")}
                           </p>
                         </div>
                       </div>
@@ -337,7 +342,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                   <CustomMenu.MenuItem onClick={handleRestoreModule}>
                     <span className="flex items-center justify-start gap-2">
                       <ArchiveRestoreIcon className="h-3 w-3" />
-                      <span>Restore module</span>
+                      <span>{t("restore_module")}</span>
                     </span>
                   </CustomMenu.MenuItem>
                 )}
@@ -349,7 +354,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                 >
                   <span className="flex items-center justify-start gap-2">
                     <Trash2 className="h-3 w-3" />
-                    <span>Delete module</span>
+                    <span>{t("project_module.delete_module")}</span>
                   </span>
                 </CustomMenu.MenuItem>
               </CustomMenu>
@@ -374,7 +379,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                         backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
                       }}
                     >
-                      {moduleStatus?.label ?? "Backlog"}
+                      {(moduleStatus && t(moduleStatus?.i18n_label)) ?? t("project_modules.status.backlog")}
                     </span>
                   }
                   value={value}
@@ -387,7 +392,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                     <CustomSelect.Option key={status.value} value={status.value}>
                       <div className="flex items-center gap-2">
                         <ModuleStatusIcon status={status.value} />
-                        {status.label}
+                        {t(status.i18n_label)}
                       </div>
                     </CustomSelect.Option>
                   ))}
@@ -409,7 +414,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
         <div className="flex items-center justify-start gap-1">
           <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
             <CalendarClock className="h-4 w-4" />
-            <span className="text-base">Date range</span>
+            <span className="text-base">{t("date_range")}</span>
           </div>
           <div className="h-7 w-3/5">
             <Controller
@@ -436,8 +441,8 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                           handleDateChange(val?.from, val?.to);
                         }}
                         placeholder={{
-                          from: "Start date",
-                          to: "Target date",
+                          from: t("start_date"),
+                          to: t("target_date"),
                         }}
                         disabled={!isEditingAllowed || isArchived}
                       />
@@ -453,7 +458,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
               <SquareUser className="h-4 w-4" />
-              <span className="text-base">Lead</span>
+              <span className="text-base">{t("lead")}</span>
             </div>
             <Controller
               control={control}
@@ -468,7 +473,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                     projectId={projectId?.toString() ?? ""}
                     multiple={false}
                     buttonVariant="background-with-text"
-                    placeholder="Lead"
+                    placeholder={t("lead")}
                     disabled={!isEditingAllowed || isArchived}
                     icon={SquareUser}
                   />
@@ -479,7 +484,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
               <Users className="h-4 w-4" />
-              <span className="text-base">Members</span>
+              <span className="text-base">{t("members")}</span>
             </div>
             <Controller
               control={control}
@@ -504,7 +509,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
           <div className="flex items-center justify-start gap-1">
             <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
               <LayersIcon className="h-4 w-4" />
-              <span className="text-base">Issues</span>
+              <span className="text-base">{t("issues")}</span>
             </div>
             <div className="flex h-7 w-3/5 items-center">
               <span className="px-1.5 text-sm text-custom-text-300">{issueCount}</span>
@@ -518,7 +523,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
             <div className="flex items-center justify-start gap-1">
               <div className="flex w-2/5 items-center justify-start gap-2 text-custom-text-300">
                 <LayersIcon className="h-4 w-4" />
-                <span className="text-base">Points</span>
+                <span className="text-base">{t("points")}</span>
               </div>
               <div className="flex h-7 w-3/5 items-center">
                 <span className="px-1.5 text-sm text-custom-text-300">{issueEstimatePointCount}</span>
@@ -543,7 +548,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                 <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-sm">
-                      <span className="font-medium text-custom-text-200">Links</span>
+                      <span className="font-medium text-custom-text-200">{t("common.links")}</span>
                     </div>
 
                     <div className="flex items-center gap-2.5">
@@ -562,7 +567,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                                   onClick={() => setModuleLinkModal(true)}
                                 >
                                   <Plus className="h-3 w-3" />
-                                  Add link
+                                  {t("add_link")}
                                 </button>
                               </div>
                             )}
@@ -580,7 +585,9 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                           <div className="flex items-center justify-between gap-2">
                             <div className="flex items-center gap-2">
                               <Info className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
-                              <span className="p-0.5 text-xs text-custom-text-300">No links added yet</span>
+                              <span className="p-0.5 text-xs text-custom-text-300">
+                                {t("common.no_links_added_yet")}
+                              </span>
                             </div>
                             {isEditingAllowed && !isArchived && (
                               <button
@@ -588,7 +595,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                                 onClick={() => setModuleLinkModal(true)}
                               >
                                 <Plus className="h-3 w-3" />
-                                Add link
+                                {t("add_link")}
                               </button>
                             )}
                           </div>
diff --git a/web/core/components/modules/applied-filters/date.tsx b/web/core/components/modules/applied-filters/date.tsx
index 88d607de8..53c24a3a9 100644
--- a/web/core/components/modules/applied-filters/date.tsx
+++ b/web/core/components/modules/applied-filters/date.tsx
@@ -1,8 +1,8 @@
 import { observer } from "mobx-react";
 // icons
 import { X } from "lucide-react";
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
 // helpers
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
 // constants
diff --git a/web/core/components/modules/applied-filters/root.tsx b/web/core/components/modules/applied-filters/root.tsx
index 56bfbf2e2..f8b4fac08 100644
--- a/web/core/components/modules/applied-filters/root.tsx
+++ b/web/core/components/modules/applied-filters/root.tsx
@@ -1,4 +1,5 @@
 import { X } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TModuleDisplayFilters, TModuleFilters } from "@plane/types";
 // components
 import { Header, EHeaderVariant, Tag } from "@plane/ui";
@@ -30,6 +31,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
     alwaysAllowEditing,
     isArchived = false,
   } = props;
+  const { t } = useTranslation();
 
   if (!appliedFilters && !isFavoriteFilterApplied) return null;
   if (Object.keys(appliedFilters).length === 0 && !isFavoriteFilterApplied) return null;
@@ -113,7 +115,7 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
         {isEditingAllowed && (
           <button type="button" onClick={handleClearAllFilters}>
             <Tag>
-              Clear all
+              {t("common.clear_all")}
               <X size={12} strokeWidth={2} />
             </Tag>
           </button>
diff --git a/web/core/components/modules/applied-filters/status.tsx b/web/core/components/modules/applied-filters/status.tsx
index 442dcfadc..15a2e8b6e 100644
--- a/web/core/components/modules/applied-filters/status.tsx
+++ b/web/core/components/modules/applied-filters/status.tsx
@@ -3,9 +3,10 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // ui
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ModuleStatusIcon } from "@plane/ui";
 // constants
-import { MODULE_STATUS } from "@/constants/module";
 
 type Props = {
   handleRemove: (val: string) => void;
@@ -15,6 +16,7 @@ type Props = {
 
 export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
 
   return (
     <>
@@ -25,7 +27,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
         return (
           <div key={status} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
             <ModuleStatusIcon status={statusDetails.value} height="12px" width="12px" />
-            {statusDetails.label}
+            {t(statusDetails.i18n_label)}
             {editable && (
               <button
                 type="button"
diff --git a/web/core/components/modules/archived-modules/root.tsx b/web/core/components/modules/archived-modules/root.tsx
index b74814add..30ae74a5c 100644
--- a/web/core/components/modules/archived-modules/root.tsx
+++ b/web/core/components/modules/archived-modules/root.tsx
@@ -2,28 +2,30 @@ import React, { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
-// types
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { TModuleFilters } from "@plane/types";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { ArchivedModulesView, ModuleAppliedFiltersList } from "@/components/modules";
 import { CycleModuleListLayout } from "@/components/ui";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useModule, useModuleFilter } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
   // router
   const { workspaceSlug, projectId } = useParams();
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { fetchArchivedModules, projectArchivedModuleIds, loader } = useModule();
-  // module filters hook
   const { clearAllFilters, currentProjectArchivedFilters, updateFilters } = useModuleFilter();
   // derived values
   const totalArchivedModules = projectArchivedModuleIds?.length ?? 0;
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/archived/empty-modules" });
 
   useSWR(
     workspaceSlug && projectId ? `ARCHIVED_MODULES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
@@ -69,7 +71,11 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
       )}
       {totalArchivedModules === 0 ? (
         <div className="h-full place-items-center">
-          <EmptyState type={EmptyStateType.PROJECT_ARCHIVED_NO_MODULES} />
+          <DetailedEmptyState
+            title={t("project_module.empty_state.archived.title")}
+            description={t("project_module.empty_state.archived.description")}
+            assetPath={resolvedPath}
+          />
         </div>
       ) : (
         <div className="relative h-full w-full overflow-auto">
diff --git a/web/core/components/modules/delete-module-modal.tsx b/web/core/components/modules/delete-module-modal.tsx
index c165c2e4c..b35356f67 100644
--- a/web/core/components/modules/delete-module-modal.tsx
+++ b/web/core/components/modules/delete-module-modal.tsx
@@ -4,12 +4,12 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
+import { PROJECT_ERROR_MESSAGES, MODULE_DELETED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import type { IModule } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { MODULE_DELETED } from "@/constants/event-tracker";
-import { PROJECT_ERROR_MESSAGES } from "@/constants/project";
 // hooks
 import { useEventTracker, useModule } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -30,6 +30,7 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
   // store hooks
   const { captureModuleEvent } = useEventTracker();
   const { deleteModule } = useModule();
+  const { t } = useTranslation();
 
   const handleClose = () => {
     onClose();
@@ -61,9 +62,9 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
           ? PROJECT_ERROR_MESSAGES.permissionError
           : PROJECT_ERROR_MESSAGES.moduleDeleteError;
         setToast({
-          title: currentError.title,
+          title: t(currentError.i18n_title),
           type: TOAST_TYPE.ERROR,
-          message: currentError.message,
+          message: currentError.i18n_message && t(currentError.i18n_message),
         });
         captureModuleEvent({
           eventName: MODULE_DELETED,
diff --git a/web/core/components/modules/dropdowns/filters/start-date.tsx b/web/core/components/modules/dropdowns/filters/start-date.tsx
index 9bfd8f2d8..e43a7e50c 100644
--- a/web/core/components/modules/dropdowns/filters/start-date.tsx
+++ b/web/core/components/modules/dropdowns/filters/start-date.tsx
@@ -1,11 +1,11 @@
 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";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
+
 // helpers
 import { isInDateFormat } from "@/helpers/date-time.helper";
 
diff --git a/web/core/components/modules/dropdowns/filters/status.tsx b/web/core/components/modules/dropdowns/filters/status.tsx
index f14ededf0..3f3994fda 100644
--- a/web/core/components/modules/dropdowns/filters/status.tsx
+++ b/web/core/components/modules/dropdowns/filters/status.tsx
@@ -2,14 +2,12 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TModuleStatus } from "@plane/types";
 // components
 import { ModuleStatusIcon } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// ui
-// types
-import { MODULE_STATUS } from "@/constants/module";
-// constants
 
 type Props = {
   appliedFilters: TModuleStatus[] | null;
@@ -21,6 +19,7 @@ export const FilterStatus: React.FC<Props> = observer((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;
@@ -41,7 +40,7 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
                 isChecked={appliedFilters?.includes(status.value) ? true : false}
                 onClick={() => handleUpdate(status.value)}
                 icon={<ModuleStatusIcon status={status.value} />}
-                title={status.label}
+                title={t(status.i18n_label)}
               />
             ))
           ) : (
diff --git a/web/core/components/modules/dropdowns/filters/target-date.tsx b/web/core/components/modules/dropdowns/filters/target-date.tsx
index ba82002dd..c7ed9c840 100644
--- a/web/core/components/modules/dropdowns/filters/target-date.tsx
+++ b/web/core/components/modules/dropdowns/filters/target-date.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-
+// plane constants
+import { DATE_AFTER_FILTER_OPTIONS } from "@plane/constants";
 // components
 import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
 // helpers
 import { isInDateFormat } from "@/helpers/date-time.helper";
 
diff --git a/web/core/components/modules/dropdowns/order-by.tsx b/web/core/components/modules/dropdowns/order-by.tsx
index a3b0af881..6a373527c 100644
--- a/web/core/components/modules/dropdowns/order-by.tsx
+++ b/web/core/components/modules/dropdowns/order-by.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
+import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TModuleOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu, getButtonStyling } from "@plane/ui";
 // helpers
-import { MODULE_ORDER_BY_OPTIONS } from "@/constants/module";
 import { cn } from "@/helpers/common.helper";
 // types
 // constants
@@ -17,6 +18,8 @@ type Props = {
 
 export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
   const { onChange, value } = props;
+  // hooks
+  const { t } = useTranslation();
 
   const orderByDetails = MODULE_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
 
@@ -28,7 +31,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
       customButton={
         <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
           {!isDescending ? <ArrowUpWideNarrow className="size-3 " /> : <ArrowDownWideNarrow className="size-3 " />}
-          {orderByDetails?.label}
+          {orderByDetails && t(orderByDetails?.i18n_label)}
           <ChevronDown className="size-3" strokeWidth={2} />
         </div>
       }
@@ -45,7 +48,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
             else onChange(option.key);
           }}
         >
-          {option.label}
+          {t(option.i18n_label)}
           {value?.includes(option.key) && <Check className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
diff --git a/web/core/components/modules/form.tsx b/web/core/components/modules/form.tsx
index 0acf58703..4123c0bb1 100644
--- a/web/core/components/modules/form.tsx
+++ b/web/core/components/modules/form.tsx
@@ -2,14 +2,15 @@
 
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IModule } from "@plane/types";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 // components
 import { DateRangeDropdown, ProjectDropdown, MemberDropdown } from "@/components/dropdowns";
 import { ModuleStatusSelect } from "@/components/modules";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { shouldRenderProject } from "@/helpers/project.helper";
@@ -55,6 +56,8 @@ export const ModuleForm: React.FC<Props> = (props) => {
 
   const { getIndex } = getTabIndex(ETabIndices.PROJECT_MODULE, isMobile);
 
+  const { t } = useTranslation();
+
   const handleCreateUpdateModule = async (formData: Partial<IModule>) => {
     await handleFormSubmit(formData, dirtyFields);
 
@@ -83,9 +86,12 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   <ProjectDropdown
                     value={value}
                     onChange={(val) => {
-                      onChange(val);
-                      setActiveProject(val);
+                      if (!Array.isArray(val)) {
+                        onChange(val);
+                        setActiveProject(val);
+                      }
                     }}
+                    multiple={false}
                     buttonVariant="border-with-text"
                     renderCondition={(project) => shouldRenderProject(project)}
                     tabIndex={getIndex("cover_image")}
@@ -94,7 +100,9 @@ export const ModuleForm: React.FC<Props> = (props) => {
               )}
             />
           )}
-          <h3 className="text-xl font-medium text-custom-text-200">{status ? "Update" : "Create"} module</h3>
+          <h3 className="text-xl font-medium text-custom-text-200">
+            {status ? t("common.update") : t("common.create")} {t("common.module").toLowerCase()}
+          </h3>
         </div>
         <div className="space-y-3">
           <div className="space-y-1">
@@ -102,10 +110,10 @@ export const ModuleForm: React.FC<Props> = (props) => {
               control={control}
               name="name"
               rules={{
-                required: "Title is required",
+                required: t("title_is_required"),
                 maxLength: {
                   value: 255,
-                  message: "Title should be less than 255 characters",
+                  message: t("title_should_be_less_than_255_characters"),
                 },
               }}
               render={({ field: { value, onChange } }) => (
@@ -116,7 +124,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   hasError={Boolean(errors?.name)}
-                  placeholder="Title"
+                  placeholder={t("title")}
                   className="w-full text-base"
                   tabIndex={getIndex("name")}
                   autoFocus
@@ -135,7 +143,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   name="description"
                   value={value}
                   onChange={onChange}
-                  placeholder="Description"
+                  placeholder={t("description")}
                   className="w-full text-base resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   tabIndex={getIndex("description")}
@@ -164,8 +172,8 @@ export const ModuleForm: React.FC<Props> = (props) => {
                         onChangeEndDate(val?.to ? renderFormattedPayloadDate(val.to) : null);
                       }}
                       placeholder={{
-                        from: "Start date",
-                        to: "End date",
+                        from: t("start_date"),
+                        to: t("end_date"),
                       }}
                       hideIcon={{
                         to: true,
@@ -190,7 +198,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                     projectId={projectId}
                     multiple={false}
                     buttonVariant="border-with-text"
-                    placeholder="Lead"
+                    placeholder={t("lead")}
                     tabIndex={getIndex("lead")}
                   />
                 </div>
@@ -208,7 +216,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                     multiple
                     buttonVariant={value && value.length > 0 ? "transparent-without-text" : "border-with-text"}
                     buttonClassName={value && value.length > 0 ? "hover:bg-transparent px-0" : ""}
-                    placeholder="Members"
+                    placeholder={t("members")}
                     tabIndex={getIndex("member_ids")}
                   />
                 </div>
@@ -219,10 +227,16 @@ export const ModuleForm: React.FC<Props> = (props) => {
       </div>
       <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          Cancel
+          {t("cancel")}
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
-          {status ? (isSubmitting ? "Updating" : "Update Module") : isSubmitting ? "Creating" : "Create Module"}
+          {status
+            ? isSubmitting
+              ? t("updating")
+              : t("project_module.update_module")
+            : isSubmitting
+              ? t("creating")
+              : t("project_module.create_module")}
         </Button>
       </div>
     </form>
diff --git a/web/core/components/modules/gantt-chart/blocks.tsx b/web/core/components/modules/gantt-chart/blocks.tsx
index 8c1567011..ace0b7f80 100644
--- a/web/core/components/modules/gantt-chart/blocks.tsx
+++ b/web/core/components/modules/gantt-chart/blocks.tsx
@@ -4,12 +4,12 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 // ui
+import { MODULE_STATUS } from "@plane/constants";
 import { Tooltip, ModuleStatusIcon } from "@plane/ui";
 // components
 import { SIDEBAR_WIDTH } from "@/components/gantt-chart/constants";
 import { getBlockViewDetails } from "@/components/issues/issue-layouts/utils";
 // constants
-import { MODULE_STATUS } from "@/constants/module";
 // hooks
 import { useModule } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
diff --git a/web/core/components/modules/index.ts b/web/core/components/modules/index.ts
index 405509891..a9a4e65e4 100644
--- a/web/core/components/modules/index.ts
+++ b/web/core/components/modules/index.ts
@@ -14,7 +14,7 @@ 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/web/core/components/modules/links/list-item.tsx b/web/core/components/modules/links/list-item.tsx
index bbcce0b8b..9f36e0f96 100644
--- a/web/core/components/modules/links/list-item.tsx
+++ b/web/core/components/modules/links/list-item.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
+import { Copy, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // plane types
 import { ILinkDetails } from "@plane/types";
 // plane ui
@@ -45,12 +45,9 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
             <LinkIcon className="h-3 w-3 flex-shrink-0" />
           </span>
           <Tooltip tooltipContent={link.title && link.title !== "" ? link.title : link.url} isMobile={isMobile}>
-            <span
-              className="cursor-pointer truncate text-xs"
-              onClick={() => copyToClipboard(link.title && link.title !== "" ? link.title : link.url)}
-            >
+            <a href={link.url} target="_blank" rel="noopener noreferrer" className="cursor-pointer truncate text-xs">
               {link.title && link.title !== "" ? link.title : link.url}
-            </span>
+            </a>
           </Tooltip>
         </div>
 
@@ -68,14 +65,12 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
               <Pencil className="size-3 stroke-[1.5] text-custom-text-200" />
             </button>
           )}
-          <a
-            href={link.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="grid place-items-center p-1 hover:bg-custom-background-80"
+          <span
+            onClick={() => copyToClipboard(link.url)}
+            className="grid place-items-center p-1 hover:bg-custom-background-80 cursor-pointer"
           >
-            <ExternalLink className="size-3 stroke-[1.5] text-custom-text-200" />
-          </a>
+            <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
+          </span>
           {isEditingAllowed && (
             <button
               type="button"
diff --git a/web/core/components/modules/modal.tsx b/web/core/components/modules/modal.tsx
index aed1b9019..8cfc8820c 100644
--- a/web/core/components/modules/modal.tsx
+++ b/web/core/components/modules/modal.tsx
@@ -4,13 +4,13 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
 // types
+import { MODULE_CREATED, MODULE_UPDATED } from "@plane/constants";
 import type { IModule } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ModuleForm } from "@/components/modules";
 // constants
-import { MODULE_CREATED, MODULE_UPDATED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useModule, useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
diff --git a/web/core/components/modules/module-card-item.tsx b/web/core/components/modules/module-card-item.tsx
index ac556d4a4..9585755ee 100644
--- a/web/core/components/modules/module-card-item.tsx
+++ b/web/core/components/modules/module-card-item.tsx
@@ -5,7 +5,15 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
 import { Info, SquareUser } from "lucide-react";
-// ui
+// plane package imports
+import {
+  MODULE_STATUS,
+  PROGRESS_STATE_GROUPS_DETAILS,
+  MODULE_FAVORITED,
+  MODULE_UNFAVORITED,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
 import { IModule } from "@plane/types";
 import {
   Card,
@@ -23,9 +31,6 @@ import { ButtonAvatars } from "@/components/dropdowns/member/avatar";
 import { ModuleQuickActions } from "@/components/modules";
 import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
 // constants
-import { PROGRESS_STATE_GROUPS_DETAILS } from "@/constants/common";
-import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
 // helpers
 import { getDate, renderFormattedPayloadDate } from "@/helpers/date-time.helper";
 import { generateQueryParams } from "@/helpers/router.helper";
@@ -34,7 +39,6 @@ import { useEventTracker, useMember, useModule, useUserPermissions } from "@/hoo
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   moduleId: string;
@@ -177,11 +181,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
 
   const issueCount = module
     ? !moduleTotalIssues || moduleTotalIssues === 0
-      ? `0 Issue`
+      ? `0 work items`
       : moduleTotalIssues === moduleCompletedIssues
-        ? `${moduleTotalIssues} Issue${moduleTotalIssues > 1 ? `s` : ``}`
-        : `${moduleCompletedIssues}/${moduleTotalIssues} Issues`
-    : `0 Issue`;
+        ? `${moduleTotalIssues} Work item${moduleTotalIssues > 1 ? `s` : ``}`
+        : `${moduleCompletedIssues}/${moduleTotalIssues} Work items`
+    : `0 work items`;
 
   const moduleLeadDetails = moduleDetails.lead_id ? getUserDetails(moduleDetails.lead_id) : undefined;
 
@@ -219,7 +223,7 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-1.5 text-custom-text-200">
                 <LayersIcon className="h-4 w-4 text-custom-text-300" />
-                <span className="text-xs text-custom-text-300">{issueCount ?? "0 Issue"}</span>
+                <span className="text-xs text-custom-text-300">{issueCount ?? "0 Work item"}</span>
               </div>
               {moduleLeadDetails ? (
                 <span className="cursor-default">
diff --git a/web/core/components/modules/module-layout-icon.tsx b/web/core/components/modules/module-layout-icon.tsx
new file mode 100644
index 000000000..a53fa92b9
--- /dev/null
+++ b/web/core/components/modules/module-layout-icon.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { GanttChartSquare, LayoutGrid, List } from "lucide-react";
+import { TModuleLayoutOptions } from "@plane/types";
+import { cn } from "@plane/utils";
+
+interface ILayoutIcon {
+  className?: string;
+  containerClassName?: string;
+  layoutType: TModuleLayoutOptions;
+  size?: number;
+  withContainer?: boolean;
+}
+
+export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
+  const { layoutType, className = "", containerClassName = "", size = 14, withContainer = false } = props;
+
+  // get Layout icon
+  const icons = {
+    list: List,
+    board: LayoutGrid,
+    gantt: GanttChartSquare,
+  };
+  const Icon = icons[layoutType ?? "list"];
+
+  if (!Icon) return null;
+
+  return (
+    <>
+      {withContainer ? (
+        <div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
+          <Icon size={size} className={cn(className)} />
+        </div>
+      ) : (
+        <Icon size={size} className={cn("flex-shrink-0", className)} />
+      )}
+    </>
+  );
+};
diff --git a/web/core/components/modules/module-list-item-action.tsx b/web/core/components/modules/module-list-item-action.tsx
index a63b361eb..c79860ac4 100644
--- a/web/core/components/modules/module-list-item-action.tsx
+++ b/web/core/components/modules/module-list-item-action.tsx
@@ -6,6 +6,8 @@ import { useParams } from "next/navigation";
 // icons
 import { SquareUser } from "lucide-react";
 // types
+import { MODULE_STATUS, MODULE_FAVORITED, MODULE_UNFAVORITED , EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IModule } from "@plane/types";
 // ui
 import { FavoriteStar, TOAST_TYPE, Tooltip, setPromiseToast, setToast } from "@plane/ui";
@@ -14,12 +16,9 @@ import { DateRangeDropdown } from "@/components/dropdowns";
 import { ModuleQuickActions } from "@/components/modules";
 import { ModuleStatusDropdown } from "@/components/modules/module-status-dropdown";
 // constants
-import { MODULE_FAVORITED, MODULE_UNFAVORITED } from "@/constants/event-tracker";
-import { MODULE_STATUS } from "@/constants/module";
 // hooks
 import { renderFormattedPayloadDate, getDate } from "@/helpers/date-time.helper";
 import { useEventTracker, useMember, useModule, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 import { ButtonAvatars } from "../dropdowns/member/avatar";
 
 type Props = {
@@ -38,6 +37,8 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
   const { getUserDetails } = useMember();
   const { captureEvent } = useEventTracker();
 
+  const { t } = useTranslation();
+
   // derived values
 
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
@@ -146,8 +147,8 @@ export const ModuleListItemAction: FC<Props> = observer((props) => {
           });
         }}
         placeholder={{
-          from: "Start date",
-          to: "End date",
+          from: t("start_date"),
+          to: t("end_date"),
         }}
         disabled={isDisabled}
         hideIcon={{ from: renderIcon ?? true, to: renderIcon }}
diff --git a/web/core/components/modules/module-status-dropdown.tsx b/web/core/components/modules/module-status-dropdown.tsx
index ec021c49f..a3b2d5881 100644
--- a/web/core/components/modules/module-status-dropdown.tsx
+++ b/web/core/components/modules/module-status-dropdown.tsx
@@ -1,50 +1,52 @@
-import React, { FC } from 'react'
-import { observer } from 'mobx-react';
-import { IModule } from '@plane/types';
-import { CustomSelect, TModuleStatus, ModuleStatusIcon } from '@plane/ui'
-import { MODULE_STATUS } from '@/constants/module'
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IModule } from "@plane/types";
+import { CustomSelect, TModuleStatus, ModuleStatusIcon } from "@plane/ui";
 
 type Props = {
-    isDisabled: boolean;
-    moduleDetails: IModule;
-    handleModuleDetailsChange: (payload: Partial<IModule>) => Promise<void>;
+  isDisabled: boolean;
+  moduleDetails: IModule;
+  handleModuleDetailsChange: (payload: Partial<IModule>) => Promise<void>;
 };
 
-export const ModuleStatusDropdown : FC<Props> = observer((props : Props) => {
-    const {isDisabled, moduleDetails, handleModuleDetailsChange} = props;
-    const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
+export const ModuleStatusDropdown: FC<Props> = observer((props: Props) => {
+  const { isDisabled, moduleDetails, handleModuleDetailsChange } = props;
+  const { t } = useTranslation();
+  const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
 
-    if(!moduleStatus) return <></>
+  if (!moduleStatus) return <></>;
 
-return (
+  return (
     <CustomSelect
-        customButton={
-            <span
-            className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
-                isDisabled ? "cursor-not-allowed" : "cursor-pointer"
-            }`}
-            style={{
-                color: moduleStatus ? moduleStatus.color : "#a3a3a2",
-                backgroundColor: moduleStatus ? `${moduleStatus.color}20` : "#a3a3a220",
-            }}
-            >
-            {moduleStatus?.label ?? "Backlog"}
-            </span>
-        }
-        value={moduleStatus?.value}
-        onChange={(val: TModuleStatus)=>{
-            handleModuleDetailsChange({status: val})
-        }}
-        disabled={isDisabled}
+      customButton={
+        <span
+          className={`flex h-6 w-20 items-center justify-center rounded-sm text-center text-xs ${
+            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} />
-                {status.label}
-            </div>
-            </CustomSelect.Option>
-        ))}
-        </CustomSelect>
-    )
-})
\ No newline at end of file
+      {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/web/core/components/modules/module-view-header.tsx b/web/core/components/modules/module-view-header.tsx
index 592c1e80d..149545113 100644
--- a/web/core/components/modules/module-view-header.tsx
+++ b/web/core/components/modules/module-view-header.tsx
@@ -3,26 +3,28 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// icons
 import { ListFilter, Search, X } from "lucide-react";
-// editor
-import { cn } from "@plane/editor";
 // plane helpers
+import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
+import { useTranslation } from "@plane/i18n";
 import { TModuleFilters } from "@plane/types";
 // ui
 import { Tooltip } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { FiltersDropdown } from "@/components/issues";
 import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modules/dropdowns";
 // constants
-import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useMember, useModuleFilter } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+import { ModuleLayoutIcon } from "./module-layout-icon";
+// i18n
 
 export const ModuleViewHeader: FC = observer(() => {
   // refs
@@ -43,6 +45,7 @@ export const ModuleViewHeader: FC = observer(() => {
     updateFilters,
     updateSearchQuery,
   } = useModuleFilter();
+  const { t } = useTranslation();
 
   // states
   const [isSearchOpen, setIsSearchOpen] = useState(searchQuery !== "" ? true : false);
@@ -164,7 +167,7 @@ export const ModuleViewHeader: FC = observer(() => {
       </FiltersDropdown>
       <div className="hidden md:flex items-center gap-1 rounded bg-custom-background-80 p-1">
         {MODULE_VIEW_LAYOUTS.map((layout) => (
-          <Tooltip key={layout.key} tooltipContent={layout.title} isMobile={isMobile}>
+          <Tooltip key={layout.key} tooltipContent={t(layout.i18n_title)} isMobile={isMobile}>
             <button
               type="button"
               className={cn(
@@ -178,12 +181,7 @@ export const ModuleViewHeader: FC = observer(() => {
                 updateDisplayFilters(projectId.toString(), { layout: layout.key });
               }}
             >
-              <layout.icon
-                strokeWidth={2}
-                className={cn("h-3.5 w-3.5 text-custom-text-200", {
-                  "text-custom-text-100": displayFilters?.layout === layout.key,
-                })}
-              />
+              <ModuleLayoutIcon layoutType={layout.key} />
             </button>
           </Tooltip>
         ))}
diff --git a/web/core/components/modules/modules-list-view.tsx b/web/core/components/modules/modules-list-view.tsx
index 4b45879f7..4d8eac8d3 100644
--- a/web/core/components/modules/modules-list-view.tsx
+++ b/web/core/components/modules/modules-list-view.tsx
@@ -2,15 +2,16 @@ import { observer } from "mobx-react";
 import Image from "next/image";
 import { useParams, useSearchParams } from "next/navigation";
 // components
+import { EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ContentWrapper, Row, ERowVariant } from "@plane/ui";
 import { ListLayout } from "@/components/core/list";
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState, ComicBoxButton } from "@/components/empty-state";
 import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules";
 import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // hooks
-import { useCommandPalette, useEventTracker, useModule, useModuleFilter } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useModule, useModuleFilter, useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import AllFiltersImage from "@/public/empty-state/module/all-filters.svg";
 import NameFilterImage from "@/public/empty-state/module/name-filter.svg";
 
@@ -19,14 +20,24 @@ export const ModulesListView: React.FC = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   const searchParams = useSearchParams();
   const peekModule = searchParams.get("peekModule");
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { toggleCreateModuleModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
   const { getProjectModuleIds, getFilteredModuleIds, loader } = useModule();
   const { currentProjectDisplayFilters: displayFilters, searchQuery } = 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
+  );
+  const generalViewResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/onboarding/modules",
+  });
 
   if (loader || !projectModuleIds || !filteredModuleIds)
     return (
@@ -39,12 +50,22 @@ export const ModulesListView: React.FC = observer(() => {
 
   if (projectModuleIds.length === 0)
     return (
-      <EmptyState
-        type={EmptyStateType.PROJECT_MODULE}
-        primaryButtonOnClick={() => {
-          setTrackElement("Module empty state");
-          toggleCreateModuleModal(true);
-        }}
+      <DetailedEmptyState
+        title={t("project_module.empty_state.general.title")}
+        description={t("project_module.empty_state.general.description")}
+        assetPath={generalViewResolvedPath}
+        customPrimaryButton={
+          <ComicBoxButton
+            label={t("project_module.empty_state.general.primary_button.text")}
+            title={t("project_module.empty_state.general.primary_button.comic.title")}
+            description={t("project_module.empty_state.general.primary_button.comic.description")}
+            onClick={() => {
+              setTrackElement("Module empty state");
+              toggleCreateModuleModal(true);
+            }}
+            disabled={!canPerformEmptyStateActions}
+          />
+        }
       />
     );
 
diff --git a/web/core/components/modules/quick-actions.tsx b/web/core/components/modules/quick-actions.tsx
index 178c8337b..69b6e0eb4 100644
--- a/web/core/components/modules/quick-actions.tsx
+++ b/web/core/components/modules/quick-actions.tsx
@@ -5,6 +5,9 @@ import { observer } from "mobx-react";
 
 // icons
 import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
@@ -15,7 +18,6 @@ import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useModule, useEventTracker, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   parentRef: React.RefObject<HTMLDivElement>;
@@ -37,6 +39,8 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
   const { allowPermissions } = useUserPermissions();
 
   const { getModuleById, restoreModule } = useModule();
+
+  const { t } = useTranslation();
   // derived values
   const moduleDetails = getModuleById(moduleId);
   const isArchived = !!moduleDetails?.archived_at;
@@ -95,7 +99,7 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "edit",
-      title: "Edit",
+      title: t("edit"),
       icon: Pencil,
       action: handleEditModule,
       shouldRender: isEditingAllowed && !isArchived,
@@ -103,22 +107,22 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
     {
       key: "open-new-tab",
       action: handleOpenInNewTab,
-      title: "Open in new tab",
+      title: t("open_in_new_tab"),
       icon: ExternalLink,
       shouldRender: !isArchived,
     },
     {
       key: "copy-link",
       action: handleCopyText,
-      title: "Copy link",
+      title: t("copy_link"),
       icon: LinkIcon,
       shouldRender: !isArchived,
     },
     {
       key: "archive",
       action: handleArchiveModule,
-      title: "Archive",
-      description: isInArchivableGroup ? undefined : "Only completed or canceled\nmodule can be archived.",
+      title: t("archive"),
+      description: isInArchivableGroup ? undefined : t("project_module.quick_actions.archive_module_description"),
       icon: ArchiveIcon,
       className: "items-start",
       iconClassName: "mt-1",
@@ -128,14 +132,14 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
     {
       key: "restore",
       action: handleRestoreModule,
-      title: "Restore",
+      title: t("restore"),
       icon: ArchiveRestoreIcon,
       shouldRender: isEditingAllowed && isArchived,
     },
     {
       key: "delete",
       action: handleDeleteModule,
-      title: "Delete",
+      title: t("delete"),
       icon: Trash2,
       shouldRender: isEditingAllowed,
     },
diff --git a/web/core/components/modules/select/status.tsx b/web/core/components/modules/select/status.tsx
index f3a583516..7da437946 100644
--- a/web/core/components/modules/select/status.tsx
+++ b/web/core/components/modules/select/status.tsx
@@ -4,11 +4,12 @@ import React from "react";
 
 // react hook form
 import { Controller, FieldError, Control } from "react-hook-form";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import type { IModule } from "@plane/types";
 // ui
 import { CustomSelect, DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
 // types
-import { MODULE_STATUS } from "@/constants/module";
 // constants
 
 type Props = {
@@ -17,39 +18,45 @@ type Props = {
   tabIndex?: number;
 };
 
-export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }) => (
-  <Controller
-    control={control}
-    rules={{ required: true }}
-    name="status"
-    render={({ field: { value, onChange } }) => (
-      <CustomSelect
-        value={value}
-        label={
-          <div className={`flex items-center justify-center gap-2 text-xs py-0.5 ${error ? "text-red-500" : ""}`}>
-            {value ? (
-              <ModuleStatusIcon status={value} />
-            ) : (
-              <DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
-            )}
-            {MODULE_STATUS.find((s) => s.value === value)?.label ?? (
-              <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>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} />
-              {status.label}
-            </div>
-          </CustomSelect.Option>
-        ))}
-      </CustomSelect>
-    )}
-  />
-);
+export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }) => {
+  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 text-xs py-0.5 ${error ? "text-red-500" : ""}`}>
+                {value ? (
+                  <ModuleStatusIcon status={value} />
+                ) : (
+                  <DoubleCircleIcon className={`h-3 w-3 ${error ? "text-red-500" : "text-custom-text-200"}`} />
+                )}
+                {(selectedValue && t(selectedValue?.i18n_label)) ?? (
+                  <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>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/web/core/components/modules/sidebar-select/select-status.tsx b/web/core/components/modules/sidebar-select/select-status.tsx
index fcac3e01f..9d7a7fda9 100644
--- a/web/core/components/modules/sidebar-select/select-status.tsx
+++ b/web/core/components/modules/sidebar-select/select-status.tsx
@@ -4,11 +4,12 @@
 import React from "react";
 // react-hook-form
 import { Control, Controller, UseFormWatch } from "react-hook-form";
+import { MODULE_STATUS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IModule } from "@plane/types";
 // ui
 import { CustomSelect, DoubleCircleIcon } from "@plane/ui";
 // types
-import { MODULE_STATUS } from "@/constants/module";
 // common
 // constants
 
@@ -18,45 +19,48 @@ type Props = {
   watch: UseFormWatch<Partial<IModule>>;
 };
 
-export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => (
-  <div className="flex flex-wrap items-center py-2">
-    <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
-      <DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
-      <p>Status</p>
+export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-wrap items-center py-2">
+      <div className="flex items-center gap-x-2 text-sm sm:basis-1/2">
+        <DoubleCircleIcon 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-custom-text-100"}`}>
+                  <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>
-    <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-custom-text-100"}`}>
-                <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 }} />
-                  {option.label}
-                </div>
-              </CustomSelect.Option>
-            ))}
-          </CustomSelect>
-        )}
-      />
-    </div>
-  </div>
-);
+  );
+};
diff --git a/web/core/components/onboarding/create-workspace.tsx b/web/core/components/onboarding/create-workspace.tsx
index 56cbb14e3..7be711a1e 100644
--- a/web/core/components/onboarding/create-workspace.tsx
+++ b/web/core/components/onboarding/create-workspace.tsx
@@ -4,13 +4,12 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // constants
-import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS, WORKSPACE_CREATED, E_ONBOARDING } from "@plane/constants";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IUser, IWorkspace, TOnboardingSteps } from "@plane/types";
 // ui
 import { Button, CustomSelect, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { E_ONBOARDING, WORKSPACE_CREATED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useUserProfile, useUserSettings, useWorkspace } from "@/hooks/store";
 // services
@@ -31,6 +30,8 @@ export const CreateWorkspace: React.FC<Props> = observer((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();
@@ -64,8 +65,8 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
             .then(async (workspaceResponse) => {
               setToast({
                 type: TOAST_TYPE.SUCCESS,
-                title: "Success!",
-                message: "Workspace created successfully.",
+                title: t("workspace_creation.toast.success.title"),
+                message: t("workspace_creation.toast.success.message"),
               });
               captureWorkspaceEvent({
                 eventName: WORKSPACE_CREATED,
@@ -90,8 +91,8 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
               });
               setToast({
                 type: TOAST_TYPE.ERROR,
-                title: "Error!",
-                message: "Workspace could not be created. Please try again.",
+                title: t("workspace_creation.toast.error.title"),
+                message: t("workspace_creation.toast.error.message"),
               });
             });
         } else setSlugError(true);
@@ -99,8 +100,8 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
       .catch(() =>
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Some error occurred while creating workspace. Please try again.",
+          title: t("workspace_creation.toast.error.title"),
+          message: t("workspace_creation.toast.error.message"),
         })
       );
   };
@@ -144,10 +145,8 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
         </>
       )}
       <div className="text-center space-y-1 py-4 mx-auto">
-        <h3 className="text-3xl font-bold text-onboarding-text-100">Create a workspace</h3>
-        <p className="font-medium text-onboarding-text-400">
-          To start using Plane, you need to create or join a workspace.
-        </p>
+        <h3 className="text-3xl font-bold text-onboarding-text-100">{t("workspace_creation.heading")}</h3>
+        <p className="font-medium text-onboarding-text-400">{t("workspace_creation.subheading")}</p>
       </div>
       <form className="w-full mx-auto mt-2 space-y-4" onSubmit={handleSubmit(handleCreateWorkspace)}>
         <div className="space-y-1">
@@ -155,19 +154,18 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
             className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
             htmlFor="name"
           >
-            Name your workspace
+            {t("workspace_creation.form.name.label")}
           </label>
           <Controller
             control={control}
             name="name"
             rules={{
-              required: "This is a required field.",
+              required: t("common.errors.required"),
               validate: (value) =>
-                /^[\w\s-]*$/.test(value) ||
-                `Workspaces names can contain only (" "), ( - ), ( _ ) and alphanumeric characters.`,
+                /^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
               maxLength: {
                 value: 80,
-                message: "Limit your name to 80 characters.",
+                message: t("workspace_creation.errors.validation.name_length"),
               },
             }}
             render={({ field: { value, ref, onChange } }) => (
@@ -184,7 +182,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
                       shouldValidate: true,
                     });
                   }}
-                  placeholder="Something familiar and recognizable is always best."
+                  placeholder={t("workspace_creation.form.name.placeholder")}
                   ref={ref}
                   hasError={Boolean(errors.name)}
                   className="w-full border-onboarding-border-100 placeholder:text-custom-text-400"
@@ -200,16 +198,16 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
             className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
             htmlFor="slug"
           >
-            Set your workspace&apos;s URL
+            {t("workspace_creation.form.url.label")}
           </label>
           <Controller
             control={control}
             name="slug"
             rules={{
-              required: "This is a required field.",
+              required: t("common.errors.required"),
               maxLength: {
                 value: 48,
-                message: "Limit your URL to 48 characters.",
+                message: t("workspace_creation.errors.validation.url_length"),
               },
             }}
             render={({ field: { value, ref, onChange } }) => (
@@ -231,16 +229,18 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
                   }}
                   ref={ref}
                   hasError={Boolean(errors.slug)}
-                  placeholder="workspace-name"
+                  placeholder={t("workspace_creation.form.url.placeholder")}
                   className="w-full border-none !px-0"
                 />
               </div>
             )}
           />
-          <p className="text-sm text-onboarding-text-300">You can only edit the slug of the URL</p>
-          {slugError && <p className="-mt-3 text-sm text-red-500">This URL is taken. Try something else.</p>}
+          <p className="text-sm text-onboarding-text-300">{t("workspace_creation.form.url.edit_slug")}</p>
+          {slugError && (
+            <p className="-mt-3 text-sm text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+          )}
           {invalidSlug && (
-            <p className="text-sm text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+            <p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
           {errors.slug && <span className="text-sm text-red-500">{errors.slug.message}</span>}
         </div>
@@ -250,20 +250,20 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
             className="text-sm text-onboarding-text-300 font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
             htmlFor="organization_size"
           >
-            How many people will use this workspace?
+            {t("workspace_creation.form.organization_size.label")}
           </label>
           <div className="w-full">
             <Controller
               name="organization_size"
               control={control}
-              rules={{ required: "This is a required field." }}
+              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-custom-text-400">Select a range</span>
+                      <span className="text-custom-text-400">{t("workspace_creation.form.organization_size.placeholder")}</span>
                     )
                   }
                   buttonClassName="!border-[0.5px] !border-onboarding-border-100 !shadow-none !rounded-md"
@@ -284,7 +284,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
           </div>
         </div>
         <Button variant="primary" type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+          {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
         </Button>
       </form>
     </div>
diff --git a/web/core/components/onboarding/invitations.tsx b/web/core/components/onboarding/invitations.tsx
index d5dde220d..1bfdd063c 100644
--- a/web/core/components/onboarding/invitations.tsx
+++ b/web/core/components/onboarding/invitations.tsx
@@ -1,14 +1,15 @@
 "use client";
 
 import React, { useState } from "react";
+// plane imports
+import { ROLE, MEMBER_ACCEPTED } from "@plane/constants";
 // types
 import { IWorkspaceMemberInvitation } from "@plane/types";
 // ui
 import { Button, Checkbox, Spinner } from "@plane/ui";
 // constants
-import { MEMBER_ACCEPTED } from "@/constants/event-tracker";
-import { ROLE } from "@/constants/workspace";
 // helpers
+import { WorkspaceLogo } from "@/components/workspace/logo";
 import { truncateText } from "@/helpers/string.helper";
 import { getUserRole } from "@/helpers/user.helper";
 // hooks
@@ -94,21 +95,11 @@ export const Invitations: React.FC<Props> = (props) => {
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
                 <div className="flex-shrink-0">
-                  <div className="grid h-9 w-9 place-items-center rounded">
-                    {invitedWorkspace?.logo && invitedWorkspace.logo !== "" ? (
-                      <img
-                        src={invitedWorkspace.logo}
-                        height="100%"
-                        width="100%"
-                        className="rounded"
-                        alt={invitedWorkspace.name}
-                      />
-                    ) : (
-                      <span className="grid h-9 w-9 place-items-center rounded bg-gray-700 px-3 py-1.5 uppercase text-white">
-                        {invitedWorkspace?.name[0]}
-                      </span>
-                    )}
-                  </div>
+                  <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-sm font-medium">{truncateText(invitedWorkspace?.name, 30)}</div>
diff --git a/web/core/components/onboarding/invite-members.tsx b/web/core/components/onboarding/invite-members.tsx
index 695b6f248..34887be71 100644
--- a/web/core/components/onboarding/invite-members.tsx
+++ b/web/core/components/onboarding/invite-members.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import {
@@ -15,22 +16,21 @@ import {
   useForm,
 } from "react-hook-form";
 // icons
+import { usePopper } from "react-popper";
 import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
-import { Listbox, Transition } from "@headlessui/react";
+import { Listbox } from "@headlessui/react";
+// plane imports
+import { ROLE, ROLE_DETAILS, MEMBER_INVITED, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import { IUser, IWorkspace } from "@plane/types";
 // ui
 import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { MEMBER_INVITED } from "@/constants/event-tracker";
-import { ROLE, ROLE_DETAILS } from "@/constants/workspace";
 // helpers
 import { getUserRole } from "@/helpers/user.helper";
 // hooks
 import { useEventTracker } from "@/hooks/store";
-import useDynamicDropdownPosition from "@/hooks/use-dynamic-dropdown";
-// plane web constants
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // services
 import { WorkspaceService } from "@/plane-web/services";
 // assets
@@ -87,7 +87,7 @@ const placeholderEmails = [
   "thomas.selfridge@frstflt.com",
   "albert.zahm@frstflt.com",
 ];
-const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
+const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
   const {
     control,
     index,
@@ -101,12 +101,10 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
     watch,
   } = props;
 
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-
-  useDynamicDropdownPosition(isDropdownOpen, () => setIsDropdownOpen(false), buttonRef, dropdownRef);
+  const { t } = useTranslation();
 
   const email = watch(`emails.${index}.email`);
 
@@ -134,6 +132,18 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
     }
   };
 
+  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">
@@ -177,15 +187,13 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
                 value={value}
                 onChange={(val) => {
                   onChange(val);
-                  setIsDropdownOpen(false);
                   setValue(`emails.${index}.role_active`, true);
                 }}
                 className="w-full flex-shrink-0 text-left"
               >
                 <Listbox.Button
                   type="button"
-                  ref={buttonRef}
-                  onClick={() => setIsDropdownOpen((prev) => !prev)}
+                  ref={setReferenceElement}
                   className="flex w-full items-center justify-between gap-1 rounded-md px-2.5 py-2 text-sm border-[0.5px] border-onboarding-border-100"
                 >
                   <span
@@ -207,45 +215,37 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
                   />
                 </Listbox.Button>
 
-                <Transition
-                  show={isDropdownOpen}
-                  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"
-                >
-                  <Listbox.Options
-                    ref={dropdownRef}
-                    className="fixed z-10 mt-1 h-fit w-48 sm:w-60 overflow-y-auto rounded-md border border-onboarding-border-100 bg-onboarding-background-200 shadow-sm focus:outline-none"
+                <Listbox.Options as="div">
+                  <div
+                    className="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-onboarding-border-100 bg-onboarding-background-200 shadow-sm focus:outline-none"
+                    ref={setPopperElement}
+                    style={styles.popper}
+                    {...attributes.popper}
                   >
-                    <div className="space-y-1 p-2">
-                      {Object.entries(ROLE_DETAILS).map(([key, value]) => (
-                        <Listbox.Option
-                          key={key}
-                          value={parseInt(key)}
-                          className={({ active, selected }) =>
-                            `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                              active || selected ? "bg-onboarding-background-400/40" : ""
-                            } ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
-                          }
-                        >
-                          {({ selected }) => (
-                            <div className="flex items-center text-wrap gap-2 p-1">
-                              <div className="flex flex-col">
-                                <div className="text-sm font-medium">{value.title}</div>
-                                <div className="flex text-xs text-custom-text-300">{value.description}</div>
-                              </div>
-                              {selected && <Check className="h-4 w-4 shrink-0" />}
+                    {Object.entries(ROLE_DETAILS).map(([key, value]) => (
+                      <Listbox.Option
+                        as="div"
+                        key={key}
+                        value={parseInt(key)}
+                        className={({ active, selected }) =>
+                          `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                            active || selected ? "bg-onboarding-background-400/40" : ""
+                          } ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
+                        }
+                      >
+                        {({ selected }) => (
+                          <div className="flex items-center text-wrap gap-2 p-1">
+                            <div className="flex flex-col">
+                              <div className="text-sm font-medium">{t(value.i18n_title)}</div>
+                              <div className="flex text-xs text-custom-text-300">{t(value.i18n_description)}</div>
                             </div>
-                          )}
-                        </Listbox.Option>
-                      ))}
-                    </div>
-                  </Listbox.Options>
-                </Transition>
+                            {selected && <Check className="h-4 w-4 shrink-0" />}
+                          </div>
+                        )}
+                      </Listbox.Option>
+                    ))}
+                  </div>
+                </Listbox.Options>
               </Listbox>
             )}
           />
@@ -268,7 +268,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = (props) => {
       )}
     </div>
   );
-};
+});
 
 export const InviteMembers: React.FC<Props> = (props) => {
   const { finishOnboarding, totalSteps, workspace } = props;
diff --git a/web/core/components/onboarding/profile-setup.tsx b/web/core/components/onboarding/profile-setup.tsx
index fee8dead9..76cf98e91 100644
--- a/web/core/components/onboarding/profile-setup.tsx
+++ b/web/core/components/onboarding/profile-setup.tsx
@@ -7,6 +7,8 @@ import { useTheme } from "next-themes";
 import { Controller, useForm } from "react-hook-form";
 import { Eye, EyeOff } from "lucide-react";
 // types
+import { USER_DETAILS, E_ONBOARDING_STEP_1, E_ONBOARDING_STEP_2 } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
 // ui
 import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
@@ -15,7 +17,6 @@ import { PasswordStrengthMeter } from "@/components/account";
 import { UserImageUploadModal } from "@/components/core";
 import { OnboardingHeader, SwitchAccountDropdown } from "@/components/onboarding";
 // constants
-import { USER_DETAILS, E_ONBOARDING_STEP_1, E_ONBOARDING_STEP_2 } from "@/constants/event-tracker";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 import { E_PASSWORD_STRENGTH, getPasswordStrength } from "@/helpers/password.helper";
@@ -91,6 +92,8 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
     password: false,
     retypePassword: false,
   });
+  // plane hooks
+  const { t } = useTranslation();
   // hooks
   const { resolvedTheme } = useTheme();
   // store hooks
@@ -413,7 +416,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                   <>
                     <div className="space-y-1">
                       <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-                        Set a password (optional)
+                        Set a password ({t("common.optional")})
                       </label>
                       <Controller
                         control={control}
@@ -454,7 +457,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                     </div>
                     <div className="space-y-1">
                       <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-                        Confirm password (optional)
+                        {t("auth.common.password.confirm_password.label")} ({t("common.optional")})
                       </label>
                       <Controller
                         control={control}
@@ -473,7 +476,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                               onChange={onChange}
                               ref={ref}
                               hasError={Boolean(errors.confirm_password)}
-                              placeholder="Confirm password..."
+                              placeholder={t("auth.common.password.confirm_password.placeholder")}
                               className="w-full border-onboarding-border-100 pr-12 placeholder:text-onboarding-text-400"
                             />
                             {showPassword.retypePassword ? (
diff --git a/web/core/components/onboarding/tour/root.tsx b/web/core/components/onboarding/tour/root.tsx
index 20c3fbcbd..2c4993415 100644
--- a/web/core/components/onboarding/tour/root.tsx
+++ b/web/core/components/onboarding/tour/root.tsx
@@ -5,11 +5,11 @@ import { observer } from "mobx-react";
 import Image, { StaticImageData } from "next/image";
 import { X } from "lucide-react";
 // ui
+import { PRODUCT_TOUR_SKIPPED, PRODUCT_TOUR_STARTED } from "@plane/constants";
 import { Button } from "@plane/ui";
 // components
 import { TourSidebar } from "@/components/onboarding";
 // constants
-import { PRODUCT_TOUR_SKIPPED, PRODUCT_TOUR_STARTED } from "@/constants/event-tracker";
 // hooks
 import { useCommandPalette, useEventTracker, useUser } from "@/hooks/store";
 // assets
@@ -38,9 +38,9 @@ const TOUR_STEPS: {
 }[] = [
   {
     key: "issues",
-    title: "Plan with issues",
+    title: "Plan with work items",
     description:
-      "The issue is the building block of the Plane. Most concepts in Plane are either associated with issues and their properties.",
+      "The work item is the building block of the Plane. Most concepts in Plane are either associated with issues and their properties.",
     image: IssuesTour,
     nextStep: "cycles",
   },
@@ -65,7 +65,7 @@ const TOUR_STEPS: {
     key: "views",
     title: "Views",
     description:
-      "Create custom filters to display only the issues that matter to you. Save and share your filters in just a few clicks.",
+      "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",
@@ -73,7 +73,7 @@ const TOUR_STEPS: {
   {
     key: "pages",
     title: "Document with pages",
-    description: "Use Pages to quickly jot down issues when you're in a meeting or starting a day.",
+    description: "Use Pages to quickly jot down work items when you're in a meeting or starting a day.",
     image: PagesTour,
     prevStep: "views",
   },
diff --git a/web/core/components/page-views/workspace-dashboard.tsx b/web/core/components/page-views/workspace-dashboard.tsx
index 05546af56..19d3590b0 100644
--- a/web/core/components/page-views/workspace-dashboard.tsx
+++ b/web/core/components/page-views/workspace-dashboard.tsx
@@ -1,37 +1,48 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-// components
+// plane imports
+import { EUserPermissionsLevel, PRODUCT_TOUR_COMPLETED, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ContentWrapper } from "@plane/ui";
+// components
 import { DashboardWidgets } from "@/components/dashboard";
-import { EmptyState } from "@/components/empty-state";
+import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 import { IssuePeekOverview } from "@/components/issues";
 import { TourRoot } from "@/components/onboarding";
 import { UserGreetingsView } from "@/components/user";
 // constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { PRODUCT_TOUR_COMPLETED } from "@/constants/event-tracker";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useCommandPalette, useUserProfile, useEventTracker, useDashboard, useProject, useUser } from "@/hooks/store";
+import {
+  useCommandPalette,
+  useUserProfile,
+  useEventTracker,
+  useDashboard,
+  useProject,
+  useUser,
+  useUserPermissions,
+} from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import useSize from "@/hooks/use-window-size";
 
 export const WorkspaceDashboardView = observer(() => {
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
-  const {
-    //  captureEvent,
-    setTrackElement,
-  } = useEventTracker();
+  const { captureEvent, setTrackElement } = useEventTracker();
   const { toggleCreateProjectModal } = useCommandPalette();
   const { workspaceSlug } = useParams();
   const { data: currentUser } = useUser();
   const { data: currentUserProfile, updateTourCompleted } = useUserProfile();
-  const { captureEvent } = useEventTracker();
   const { homeDashboardId, fetchHomeDashboardWidgets } = useDashboard();
   const { joinedProjectIds, loader } = useProject();
+  const { allowPermissions } = useUserPermissions();
 
+  // helper hooks
   const [windowWidth] = useSize();
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/dashboard" });
 
   const handleTourCompleted = () => {
     updateTourCompleted()
@@ -53,6 +64,11 @@ export const WorkspaceDashboardView = observer(() => {
     fetchHomeDashboardWidgets(workspaceSlug?.toString());
   }, [fetchHomeDashboardWidgets, workspaceSlug]);
 
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
+  );
+
   // TODO: refactor loader implementation
   return (
     <>
@@ -63,11 +79,11 @@ export const WorkspaceDashboardView = observer(() => {
       )}
       {homeDashboardId && joinedProjectIds && (
         <>
-          {joinedProjectIds.length > 0 || loader ? (
+          {joinedProjectIds.length > 0 || loader === "init-loader" ? (
             <>
               <IssuePeekOverview />
               <ContentWrapper
-                className={cn("gap-7 bg-custom-background-90", {
+                className={cn("gap-7 bg-custom-background-90/20", {
                   "vertical-scrollbar scrollbar-lg": windowWidth >= 768,
                 })}
               >
@@ -77,12 +93,22 @@ export const WorkspaceDashboardView = observer(() => {
               </ContentWrapper>
             </>
           ) : (
-            <EmptyState
-              type={EmptyStateType.WORKSPACE_DASHBOARD}
-              primaryButtonOnClick={() => {
-                setTrackElement("Dashboard empty state");
-                toggleCreateProjectModal(true);
-              }}
+            <DetailedEmptyState
+              title={t("workspace_dashboard.empty_state.general.title")}
+              description={t("workspace_dashboard.empty_state.general.description")}
+              assetPath={resolvedPath}
+              customPrimaryButton={
+                <ComicBoxButton
+                  label={t("workspace_dashboard.empty_state.general.primary_button.text")}
+                  title={t("workspace_dashboard.empty_state.general.primary_button.comic.title")}
+                  description={t("workspace_dashboard.empty_state.general.primary_button.comic.description")}
+                  onClick={() => {
+                    setTrackElement("Dashboard empty state");
+                    toggleCreateProjectModal(true);
+                  }}
+                  disabled={!canPerformEmptyStateActions}
+                />
+              }
             />
           )}
         </>
diff --git a/web/core/components/pages/dropdowns/actions.tsx b/web/core/components/pages/dropdowns/actions.tsx
new file mode 100644
index 000000000..b03713455
--- /dev/null
+++ b/web/core/components/pages/dropdowns/actions.tsx
@@ -0,0 +1,213 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import {
+  ArchiveRestoreIcon,
+  Copy,
+  ExternalLink,
+  FileOutput,
+  Globe2,
+  Link,
+  Lock,
+  LockKeyhole,
+  LockKeyholeOpen,
+  Trash2,
+} from "lucide-react";
+// constants
+import { EPageAccess } from "@plane/constants";
+// plane editor
+import { EditorRefApi } from "@plane/editor";
+// plane ui
+import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem } from "@plane/ui";
+// components
+import { DeletePageModal } from "@/components/pages";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { usePageOperations } from "@/hooks/use-page-operations";
+// plane web components
+import { MovePageModal } from "@/plane-web/components/pages";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
+import { usePageFlag } from "@/plane-web/hooks/use-page-flag";
+// store types
+import { 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 = {
+  editorRef?: EditorRefApi | null;
+  extraOptions?: (TContextMenuItem & { key: TPageActions })[];
+  optionsOrder: TPageActions[];
+  page: TPageInstance;
+  parentRef?: React.RefObject<HTMLElement>;
+  storeType: EPageStoreType;
+};
+
+export const PageActions: React.FC<Props> = observer((props) => {
+  const { editorRef, 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({
+    editorRef,
+    page,
+  });
+  // derived values
+  const {
+    access,
+    archived_at,
+    is_locked,
+    canCurrentUserArchivePage,
+    canCurrentUserChangeAccess,
+    canCurrentUserDeletePage,
+    canCurrentUserDuplicatePage,
+    canCurrentUserLockPage,
+    canCurrentUserMovePage,
+  } = page;
+  // menu items
+  const MENU_ITEMS: (TContextMenuItem & { key: TPageActions })[] = useMemo(() => {
+    const menuItems: (TContextMenuItem & { key: TPageActions })[] = [
+      {
+        key: "toggle-lock",
+        action: pageOperations.toggleLock,
+        title: is_locked ? "Unlock" : "Lock",
+        icon: is_locked ? LockKeyholeOpen : LockKeyhole,
+        shouldRender: canCurrentUserLockPage,
+      },
+      {
+        key: "toggle-access",
+        action: pageOperations.toggleAccess,
+        title: access === EPageAccess.PUBLIC ? "Make private" : "Make public",
+        icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
+        shouldRender: canCurrentUserChangeAccess && !archived_at,
+      },
+      {
+        key: "open-in-new-tab",
+        action: pageOperations.openInNewTab,
+        title: "Open in new tab",
+        icon: ExternalLink,
+        shouldRender: true,
+      },
+      {
+        key: "copy-link",
+        action: pageOperations.copyLink,
+        title: "Copy link",
+        icon: Link,
+        shouldRender: true,
+      },
+      {
+        key: "make-a-copy",
+        action: pageOperations.duplicate,
+        title: "Make a copy",
+        icon: Copy,
+        shouldRender: canCurrentUserDuplicatePage,
+      },
+      {
+        key: "archive-restore",
+        action: pageOperations.toggleArchive,
+        title: archived_at ? "Restore" : "Archive",
+        icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
+        shouldRender: canCurrentUserArchivePage,
+      },
+      {
+        key: "delete",
+        action: () => setDeletePageModal(true),
+        title: "Delete",
+        icon: Trash2,
+        shouldRender: canCurrentUserDeletePage && !!archived_at,
+      },
+      {
+        key: "move",
+        action: () => setMovePageModal(true),
+        title: "Move",
+        icon: FileOutput,
+        shouldRender: canCurrentUserMovePage && isMovePageEnabled,
+      },
+    ];
+    if (extraOptions) {
+      menuItems.push(...extraOptions);
+    }
+    return menuItems;
+  }, [
+    access,
+    archived_at,
+    extraOptions,
+    is_locked,
+    isMovePageEnabled,
+    canCurrentUserArchivePage,
+    canCurrentUserChangeAccess,
+    canCurrentUserDeletePage,
+    canCurrentUserDuplicatePage,
+    canCurrentUserLockPage,
+    canCurrentUserMovePage,
+    pageOperations,
+  ]);
+  // arrange options
+  const arrangedOptions = useMemo(
+    () =>
+      optionsOrder
+        .map((key) => MENU_ITEMS.find((item) => item.key === key))
+        .filter((item) => !!item) as (TContextMenuItem & { key: TPageActions })[],
+    [optionsOrder, MENU_ITEMS]
+  );
+
+  return (
+    <>
+      <MovePageModal isOpen={movePageModal} onClose={() => setMovePageModal(false)} page={page} />
+      <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={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                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/web/core/components/pages/dropdowns/edit-information-popover.tsx b/web/core/components/pages/dropdowns/edit-information-popover.tsx
index 92e6d8fab..9157c9f91 100644
--- a/web/core/components/pages/dropdowns/edit-information-popover.tsx
+++ b/web/core/components/pages/dropdowns/edit-information-popover.tsx
@@ -1,71 +1,19 @@
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-// plane ui
-import { Avatar } from "@plane/ui";
 // helpers
-import { calculateTimeAgoShort, renderFormattedDate } from "@/helpers/date-time.helper";
-import { getFileURL } from "@/helpers/file.helper";
-// hooks
-import { useMember } from "@/hooks/store";
-// store
-import { IPage } from "@/store/pages/page";
+import { calculateTimeAgoShort } from "@/helpers/date-time.helper";
+// store types
+import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
-  page: IPage;
+  page: TPageInstance;
 };
 
 export const PageEditInformationPopover: React.FC<Props> = observer((props) => {
   const { page } = props;
-  // router
-  const { workspaceSlug } = useParams();
-  // store hooks
-  const { getUserDetails } = useMember();
-  // derived values
-  const editorInformation = page.updated_by ? getUserDetails(page.updated_by) : undefined;
-  const creatorInformation = page.created_by ? getUserDetails(page.created_by) : undefined;
 
   return (
-    <div className="flex-shrink-0 relative group/edit-information whitespace-nowrap">
+    <div className="flex-shrink-0 whitespace-nowrap">
       <span className="text-sm text-custom-text-300">Edited {calculateTimeAgoShort(page.updated_at ?? "")} ago</span>
-      <div className="hidden group-hover/edit-information:block absolute z-10 top-full right-0 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg space-y-2">
-        <div>
-          <p className="text-xs font-medium text-custom-text-300">Edited by</p>
-          <Link
-            href={`/${workspaceSlug?.toString()}/profile/${page.updated_by}`}
-            className="mt-2 flex items-center gap-1.5 text-sm font-medium"
-          >
-            <Avatar
-              src={getFileURL(editorInformation?.avatar_url ?? "")}
-              name={editorInformation?.display_name}
-              className="flex-shrink-0"
-              size="sm"
-            />
-            <span>
-              {editorInformation?.display_name}{" "}
-              <span className="text-custom-text-300">{renderFormattedDate(page.updated_at)}</span>
-            </span>
-          </Link>
-        </div>
-        <div>
-          <p className="text-xs font-medium text-custom-text-300">Created by</p>
-          <Link
-            href={`/${workspaceSlug?.toString()}/profile/${page.created_by}`}
-            className="mt-2 flex items-center gap-1.5 text-sm font-medium"
-          >
-            <Avatar
-              src={getFileURL(creatorInformation?.avatar_url ?? "")}
-              name={creatorInformation?.display_name}
-              className="flex-shrink-0"
-              size="sm"
-            />
-            <span>
-              {creatorInformation?.display_name}{" "}
-              <span className="text-custom-text-300">{renderFormattedDate(page.created_at)}</span>
-            </span>
-          </Link>
-        </div>
-      </div>
     </div>
   );
 });
diff --git a/web/core/components/pages/dropdowns/index.ts b/web/core/components/pages/dropdowns/index.ts
index 16d9c3372..74ebad1d6 100644
--- a/web/core/components/pages/dropdowns/index.ts
+++ b/web/core/components/pages/dropdowns/index.ts
@@ -1,2 +1,2 @@
+export * from "./actions";
 export * from "./edit-information-popover";
-export * from "./quick-actions";
diff --git a/web/core/components/pages/dropdowns/quick-actions.tsx b/web/core/components/pages/dropdowns/quick-actions.tsx
deleted file mode 100644
index 6bed6be2c..000000000
--- a/web/core/components/pages/dropdowns/quick-actions.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { observer } from "mobx-react";
-import { ArchiveRestoreIcon, ExternalLink, Link, Lock, Trash2, UsersRound } from "lucide-react";
-import { ArchiveIcon, ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { DeletePageModal } from "@/components/pages";
-// helpers
-import { copyUrlToClipboard } from "@/helpers/string.helper";
-// store
-import { IPage } from "@/store/pages/page";
-
-type Props = {
-  page: IPage;
-  pageLink: string;
-  parentRef: React.RefObject<HTMLElement>;
-};
-
-export const PageQuickActions: React.FC<Props> = observer((props) => {
-  const { page, pageLink, parentRef } = props;
-  // states
-  const [deletePageModal, setDeletePageModal] = useState(false);
-  // store hooks
-  const {
-    access,
-    archive,
-    archived_at,
-    makePublic,
-    makePrivate,
-    restore,
-    canCurrentUserArchivePage,
-    canCurrentUserChangeAccess,
-    canCurrentUserDeletePage,
-  } = page;
-
-  const handleCopyText = () =>
-    copyUrlToClipboard(pageLink).then(() => {
-      setToast({
-        type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "Page link copied to clipboard.",
-      });
-    });
-
-  const handleOpenInNewTab = () => window.open(`/${pageLink}`, "_blank");
-
-  const MENU_ITEMS: TContextMenuItem[] = [
-    {
-      key: "make-public-private",
-      action: async () => {
-        const changedPageType = access === 0 ? "private" : "public";
-
-        try {
-          if (access === 0) await makePrivate();
-          else await makePublic();
-
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: `The page has been marked ${changedPageType} and moved to the ${changedPageType} section.`,
-          });
-        } catch (err) {
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: "Error!",
-            message: `The page couldn't be marked ${changedPageType}. Please try again.`,
-          });
-        }
-      },
-      title: access === 0 ? "Make private" : "Make public",
-      icon: access === 0 ? Lock : UsersRound,
-      shouldRender: canCurrentUserChangeAccess && !archived_at,
-    },
-    {
-      key: "open-new-tab",
-      action: handleOpenInNewTab,
-      title: "Open in new tab",
-      icon: ExternalLink,
-      shouldRender: true,
-    },
-    {
-      key: "copy-link",
-      action: handleCopyText,
-      title: "Copy link",
-      icon: Link,
-      shouldRender: true,
-    },
-    {
-      key: "archive-restore",
-      action: archived_at ? restore : archive,
-      title: archived_at ? "Restore" : "Archive",
-      icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
-      shouldRender: canCurrentUserArchivePage,
-    },
-    {
-      key: "delete",
-      action: () => setDeletePageModal(true),
-      title: "Delete",
-      icon: Trash2,
-      shouldRender: canCurrentUserDeletePage && !!archived_at,
-    },
-  ];
-
-  return (
-    <>
-      <DeletePageModal isOpen={deletePageModal} onClose={() => setDeletePageModal(false)} pageId={page.id ?? ""} />
-      <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
-      <CustomMenu placement="bottom-end" ellipsis closeOnSelect>
-        {MENU_ITEMS.map((item) => {
-          if (!item.shouldRender) return null;
-          return (
-            <CustomMenu.MenuItem
-              key={item.key}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                item.action();
-              }}
-              className="flex items-center gap-2"
-              disabled={item.disabled}
-            >
-              {item.icon && <item.icon className="h-3 w-3" />}
-              {item.title}
-            </CustomMenu.MenuItem>
-          );
-        })}
-      </CustomMenu>
-    </>
-  );
-});
diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
index 6f88445ed..72533c3dc 100644
--- a/web/core/components/pages/editor/editor-body.tsx
+++ b/web/core/components/pages/editor/editor-body.tsx
@@ -1,101 +1,97 @@
-import { useCallback, useMemo } from "react";
+import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 // document-editor
 import {
   CollaborativeDocumentEditorWithRef,
-  CollaborativeDocumentReadOnlyEditorWithRef,
-  EditorReadOnlyRefApi,
   EditorRefApi,
   TAIMenuProps,
   TDisplayConfig,
+  TFileHandler,
   TRealtimeConfig,
   TServerHandler,
 } from "@plane/editor";
-// types
-import { IUserLite } from "@plane/types";
-import { EFileAssetType } from "@plane/types/src/enums";
-// components
+// plane types
+import { TSearchEntityRequestPayload, TSearchResponse, TWebhookConnectionQueryParams } from "@plane/types";
+// plane ui
 import { Row } from "@plane/ui";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
 // helpers
 import { cn, LIVE_BASE_PATH, LIVE_BASE_URL } from "@/helpers/common.helper";
-import { getEditorFileHandlers, getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
 import { generateRandomColor } from "@/helpers/string.helper";
 // hooks
-import { useMember, useMention, useUser, useWorkspace } from "@/hooks/store";
+import { useEditorMention } from "@/hooks/editor";
+import { useUser, useWorkspace } from "@/hooks/store";
 import { usePageFilters } from "@/hooks/use-page-filters";
 // plane web components
 import { EditorAIMenu } from "@/plane-web/components/pages";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
-import { useFileSize } from "@/plane-web/hooks/use-file-size";
 import { useIssueEmbed } from "@/plane-web/hooks/use-issue-embed";
-// services
-import { FileService } from "@/services/file.service";
 // store
-import { IPage } from "@/store/pages/page";
+import { TPageInstance } from "@/store/pages/base-page";
 
-// services init
-const fileService = new FileService();
+export type TEditorBodyConfig = {
+  fileHandler: TFileHandler;
+};
+
+export type TEditorBodyHandlers = {
+  fetchEntity: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+};
 
 type Props = {
+  config: TEditorBodyConfig;
   editorRef: React.RefObject<EditorRefApi>;
   editorReady: boolean;
-  handleConnectionStatus: (status: boolean) => void;
-  handleEditorReady: (value: boolean) => void;
-  handleReadOnlyEditorReady: (value: boolean) => void;
-  page: IPage;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
+  handleConnectionStatus: Dispatch<SetStateAction<boolean>>;
+  handleEditorReady: Dispatch<SetStateAction<boolean>>;
+  handlers: TEditorBodyHandlers;
+  page: TPageInstance;
   sidePeekVisible: boolean;
+  webhookConnectionParams: TWebhookConnectionQueryParams;
+  workspaceSlug: string;
 };
 
 export const PageEditorBody: React.FC<Props> = observer((props) => {
   const {
+    config,
     editorRef,
     handleConnectionStatus,
     handleEditorReady,
-    handleReadOnlyEditorReady,
+    handlers,
     page,
-    readOnlyEditorRef,
     sidePeekVisible,
+    webhookConnectionParams,
+    workspaceSlug,
   } = props;
-  // router
-  const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { data: currentUser } = useUser();
   const { getWorkspaceBySlug } = useWorkspace();
-  const {
-    getUserDetails,
-    project: { getProjectMemberIds },
-  } = useMember();
   // derived values
-  const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "") : "";
-  const pageId = page?.id;
-  const pageTitle = page?.name ?? "";
-  const { isContentEditable, updateTitle } = page;
-  const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
-  const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
-  // use-mention
-  const { mentionHighlights, mentionSuggestions } = useMention({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
-    projectId: projectId?.toString() ?? "",
-    members: projectMemberDetails,
-    user: currentUser ?? undefined,
+  const { id: pageId, name: pageTitle, isContentEditable, updateTitle } = page;
+  const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
+  // issue-embed
+  const { issueEmbedProps } = useIssueEmbed({
+    fetchEmbedSuggestions: handlers.fetchEntity,
+    workspaceSlug,
+  });
+  // use editor mention
+  const { fetchMentions } = useEditorMention({
+    searchEntity: handlers.fetchEntity,
   });
   // editor flaggings
-  const { documentEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString());
+  const { documentEditor: disabledExtensions } = useEditorFlagging(workspaceSlug);
   // page filters
   const { fontSize, fontStyle, isFullWidth } = usePageFilters();
-  // issue-embed
-  const { issueEmbedProps } = useIssueEmbed(workspaceSlug?.toString() ?? "", projectId?.toString() ?? "");
-  // file size
-  const { maxFileSize } = useFileSize();
-
-  const displayConfig: TDisplayConfig = {
-    fontSize,
-    fontStyle,
-  };
+  // derived values
+  const displayConfig: TDisplayConfig = useMemo(
+    () => ({
+      fontSize,
+      fontStyle,
+    }),
+    [fontSize, fontStyle]
+  );
 
   const getAIMenu = useCallback(
     ({ isOpen, onClose }: TAIMenuProps) => (
@@ -103,20 +99,20 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
         editorRef={editorRef}
         isOpen={isOpen}
         onClose={onClose}
-        projectId={projectId?.toString() ?? ""}
+        workspaceId={workspaceId}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
       />
     ),
-    [editorRef, projectId, workspaceSlug]
+    [editorRef, workspaceId, workspaceSlug]
   );
 
   const handleServerConnect = useCallback(() => {
     handleConnectionStatus(false);
-  }, []);
+  }, [handleConnectionStatus]);
 
   const handleServerError = useCallback(() => {
     handleConnectionStatus(true);
-  }, []);
+  }, [handleConnectionStatus]);
 
   const serverHandler: TServerHandler = useMemo(
     () => ({
@@ -137,17 +133,13 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
       // Construct realtime config
       return {
         url: WS_LIVE_URL.toString(),
-        queryParams: {
-          workspaceSlug: workspaceSlug?.toString(),
-          projectId: projectId?.toString(),
-          documentType: "project_page",
-        },
+        queryParams: webhookConnectionParams,
       };
     } catch (error) {
       console.error("Error creating realtime config", error);
       return undefined;
     }
-  }, [projectId, workspaceSlug]);
+  }, [webhookConnectionParams]);
 
   const userConfig = useMemo(
     () => ({
@@ -155,7 +147,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
       name: currentUser?.display_name ?? "",
       color: generateRandomColor(currentUser?.id ?? ""),
     }),
-    [currentUser]
+    [currentUser?.display_name, currentUser?.id]
   );
 
   if (pageId === undefined || !realtimeConfig) return <PageContentLoader />;
@@ -169,91 +161,49 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
           "w-[5%]": isFullWidth,
         })}
       >
-        {!isFullWidth && (
-          <PageContentBrowser editorRef={(isContentEditable ? editorRef : readOnlyEditorRef)?.current} />
-        )}
+        {!isFullWidth && <PageContentBrowser editorRef={editorRef.current} />}
       </Row>
       <div
-        className={cn("h-full w-full pt-5 duration-200", {
+        className={cn("size-full pt-5 duration-200", {
           "md:w-[calc(100%-10rem)] xl:w-[calc(100%-28rem)]": !isFullWidth,
           "md:w-[90%]": isFullWidth,
         })}
       >
-        <div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
-          <div className="relative w-full flex-shrink-0 md:pl-5 px-4">
-            <PageEditorTitle
-              editorRef={editorRef}
-              title={pageTitle}
-              updateTitle={updateTitle}
-              readOnly={!isContentEditable}
-            />
-          </div>
-          {isContentEditable ? (
-            <CollaborativeDocumentEditorWithRef
-              id={pageId}
-              fileHandler={getEditorFileHandlers({
-                maxFileSize,
-                projectId: projectId?.toString() ?? "",
-                uploadFile: async (file) => {
-                  const { asset_id } = await fileService.uploadProjectAsset(
-                    workspaceSlug?.toString() ?? "",
-                    projectId?.toString() ?? "",
-                    {
-                      entity_identifier: pageId,
-                      entity_type: EFileAssetType.PAGE_DESCRIPTION,
-                    },
-                    file
-                  );
-                  return asset_id;
-                },
-                workspaceId,
-                workspaceSlug: workspaceSlug?.toString() ?? "",
-              })}
-              handleEditorReady={handleEditorReady}
-              ref={editorRef}
-              containerClassName="h-full p-0 pb-64"
-              displayConfig={displayConfig}
-              editorClassName="pl-10"
-              mentionHandler={{
-                highlights: mentionHighlights,
-                suggestions: mentionSuggestions,
-              }}
-              embedHandler={{
-                issue: issueEmbedProps,
-              }}
-              realtimeConfig={realtimeConfig}
-              serverHandler={serverHandler}
-              user={userConfig}
-              disabledExtensions={disabledExtensions}
-              aiHandler={{
-                menu: getAIMenu,
-              }}
-            />
-          ) : (
-            <CollaborativeDocumentReadOnlyEditorWithRef
-              id={pageId}
-              ref={readOnlyEditorRef}
-              disabledExtensions={disabledExtensions}
-              fileHandler={getReadOnlyEditorFileHandlers({
-                projectId: projectId?.toString() ?? "",
-                workspaceSlug: workspaceSlug?.toString() ?? "",
-              })}
-              handleEditorReady={handleReadOnlyEditorReady}
-              containerClassName="p-0 pb-64 border-none"
-              displayConfig={displayConfig}
-              editorClassName="pl-10"
-              mentionHandler={{
-                highlights: mentionHighlights,
-              }}
-              embedHandler={{
-                issue: {
-                  widgetCallback: issueEmbedProps.widgetCallback,
-                },
-              }}
-              realtimeConfig={realtimeConfig}
-              user={userConfig}
-            />
-          )}
+        <div className="size-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
+          <PageEditorTitle
+            editorRef={editorRef}
+            title={pageTitle}
+            updateTitle={updateTitle}
+            readOnly={!isContentEditable}
+          />
+          <CollaborativeDocumentEditorWithRef
+            editable={isContentEditable}
+            id={pageId}
+            fileHandler={config.fileHandler}
+            handleEditorReady={handleEditorReady}
+            ref={editorRef}
+            containerClassName="h-full p-0 pb-64"
+            displayConfig={displayConfig}
+            editorClassName="pl-10"
+            mentionHandler={{
+              searchCallback: async (query) => {
+                const res = await fetchMentions(query);
+                if (!res) throw new Error("Failed in fetching mentions");
+                return res;
+              },
+              renderComponent: (props) => <EditorMentionsRoot {...props} />,
+            }}
+            embedHandler={{
+              issue: issueEmbedProps,
+            }}
+            realtimeConfig={realtimeConfig}
+            serverHandler={serverHandler}
+            user={userConfig}
+            disabledExtensions={disabledExtensions}
+            aiHandler={{
+              menu: getAIMenu,
+            }}
+          />
         </div>
       </div>
       <div
diff --git a/web/core/components/pages/editor/header/extra-options.tsx b/web/core/components/pages/editor/header/extra-options.tsx
index f21959cd9..dfcfee53c 100644
--- a/web/core/components/pages/editor/header/extra-options.tsx
+++ b/web/core/components/pages/editor/header/extra-options.tsx
@@ -2,7 +2,7 @@
 
 import { observer } from "mobx-react";
 // editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // ui
 import { ArchiveIcon, FavoriteStar, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
 // components
@@ -12,18 +12,19 @@ import { PageInfoPopover, PageOptionsDropdown } from "@/components/pages";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 // hooks
 import useOnlineStatus from "@/hooks/use-online-status";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
-import { IPage } from "@/store/pages/page";
+import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
-  editorRef: React.RefObject<EditorRefApi>;
-  handleDuplicatePage: () => void;
-  page: IPage;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
+  editorRef: EditorRefApi;
+  page: TPageInstance;
+  storeType: EPageStoreType;
 };
 
 export const PageExtraOptions: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, page, readOnlyEditorRef } = props;
+  const { editorRef, page, storeType } = props;
   // derived values
   const {
     archived_at,
@@ -85,12 +86,8 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
           iconClassName="text-custom-text-100"
         />
       )}
-      <PageInfoPopover editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current} />
-      <PageOptionsDropdown
-        editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
-        handleDuplicatePage={handleDuplicatePage}
-        page={page}
-      />
+      <PageInfoPopover editorRef={editorRef} page={page} />
+      <PageOptionsDropdown editorRef={editorRef} page={page} storeType={storeType} />
     </div>
   );
 });
diff --git a/web/core/components/pages/editor/header/info-popover.tsx b/web/core/components/pages/editor/header/info-popover.tsx
index e295d8ea2..ea9b734da 100644
--- a/web/core/components/pages/editor/header/info-popover.tsx
+++ b/web/core/components/pages/editor/header/info-popover.tsx
@@ -1,26 +1,44 @@
 import { useState } from "react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 import { Info } from "lucide-react";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
+// plane ui
+import { Avatar } from "@plane/ui";
+// plane utils
+import { getFileURL, renderFormattedDate } from "@plane/utils";
 // helpers
 import { getReadTimeFromWordsCount } from "@/helpers/date-time.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+// store types
+import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
+  page: TPageInstance;
 };
 
 export const PageInfoPopover: React.FC<Props> = (props) => {
-  const { editorRef } = props;
+  const { editorRef, page } = props;
   // states
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   // refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // router
+  const { workspaceSlug } = useParams();
   // popper-js
   const { styles: infoPopoverStyles, attributes: infoPopoverAttributes } = usePopper(referenceElement, popperElement, {
     placement: "bottom-start",
   });
+  // store hooks
+  const { getUserDetails } = useMember();
+  // derived values
+  const editorInformation = page.updated_by ? getUserDetails(page.updated_by) : undefined;
+  const creatorInformation = page.created_by ? getUserDetails(page.created_by) : undefined;
 
   const documentsInfo = editorRef?.getDocumentInfo() || { words: 0, characters: 0, paragraphs: 0 };
 
@@ -60,17 +78,57 @@ export const PageInfoPopover: React.FC<Props> = (props) => {
       </button>
       {isPopoverOpen && (
         <div
-          className="z-10 w-64 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg grid grid-cols-2 gap-1.5"
+          className="z-10 w-64 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 p-2 shadow-custom-shadow-rg"
           ref={setPopperElement}
           style={infoPopoverStyles.popper}
           {...infoPopoverAttributes.popper}
         >
-          {documentInfoCards.map((card) => (
-            <div key={card.key} className="p-2 bg-custom-background-90 rounded">
-              <h6 className="text-base font-semibold">{card.info}</h6>
-              <p className="mt-1.5 text-sm text-custom-text-300">{card.title}</p>
+          <div className="grid grid-cols-2 gap-1.5">
+            {documentInfoCards.map((card) => (
+              <div key={card.key} className="p-2 bg-custom-background-90 rounded">
+                <h6 className="text-base font-semibold">{card.info}</h6>
+                <p className="mt-1.5 text-sm text-custom-text-300">{card.title}</p>
+              </div>
+            ))}
+          </div>
+          <div className="space-y-2 mt-3">
+            <div>
+              <p className="text-xs font-medium text-custom-text-300">Edited by</p>
+              <Link
+                href={`/${workspaceSlug?.toString()}/profile/${page.updated_by}`}
+                className="mt-2 flex items-center gap-1.5 text-sm font-medium"
+              >
+                <Avatar
+                  src={getFileURL(editorInformation?.avatar_url ?? "")}
+                  name={editorInformation?.display_name}
+                  className="flex-shrink-0"
+                  size="sm"
+                />
+                <span>
+                  {editorInformation?.display_name}{" "}
+                  <span className="text-custom-text-300">{renderFormattedDate(page.updated_at)}</span>
+                </span>
+              </Link>
             </div>
-          ))}
+            <div>
+              <p className="text-xs font-medium text-custom-text-300">Created by</p>
+              <Link
+                href={`/${workspaceSlug?.toString()}/profile/${page.created_by}`}
+                className="mt-2 flex items-center gap-1.5 text-sm font-medium"
+              >
+                <Avatar
+                  src={getFileURL(creatorInformation?.avatar_url ?? "")}
+                  name={creatorInformation?.display_name}
+                  className="flex-shrink-0"
+                  size="sm"
+                />
+                <span>
+                  {creatorInformation?.display_name}{" "}
+                  <span className="text-custom-text-300">{renderFormattedDate(page.created_at)}</span>
+                </span>
+              </Link>
+            </div>
+          </div>
         </div>
       )}
     </div>
diff --git a/web/core/components/pages/editor/header/mobile-root.tsx b/web/core/components/pages/editor/header/mobile-root.tsx
index ac831796c..22f25e254 100644
--- a/web/core/components/pages/editor/header/mobile-root.tsx
+++ b/web/core/components/pages/editor/header/mobile-root.tsx
@@ -1,64 +1,45 @@
 import { observer } from "mobx-react";
-import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
 import { PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
 // hooks
 import { usePageFilters } from "@/hooks/use-page-filters";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
-import { IPage } from "@/store/pages/page";
+import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
-  editorReady: boolean;
-  editorRef: React.RefObject<EditorRefApi>;
-  handleDuplicatePage: () => void;
-  page: IPage;
-  readOnlyEditorReady: boolean;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
+  editorRef: EditorRefApi;
+  page: TPageInstance;
   setSidePeekVisible: (sidePeekState: boolean) => void;
   sidePeekVisible: boolean;
+  storeType: EPageStoreType;
 };
 
 export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
-  const {
-    editorReady,
-    editorRef,
-    handleDuplicatePage,
-    page,
-    readOnlyEditorReady,
-    readOnlyEditorRef,
-    setSidePeekVisible,
-    sidePeekVisible,
-  } = props;
+  const { editorRef, page, setSidePeekVisible, sidePeekVisible, storeType } = props;
   // derived values
   const { isContentEditable } = page;
   // page filters
   const { isFullWidth } = usePageFilters();
 
-  if (!editorRef.current && !readOnlyEditorRef.current) return null;
-
   return (
     <>
       <Header variant={EHeaderVariant.SECONDARY}>
         <div className="flex-shrink-0 my-auto">
           <PageSummaryPopover
-            editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
+            editorRef={editorRef}
             isFullWidth={isFullWidth}
             sidePeekVisible={sidePeekVisible}
             setSidePeekVisible={setSidePeekVisible}
           />
         </div>
-        <PageExtraOptions
-          editorRef={editorRef}
-          handleDuplicatePage={handleDuplicatePage}
-          page={page}
-          readOnlyEditorRef={readOnlyEditorRef}
-        />
+        <PageExtraOptions editorRef={editorRef} page={page} storeType={storeType} />
       </Header>
       <Header variant={EHeaderVariant.TERNARY}>
-        {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
-          <PageToolbar editorRef={editorRef?.current} />
-        )}
+        {isContentEditable && editorRef && <PageToolbar editorRef={editorRef} />}
       </Header>
     </>
   );
diff --git a/web/core/components/pages/editor/header/options-dropdown.tsx b/web/core/components/pages/editor/header/options-dropdown.tsx
index ff0987a9d..38f0a4e23 100644
--- a/web/core/components/pages/editor/header/options-dropdown.tsx
+++ b/web/core/components/pages/editor/header/options-dropdown.tsx
@@ -1,153 +1,117 @@
 "use client";
 
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
-import { useParams, useRouter } from "next/navigation";
-import {
-  ArchiveRestoreIcon,
-  ArrowUpToLine,
-  Clipboard,
-  Copy,
-  History,
-  Link,
-  Lock,
-  LockOpen,
-  LucideIcon,
-} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { ArrowUpToLine, Clipboard, History } from "lucide-react";
 // document editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // ui
-import { ArchiveIcon, CustomMenu, type ISvgIcons, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+import { TContextMenuItem, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
 // components
-import { ExportPageModal } from "@/components/pages";
+import { ExportPageModal, PageActions, TPageActions } from "@/components/pages";
 // helpers
-import { copyTextToClipboard, copyUrlToClipboard } from "@/helpers/string.helper";
+import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useCollaborativePageActions } from "@/hooks/use-collaborative-page-actions";
 import { usePageFilters } from "@/hooks/use-page-filters";
 import { useQueryParams } from "@/hooks/use-query-params";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
-import { IPage } from "@/store/pages/page";
+import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
-  handleDuplicatePage: () => void;
-  page: IPage;
+  editorRef: EditorRefApi | null;
+  page: TPageInstance;
+  storeType: EPageStoreType;
 };
 
 export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
-  const { editorRef, handleDuplicatePage, page } = props;
+  const { editorRef, page, storeType } = props;
+  // states
+  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
   // router
   const router = useRouter();
   // store values
-  const {
-    name,
-    archived_at,
-    is_locked,
-    id,
-    canCurrentUserArchivePage,
-    canCurrentUserDuplicatePage,
-    canCurrentUserLockPage,
-  } = page;
-  // states
-  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
-  // store hooks
-  const { workspaceSlug, projectId } = useParams();
+  const { name, isContentEditable } = page;
   // page filters
-  const { isFullWidth, handleFullWidth } = usePageFilters();
+  const { isFullWidth, handleFullWidth, isStickyToolbarEnabled, handleStickyToolbar } = usePageFilters();
   // update query params
   const { updateQueryParams } = useQueryParams();
-  // collaborative actions
-  const { executeCollaborativeAction } = useCollaborativePageActions(editorRef, page);
-
   // menu items list
-  const MENU_ITEMS: {
-    key: string;
-    action: () => void;
-    label: string;
-    icon: LucideIcon | React.FC<ISvgIcons>;
-    shouldRender: boolean;
-  }[] = [
-    {
-      key: "copy-markdown",
-      action: () => {
-        if (!editorRef) return;
-        copyTextToClipboard(editorRef.getMarkDown()).then(() =>
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: "Markdown copied to clipboard.",
-          })
-        );
+  const EXTRA_MENU_OPTIONS: (TContextMenuItem & { key: TPageActions })[] = useMemo(
+    () => [
+      {
+        key: "full-screen",
+        action: () => handleFullWidth(!isFullWidth),
+        customContent: (
+          <>
+            Full width
+            <ToggleSwitch value={isFullWidth} onChange={() => {}} />
+          </>
+        ),
+        className: "flex items-center justify-between gap-2",
       },
-      label: "Copy markdown",
-      icon: Clipboard,
-      shouldRender: true,
-    },
-    {
-      key: "copy-page-link",
-      action: () => {
-        const pageLink = projectId
-          ? `${workspaceSlug?.toString()}/projects/${projectId?.toString()}/pages/${id}`
-          : `${workspaceSlug?.toString()}/pages/${id}`;
-        copyUrlToClipboard(pageLink).then(() =>
-          setToast({
-            type: TOAST_TYPE.SUCCESS,
-            title: "Success!",
-            message: "Page link copied to clipboard.",
-          })
-        );
+      {
+        key: "sticky-toolbar",
+        action: () => handleStickyToolbar(!isStickyToolbarEnabled),
+        customContent: (
+          <>
+            Sticky toolbar
+            <ToggleSwitch value={isStickyToolbarEnabled} onChange={() => {}} />
+          </>
+        ),
+        className: "flex items-center justify-between gap-2",
+        shouldRender: isContentEditable,
       },
-      label: "Copy page link",
-      icon: Link,
-      shouldRender: true,
-    },
-    {
-      key: "make-a-copy",
-      action: handleDuplicatePage,
-      label: "Make a copy",
-      icon: Copy,
-      shouldRender: canCurrentUserDuplicatePage,
-    },
-    {
-      key: "lock-unlock-page",
-      action: is_locked
-        ? () => executeCollaborativeAction({ type: "sendMessageToServer", message: "unlock" })
-        : () => executeCollaborativeAction({ type: "sendMessageToServer", message: "lock" }),
-      label: is_locked ? "Unlock page" : "Lock page",
-      icon: is_locked ? LockOpen : Lock,
-      shouldRender: canCurrentUserLockPage,
-    },
-    {
-      key: "archive-restore-page",
-      action: archived_at
-        ? () => executeCollaborativeAction({ type: "sendMessageToServer", message: "unarchive" })
-        : () => executeCollaborativeAction({ type: "sendMessageToServer", message: "archive" }),
-      label: archived_at ? "Restore page" : "Archive page",
-      icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
-      shouldRender: canCurrentUserArchivePage,
-    },
-    {
-      key: "version-history",
-      action: () => {
-        // add query param, version=current to the route
-        const updatedRoute = updateQueryParams({
-          paramsToAdd: { version: "current" },
-        });
-        router.push(updatedRoute);
+      {
+        key: "copy-markdown",
+        action: () => {
+          if (!editorRef) return;
+          copyTextToClipboard(editorRef.getMarkDown()).then(() =>
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Markdown copied to clipboard.",
+            })
+          );
+        },
+        title: "Copy markdown",
+        icon: Clipboard,
+        shouldRender: true,
       },
-      label: "Version history",
-      icon: History,
-      shouldRender: true,
-    },
-    {
-      key: "export",
-      action: () => setIsExportModalOpen(true),
-      label: "Export",
-      icon: ArrowUpToLine,
-      shouldRender: true,
-    },
-  ];
+      {
+        key: "version-history",
+        action: () => {
+          // add query param, version=current to the route
+          const updatedRoute = updateQueryParams({
+            paramsToAdd: { version: "current" },
+          });
+          router.push(updatedRoute);
+        },
+        title: "Version history",
+        icon: History,
+        shouldRender: true,
+      },
+      {
+        key: "export",
+        action: () => setIsExportModalOpen(true),
+        title: "Export",
+        icon: ArrowUpToLine,
+        shouldRender: true,
+      },
+    ],
+    [
+      editorRef,
+      handleFullWidth,
+      handleStickyToolbar,
+      isContentEditable,
+      isFullWidth,
+      isStickyToolbarEnabled,
+      router,
+      updateQueryParams,
+    ]
+  );
 
   return (
     <>
@@ -157,24 +121,26 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
         onClose={() => setIsExportModalOpen(false)}
         pageTitle={name ?? ""}
       />
-      <CustomMenu maxHeight="lg" placement="bottom-start" verticalEllipsis closeOnSelect>
-        <CustomMenu.MenuItem
-          className="hidden md:flex w-full items-center justify-between gap-2"
-          onClick={() => handleFullWidth(!isFullWidth)}
-        >
-          Full width
-          <ToggleSwitch value={isFullWidth} onChange={() => {}} />
-        </CustomMenu.MenuItem>
-        {MENU_ITEMS.map((item) => {
-          if (!item.shouldRender) return null;
-          return (
-            <CustomMenu.MenuItem key={item.key} onClick={item.action} className="flex items-center gap-2">
-              <item.icon className="h-3 w-3" />
-              {item.label}
-            </CustomMenu.MenuItem>
-          );
-        })}
-      </CustomMenu>
+      <PageActions
+        editorRef={editorRef}
+        extraOptions={EXTRA_MENU_OPTIONS}
+        optionsOrder={[
+          "full-screen",
+          "sticky-toolbar",
+          "copy-link",
+          "make-a-copy",
+          "move",
+          "toggle-lock",
+          "toggle-access",
+          "archive-restore",
+          "delete",
+          "version-history",
+          "copy-markdown",
+          "export",
+        ]}
+        page={page}
+        storeType={storeType}
+      />
     </>
   );
 });
diff --git a/web/core/components/pages/editor/header/root.tsx b/web/core/components/pages/editor/header/root.tsx
index 9640f4e43..552ba6009 100644
--- a/web/core/components/pages/editor/header/root.tsx
+++ b/web/core/components/pages/editor/header/root.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
 import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageToolbar } from "@/components/pages";
@@ -7,43 +7,36 @@ import { PageEditorMobileHeaderRoot, PageExtraOptions, PageSummaryPopover, PageT
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { usePageFilters } from "@/hooks/use-page-filters";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
-import { IPage } from "@/store/pages/page";
+import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
   editorReady: boolean;
   editorRef: React.RefObject<EditorRefApi>;
-  handleDuplicatePage: () => void;
-  page: IPage;
-  readOnlyEditorReady: boolean;
-  readOnlyEditorRef: React.RefObject<EditorReadOnlyRefApi>;
+  page: TPageInstance;
   setSidePeekVisible: (sidePeekState: boolean) => void;
   sidePeekVisible: boolean;
+  storeType: EPageStoreType;
 };
 
 export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
-  const {
-    editorReady,
-    editorRef,
-    handleDuplicatePage,
-    page,
-    readOnlyEditorReady,
-    readOnlyEditorRef,
-    setSidePeekVisible,
-    sidePeekVisible,
-  } = props;
+  const { editorReady, editorRef, page, setSidePeekVisible, sidePeekVisible, storeType } = props;
   // derived values
   const { isContentEditable } = page;
   // page filters
-  const { isFullWidth } = usePageFilters();
+  const { isFullWidth, isStickyToolbarEnabled } = usePageFilters();
+  // derived values
+  const resolvedEditorRef = editorRef.current;
 
-  if (!editorRef.current && !readOnlyEditorRef.current) return null;
+  if (!resolvedEditorRef) return null;
 
   return (
     <>
       <Header variant={EHeaderVariant.SECONDARY} showOnMobile={false}>
         <Header.LeftItem className="gap-0 w-full">
-          {(editorReady || readOnlyEditorReady) && (
+          {editorReady && (
             <div
               className={cn("flex-shrink-0 my-auto", {
                 "w-40 lg:w-56": !isFullWidth,
@@ -51,34 +44,26 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
               })}
             >
               <PageSummaryPopover
-                editorRef={isContentEditable ? editorRef.current : readOnlyEditorRef.current}
+                editorRef={editorRef.current}
                 isFullWidth={isFullWidth}
                 sidePeekVisible={sidePeekVisible}
                 setSidePeekVisible={setSidePeekVisible}
               />
             </div>
           )}
-          {(editorReady || readOnlyEditorReady) && isContentEditable && editorRef.current && (
+          {isStickyToolbarEnabled && editorReady && isContentEditable && editorRef.current && (
             <PageToolbar editorRef={editorRef?.current} />
           )}
         </Header.LeftItem>
-        <PageExtraOptions
-          editorRef={editorRef}
-          handleDuplicatePage={handleDuplicatePage}
-          page={page}
-          readOnlyEditorRef={readOnlyEditorRef}
-        />
+        <PageExtraOptions editorRef={resolvedEditorRef} page={page} storeType={storeType} />
       </Header>
       <div className="md:hidden">
         <PageEditorMobileHeaderRoot
-          editorRef={editorRef}
-          readOnlyEditorRef={readOnlyEditorRef}
-          editorReady={editorReady}
-          readOnlyEditorReady={readOnlyEditorReady}
-          handleDuplicatePage={handleDuplicatePage}
+          editorRef={resolvedEditorRef}
           page={page}
           sidePeekVisible={sidePeekVisible}
           setSidePeekVisible={setSidePeekVisible}
+          storeType={storeType}
         />
       </div>
     </>
diff --git a/web/core/components/pages/editor/page-root.tsx b/web/core/components/pages/editor/page-root.tsx
index ff1f3519e..c80a52d43 100644
--- a/web/core/components/pages/editor/page-root.tsx
+++ b/web/core/components/pages/editor/page-root.tsx
@@ -2,83 +2,72 @@ import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 // editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // types
-import { TPage } from "@plane/types";
-// ui
-import { setToast, TOAST_TYPE } from "@plane/ui";
+import { TDocumentPayload, TPage, TPageVersion, TWebhookConnectionQueryParams } from "@plane/types";
 // components
-import { PageEditorHeaderRoot, PageEditorBody, PageVersionsOverlay, PagesVersionEditor } from "@/components/pages";
+import {
+  PageEditorHeaderRoot,
+  PageEditorBody,
+  PageVersionsOverlay,
+  PagesVersionEditor,
+  TEditorBodyHandlers,
+  TEditorBodyConfig,
+} from "@/components/pages";
 // hooks
-import { useProjectPages } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageFallback } from "@/hooks/use-page-fallback";
 import { useQueryParams } from "@/hooks/use-query-params";
-// services
-import { ProjectPageService, ProjectPageVersionService } from "@/services/page";
-const projectPageService = new ProjectPageService();
-const projectPageVersionService = new ProjectPageVersionService();
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
 // store
-import { IPage } from "@/store/pages/page";
+import { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageRootHandlers = {
+  create: (payload: Partial<TPage>) => Promise<Partial<TPage> | undefined>;
+  fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
+  fetchDescriptionBinary: () => Promise<any>;
+  fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
+  getRedirectionLink: (pageId: string) => string;
+  updateDescription: (document: TDocumentPayload) => Promise<void>;
+} & TEditorBodyHandlers;
+
+export type TPageRootConfig = TEditorBodyConfig;
 
 type TPageRootProps = {
-  page: IPage;
-  projectId: string;
+  config: TPageRootConfig;
+  handlers: TPageRootHandlers;
+  page: TPageInstance;
+  storeType: EPageStoreType;
+  webhookConnectionParams: TWebhookConnectionQueryParams;
   workspaceSlug: string;
 };
 
 export const PageRoot = observer((props: TPageRootProps) => {
-  const { projectId, workspaceSlug, page } = props;
+  const { config, handlers, page, storeType, webhookConnectionParams, workspaceSlug } = props;
   // states
   const [editorReady, setEditorReady] = useState(false);
   const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
-  const [readOnlyEditorReady, setReadOnlyEditorReady] = useState(false);
   const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768);
   const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
-  const readOnlyEditorRef = useRef<EditorReadOnlyRefApi>(null);
   // router
   const router = useAppRouter();
   // search params
   const searchParams = useSearchParams();
-  // store hooks
-  const { createPage } = useProjectPages();
   // derived values
-  const { access, description_html, name, isContentEditable, updateDescription } = page;
+  const { isContentEditable } = page;
   // page fallback
   usePageFallback({
     editorRef,
-    fetchPageDescription: async () => {
-      if (!page.id) return;
-      return await projectPageService.fetchDescriptionBinary(workspaceSlug, projectId, page.id);
-    },
+    fetchPageDescription: handlers.fetchDescriptionBinary,
     hasConnectionFailed,
-    updatePageDescription: async (data) => await updateDescription(data),
+    updatePageDescription: handlers.updateDescription,
   });
   // update query params
   const { updateQueryParams } = useQueryParams();
 
-  const handleCreatePage = async (payload: Partial<TPage>) => await createPage(payload);
-
-  const handleDuplicatePage = async () => {
-    const formData: Partial<TPage> = {
-      name: "Copy of " + name,
-      description_html: editorRef.current?.getDocument().html ?? description_html ?? "<p></p>",
-      access,
-    };
-
-    await handleCreatePage(formData)
-      .then((res) => router.push(`/${workspaceSlug}/projects/${projectId}/pages/${res?.id}`))
-      .catch(() =>
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Page could not be duplicated. Please try again later.",
-        })
-      );
-  };
-
   const version = searchParams.get("version");
   useEffect(() => {
     if (!version) {
@@ -99,9 +88,7 @@ export const PageRoot = observer((props: TPageRootProps) => {
     editorRef.current?.clearEditor();
     editorRef.current?.setEditorValue(descriptionHTML);
   };
-  const currentVersionDescription = isContentEditable
-    ? editorRef.current?.getDocument().html
-    : readOnlyEditorRef.current?.getDocument().html;
+  const currentVersionDescription = editorRef.current?.getDocument().html;
 
   return (
     <>
@@ -109,23 +96,8 @@ export const PageRoot = observer((props: TPageRootProps) => {
         activeVersion={version}
         currentVersionDescription={currentVersionDescription ?? null}
         editorComponent={PagesVersionEditor}
-        fetchAllVersions={async (pageId) => {
-          if (!workspaceSlug || !projectId) return;
-          return await projectPageVersionService.fetchAllVersions(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            pageId
-          );
-        }}
-        fetchVersionDetails={async (pageId, versionId) => {
-          if (!workspaceSlug || !projectId) return;
-          return await projectPageVersionService.fetchVersionById(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            pageId,
-            versionId
-          );
-        }}
+        fetchAllVersions={handlers.fetchAllVersions}
+        fetchVersionDetails={handlers.fetchVersionDetails}
         handleRestore={handleRestoreVersion}
         isOpen={isVersionsOverlayOpen}
         onClose={handleCloseVersionsOverlay}
@@ -135,22 +107,22 @@ export const PageRoot = observer((props: TPageRootProps) => {
       <PageEditorHeaderRoot
         editorReady={editorReady}
         editorRef={editorRef}
-        handleDuplicatePage={handleDuplicatePage}
         page={page}
-        readOnlyEditorReady={readOnlyEditorReady}
-        readOnlyEditorRef={readOnlyEditorRef}
         setSidePeekVisible={(state) => setSidePeekVisible(state)}
         sidePeekVisible={sidePeekVisible}
+        storeType={storeType}
       />
       <PageEditorBody
+        config={config}
         editorReady={editorReady}
         editorRef={editorRef}
-        handleConnectionStatus={(status) => setHasConnectionFailed(status)}
-        handleEditorReady={(val) => setEditorReady(val)}
-        handleReadOnlyEditorReady={() => setReadOnlyEditorReady(true)}
+        handleConnectionStatus={setHasConnectionFailed}
+        handleEditorReady={setEditorReady}
+        handlers={handlers}
         page={page}
-        readOnlyEditorRef={readOnlyEditorRef}
         sidePeekVisible={sidePeekVisible}
+        webhookConnectionParams={webhookConnectionParams}
+        workspaceSlug={workspaceSlug}
       />
     </>
   );
diff --git a/web/core/components/pages/editor/summary/content-browser.tsx b/web/core/components/pages/editor/summary/content-browser.tsx
index 669d2e978..16d818aae 100644
--- a/web/core/components/pages/editor/summary/content-browser.tsx
+++ b/web/core/components/pages/editor/summary/content-browser.tsx
@@ -1,11 +1,11 @@
 import { useState, useEffect } from "react";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi, IMarking } from "@plane/editor";
+import { EditorRefApi, IMarking } from "@plane/editor";
 // components
 import { OutlineHeading1, OutlineHeading2, OutlineHeading3 } from "./heading-components";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
   setSidePeekVisible?: (sidePeekState: boolean) => void;
 };
 
diff --git a/web/core/components/pages/editor/summary/popover.tsx b/web/core/components/pages/editor/summary/popover.tsx
index 5d14234f0..9acc4a7cc 100644
--- a/web/core/components/pages/editor/summary/popover.tsx
+++ b/web/core/components/pages/editor/summary/popover.tsx
@@ -2,14 +2,14 @@ import { useState } from "react";
 import { usePopper } from "react-popper";
 import { List } from "lucide-react";
 // document editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // components
 import { PageContentBrowser } from "./content-browser";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
   isFullWidth: boolean;
   sidePeekVisible: boolean;
   setSidePeekVisible: (sidePeekState: boolean) => void;
diff --git a/web/core/components/pages/editor/title.tsx b/web/core/components/pages/editor/title.tsx
index 82f169660..9e85c33d3 100644
--- a/web/core/components/pages/editor/title.tsx
+++ b/web/core/components/pages/editor/title.tsx
@@ -8,13 +8,14 @@ import { EditorRefApi } from "@plane/editor";
 import { TextArea } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
+import { getPageName } from "@/helpers/page.helper";
 // hooks
 import { usePageFilters } from "@/hooks/use-page-filters";
 
 type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   readOnly: boolean;
-  title: string;
+  title: string | undefined;
   updateTitle: (title: string) => void;
 };
 
@@ -31,9 +32,19 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
   });
 
   return (
-    <>
+    <div className="relative w-full flex-shrink-0 md:pl-5 px-4">
       {readOnly ? (
-        <h6 className={cn(titleClassName, "break-words")}>{title}</h6>
+        <h6
+          className={cn(
+            titleClassName,
+            {
+              "text-custom-text-400": !title,
+            },
+            "break-words pb-1.5"
+          )}
+        >
+          {getPageName(title)}
+        </h6>
       ) : (
         <>
           <TextArea
@@ -62,15 +73,15 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
           >
             <span
               className={cn({
-                "text-red-500": title.length > 255,
+                "text-red-500": title && title.length > 255,
               })}
             >
-              {title.length}
+              {title?.length}
             </span>
             /255
           </div>
         </>
       )}
-    </>
+    </div>
   );
 });
diff --git a/web/core/components/pages/header/root.tsx b/web/core/components/pages/header/root.tsx
index 75b91a877..a50fa9529 100644
--- a/web/core/components/pages/header/root.tsx
+++ b/web/core/components/pages/header/root.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TPageFilterProps, TPageNavigationTabs } from "@plane/types";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
@@ -15,18 +16,22 @@ import {
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
-import { useMember, useProjectPages } from "@/hooks/store";
+import { useMember } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 
 type Props = {
   pageType: TPageNavigationTabs;
   projectId: string;
+  storeType: EPageStoreType;
   workspaceSlug: string;
 };
 
 export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
-  const { pageType, projectId, workspaceSlug } = props;
+  const { pageType, projectId, storeType, workspaceSlug } = props;
+  const { t } = useTranslation();
   // store hooks
-  const { filters, updateFilters, clearAllFilters } = useProjectPages();
+  const { filters, updateFilters, clearAllFilters } = usePageStore(storeType);
   const {
     workspace: { workspaceMemberIds },
   } = useMember();
@@ -69,7 +74,7 @@ export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
           />
           <FiltersDropdown
             icon={<ListFilter className="h-3 w-3" />}
-            title="Filters"
+            title={t("common.filters")}
             placement="bottom-end"
             isFiltersApplied={isFiltersApplied}
           >
diff --git a/web/core/components/pages/list/applied-filters/root.tsx b/web/core/components/pages/list/applied-filters/root.tsx
index 48e79f958..df8063b28 100644
--- a/web/core/components/pages/list/applied-filters/root.tsx
+++ b/web/core/components/pages/list/applied-filters/root.tsx
@@ -1,4 +1,5 @@
 import { X } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TPageFilterProps } from "@plane/types";
 // components
 import { Tag } from "@plane/ui";
@@ -19,6 +20,7 @@ const DATE_FILTERS = ["created_at"];
 
 export const PageAppliedFiltersList: React.FC<Props> = (props) => {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+  const { t } = useTranslation();
 
   if (!appliedFilters) return null;
   if (Object.keys(appliedFilters).length === 0) return null;
@@ -67,7 +69,7 @@ export const PageAppliedFiltersList: React.FC<Props> = (props) => {
       {isEditingAllowed && (
         <button type="button" onClick={handleClearAllFilters}>
           <Tag>
-            Clear all
+            {t("common.clear_all")}
             <X size={12} strokeWidth={2} />
           </Tag>
         </button>
diff --git a/web/core/components/pages/list/block-item-action.tsx b/web/core/components/pages/list/block-item-action.tsx
index 740b44c81..58e3a8e2a 100644
--- a/web/core/components/pages/list/block-item-action.tsx
+++ b/web/core/components/pages/list/block-item-action.tsx
@@ -4,60 +4,38 @@ import React, { FC } from "react";
 import { observer } from "mobx-react";
 import { Earth, Info, Lock, Minus } from "lucide-react";
 // ui
-import { Avatar, FavoriteStar, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+import { Avatar, FavoriteStar, Tooltip } from "@plane/ui";
 // components
-import { PageQuickActions } from "@/components/pages/dropdowns";
+import { PageActions } from "@/components/pages";
 // helpers
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
-import { useMember, usePage } from "@/hooks/store";
+import { useMember } from "@/hooks/store";
+import { usePageOperations } from "@/hooks/use-page-operations";
+// plane web hooks
+import { EPageStoreType } from "@/plane-web/hooks/store";
+// store
+import { TPageInstance } from "@/store/pages/base-page";
 
 type Props = {
-  workspaceSlug: string;
-  projectId: string;
-  pageId: string;
+  page: TPageInstance;
   parentRef: React.RefObject<HTMLElement>;
+  storeType: EPageStoreType;
 };
 
 export const BlockItemAction: FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, pageId, parentRef } = props;
+  const { page, parentRef, storeType } = props;
   // store hooks
-  const page = usePage(pageId);
   const { getUserDetails } = useMember();
+  // page operations
+  const { pageOperations } = usePageOperations({
+    page,
+  });
   // derived values
-  const {
-    access,
-    created_at,
-    is_favorite,
-    owned_by,
-    canCurrentUserFavoritePage,
-    addToFavorites,
-    removePageFromFavorites,
-  } = page;
+  const { access, created_at, is_favorite, owned_by, canCurrentUserFavoritePage } = page;
   const ownerDetails = owned_by ? getUserDetails(owned_by) : undefined;
 
-  // handlers
-  const handleFavorites = () => {
-    if (is_favorite) {
-      removePageFromFavorites().then(() =>
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Page removed from favorites.",
-        })
-      );
-    } else {
-      addToFavorites().then(() =>
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Page added to favorites.",
-        })
-      );
-    }
-  };
-
   return (
     <>
       {/* page details */}
@@ -87,17 +65,26 @@ export const BlockItemAction: FC<Props> = observer((props) => {
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            handleFavorites();
+            pageOperations.toggleFavorite();
           }}
           selected={is_favorite}
         />
       )}
 
       {/* quick actions dropdown */}
-      <PageQuickActions
-        parentRef={parentRef}
+      <PageActions
+        optionsOrder={[
+          "open-in-new-tab",
+          "copy-link",
+          "make-a-copy",
+          "toggle-lock",
+          "toggle-access",
+          "archive-restore",
+          "delete",
+        ]}
         page={page}
-        pageLink={`${workspaceSlug}/projects/${projectId}/pages/${pageId}`}
+        parentRef={parentRef}
+        storeType={storeType}
       />
     </>
   );
diff --git a/web/core/components/pages/list/block.tsx b/web/core/components/pages/list/block.tsx
index abb373a64..cd3ddbdae 100644
--- a/web/core/components/pages/list/block.tsx
+++ b/web/core/components/pages/list/block.tsx
@@ -10,22 +10,29 @@ import { BlockItemAction } from "@/components/pages/list";
 // helpers
 import { getPageName } from "@/helpers/page.helper";
 // hooks
-import { usePage } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// plane web hooks
+import { EPageStoreType, usePage } from "@/plane-web/hooks/store";
 
 type TPageListBlock = {
-  workspaceSlug: string;
-  projectId: string;
   pageId: string;
+  storeType: EPageStoreType;
 };
 
 export const PageListBlock: FC<TPageListBlock> = observer((props) => {
-  const { workspaceSlug, projectId, pageId } = props;
+  const { pageId, storeType } = props;
   // refs
   const parentRef = useRef(null);
   // hooks
-  const { name, logo_props } = usePage(pageId);
+  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
@@ -39,10 +46,8 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
         </>
       }
       title={getPageName(name)}
-      itemLink={`/${workspaceSlug}/projects/${projectId}/pages/${pageId}`}
-      actionableItems={
-        <BlockItemAction workspaceSlug={workspaceSlug} projectId={projectId} pageId={pageId} parentRef={parentRef} />
-      }
+      itemLink={getRedirectionLink()}
+      actionableItems={<BlockItemAction page={page} parentRef={parentRef} storeType={storeType} />}
       isMobile={isMobile}
       parentRef={parentRef}
     />
diff --git a/web/core/components/pages/list/order-by.tsx b/web/core/components/pages/list/order-by.tsx
index ee1a9b978..5385ee5ae 100644
--- a/web/core/components/pages/list/order-by.tsx
+++ b/web/core/components/pages/list/order-by.tsx
@@ -5,8 +5,6 @@ import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "luci
 import { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types";
 // ui
 import { CustomMenu, getButtonStyling } from "@plane/ui";
-// constants
-import { PAGE_SORTING_KEY_OPTIONS } from "@/constants/page";
 // helpers
 import { cn } from "@/helpers/common.helper";
 
@@ -16,6 +14,15 @@ type Props = {
   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 const PageOrderByDropdown: React.FC<Props> = (props) => {
   const { onChange, sortBy, sortKey } = props;
 
diff --git a/web/core/components/pages/list/root.tsx b/web/core/components/pages/list/root.tsx
index 049f37e94..db8196b29 100644
--- a/web/core/components/pages/list/root.tsx
+++ b/web/core/components/pages/list/root.tsx
@@ -4,21 +4,20 @@ import { observer } from "mobx-react";
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { ListLayout } from "@/components/core/list";
-// hooks
-import { useProjectPages } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 // components
 import { PageListBlock } from "./";
 
 type TPagesListRoot = {
   pageType: TPageNavigationTabs;
-  projectId: string;
-  workspaceSlug: string;
+  storeType: EPageStoreType;
 };
 
 export const PagesListRoot: FC<TPagesListRoot> = observer((props) => {
-  const { pageType, projectId, workspaceSlug } = props;
+  const { pageType, storeType } = props;
   // store hooks
-  const { getCurrentProjectFilteredPageIds } = useProjectPages();
+  const { getCurrentProjectFilteredPageIds } = usePageStore(storeType);
   // derived values
   const filteredPageIds = getCurrentProjectFilteredPageIds(pageType);
 
@@ -26,7 +25,7 @@ export const PagesListRoot: FC<TPagesListRoot> = observer((props) => {
   return (
     <ListLayout>
       {filteredPageIds.map((pageId) => (
-        <PageListBlock key={pageId} workspaceSlug={workspaceSlug} projectId={projectId} pageId={pageId} />
+        <PageListBlock key={pageId} pageId={pageId} storeType={storeType} />
       ))}
     </ListLayout>
   );
diff --git a/web/core/components/pages/modals/create-page-modal.tsx b/web/core/components/pages/modals/create-page-modal.tsx
index dad404557..4be65bda0 100644
--- a/web/core/components/pages/modals/create-page-modal.tsx
+++ b/web/core/components/pages/modals/create-page-modal.tsx
@@ -1,17 +1,16 @@
 import { FC, useEffect, useState } from "react";
-
-// types
+// constants
+import { EPageAccess, PAGE_CREATED } from "@plane/constants";
 import { TPage } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { PageForm } from "@/components/pages";
-// constants
-import { PAGE_CREATED } from "@/constants/event-tracker";
-import { EPageAccess } from "@/constants/page";
 // hooks
-import { useProjectPages, useEventTracker } from "@/hooks/store";
+import { useEventTracker } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 
 type Props = {
   workspaceSlug: string;
@@ -20,10 +19,19 @@ type Props = {
   pageAccess?: EPageAccess;
   handleModalClose: () => void;
   redirectionEnabled?: boolean;
+  storeType: EPageStoreType;
 };
 
 export const CreatePageModal: FC<Props> = (props) => {
-  const { workspaceSlug, projectId, isModalOpen, pageAccess, handleModalClose, redirectionEnabled = false } = props;
+  const {
+    workspaceSlug,
+    projectId,
+    isModalOpen,
+    pageAccess,
+    handleModalClose,
+    redirectionEnabled = false,
+    storeType,
+  } = props;
   // states
   const [pageFormData, setPageFormData] = useState<Partial<TPage>>({
     id: undefined,
@@ -33,7 +41,7 @@ export const CreatePageModal: FC<Props> = (props) => {
   // router
   const router = useAppRouter();
   // store hooks
-  const { createPage } = useProjectPages();
+  const { createPage } = usePageStore(storeType);
   const { capturePageEvent } = useEventTracker();
   const handlePageFormData = <T extends keyof TPage>(key: T, value: TPage[T]) =>
     setPageFormData((prev) => ({ ...prev, [key]: value }));
diff --git a/web/core/components/pages/modals/delete-page-modal.tsx b/web/core/components/pages/modals/delete-page-modal.tsx
index 61d3fb85e..caeac3926 100644
--- a/web/core/components/pages/modals/delete-page-modal.tsx
+++ b/web/core/components/pages/modals/delete-page-modal.tsx
@@ -3,30 +3,33 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // ui
+import { PAGE_DELETED } from "@plane/constants";
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PAGE_DELETED } from "@/constants/event-tracker";
 // hooks
-import { useEventTracker, usePage, useProjectPages } from "@/hooks/store";
+import { useEventTracker } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
+// store
+import { TPageInstance } from "@/store/pages/base-page";
 
 type TConfirmPageDeletionProps = {
   isOpen: boolean;
   onClose: () => void;
-  pageId: string;
+  page: TPageInstance;
+  storeType: EPageStoreType;
 };
 
 export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((props) => {
-  const { pageId, isOpen, onClose } = props;
+  const { isOpen, onClose, page, storeType } = props;
   // states
   const [isDeleting, setIsDeleting] = useState(false);
   // store hooks
-  const { removePage } = useProjectPages();
+  const { removePage } = usePageStore(storeType);
   const { capturePageEvent } = useEventTracker();
-  const page = usePage(pageId);
-
-  if (!page) return null;
-
-  const { name } = page;
+  if (!page || !page.id) return null;
+  // derived values
+  const { id: pageId, name } = page;
 
   const handleClose = () => {
     setIsDeleting(false);
diff --git a/web/core/components/pages/modals/export-page-modal.tsx b/web/core/components/pages/modals/export-page-modal.tsx
index cf4f0a0f4..67e2f629d 100644
--- a/web/core/components/pages/modals/export-page-modal.tsx
+++ b/web/core/components/pages/modals/export-page-modal.tsx
@@ -4,19 +4,16 @@ import { useState } from "react";
 import { PageProps, pdf } from "@react-pdf/renderer";
 import { Controller, useForm } from "react-hook-form";
 // plane editor
-import { EditorReadOnlyRefApi, EditorRefApi } from "@plane/editor";
+import { EditorRefApi } from "@plane/editor";
 // plane ui
 import { Button, CustomSelect, EModalPosition, EModalWidth, ModalCore, setToast, TOAST_TYPE } from "@plane/ui";
 // components
 import { PDFDocument } from "@/components/editor";
-// helpers
-import {
-  replaceCustomComponentsFromHTMLContent,
-  replaceCustomComponentsFromMarkdownContent,
-} from "@/helpers/editor.helper";
+// hooks
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 
 type Props = {
-  editorRef: EditorRefApi | EditorReadOnlyRefApi | null;
+  editorRef: EditorRefApi | null;
   isOpen: boolean;
   onClose: () => void;
   pageTitle: string;
@@ -104,6 +101,9 @@ export const ExportPageModal: React.FC<Props> = (props) => {
   const { control, reset, watch } = useForm<TFormValues>({
     defaultValues,
   });
+  // parse editor content
+  const { replaceCustomComponentsFromHTMLContent, replaceCustomComponentsFromMarkdownContent } =
+    useParseEditorContent();
   // derived values
   const selectedExportFormat = watch("export_format");
   const selectedPageFormat = watch("page_format");
@@ -179,6 +179,7 @@ export const ExportPageModal: React.FC<Props> = (props) => {
       });
       handleClose();
     } catch (error) {
+      console.error("Error in exporting page:", error);
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
diff --git a/web/core/components/pages/modals/page-form.tsx b/web/core/components/pages/modals/page-form.tsx
index 63bd0fdd0..4bc2a8428 100644
--- a/web/core/components/pages/modals/page-form.tsx
+++ b/web/core/components/pages/modals/page-form.tsx
@@ -2,15 +2,17 @@
 
 import { FormEvent, useState } from "react";
 // types
-import { FileText } from "lucide-react";
+import { FileText, Globe2, Lock, LucideIcon } from "lucide-react";
+// plane imports
+import { ETabIndices, EPageAccess } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 import { TPage } from "@plane/types";
 // ui
 import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input } from "@plane/ui";
 import { Logo } from "@/components/common";
 // constants
 import { AccessField } from "@/components/common/access-field";
-import { EPageAccess, PAGE_ACCESS_SPECIFIERS } from "@/constants/page";
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
@@ -24,14 +26,26 @@ type Props = {
   handleFormSubmit: () => Promise<void>;
 };
 
+const PAGE_ACCESS_SPECIFIERS: {
+  key: EPageAccess;
+  i18n_label: string;
+  icon: LucideIcon;
+}[] = [
+  { key: EPageAccess.PUBLIC, i18n_label: "common.access.public", icon: Globe2 },
+  { key: EPageAccess.PRIVATE, i18n_label: "common.access.private", icon: Lock },
+];
+
 export const PageForm: React.FC<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>) => {
@@ -121,9 +135,7 @@ export const PageForm: React.FC<Props> = (props) => {
             accessSpecifiers={PAGE_ACCESS_SPECIFIERS}
             isMobile={isMobile}
           />
-          <h6 className="text-xs font-medium">
-            {PAGE_ACCESS_SPECIFIERS.find((access) => access.key === formData.access)?.label}
-          </h6>
+          <h6 className="text-xs font-medium">{t(i18n_access_label || "")}</h6>
         </div>
         <div className="flex items-center justify-end gap-2">
           <Button variant="neutral-primary" size="sm" onClick={handleModalClose} tabIndex={getIndex("cancel")}>
diff --git a/web/core/components/pages/pages-list-main-content.tsx b/web/core/components/pages/pages-list-main-content.tsx
index a0b4b3565..83435a968 100644
--- a/web/core/components/pages/pages-list-main-content.tsx
+++ b/web/core/components/pages/pages-list-main-content.tsx
@@ -1,15 +1,16 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
-// types
+// plane imports
+import { EUserPermissionsLevel, EUserProjectRoles, EPageAccess } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TPageNavigationTabs } from "@plane/types";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { DetailedEmptyState } from "@/components/empty-state";
 import { PageLoader } from "@/components/pages";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
-// hooks
-import { EPageAccess } from "@/constants/page";
-import { useCommandPalette, useProjectPages } from "@/hooks/store";
+import { useCommandPalette, useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 // assets
 import AllFiltersImage from "@/public/empty-state/pages/all-filters.svg";
 import NameFilterImage from "@/public/empty-state/pages/name-filter.svg";
@@ -17,50 +18,95 @@ import NameFilterImage from "@/public/empty-state/pages/name-filter.svg";
 type Props = {
   children: React.ReactNode;
   pageType: TPageNavigationTabs;
+  storeType: EPageStoreType;
 };
 
 export const PagesListMainContent: React.FC<Props> = observer((props) => {
-  const { children, pageType } = props;
+  const { children, pageType, storeType } = props;
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { loader, isAnyPageAvailable, getCurrentProjectFilteredPageIds, getCurrentProjectPageIds, filters } =
-    useProjectPages();
+    usePageStore(storeType);
   const { toggleCreatePageModal } = useCommandPalette();
+  const { allowPermissions } = useUserPermissions();
   // derived values
   const pageIds = getCurrentProjectPageIds(pageType);
   const filteredPageIds = getCurrentProjectFilteredPageIds(pageType);
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
+    EUserPermissionsLevel.PROJECT
+  );
+  const generalPageResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/onboarding/pages",
+  });
+  const publicPageResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/pages/public",
+  });
+  const privatePageResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/pages/private",
+  });
+  const archivedPageResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/pages/archived",
+  });
 
   if (loader === "init-loader") return <PageLoader />;
   // if no pages exist in the active page type
   if (!isAnyPageAvailable || pageIds?.length === 0) {
     if (!isAnyPageAvailable) {
       return (
-        <EmptyState
-          type={EmptyStateType.PROJECT_PAGE}
-          primaryButtonOnClick={() => {
-            toggleCreatePageModal({ isOpen: true });
+        <DetailedEmptyState
+          title={t("project_page.empty_state.general.title")}
+          description={t("project_page.empty_state.general.description")}
+          assetPath={generalPageResolvedPath}
+          primaryButton={{
+            text: t("project_page.empty_state.general.primary_button.text"),
+            onClick: () => {
+              toggleCreatePageModal({ isOpen: true });
+            },
+            disabled: !canPerformEmptyStateActions,
           }}
         />
       );
     }
     if (pageType === "public")
       return (
-        <EmptyState
-          type={EmptyStateType.PROJECT_PAGE_PUBLIC}
-          primaryButtonOnClick={() => {
-            toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PUBLIC });
+        <DetailedEmptyState
+          title={t("project_page.empty_state.public.title")}
+          description={t("project_page.empty_state.public.description")}
+          assetPath={publicPageResolvedPath}
+          primaryButton={{
+            text: t("project_page.empty_state.public.primary_button.text"),
+            onClick: () => {
+              toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PUBLIC });
+            },
+            disabled: !canPerformEmptyStateActions,
           }}
         />
       );
     if (pageType === "private")
       return (
-        <EmptyState
-          type={EmptyStateType.PROJECT_PAGE_PRIVATE}
-          primaryButtonOnClick={() => {
-            toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PRIVATE });
+        <DetailedEmptyState
+          title={t("project_page.empty_state.private.title")}
+          description={t("project_page.empty_state.private.description")}
+          assetPath={privatePageResolvedPath}
+          primaryButton={{
+            text: t("project_page.empty_state.private.primary_button.text"),
+            onClick: () => {
+              toggleCreatePageModal({ isOpen: true, pageAccess: EPageAccess.PRIVATE });
+            },
+            disabled: !canPerformEmptyStateActions,
           }}
         />
       );
-    if (pageType === "archived") return <EmptyState type={EmptyStateType.PROJECT_PAGE_ARCHIVED} />;
+    if (pageType === "archived")
+      return (
+        <DetailedEmptyState
+          title={t("project_page.empty_state.archived.title")}
+          description={t("project_page.empty_state.archived.description")}
+          assetPath={archivedPageResolvedPath}
+        />
+      );
   }
   // if no pages match the filter criteria
   if (filteredPageIds?.length === 0)
diff --git a/web/core/components/pages/pages-list-view.tsx b/web/core/components/pages/pages-list-view.tsx
index 7b106a458..eccaf5e9b 100644
--- a/web/core/components/pages/pages-list-view.tsx
+++ b/web/core/components/pages/pages-list-view.tsx
@@ -3,24 +3,25 @@ import useSWR from "swr";
 import { TPageNavigationTabs } from "@plane/types";
 // components
 import { PagesListHeaderRoot, PagesListMainContent } from "@/components/pages";
-// hooks
-import { useProjectPages } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 
 type TPageView = {
-  workspaceSlug: string;
-  projectId: string;
-  pageType: TPageNavigationTabs;
   children: React.ReactNode;
+  pageType: TPageNavigationTabs;
+  projectId: string;
+  storeType: EPageStoreType;
+  workspaceSlug: string;
 };
 
 export const PagesListView: React.FC<TPageView> = observer((props) => {
-  const { workspaceSlug, projectId, pageType, children } = props;
+  const { children, pageType, projectId, storeType, workspaceSlug } = props;
   // store hooks
-  const { isAnyPageAvailable, getAllPages } = useProjectPages();
+  const { isAnyPageAvailable, fetchPagesList } = usePageStore(storeType);
   // fetching pages list
   useSWR(
     workspaceSlug && projectId && pageType ? `PROJECT_PAGES_${projectId}` : null,
-    workspaceSlug && projectId && pageType ? () => getAllPages(workspaceSlug, projectId, pageType) : null
+    workspaceSlug && projectId && pageType ? () => fetchPagesList(workspaceSlug, projectId, pageType) : null
   );
 
   // pages loader
@@ -28,9 +29,16 @@ export const PagesListView: React.FC<TPageView> = observer((props) => {
     <div className="relative w-full h-full overflow-hidden flex flex-col">
       {/* tab header */}
       {isAnyPageAvailable && (
-        <PagesListHeaderRoot pageType={pageType} projectId={projectId} workspaceSlug={workspaceSlug} />
+        <PagesListHeaderRoot
+          pageType={pageType}
+          projectId={projectId}
+          storeType={storeType}
+          workspaceSlug={workspaceSlug}
+        />
       )}
-      <PagesListMainContent pageType={pageType}>{children}</PagesListMainContent>
+      <PagesListMainContent pageType={pageType} storeType={storeType}>
+        {children}
+      </PagesListMainContent>
     </div>
   );
 });
diff --git a/web/core/components/pages/version/editor.tsx b/web/core/components/pages/version/editor.tsx
index 637736e39..d20123290 100644
--- a/web/core/components/pages/version/editor.tsx
+++ b/web/core/components/pages/version/editor.tsx
@@ -3,13 +3,14 @@ import { useParams } from "next/navigation";
 // plane editor
 import { DocumentReadOnlyEditorWithRef, TDisplayConfig } from "@plane/editor";
 // plane types
-import { IUserLite, TPageVersion } from "@plane/types";
+import { TPageVersion } from "@plane/types";
 // plane ui
 import { Loader } from "@plane/ui";
-// helpers
-import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
+// components
+import { EditorMentionsRoot } from "@/components/editor";
 // hooks
-import { useMember, useMention, useUser } from "@/hooks/store";
+import { useEditorConfig } from "@/hooks/editor";
+import { useWorkspace } from "@/hooks/store";
 import { usePageFilters } from "@/hooks/use-page-filters";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
@@ -27,24 +28,17 @@ export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props
   // params
   const { workspaceSlug, projectId } = useParams();
   // store hooks
-  const { data: currentUser } = useUser();
-  const {
-    getUserDetails,
-    project: { getProjectMemberIds },
-  } = useMember();
+  const { getWorkspaceBySlug } = useWorkspace();
+  // derived values
+  const workspaceDetails = getWorkspaceBySlug(workspaceSlug?.toString() ?? "");
   // editor flaggings
   const { documentEditor: disabledExtensions } = useEditorFlagging(workspaceSlug?.toString() ?? "");
-  // derived values
-  const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
-  const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
+  // editor config
+  const { getReadOnlyEditorFileHandlers } = useEditorConfig();
   // issue-embed
-  const { issueEmbedProps } = useIssueEmbed(workspaceSlug?.toString() ?? "", projectId?.toString() ?? "");
-  // use-mention
-  const { mentionHighlights } = useMention({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+  const { issueEmbedProps } = useIssueEmbed({
     projectId: projectId?.toString() ?? "",
-    members: projectMemberDetails,
-    user: currentUser ?? undefined,
+    workspaceSlug: workspaceSlug?.toString() ?? "",
   });
   // page filters
   const { fontSize, fontStyle } = usePageFilters();
@@ -109,10 +103,11 @@ export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props
       editorClassName="pl-10"
       fileHandler={getReadOnlyEditorFileHandlers({
         projectId: projectId?.toString() ?? "",
+        workspaceId: workspaceDetails?.id ?? "",
         workspaceSlug: workspaceSlug?.toString() ?? "",
       })}
       mentionHandler={{
-        highlights: mentionHighlights,
+        renderComponent: (props) => <EditorMentionsRoot {...props} />,
       }}
       embedHandler={{
         issue: {
diff --git a/web/core/components/pages/version/root.tsx b/web/core/components/pages/version/root.tsx
index e44e63202..0717be012 100644
--- a/web/core/components/pages/version/root.tsx
+++ b/web/core/components/pages/version/root.tsx
@@ -40,7 +40,7 @@ export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
   return (
     <div
       className={cn(
-        "absolute inset-0 z-20 size-full bg-custom-background-100 flex overflow-hidden opacity-0 pointer-events-none transition-opacity",
+        "absolute inset-0 z-[16] size-full bg-custom-background-100 flex overflow-hidden opacity-0 pointer-events-none transition-opacity",
         {
           "opacity-100 pointer-events-auto": isOpen,
         }
diff --git a/web/core/components/profile/activity/activity-list.tsx b/web/core/components/profile/activity/activity-list.tsx
index bdb6c6f93..671fd9dc2 100644
--- a/web/core/components/profile/activity/activity-list.tsx
+++ b/web/core/components/profile/activity/activity-list.tsx
@@ -15,7 +15,7 @@ import { ActivitySettingsLoader } from "@/components/ui";
 import { calculateTimeAgo } from "@/helpers/date-time.helper";
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
-import { useUser } from "@/hooks/store";
+import { useUser, useWorkspace } from "@/hooks/store";
 
 type Props = {
   activity: IUserActivityResponse | undefined;
@@ -27,6 +27,9 @@ export const ActivityList: React.FC<Props> = observer((props) => {
   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 (
@@ -79,6 +82,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
                               : (activityItem.old_value?.toString() as string)
                           }
                           containerClassName="text-xs bg-custom-background-100"
+                          workspaceId={workspaceId}
                           workspaceSlug={workspaceSlug?.toString() ?? ""}
                           projectId={activityItem.project}
                         />
diff --git a/web/core/components/profile/activity/download-button.tsx b/web/core/components/profile/activity/download-button.tsx
index b54cc98e4..0092299ff 100644
--- a/web/core/components/profile/activity/download-button.tsx
+++ b/web/core/components/profile/activity/download-button.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useParams } from "next/navigation";
 // services
 // ui
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
 // helpers
 import { renderFormattedPayloadDate } from "@/helpers/date-time.helper";
@@ -16,6 +17,8 @@ export const DownloadActivityButton = () => {
   const [isDownloading, setIsDownloading] = useState(false);
   // router
   const { workspaceSlug, userId } = useParams();
+  //hooks
+  const { t } = useTranslation();
 
   const handleDownload = async () => {
     const today = renderFormattedPayloadDate(new Date());
@@ -52,7 +55,7 @@ export const DownloadActivityButton = () => {
 
   return (
     <Button onClick={handleDownload} loading={isDownloading}>
-      {isDownloading ? "Downloading" : "Download today's activity"}
+      {isDownloading ? t("profile.stats.recent_activity.button_loading") : t("profile.stats.recent_activity.button")}
     </Button>
   );
 };
diff --git a/web/core/components/profile/activity/profile-activity-list.tsx b/web/core/components/profile/activity/profile-activity-list.tsx
index 5046948c0..4d10ce2b1 100644
--- a/web/core/components/profile/activity/profile-activity-list.tsx
+++ b/web/core/components/profile/activity/profile-activity-list.tsx
@@ -103,7 +103,8 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
                             activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value
                           }
                           containerClassName="text-xs bg-custom-background-100"
-                          workspaceSlug={activityItem?.workspace_detail?.slug.toString() ?? ""}
+                          workspaceId={activityItem?.workspace_detail?.id?.toString() ?? ""}
+                          workspaceSlug={activityItem?.workspace_detail?.slug?.toString() ?? ""}
                           projectId={activityItem.project ?? ""}
                         />
                       </div>
diff --git a/web/core/components/profile/form.tsx b/web/core/components/profile/form.tsx
new file mode 100644
index 000000000..52a39955b
--- /dev/null
+++ b/web/core/components/profile/form.tsx
@@ -0,0 +1,464 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { ChevronDown, CircleUserRound } from "lucide-react";
+import { Disclosure, Transition } from "@headlessui/react";
+// plane imports
+import { USER_ROLES } from "@plane/constants";
+import { useTranslation, SUPPORTED_LANGUAGES } from "@plane/i18n";
+import type { IUser, TUserProfile } from "@plane/types";
+import { Button, CustomSelect, Input, TOAST_TYPE, setPromiseToast, setToast } from "@plane/ui";
+// components
+import { DeactivateAccountModal } from "@/components/account";
+import { ImagePickerPopover, UserImageUploadModal } from "@/components/core";
+import { TimezoneSelect } from "@/components/global";
+// constants
+// helpers
+import { getFileURL } from "@/helpers/file.helper";
+// hooks
+import { useUser, useUserProfile } from "@/hooks/store";
+
+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;
+};
+
+export type TProfileFormProps = {
+  user: IUser;
+  profile: TUserProfile;
+};
+
+export const ProfileForm = observer((props: TProfileFormProps) => {
+  const { user, profile } = props;
+  // states
+  const [isLoading, setIsLoading] = useState(false);
+  const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
+  const [deactivateAccountModal, setDeactivateAccountModal] = 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 getLanguageLabel = (value: string) => {
+    const selectedLanguage = SUPPORTED_LANGUAGES.find((l) => l.value === value);
+    if (!selectedLanguage) return value;
+    return selectedLanguage.label;
+  };
+
+  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", "");
+      })
+      .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,
+      user_timezone: formData.user_timezone,
+    };
+    // if unsplash or a pre-defined image is uploaded, delete the old uploaded asset
+    if (formData.cover_image_url?.startsWith("http")) {
+      userPayload.cover_image = formData.cover_image_url;
+      userPayload.cover_image_asset = null;
+    }
+
+    const profilePayload: Partial<TUserProfile> = {
+      role: formData.role,
+      language: formData.language,
+    };
+
+    const updateCurrentUserDetail = updateCurrentUser(userPayload).finally(() => setIsLoading(false));
+    const updateCurrentUserProfile = updateUserProfile(profilePayload).finally(() => setIsLoading(false));
+
+    const promises = [updateCurrentUserDetail, updateCurrentUserProfile];
+    const updateUserAndProfile = Promise.all(promises);
+
+    setPromiseToast(updateUserAndProfile, {
+      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)} />
+      <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)}>
+        <div className="flex w-full flex-col gap-6">
+          <div className="relative h-44 w-full">
+            <img
+              src={userCover ? getFileURL(userCover) : "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+              className="h-44 w-full rounded-lg object-cover"
+              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-custom-background-90">
+                  <button type="button" onClick={() => setIsImageUploadModalOpen(true)}>
+                    {!userAvatar || userAvatar === "" ? (
+                      <div className="h-16 w-16 rounded-md bg-custom-background-80 p-2">
+                        <CircleUserRound className="h-full w-full text-custom-text-200" />
+                      </div>
+                    ) : (
+                      <div className="relative h-16 w-16 overflow-hidden">
+                        <img
+                          src={getFileURL(userAvatar)}
+                          className="absolute left-0 top-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 bottom-3 right-3 flex">
+              <Controller
+                control={control}
+                name="cover_image_url"
+                render={({ field: { value, onChange } }) => (
+                  <ImagePickerPopover
+                    label={t("change_cover")}
+                    onChange={(imageUrl) => onChange(imageUrl)}
+                    control={control}
+                    value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                    isProfileCover
+                  />
+                )}
+              />
+            </div>
+          </div>
+          <div className="item-center mt-6 flex justify-between">
+            <div className="flex flex-col">
+              <div className="item-center flex text-lg font-medium text-custom-text-200">
+                <span>{`${watch("first_name")} ${watch("last_name")}`}</span>
+              </div>
+              <span className="text-sm text-custom-text-300 tracking-tight">{watch("email")}</span>
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm font-medium text-custom-text-200">
+                  {t("first_name")}&nbsp;
+                  <span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="first_name"
+                  rules={{
+                    required: "Please enter first name",
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="first_name"
+                      name="first_name"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.first_name)}
+                      placeholder="Enter your first name"
+                      className={`w-full rounded-md ${errors.first_name ? "border-red-500" : ""}`}
+                      maxLength={24}
+                      autoComplete="on"
+                    />
+                  )}
+                />
+                {errors.first_name && <span className="text-xs text-red-500">{errors.first_name.message}</span>}
+              </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm font-medium text-custom-text-200">{t("last_name")}</h4>
+                <Controller
+                  control={control}
+                  name="last_name"
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="last_name"
+                      name="last_name"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.last_name)}
+                      placeholder="Enter your last name"
+                      className="w-full rounded-md"
+                      maxLength={24}
+                      autoComplete="on"
+                    />
+                  )}
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm font-medium text-custom-text-200">
+                  {t("display_name")}&nbsp;
+                  <span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="display_name"
+                  rules={{
+                    required: "Display name is required.",
+                    validate: (value) => {
+                      if (value.trim().length < 1) return "Display name can't be empty.";
+                      if (value.split("  ").length > 1) return "Display name can't have two consecutive spaces.";
+                      if (value.replace(/\s/g, "").length < 1) return "Display name must be at least 1 character long.";
+                      if (value.replace(/\s/g, "").length > 20)
+                        return "Display name must be less than 20 characters long.";
+                      return true;
+                    },
+                  }}
+                  render={({ field: { value, onChange, ref } }) => (
+                    <Input
+                      id="display_name"
+                      name="display_name"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors?.display_name)}
+                      placeholder="Enter your display name"
+                      className={`w-full ${errors?.display_name ? "border-red-500" : ""}`}
+                      maxLength={24}
+                    />
+                  )}
+                />
+                {errors?.display_name && <span className="text-xs text-red-500">{errors?.display_name?.message}</span>}
+              </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm font-medium text-custom-text-200">
+                  {t("auth.common.email.label")}&nbsp;
+                  <span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  control={control}
+                  name="email"
+                  rules={{
+                    required: "Email is required.",
+                  }}
+                  render={({ field: { value, ref } }) => (
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      value={value}
+                      ref={ref}
+                      hasError={Boolean(errors.email)}
+                      placeholder="Enter your email"
+                      className={`w-full cursor-not-allowed rounded-md !bg-custom-background-90 ${
+                        errors.email ? "border-red-500" : ""
+                      }`}
+                      autoComplete="on"
+                      disabled
+                    />
+                  )}
+                />
+              </div>
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm font-medium text-custom-text-200">
+                  {t("role")}&nbsp;
+                  <span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  name="role"
+                  control={control}
+                  rules={{ required: "Role is required." }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSelect
+                      value={value}
+                      onChange={onChange}
+                      label={value ? t(value) : "Select your role"}
+                      buttonClassName={errors.role ? "border-red-500" : "border-none"}
+                      className="rounded-md border-[0.5px] !border-custom-border-200"
+                      optionsClassName="w-full"
+                      input
+                    >
+                      {USER_ROLES.map((item) => (
+                        <CustomSelect.Option key={item.value} value={item.i18n_label}>
+                          {t(item.i18n_label)}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+                {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
+              </div>
+            </div>
+          </div>
+          <div className="flex flex-col gap-1">
+            <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-x-6 gap-y-4">
+              <div className="flex flex-col gap-1">
+                <h4 className="text-sm font-medium text-custom-text-200">
+                  {t("timezone")}&nbsp;
+                  <span className="text-red-500">*</span>
+                </h4>
+                <Controller
+                  name="user_timezone"
+                  control={control}
+                  rules={{ required: "Please select a timezone" }}
+                  render={({ field: { value, onChange } }) => (
+                    <TimezoneSelect
+                      value={value}
+                      onChange={(value: string) => {
+                        onChange(value);
+                      }}
+                      error={Boolean(errors.user_timezone)}
+                    />
+                  )}
+                />
+                {errors.user_timezone && <span className="text-xs text-red-500">{errors.user_timezone.message}</span>}
+              </div>
+              <div className="flex flex-col gap-1">
+                <div className="flex gap-2 items-center">
+                  <h4 className="text-sm font-medium text-custom-text-200">{t("language")} </h4>
+                  <div className="w-fit cursor-pointer rounded-2xl text-custom-primary-200 bg-custom-primary-100/20 text-center font-medium outline-none text-xs px-2">
+                    Alpha
+                  </div>
+                </div>
+                <Controller
+                  control={control}
+                  name="language"
+                  rules={{ required: "Please select a language" }}
+                  render={({ field: { value, onChange } }) => (
+                    <CustomSelect
+                      value={value}
+                      label={value ? getLanguageLabel(value) : "Select a language"}
+                      onChange={onChange}
+                      buttonClassName={errors.language ? "border-red-500" : "border-none"}
+                      className="rounded-md border-[0.5px] !border-custom-border-200"
+                      optionsClassName="w-full"
+                      input
+                    >
+                      {SUPPORTED_LANGUAGES.map((item) => (
+                        <CustomSelect.Option key={item.value} value={item.value}>
+                          {item.label}
+                        </CustomSelect.Option>
+                      ))}
+                    </CustomSelect>
+                  )}
+                />
+              </div>
+            </div>
+            <div className="flex items-center justify-between pt-6 pb-8">
+              <Button variant="primary" type="submit" loading={isLoading}>
+                {isLoading ? t("saving") : t("save_changes")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </form>
+      <Disclosure as="div" className="border-t border-custom-border-100">
+        {({ open }) => (
+          <>
+            <Disclosure.Button as="button" type="button" className="flex w-full items-center justify-between py-4">
+              <span className="text-lg font-medium tracking-tight">{t("deactivate_account")}</span>
+              <ChevronDown className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
+            </Disclosure.Button>
+            <Transition
+              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-sm tracking-tight">{t("deactivate_account_description")}</span>
+                  <div>
+                    <Button variant="danger" onClick={() => setDeactivateAccountModal(true)}>
+                      {t("deactivate_account")}
+                    </Button>
+                  </div>
+                </div>
+              </Disclosure.Panel>
+            </Transition>
+          </>
+        )}
+      </Disclosure>
+    </>
+  );
+});
diff --git a/web/core/components/profile/index.ts b/web/core/components/profile/index.ts
index d0d33af96..e5495aba1 100644
--- a/web/core/components/profile/index.ts
+++ b/web/core/components/profile/index.ts
@@ -3,5 +3,6 @@ export * from "./overview";
 export * from "./profile-issues-filter";
 export * from "./sidebar";
 export * from "./time";
-export * from "./profile-setting-content-wrapper"
-export * from "./profile-setting-content-header"
\ No newline at end of file
+export * from "./profile-setting-content-wrapper";
+export * from "./profile-setting-content-header";
+export * from "./form";
diff --git a/web/core/components/profile/notification/email-notification-form.tsx b/web/core/components/profile/notification/email-notification-form.tsx
index 02bbe19f1..badd361a0 100644
--- a/web/core/components/profile/notification/email-notification-form.tsx
+++ b/web/core/components/profile/notification/email-notification-form.tsx
@@ -2,14 +2,14 @@
 
 import React, { FC, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "@plane/i18n";
 import { IUserEmailNotificationSettings } from "@plane/types";
 // ui
 import { ToggleSwitch, TOAST_TYPE, setToast } from "@plane/ui";
 // services
 import { UserService } from "@/services/user.service";
 // types
-
-interface IEmailNotificationFormProps {
+ interface IEmailNotificationFormProps {
   data: IUserEmailNotificationSettings;
 }
 
@@ -18,6 +18,7 @@ const userService = new UserService();
 
 export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) => {
   const { data } = props;
+  const { t } = useTranslation();
   // form data
   const {
     control,
@@ -34,16 +35,16 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         [key]: value,
       });
       setToast({
-        title: "Success!",
+        title: t("success"),
         type: TOAST_TYPE.SUCCESS,
-        message: "Email notification setting updated successfully",
+        message: t("email_notification_setting_updated_successfully"),
       });
     } catch (err) {
       console.error(err);
       setToast({
-        title: "Error!",
+        title: t("error"),
         type: TOAST_TYPE.ERROR,
-        message: "Failed to update email notification setting",
+        message: t("failed_to_update_email_notification_setting"),
       });
     }
   };
@@ -54,15 +55,13 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
 
   return (
     <>
-      <div className="pt-6 text-lg font-medium text-custom-text-100">Notify me when:</div>
+      <div className="pt-6 text-lg font-medium text-custom-text-100">{t("notify_me_when")}:</div>
       {/* Notification Settings */}
       <div className="flex flex-col py-2">
         <div className="flex gap-2 items-center pt-6">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">Property changes</div>
-            <div className="text-sm font-normal text-custom-text-300">
-              Notify me when issue's properties like assignees, priority, estimates or anything else changes.
-            </div>
+            <div className="pb-1 text-base font-medium text-custom-text-100">{t("property_changes")}</div>
+            <div className="text-sm font-normal text-custom-text-300">{t("property_changes_description")}</div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -83,9 +82,9 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center pt-6 pb-2">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">State change</div>
+            <div className="pb-1 text-base font-medium text-custom-text-100">{t("state_change")}</div>
             <div className="text-sm font-normal text-custom-text-300">
-              Notify me when the issues moves to a different state
+              {t("state_change_description")}
             </div>
           </div>
           <div className="shrink-0">
@@ -107,8 +106,8 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center border-0 border-l-[3px] border-custom-border-300 pl-3">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">Issue completed</div>
-            <div className="text-sm font-normal text-custom-text-300">Notify me only when an issue is completed</div>
+            <div className="pb-1 text-base font-medium text-custom-text-100">{t("issue_completed")}</div>
+            <div className="text-sm font-normal text-custom-text-300">{t("issue_completed_description")}</div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -129,9 +128,9 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center pt-6">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">Comments</div>
+            <div className="pb-1 text-base font-medium text-custom-text-100">{t("comments")}</div>
             <div className="text-sm font-normal text-custom-text-300">
-              Notify me when someone leaves a comment on the issue
+              {t("comments_description")}
             </div>
           </div>
           <div className="shrink-0">
@@ -153,9 +152,9 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </div>
         <div className="flex gap-2 items-center pt-6">
           <div className="grow">
-            <div className="pb-1 text-base font-medium text-custom-text-100">Mentions</div>
+            <div className="pb-1 text-base font-medium text-custom-text-100">{t("mentions")}</div>
             <div className="text-sm font-normal text-custom-text-300">
-              Notify me only when someone mentions me in the comments or description
+              {t("mentions_description")}
             </div>
           </div>
           <div className="shrink-0">
diff --git a/web/core/components/profile/overview/activity.tsx b/web/core/components/profile/overview/activity.tsx
index 7e5e60621..9ac14b2aa 100644
--- a/web/core/components/profile/overview/activity.tsx
+++ b/web/core/components/profile/overview/activity.tsx
@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
+import { useTranslation } from "@plane/i18n";
 import { Loader, Card } from "@plane/ui";
 // components
 import { ActivityMessage, IssueLink } from "@/components/core";
@@ -26,6 +27,7 @@ export const ProfileActivity = observer(() => {
   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,
@@ -39,7 +41,7 @@ export const ProfileActivity = observer(() => {
 
   return (
     <div className="space-y-2">
-      <h3 className="text-lg font-medium">Recent activity</h3>
+      <h3 className="text-lg font-medium">{t("profile.stats.recent_activity.title")}</h3>
       <Card>
         {userProfileActivity ? (
           userProfileActivity.results.length > 0 ? (
@@ -81,8 +83,8 @@ export const ProfileActivity = observer(() => {
             </div>
           ) : (
             <ProfileEmptyState
-              title="No Data yet"
-              description="We couldn’t find data. Kindly view your inputs"
+              title={t("no_data_yet")}
+              description={t("profile.stats.recent_activity.empty")}
               image={recentActivityEmptyState}
             />
           )
diff --git a/web/core/components/profile/overview/priority-distribution.tsx b/web/core/components/profile/overview/priority-distribution.tsx
index 66f0e02e7..856f72591 100644
--- a/web/core/components/profile/overview/priority-distribution.tsx
+++ b/web/core/components/profile/overview/priority-distribution.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 // ui
+import { useTranslation } from "@plane/i18n";
 import { IUserProfileData } from "@plane/types";
 import { Loader, Card } from "@plane/ui";
 import { BarGraph, ProfileEmptyState } from "@/components/ui";
@@ -14,77 +15,80 @@ type Props = {
   userProfile: IUserProfileData | undefined;
 };
 
-export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) => (
-  <div className="flex flex-col space-y-2">
-    <h3 className="text-lg font-medium">Issues by Priority</h3>
-    {userProfile ? (
-      <Card>
-        {userProfile.priority_distribution.length > 0 ? (
-          <BarGraph
-            data={userProfile.priority_distribution.map((priority) => ({
-              priority: capitalizeFirstLetter(priority.priority ?? "None"),
-              value: priority.priority_count,
-            }))}
-            height="300px"
-            indexBy="priority"
-            keys={["value"]}
-            borderRadius={4}
-            padding={0.7}
-            customYAxisTickValues={userProfile.priority_distribution.map((p) => p.priority_count)}
-            tooltip={(datum) => (
-              <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
-                <span
-                  className="h-3 w-3 rounded"
-                  style={{
-                    backgroundColor: datum?.color ?? "rgb(var(--color-primary-100))",
-                  }}
-                />
-                <span className="font-medium text-custom-text-200">{datum.data.priority}:</span>
-                <span>{datum.value}</span>
-              </div>
-            )}
-            colors={(datum) => {
-              if (datum.data.priority === "Urgent") return "#991b1b";
-              else if (datum.data.priority === "High") return "#ef4444";
-              else if (datum.data.priority === "Medium") return "#f59e0b";
-              else if (datum.data.priority === "Low") return "#16a34a";
-              else return "#e5e5e5";
-            }}
-            theme={{
-              axis: {
-                domain: {
+export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="flex flex-col space-y-2">
+      <h3 className="text-lg font-medium">{t("profile.stats.priority_distribution.title")}</h3>
+      {userProfile ? (
+        <Card>
+          {userProfile.priority_distribution.length > 0 ? (
+            <BarGraph
+              data={userProfile.priority_distribution.map((priority) => ({
+                priority: capitalizeFirstLetter(priority.priority ?? "None"),
+                value: priority.priority_count,
+              }))}
+              height="300px"
+              indexBy="priority"
+              keys={["value"]}
+              borderRadius={4}
+              padding={0.7}
+              customYAxisTickValues={userProfile.priority_distribution.map((p) => p.priority_count)}
+              tooltip={(datum) => (
+                <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-80 p-2 text-xs">
+                  <span
+                    className="h-3 w-3 rounded"
+                    style={{
+                      backgroundColor: datum?.color ?? "rgb(var(--color-primary-100))",
+                    }}
+                  />
+                  <span className="font-medium text-custom-text-200">{datum.data.priority}:</span>
+                  <span>{datum.value}</span>
+                </div>
+              )}
+              colors={(datum) => {
+                if (datum.data.priority === "Urgent") return "#991b1b";
+                else if (datum.data.priority === "High") return "#ef4444";
+                else if (datum.data.priority === "Medium") return "#f59e0b";
+                else if (datum.data.priority === "Low") return "#16a34a";
+                else return "#e5e5e5";
+              }}
+              theme={{
+                axis: {
+                  domain: {
+                    line: {
+                      stroke: "transparent",
+                    },
+                  },
+                },
+                grid: {
                   line: {
                     stroke: "transparent",
                   },
                 },
-              },
-              grid: {
-                line: {
-                  stroke: "transparent",
-                },
-              },
-            }}
-          />
-        ) : (
-          <div className="flex-grow p-7">
-            <ProfileEmptyState
-              title="No Data yet"
-              description="Create issues to view the them by priority in the graph for better analysis."
-              image={emptyBarGraph}
+              }}
             />
-          </div>
-        )}
-      </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>
-);
+          ) : (
+            <div className="flex-grow p-7">
+              <ProfileEmptyState
+                title={t("no_data_yet")}
+                description={t("profile.stats.priority_distribution.empty")}
+                image={emptyBarGraph}
+              />
+            </div>
+          )}
+        </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/web/core/components/profile/overview/priority-distribution/main-content.tsx b/web/core/components/profile/overview/priority-distribution/main-content.tsx
index d56a92b1d..5a4f64bce 100644
--- a/web/core/components/profile/overview/priority-distribution/main-content.tsx
+++ b/web/core/components/profile/overview/priority-distribution/main-content.tsx
@@ -21,7 +21,7 @@ export const PriorityDistributionContent: React.FC<Props> = (props) => {
         <div className="flex-grow p-7">
           <ProfileEmptyState
             title="No Data yet"
-            description="Create issues to view the them by priority in the graph for better analysis."
+            description="Create work items to view the them by priority in the graph for better analysis."
             image={emptyBarGraph}
           />
         </div>
diff --git a/web/core/components/profile/overview/priority-distribution/priority-distribution.tsx b/web/core/components/profile/overview/priority-distribution/priority-distribution.tsx
index 97bc385ca..a7bca192b 100644
--- a/web/core/components/profile/overview/priority-distribution/priority-distribution.tsx
+++ b/web/core/components/profile/overview/priority-distribution/priority-distribution.tsx
@@ -16,7 +16,7 @@ export const ProfilePriorityDistribution: React.FC<Props> = (props) => {
 
   return (
     <div className="flex flex-col space-y-2">
-      <h3 className="text-lg font-medium">Issues by priority</h3>
+      <h3 className="text-lg font-medium">Work items by priority</h3>
       {priorityDistribution ? (
         <PriorityDistributionContent priorityDistribution={priorityDistribution} />
       ) : (
diff --git a/web/core/components/profile/overview/state-distribution.tsx b/web/core/components/profile/overview/state-distribution.tsx
index c3533018c..5e9d0d2c7 100644
--- a/web/core/components/profile/overview/state-distribution.tsx
+++ b/web/core/components/profile/overview/state-distribution.tsx
@@ -1,13 +1,12 @@
-// ui
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IUserProfileData, IUserStateDistribution } from "@plane/types";
+// ui
 import { Card } from "@plane/ui";
 import { ProfileEmptyState, PieGraph } from "@/components/ui";
-
 // image
-import { STATE_GROUPS } from "@/constants/state";
 import stateGraph from "@/public/empty-state/state_graph.svg";
-// types
-// constants
 
 type Props = {
   stateDistribution: IUserStateDistribution[];
@@ -15,11 +14,12 @@ type Props = {
 };
 
 export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, userProfile }) => {
+  const { t } = useTranslation();
   if (!userProfile) return null;
 
   return (
     <div className="flex flex-col space-y-2">
-      <h3 className="text-lg font-medium">Issues by state</h3>
+      <h3 className="text-lg font-medium">{t("profile.stats.state_distribution.title")}</h3>
       <Card className="h-full">
         {userProfile.state_distribution.length > 0 ? (
           <div className="grid grid-cols-1 gap-x-6 md:grid-cols-2">
@@ -44,7 +44,7 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
                 colors={(datum) => datum?.data?.color}
                 tooltip={(datum) => (
                   <div className="flex items-center gap-2 rounded-md border border-custom-border-200 bg-custom-background-90 p-2 text-xs">
-                    <span className="capitalize text-custom-text-200">{datum.datum.label} issues:</span>{" "}
+                    <span className="capitalize text-custom-text-200">{datum.datum.label} work items:</span>{" "}
                     {datum.datum.value}
                   </div>
                 )}
@@ -77,8 +77,8 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
           </div>
         ) : (
           <ProfileEmptyState
-            title="No Data yet"
-            description="Create issues to view the them by states in the graph for better analysis."
+            title={t("no_data_yet")}
+            description={t("profile.stats.state_distribution.empty")}
             image={stateGraph}
           />
         )}
diff --git a/web/core/components/profile/overview/stats.tsx b/web/core/components/profile/overview/stats.tsx
index 50f6b0ae0..cf0f15d3e 100644
--- a/web/core/components/profile/overview/stats.tsx
+++ b/web/core/components/profile/overview/stats.tsx
@@ -5,6 +5,7 @@ import { useParams } from "next/navigation";
 
 // ui
 import { UserCircle2 } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { IUserProfileData } from "@plane/types";
 import { CreateIcon, LayerStackIcon, Loader, Card, ECardSpacing, ECardDirection } from "@plane/ui";
 // types
@@ -16,30 +17,32 @@ type Props = {
 export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
   const { workspaceSlug, userId } = useParams();
 
+  const { t } = useTranslation();
+
   const overviewCards = [
     {
       icon: CreateIcon,
       route: "created",
-      title: "Issues created",
+      i18n_title: "profile.stats.created",
       value: userProfile?.created_issues ?? "...",
     },
     {
       icon: UserCircle2,
       route: "assigned",
-      title: "Issues assigned",
+      i18n_title: "profile.stats.assigned",
       value: userProfile?.assigned_issues ?? "...",
     },
     {
       icon: LayerStackIcon,
       route: "subscribed",
-      title: "Issues subscribed",
+      i18n_title: "profile.stats.subscribed",
       value: userProfile?.subscribed_issues ?? "...",
     },
   ];
 
   return (
     <div className="space-y-2">
-      <h3 className="text-lg font-medium">Overview</h3>
+      <h3 className="text-lg 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) => (
@@ -49,7 +52,7 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
                   <card.icon className="h-5 w-5" />
                 </div>
                 <div className="space-y-1">
-                  <p className="text-sm text-custom-text-400">{card.title}</p>
+                  <p className="text-sm text-custom-text-400">{t(card.i18n_title)}</p>
                   <p className="text-xl font-semibold">{card.value}</p>
                 </div>
               </Card>
diff --git a/web/core/components/profile/overview/workload.tsx b/web/core/components/profile/overview/workload.tsx
index 94ebc2fe6..158136269 100644
--- a/web/core/components/profile/overview/workload.tsx
+++ b/web/core/components/profile/overview/workload.tsx
@@ -1,41 +1,47 @@
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IUserStateDistribution } from "@plane/types";
 import { Card, ECardDirection, ECardSpacing } from "@plane/ui";
-import { STATE_GROUPS } from "@/constants/state";
 // constants
 
 type Props = {
   stateDistribution: IUserStateDistribution[];
 };
 
-export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => (
-  <div className="space-y-2">
-    <h3 className="text-lg font-medium">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="h-3 w-3 rounded-sm my-2"
-                style={{
-                  backgroundColor: STATE_GROUPS[group.state_group].color,
-                }}
-              />
-              <div className="space-y-1 flex-col">
-                <span className="text-sm text-custom-text-400">
-                  {group.state_group === "unstarted"
-                    ? "Not started"
-                    : group.state_group === "started"
-                      ? "Working on"
-                      : STATE_GROUPS[group.state_group].label}
-                </span>
-                <p className="text-xl font-semibold">{group.state_count}</p>
-              </div>
-            </Card>
-          </a>
-        </div>
-      ))}
+export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-2">
+      <h3 className="text-lg 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="h-3 w-3 rounded-sm my-2"
+                  style={{
+                    backgroundColor: STATE_GROUPS[group.state_group].color,
+                  }}
+                />
+                <div className="space-y-1 flex-col">
+                  <span className="text-sm text-custom-text-400">
+                    {group.state_group === "unstarted"
+                      ? "Not started"
+                      : group.state_group === "started"
+                        ? "Working on"
+                        : STATE_GROUPS[group.state_group].label}
+                  </span>
+                  <p className="text-xl font-semibold">{group.state_count}</p>
+                </div>
+              </Card>
+            </a>
+          </div>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
diff --git a/web/core/components/profile/profile-issues-filter.tsx b/web/core/components/profile/profile-issues-filter.tsx
index aaaa15361..baf85c210 100644
--- a/web/core/components/profile/profile-issues-filter.tsx
+++ b/web/core/components/profile/profile-issues-filter.tsx
@@ -1,23 +1,22 @@
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane constants
+import { EIssueLayoutTypes, EIssuesStoreType, EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // components
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown, LayoutSelection } from "@/components/issues";
-// constants
-import {
-  EIssuesStoreType,
-  EIssueFilterType,
-  ISSUE_DISPLAY_FILTERS_BY_LAYOUT,
-  EIssueLayoutTypes,
-} from "@/constants/issue";
 // helpers
 import { isIssueFilterActive } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useLabel } from "@/hooks/store";
 
 export const ProfileIssuesFilter = observer(() => {
+  // i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug, userId } = useParams();
   // store hook
@@ -108,10 +107,10 @@ export const ProfileIssuesFilter = observer(() => {
         selectedLayout={activeLayout}
       />
 
-      <FiltersDropdown title="Filters" placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
+      <FiltersDropdown title={t("common.filters")} placement="bottom-end" isFiltersApplied={isIssueFilterActive(issueFilters)}>
         <FilterSelection
           layoutDisplayFiltersOptions={
-            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.profile_issues[activeLayout] : undefined
           }
           filters={issueFilters?.filters ?? {}}
           handleFiltersUpdate={handleFiltersUpdate}
@@ -123,10 +122,10 @@ export const ProfileIssuesFilter = observer(() => {
         />
       </FiltersDropdown>
 
-      <FiltersDropdown title="Display" placement="bottom-end">
+      <FiltersDropdown title={t("common.display")} placement="bottom-end">
         <DisplayFiltersSelection
           layoutDisplayFiltersOptions={
-            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.profile_issues[activeLayout] : undefined
+            activeLayout ? ISSUE_DISPLAY_FILTERS_BY_PAGE.profile_issues[activeLayout] : undefined
           }
           displayFilters={issueFilters?.displayFilters ?? {}}
           handleDisplayFiltersUpdate={handleDisplayFilters}
diff --git a/web/core/components/profile/profile-issues.tsx b/web/core/components/profile/profile-issues.tsx
index e4adaf999..428ccf8f9 100644
--- a/web/core/components/profile/profile-issues.tsx
+++ b/web/core/components/profile/profile-issues.tsx
@@ -3,11 +3,11 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // components
+import { EIssuesStoreType } from "@plane/constants";
 import { IssuePeekOverview, ProfileIssuesAppliedFiltersRoot } from "@/components/issues";
 import { ProfileIssuesKanBanLayout } from "@/components/issues/issue-layouts/kanban/roots/profile-issues-root";
 import { ProfileIssuesListLayout } from "@/components/issues/issue-layouts/list/roots/profile-issues-root";
 // hooks
-import { EIssuesStoreType } from "@/constants/issue";
 import { useIssues } from "@/hooks/store";
 import { IssuesStoreContext } from "../../hooks/use-issue-layout-store";
 // constants
diff --git a/web/core/components/profile/sidebar.tsx b/web/core/components/profile/sidebar.tsx
index 11e10184a..d3e007ea3 100644
--- a/web/core/components/profile/sidebar.tsx
+++ b/web/core/components/profile/sidebar.tsx
@@ -11,6 +11,7 @@ import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IUserProfileProjectSegregation } from "@plane/types";
 // plane ui
 import { Loader, Tooltip } from "@plane/ui";
@@ -42,6 +43,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
   const { profileSidebarCollapsed, toggleProfileSidebar } = useAppTheme();
   const { getProjectById } = useProject();
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
   // derived values
   const userData = userProjectsData?.user_data;
 
@@ -55,11 +57,11 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
 
   const userDetails = [
     {
-      label: "Joined on",
+      i18n_label: "profile.details.joined_on",
       value: renderFormattedDate(userData?.date_joined ?? ""),
     },
     {
-      label: "Timezone",
+      i18n_label: "profile.details.time_zone",
       value: <ProfileSidebarTime timeZone={userData?.user_timezone} />,
     },
   ];
@@ -131,8 +133,8 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
             </div>
             <div className="mt-6 space-y-5">
               {userDetails.map((detail) => (
-                <div key={detail.label} className="flex items-center gap-4 text-sm">
-                  <div className="w-2/5 flex-shrink-0 text-custom-text-200">{detail.label}</div>
+                <div key={detail.i18n_label} className="flex items-center gap-4 text-sm">
+                  <div className="w-2/5 flex-shrink-0 text-custom-text-200">{t(detail.i18n_label)}</div>
                   <div className="w-3/5 break-words font-medium">{detail.value}</div>
                 </div>
               ))}
@@ -229,28 +231,36 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                                   <div className="h-2.5 w-2.5 rounded-sm bg-[#203b80]" />
                                   Created
                                 </div>
-                                <div className="font-medium">{project.created_issues} Issues</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-sm bg-[#3f76ff]" />
                                   Assigned
                                 </div>
-                                <div className="font-medium">{project.assigned_issues} Issues</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-sm bg-[#f59e0b]" />
                                   Due
                                 </div>
-                                <div className="font-medium">{project.pending_issues} Issues</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-sm bg-[#16a34a]" />
                                   Completed
                                 </div>
-                                <div className="font-medium">{project.completed_issues} Issues</div>
+                                <div className="font-medium">
+                                  {project.completed_issues} {t("issues")}
+                                </div>
                               </div>
                             </div>
                           </Disclosure.Panel>
diff --git a/web/core/components/project-states/create-update/create.tsx b/web/core/components/project-states/create-update/create.tsx
index b581eacec..6a87082b4 100644
--- a/web/core/components/project-states/create-update/create.tsx
+++ b/web/core/components/project-states/create-update/create.tsx
@@ -2,13 +2,11 @@
 
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
+import { STATE_CREATED, STATE_GROUPS } from "@plane/constants";
 import { IState, TStateGroups } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { StateForm } from "@/components/project-states";
-// constants
-import { STATE_CREATED } from "@/constants/event-tracker";
-import { STATE_GROUPS } from "@/constants/state";
 // hooks
 import { useEventTracker, useProjectState } from "@/hooks/store";
 
diff --git a/web/core/components/project-states/create-update/form.tsx b/web/core/components/project-states/create-update/form.tsx
index 14c2dc0b7..105fb984f 100644
--- a/web/core/components/project-states/create-update/form.tsx
+++ b/web/core/components/project-states/create-update/form.tsx
@@ -3,7 +3,7 @@
 import { FormEvent, FC, useEffect, useState, useMemo } from "react";
 import { TwitterPicker } from "react-color";
 import { IState } from "@plane/types";
-import { Button, Popover, Input } from "@plane/ui";
+import { Button, Popover, Input, TextArea } from "@plane/ui";
 
 type TStateForm = {
   data: Partial<IState>;
@@ -59,47 +59,49 @@ export const StateForm: FC<TStateForm> = (props) => {
   );
 
   return (
-    <form onSubmit={formSubmit} className="relative flex items-center gap-2">
+    <form onSubmit={formSubmit} className="relative flex space-x-2 bg-custom-background-100 p-3 rounded">
       {/* color */}
-      <div className="flex-shrink-0">
+      <div className="flex-shrink-0 h-full mt-2">
         <Popover button={PopoverButton} panelClassName="mt-4 -ml-3">
           <TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
         </Popover>
       </div>
 
-      {/* title */}
-      <Input
-        id="name"
-        type="text"
-        name="name"
-        placeholder="Name"
-        value={formData?.name}
-        onChange={(e) => handleFormData("name", e.target.value)}
-        hasError={(errors && Boolean(errors.name)) || false}
-        className="w-full"
-        maxLength={100}
-        autoFocus
-      />
+      <div className="w-full space-y-2">
+        {/* title */}
+        <Input
+          id="name"
+          type="text"
+          name="name"
+          placeholder="Name"
+          value={formData?.name}
+          onChange={(e) => handleFormData("name", e.target.value)}
+          hasError={(errors && Boolean(errors.name)) || false}
+          className="w-full"
+          maxLength={100}
+          autoFocus
+        />
 
-      {/* description */}
-      <Input
-        id="description"
-        type="text"
-        name="description"
-        placeholder="Description"
-        value={formData?.description}
-        onChange={(e) => handleFormData("description", e.target.value)}
-        hasError={(errors && Boolean(errors.description)) || false}
-        className="w-full"
-      />
+        {/* description */}
+        <TextArea
+          id="description"
+          name="description"
+          placeholder="Describe this state for your members."
+          value={formData?.description}
+          onChange={(e) => handleFormData("description", e.target.value)}
+          hasError={(errors && Boolean(errors.description)) || false}
+          className="w-full text-sm min-h-14 resize-none"
+        />
 
-      <Button type="button" variant="neutral-primary" size="sm" disabled={buttonDisabled} onClick={onCancel}>
-        Cancel
-      </Button>
-
-      <Button type="submit" variant="primary" size="sm" disabled={buttonDisabled}>
-        {buttonTitle}
-      </Button>
+        <div className="flex space-x-2 items-center">
+          <Button type="submit" variant="primary" size="sm" disabled={buttonDisabled}>
+            {buttonTitle}
+          </Button>
+          <Button type="button" variant="neutral-primary" size="sm" disabled={buttonDisabled} onClick={onCancel}>
+            Cancel
+          </Button>
+        </div>
+      </div>
     </form>
   );
 };
diff --git a/web/core/components/project-states/create-update/update.tsx b/web/core/components/project-states/create-update/update.tsx
index 669a86516..80014eeba 100644
--- a/web/core/components/project-states/create-update/update.tsx
+++ b/web/core/components/project-states/create-update/update.tsx
@@ -2,12 +2,12 @@
 
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
+import { STATE_UPDATED } from "@plane/constants";
 import { IState } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { StateForm } from "@/components/project-states";
 // constants
-import { STATE_UPDATED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useProjectState } from "@/hooks/store";
 
diff --git a/web/core/components/project-states/group-item.tsx b/web/core/components/project-states/group-item.tsx
index 9abd94d53..fe9fcad15 100644
--- a/web/core/components/project-states/group-item.tsx
+++ b/web/core/components/project-states/group-item.tsx
@@ -1,64 +1,122 @@
 "use client";
 
-import { FC, useState } from "react";
+import { FC, useState, useRef } from "react";
 import { observer } from "mobx-react";
-import { Plus } from "lucide-react";
+import { ChevronDown, Plus } from "lucide-react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IState, TStateGroups } from "@plane/types";
+import { StateGroupIcon } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
 import { StateList, StateCreate } from "@/components/project-states";
+// hooks
 import { useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";
 
 type TGroupItem = {
   workspaceSlug: string;
   projectId: string;
   groupKey: TStateGroups;
+  groupsExpanded: Partial<TStateGroups>[];
+  handleGroupCollapse: (groupKey: TStateGroups) => void;
+  handleExpand: (groupKey: TStateGroups) => void;
   groupedStates: Record<string, IState[]>;
   states: IState[];
 };
 
 export const GroupItem: FC<TGroupItem> = observer((props) => {
-  const { workspaceSlug, projectId, groupKey, groupedStates, states } = props;
+  const {
+    workspaceSlug,
+    projectId,
+    groupKey,
+    groupedStates,
+    states,
+    groupsExpanded,
+    handleExpand,
+    handleGroupCollapse,
+  } = props;
+  // refs
+  const dropElementRef = useRef<HTMLDivElement | null>(null);
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { allowPermissions } = useUserPermissions();
   // state
   const [createState, setCreateState] = useState(false);
-
+  // derived values
+  const currentStateExpanded = groupsExpanded.includes(groupKey);
   const isEditable = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
+  const shouldShowEmptyState = states.length === 0 && currentStateExpanded && !createState;
 
   return (
-    <div className="space-y-3">
-      <div className="flex justify-between items-center">
-        <div className="text-base font-medium text-custom-text-200 capitalize">{groupKey}</div>
-        {isEditable && (
+    <div
+      className="space-y-1 border border-custom-border-200 rounded bg-custom-background-90 transition-all p-2"
+      ref={dropElementRef}
+    >
+      <div className="flex justify-between items-center gap-2">
+        <div
+          className="w-full flex items-center cursor-pointer py-1"
+          onClick={() => (!currentStateExpanded ? handleExpand(groupKey) : handleGroupCollapse(groupKey))}
+        >
           <div
-            className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100"
-            onClick={() => !createState && setCreateState(true)}
+            className={cn(
+              "flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-all",
+              {
+                "rotate-0": currentStateExpanded,
+                "-rotate-90": !currentStateExpanded,
+              }
+            )}
           >
-            <Plus className="w-4 h-4" />
+            <ChevronDown className="w-4 h-4" />
           </div>
-        )}
+          <div className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden">
+            <StateGroupIcon stateGroup={groupKey} height="16px" width="16px" />
+          </div>
+          <div className="text-base font-medium text-custom-text-200 capitalize px-1">{groupKey}</div>
+        </div>
+        <button
+          className={cn(
+            "flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden transition-colors hover:bg-custom-background-80 cursor-pointer text-custom-primary-100/80 hover:text-custom-primary-100",
+            !isEditable && "cursor-not-allowed text-custom-text-400 hover:text-custom-text-400"
+          )}
+          onClick={() => !createState && setCreateState(true)}
+          disabled={!isEditable}
+        >
+          <Plus className="w-4 h-4" />
+        </button>
       </div>
 
-      {isEditable && createState && (
-        <StateCreate
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          groupKey={groupKey}
-          handleClose={() => setCreateState(false)}
-        />
+      {shouldShowEmptyState && (
+        <div className="flex flex-col justify-center items-center h-full py-4 text-sm text-custom-text-300">
+          <div>{t("project_settings.states.empty_state.title", { groupKey })}</div>
+          {isEditable && <div>{t("project_settings.states.empty_state.description")}</div>}
+        </div>
       )}
 
-      <div id="group-droppable-container">
-        <StateList
-          workspaceSlug={workspaceSlug}
-          projectId={projectId}
-          groupKey={groupKey}
-          groupedStates={groupedStates}
-          states={states}
-          disabled={!isEditable}
-        />
-      </div>
+      {currentStateExpanded && (
+        <div id="group-droppable-container">
+          <StateList
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            groupKey={groupKey}
+            groupedStates={groupedStates}
+            states={states}
+            disabled={!isEditable}
+          />
+        </div>
+      )}
+
+      {isEditable && createState && (
+        <div className="">
+          <StateCreate
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            groupKey={groupKey}
+            handleClose={() => setCreateState(false)}
+          />
+        </div>
+      )}
     </div>
   );
 });
diff --git a/web/core/components/project-states/group-list.tsx b/web/core/components/project-states/group-list.tsx
index 59b5e66be..1fbc8f1da 100644
--- a/web/core/components/project-states/group-list.tsx
+++ b/web/core/components/project-states/group-list.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { IState, TStateGroups } from "@plane/types";
 // components
@@ -14,7 +14,26 @@ type TGroupList = {
 
 export const GroupList: FC<TGroupList> = observer((props) => {
   const { workspaceSlug, projectId, groupedStates } = props;
+  // states
+  const [groupsExpanded, setGroupsExpanded] = useState<Partial<TStateGroups>[]>([]);
 
+  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="space-y-5">
       {Object.entries(groupedStates).map(([key, value]) => {
@@ -28,6 +47,9 @@ export const GroupList: FC<TGroupList> = observer((props) => {
             groupKey={groupKey}
             states={groupStates}
             groupedStates={groupedStates}
+            groupsExpanded={groupsExpanded}
+            handleGroupCollapse={handleGroupCollapse}
+            handleExpand={handleExpand}
           />
         );
       })}
diff --git a/web/core/components/project-states/options/delete.tsx b/web/core/components/project-states/options/delete.tsx
index 00f88f034..f123a2513 100644
--- a/web/core/components/project-states/options/delete.tsx
+++ b/web/core/components/project-states/options/delete.tsx
@@ -3,10 +3,10 @@
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
 import { Loader, X } from "lucide-react";
+import { STATE_DELETED } from "@plane/constants";
 import { IState } from "@plane/types";
 import { AlertModalCore, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // constants
-import { STATE_DELETED } from "@/constants/event-tracker";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
@@ -63,7 +63,7 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
           type: TOAST_TYPE.ERROR,
           title: "Error!",
           message:
-            "This state contains some issues within it, please move them to some other state to delete this state.",
+            "This state contains some work items within it, please move them to some other state to delete this state.",
         });
       } else {
         setToast({
diff --git a/web/core/components/project-states/options/mark-as-default.tsx b/web/core/components/project-states/options/mark-as-default.tsx
index 667b2063b..d13700f29 100644
--- a/web/core/components/project-states/options/mark-as-default.tsx
+++ b/web/core/components/project-states/options/mark-as-default.tsx
@@ -32,7 +32,7 @@ export const StateMarksAsDefault: FC<TStateMarksAsDefault> = observer((props) =>
   return (
     <button
       className={cn(
-        "text-sm whitespace-nowrap transition-colors",
+        "text-xs whitespace-nowrap transition-colors",
         isDefault ? "text-custom-text-300" : "text-custom-text-200 hover:text-custom-text-100"
       )}
       disabled={isDefault || isLoading}
diff --git a/web/core/components/project-states/root.tsx b/web/core/components/project-states/root.tsx
index 7ef3bed7f..890bb4235 100644
--- a/web/core/components/project-states/root.tsx
+++ b/web/core/components/project-states/root.tsx
@@ -16,16 +16,11 @@ type TProjectState = {
 export const ProjectStateRoot: FC<TProjectState> = observer((props) => {
   const { workspaceSlug, projectId } = props;
   // hooks
-  const { groupedProjectStates, fetchProjectStates, fetchProjectStateTransitions } = useProjectState();
+  const { groupedProjectStates, fetchProjectStates } = useProjectState();
 
   useSWR(
     workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId
-      ? () => {
-          fetchProjectStates(workspaceSlug.toString(), projectId.toString());
-          fetchProjectStateTransitions(workspaceSlug.toString(), projectId.toString());
-        }
-      : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
diff --git a/web/core/components/project-states/state-delete-modal.tsx b/web/core/components/project-states/state-delete-modal.tsx
index f36c4ca12..f21cc7816 100644
--- a/web/core/components/project-states/state-delete-modal.tsx
+++ b/web/core/components/project-states/state-delete-modal.tsx
@@ -4,11 +4,11 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
+import { STATE_DELETED } from "@plane/constants";
 import type { IState } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { STATE_DELETED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useProjectState } from "@/hooks/store";
 
@@ -55,7 +55,7 @@ export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) =>
             type: TOAST_TYPE.ERROR,
             title: "Error!",
             message:
-              "This state contains some issues within it, please move them to some other state to delete this state.",
+              "This state contains some work items within it, please move them to some other state to delete this state.",
           });
         else
           setToast({
diff --git a/web/core/components/project-states/state-item-title.tsx b/web/core/components/project-states/state-item-title.tsx
index 6191ccd6b..e350d71ce 100644
--- a/web/core/components/project-states/state-item-title.tsx
+++ b/web/core/components/project-states/state-item-title.tsx
@@ -1,13 +1,10 @@
 import { SetStateAction } from "react";
 import { observer } from "mobx-react";
 import { GripVertical, Pencil } from "lucide-react";
-// Plane
+// plane imports
 import { IState } from "@plane/types";
 import { StateGroupIcon } from "@plane/ui";
-// Plane-web
-import { StateTransitionCount } from "@/plane-web/components/workflow";
-import { IStateWorkFlow } from "@/plane-web/types";
-//
+// local imports
 import { StateDelete, StateMarksAsDefault } from "./options";
 
 export type StateItemTitleProps = {
@@ -17,31 +14,37 @@ export type StateItemTitleProps = {
   stateCount: number;
   disabled: boolean;
   state: IState;
-  currentTransitionMap?: IStateWorkFlow;
+  shouldShowDescription?: boolean;
 };
 
 export const StateItemTitle = observer((props: StateItemTitleProps) => {
-  const { workspaceSlug, projectId, stateCount, setUpdateStateModal, disabled, state, currentTransitionMap } = props;
+  const {
+    workspaceSlug,
+    projectId,
+    stateCount,
+    setUpdateStateModal,
+    disabled,
+    state,
+    shouldShowDescription = true,
+  } = props;
   return (
-    <div className="py-4 px-2 flex items-center gap-2 w-full justify-between">
-      <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2 w-full justify-between">
+      <div className="flex items-center gap-1 px-1">
         {/* draggable indicator */}
         {!disabled && stateCount != 1 && (
-          <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
+          <div className="flex-shrink-0 w-3 h-3 rounded-sm absolute -left-1.5 hidden group-hover:flex justify-center items-center transition-colors bg-custom-background-90 cursor-pointer text-custom-text-200 hover:text-custom-text-100">
             <GripVertical className="w-3 h-3" />
           </div>
         )}
         {/* state icon */}
         <div className="flex-shrink-0">
-          <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
+          <StateGroupIcon stateGroup={state.group} color={state.color} className={"size-3.5"} />
         </div>
         {/* state title and description */}
         <div className="text-sm px-2 min-h-5">
           <h6 className="text-sm font-medium">{state.name}</h6>
-          <p className="text-xs text-custom-text-200">{state.description}</p>
+          {shouldShowDescription && <p className="text-xs text-custom-text-200">{state.description}</p>}
         </div>
-        {/* Transition count */}
-        <StateTransitionCount currentTransitionMap={currentTransitionMap} />
       </div>
 
       {!disabled && (
diff --git a/web/core/components/project-states/state-item.tsx b/web/core/components/project-states/state-item.tsx
index 4e665969b..e3ed07a30 100644
--- a/web/core/components/project-states/state-item.tsx
+++ b/web/core/components/project-states/state-item.tsx
@@ -6,18 +6,16 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { observer } from "mobx-react";
 // Plane
+import { TDraggableData } from "@plane/constants";
 import { IState, TStateGroups } from "@plane/types";
 import { DropIndicator } from "@plane/ui";
 // components
-import { StateUpdate } from "@/components/project-states";
+import { StateItemTitle, StateUpdate } from "@/components/project-states";
 // helpers
-import { TDraggableData } from "@/constants/state";
 import { cn } from "@/helpers/common.helper";
 import { getCurrentStateSequence } from "@/helpers/state.helper";
 // hooks
 import { useProjectState } from "@/hooks/store";
-// Plane-web
-import { StateItemChild } from "@/plane-web/components/workflow";
 
 type TStateItem = {
   workspaceSlug: string;
@@ -107,7 +105,7 @@ export const StateItem: FC<TStateItem> = observer((props) => {
         })
       );
     }
-  }, [draggableElementRef, state, groupKey, isDraggable, groupedStates, handleStateSequence]);
+  }, [draggableElementRef, state, groupKey, isDraggable, groupedStates, handleStateSequence, disabled]);
   // DND ends
 
   if (updateStateModal)
@@ -128,12 +126,12 @@ export const StateItem: FC<TStateItem> = observer((props) => {
       <div
         ref={draggableElementRef}
         className={cn(
-          "relative border border-custom-border-100 rounded group",
+          "relative border border-custom-border-100 bg-custom-background-100 py-3 px-3.5 rounded group",
           isDragging ? `opacity-50` : `opacity-100`,
           totalStates === 1 ? `cursor-auto` : `cursor-grab`
         )}
       >
-        <StateItemChild
+        <StateItemTitle
           workspaceSlug={workspaceSlug}
           projectId={projectId}
           setUpdateStateModal={setUpdateStateModal}
diff --git a/web/core/components/project/applied-filters/access.tsx b/web/core/components/project/applied-filters/access.tsx
index 9b5f10cfc..4748a0175 100644
--- a/web/core/components/project/applied-filters/access.tsx
+++ b/web/core/components/project/applied-filters/access.tsx
@@ -1,7 +1,8 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // constants
-import { NETWORK_CHOICES } from "@/constants/project";
+import { NETWORK_CHOICES } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 
 type Props = {
   handleRemove: (val: string) => void;
@@ -11,6 +12,7 @@ type Props = {
 
 export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
 
   return (
     <>
@@ -18,7 +20,7 @@ export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
         const accessDetails = NETWORK_CHOICES.find((s) => `${s.key}` === status);
         return (
           <div key={status} className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80">
-            {accessDetails?.label}
+            {accessDetails && t(accessDetails?.i18n_label)}
             {editable && (
               <button
                 type="button"
diff --git a/web/core/components/project/applied-filters/date.tsx b/web/core/components/project/applied-filters/date.tsx
index 577015ad5..d5879989f 100644
--- a/web/core/components/project/applied-filters/date.tsx
+++ b/web/core/components/project/applied-filters/date.tsx
@@ -1,7 +1,7 @@
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // helpers
-import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@/constants/filters";
+import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@plane/constants";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { capitalizeFirstLetter } from "@/helpers/string.helper";
 // constants
diff --git a/web/core/components/project/applied-filters/project-display-filters.tsx b/web/core/components/project/applied-filters/project-display-filters.tsx
index d00f69219..ef0d583bb 100644
--- a/web/core/components/project/applied-filters/project-display-filters.tsx
+++ b/web/core/components/project/applied-filters/project-display-filters.tsx
@@ -2,9 +2,10 @@ import { observer } from "mobx-react";
 // icons
 import { X } from "lucide-react";
 // types
+import { PROJECT_DISPLAY_FILTER_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TProjectAppliedDisplayFilterKeys } from "@plane/types";
 // constants
-import { PROJECT_DISPLAY_FILTER_OPTIONS } from "@/constants/project";
 
 type Props = {
   handleRemove: (key: TProjectAppliedDisplayFilterKeys) => void;
@@ -14,14 +15,15 @@ type Props = {
 
 export const AppliedProjectDisplayFilters: React.FC<Props> = observer((props) => {
   const { handleRemove, values, editable } = props;
+  const { t } = useTranslation();
 
   return (
     <>
       {values.map((key) => {
-        const filterLabel = PROJECT_DISPLAY_FILTER_OPTIONS.find((s) => s.key === key)?.label;
+        const filterLabel = PROJECT_DISPLAY_FILTER_OPTIONS.find((s) => s.key === key)?.i18n_label;
         return (
           <div key={key} className="flex items-center gap-1 rounded px-1.5 py-1 text-xs bg-custom-background-80">
-            {filterLabel}
+            {filterLabel && t(filterLabel)}
             {editable && (
               <button
                 type="button"
diff --git a/web/core/components/project/applied-filters/root.tsx b/web/core/components/project/applied-filters/root.tsx
index 385ffab73..2069aa28b 100644
--- a/web/core/components/project/applied-filters/root.tsx
+++ b/web/core/components/project/applied-filters/root.tsx
@@ -1,6 +1,8 @@
 "use client";
 
 import { X } from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // ui
@@ -30,6 +32,7 @@ const MEMBERS_FILTERS = ["lead", "members"];
 const DATE_FILTERS = ["created_at"];
 
 export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
+  const { t } = useTranslation();
   const {
     appliedFilters,
     appliedDisplayFilters,
@@ -95,7 +98,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
         {/* Applied display filters */}
         {appliedDisplayFilters.length > 0 && (
           <Tag key="project_display_filters">
-            <span className="text-xs text-custom-text-300">Projects</span>
+            <span className="text-xs text-custom-text-300">{t("projects.label", { count: 2 })}</span>
             <AppliedProjectDisplayFilters
               editable={isEditingAllowed}
               values={appliedDisplayFilters}
@@ -106,7 +109,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
         {isEditingAllowed && (
           <button type="button" onClick={handleClearAllFilters}>
             <Tag>
-              Clear all
+              {t("common.clear_all")}
               <X size={12} strokeWidth={2} />
             </Tag>
           </button>
diff --git a/web/core/components/project/card-list.tsx b/web/core/components/project/card-list.tsx
index 2578be727..606f533f1 100644
--- a/web/core/components/project/card-list.tsx
+++ b/web/core/components/project/card-list.tsx
@@ -1,35 +1,76 @@
 import { observer } from "mobx-react";
 import Image from "next/image";
-// components
+// plane imports
+import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ContentWrapper } from "@plane/ui";
-import { EmptyState } from "@/components/empty-state";
+// components
+import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 import { ProjectCard } from "@/components/project";
 import { ProjectsLoader } from "@/components/ui";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useProjectFilter } from "@/hooks/store";
+import { useCommandPalette, useEventTracker, useProject, useProjectFilter, useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 // assets
 import AllFiltersImage from "@/public/empty-state/project/all-filters.svg";
 import NameFilterImage from "@/public/empty-state/project/name-filter.svg";
 
-export const ProjectCardList = observer(() => {
+type TProjectCardListProps = {
+  totalProjectIds?: string[];
+  filteredProjectIds?: string[];
+};
+
+export const ProjectCardList = observer((props: TProjectCardListProps) => {
+  const { totalProjectIds: totalProjectIdsProps, filteredProjectIds: filteredProjectIdsProps } = props;
+  // plane hooks
+  const { t } = useTranslation();
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
-  const { workspaceProjectIds, filteredProjectIds, getProjectById, loader } = useProject();
+  const {
+    loader,
+    fetchStatus,
+    workspaceProjectIds: storeWorkspaceProjectIds,
+    filteredProjectIds: storeFilteredProjectIds,
+    getProjectById,
+  } = useProject();
   const { searchQuery, currentWorkspaceDisplayFilters } = useProjectFilter();
+  const { allowPermissions } = useUserPermissions();
 
-  if (!filteredProjectIds || !workspaceProjectIds || loader) return <ProjectsLoader />;
+  // helper hooks
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/projects" });
+
+  // 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 (
-      <EmptyState
-        type={EmptyStateType.WORKSPACE_PROJECTS}
-        primaryButtonOnClick={() => {
-          setTrackElement("Project empty state");
-          toggleCreateProjectModal(true);
-        }}
+      <DetailedEmptyState
+        title={t("workspace_projects.empty_state.general.title")}
+        description={t("workspace_projects.empty_state.general.description")}
+        assetPath={resolvedPath}
+        customPrimaryButton={
+          <ComicBoxButton
+            label={t("workspace_projects.empty_state.general.primary_button.text")}
+            title={t("workspace_projects.empty_state.general.primary_button.comic.title")}
+            description={t("workspace_projects.empty_state.general.primary_button.comic.description")}
+            onClick={() => {
+              setTrackElement("Project empty state");
+              toggleCreateProjectModal(true);
+            }}
+            disabled={!canPerformEmptyStateActions}
+          />
+        }
       />
     );
 
@@ -42,11 +83,11 @@ export const ProjectCardList = observer(() => {
             className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
             alt="No matching projects"
           />
-          <h5 className="mb-1 mt-7 text-xl font-medium">No matching projects</h5>
+          <h5 className="mb-1 mt-7 text-xl font-medium">{t("workspace_projects.empty_state.filter.title")}</h5>
           <p className="whitespace-pre-line text-base text-custom-text-400">
             {searchQuery.trim() === ""
-              ? "Remove the filters to see all projects"
-              : "No projects detected with the matching criteria.\nCreate a new project instead"}
+              ? t("workspace_projects.empty_state.filter.description")
+              : t("workspace_projects.empty_state.search.description")}
           </p>
         </div>
       </div>
diff --git a/web/core/components/project/card.tsx b/web/core/components/project/card.tsx
index d755ce007..304ecab33 100644
--- a/web/core/components/project/card.tsx
+++ b/web/core/components/project/card.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { ArchiveRestoreIcon, Check, ExternalLink, LinkIcon, Lock, Settings, Trash2, UserPlus } from "lucide-react";
 // types
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import type { IProject } from "@plane/types";
 // ui
 import {
@@ -29,11 +30,10 @@ import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { getFileURL } from "@/helpers/file.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
-import { useProject, useUserPermissions } from "@/hooks/store";
+import { useMember, useProject, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane-web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   project: IProject;
@@ -51,19 +51,21 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
   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?.map((member) => member.member_id);
+  const projectMembersIds = project.members;
   const shouldRenderFavorite = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.WORKSPACE
   );
   // auth
-  const isOwner = project.member_role === EUserPermissions.ADMIN;
-  const isMember = project.member_role === EUserPermissions.MEMBER;
+  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;
 
@@ -118,21 +120,21 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
       action: () => router.push(`/${workspaceSlug}/projects/${project.id}/settings`, {}, { showProgressBar: false }),
       title: "Settings",
       icon: Settings,
-      shouldRender: !isArchived && (isOwner || isMember),
+      shouldRender: !isArchived && (hasAdminRole || hasMemberRole),
     },
     {
       key: "join",
       action: () => setJoinProjectModal(true),
       title: "Join",
       icon: UserPlus,
-      shouldRender: !project.is_member && !isArchived,
+      shouldRender: !isMemberOfProject && !isArchived,
     },
     {
       key: "open-new-tab",
       action: handleOpenInNewTab,
       title: "Open in new tab",
       icon: ExternalLink,
-      shouldRender: project.is_member && !isArchived,
+      shouldRender: !isMemberOfProject && !isArchived,
     },
     {
       key: "copy-link",
@@ -146,14 +148,14 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
       action: () => setRestoreProject(true),
       title: "Restore",
       icon: ArchiveRestoreIcon,
-      shouldRender: isArchived && isOwner,
+      shouldRender: isArchived && hasAdminRole,
     },
     {
       key: "delete",
       action: () => setDeleteProjectModal(true),
       title: "Delete",
       icon: Trash2,
-      shouldRender: isArchived && isOwner,
+      shouldRender: isArchived && hasAdminRole,
     },
   ];
 
@@ -188,13 +190,13 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
         ref={projectCardRef}
         href={`/${workspaceSlug}/projects/${project.id}/issues`}
         onClick={(e) => {
-          if (!project.is_member || isArchived) {
+          if (!isMemberOfProject || isArchived) {
             e.preventDefault();
             e.stopPropagation();
             if (!isArchived) setJoinProjectModal(true);
           }
         }}
-        data-prevent-nprogress={!project.is_member || isArchived}
+        data-prevent-nprogress={!isMemberOfProject || isArchived}
         className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100"
       >
         <ContextMenu parentRef={projectCardRef} items={MENU_ITEMS} />
@@ -249,7 +251,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                       if (project.is_favorite) handleRemoveFromFavorites();
                       else handleAddToFavorites();
                     }}
-                    selected={project.is_favorite}
+                    selected={!!project.is_favorite}
                   />
                 )}
               </div>
@@ -281,14 +283,10 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                   <div className="flex cursor-pointer items-center gap-2 text-custom-text-200">
                     <AvatarGroup showTooltip={false}>
                       {projectMembersIds.map((memberId) => {
-                        const member = project.members?.find((m) => m.member_id === memberId);
+                        const member = getUserDetails(memberId);
                         if (!member) return null;
                         return (
-                          <Avatar
-                            key={member.id}
-                            name={member.member__display_name}
-                            src={getFileURL(member.member__avatar_url)}
-                          />
+                          <Avatar key={member.id} name={member.display_name} src={getFileURL(member.avatar_url)} />
                         );
                       })}
                     </AvatarGroup>
@@ -300,7 +298,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
               {isArchived && <div className="text-xs text-custom-text-400 font-medium">Archived</div>}
             </div>
             {isArchived ? (
-              isOwner && (
+              hasAdminRole && (
                 <div className="flex items-center justify-center gap-2">
                   <div
                     className="flex items-center justify-center text-xs text-custom-text-400 font-medium hover:text-custom-text-200"
@@ -329,8 +327,8 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
               )
             ) : (
               <>
-                {project.is_member &&
-                  (isOwner || isMember ? (
+                {isMemberOfProject &&
+                  (hasAdminRole || hasMemberRole ? (
                     <Link
                       className="flex items-center justify-center rounded p-1 text-custom-text-400 hover:bg-custom-background-80 hover:text-custom-text-200"
                       onClick={(e) => {
@@ -346,7 +344,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                       Joined
                     </span>
                   ))}
-                {!project.is_member && (
+                {!isMemberOfProject && (
                   <div className="flex items-center">
                     <Button
                       variant="link-primary"
diff --git a/web/core/components/project/create/common-attributes.tsx b/web/core/components/project/create/common-attributes.tsx
index f753d0ae7..97807e09c 100644
--- a/web/core/components/project/create/common-attributes.tsx
+++ b/web/core/components/project/create/common-attributes.tsx
@@ -1,11 +1,13 @@
 import { ChangeEvent } from "react";
 import { Controller, useFormContext, UseFormSetValue } from "react-hook-form";
 import { Info } from "lucide-react";
-import { cn } from "@plane/editor";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Input, TextArea, Tooltip } from "@plane/ui";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
+// plane utils
+import { cn } from "@plane/utils";
 // helpers
 import { projectIdentifierSanitizer } from "@/helpers/project.helper";
 import { getTabIndex } from "@/helpers/tab-indices.helper";
@@ -26,6 +28,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
   } = useFormContext<TProject>();
 
   const { getIndex } = getTabIndex(ETabIndices.PROJECT_CREATE, isMobile);
+  const { t } = useTranslation();
 
   const handleNameChange = (onChange: (...event: any[]) => void) => (e: ChangeEvent<HTMLInputElement>) => {
     if (!isChangeInIdentifierRequired) {
@@ -50,10 +53,10 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
           control={control}
           name="name"
           rules={{
-            required: "Name is required",
+            required: t("name_is_required"),
             maxLength: {
               value: 255,
-              message: "Title should be less than 255 characters",
+              message: t("title_should_be_less_than_255_characters"),
             },
           }}
           render={({ field: { value, onChange } }) => (
@@ -64,7 +67,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
               value={value}
               onChange={handleNameChange(onChange)}
               hasError={Boolean(errors.name)}
-              placeholder="Project name"
+              placeholder={t("project_name")}
               className="w-full focus:border-blue-400"
               tabIndex={getIndex("name")}
             />
@@ -77,17 +80,17 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
           control={control}
           name="identifier"
           rules={{
-            required: "Project ID is required",
+            required: t("project_id_is_required"),
             // allow only alphanumeric & non-latin characters
             validate: (value) =>
-              /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || "Only Alphanumeric & Non-latin characters are allowed.",
+              /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || t("only_alphanumeric_non_latin_characters_allowed"),
             minLength: {
               value: 1,
-              message: "Project ID must at least be of 1 character",
+              message: t("project_id_must_be_at_least_1_character"),
             },
             maxLength: {
               value: 5,
-              message: "Project ID must at most be of 5 characters",
+              message: t("project_id_must_be_at_most_5_characters"),
             },
           }}
           render={({ field: { value, onChange } }) => (
@@ -98,7 +101,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
               value={value}
               onChange={handleIdentifierChange(onChange)}
               hasError={Boolean(errors.identifier)}
-              placeholder="Project ID"
+              placeholder={t("project_id")}
               className={cn("w-full text-xs focus:border-blue-400 pr-7", {
                 uppercase: value,
               })}
@@ -108,7 +111,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
         />
         <Tooltip
           isMobile={isMobile}
-          tooltipContent="Helps you identify issues in the project uniquely. Max 5 characters."
+          tooltipContent={t("project_id_tooltip_content")}
           className="text-sm"
           position="right-top"
         >
@@ -125,7 +128,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
               id="description"
               name="description"
               value={value}
-              placeholder="Description..."
+              placeholder={t("description")}
               onChange={onChange}
               className="!h-24 text-sm focus:border-blue-400"
               hasError={Boolean(errors?.description)}
diff --git a/web/core/components/project/create/header.tsx b/web/core/components/project/create/header.tsx
index 6bdbb3c74..2353b36d1 100644
--- a/web/core/components/project/create/header.tsx
+++ b/web/core/components/project/create/header.tsx
@@ -1,14 +1,15 @@
 import { useState } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 import { X } from "lucide-react";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // plane types
 import { IProject } from "@plane/types";
 // plane ui
 import { CustomEmojiIconPicker, EmojiIconPickerTypes, Logo } from "@plane/ui";
 // components
 import { ImagePickerPopover } from "@/components/core";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getFileURL } from "@/helpers/file.helper";
@@ -21,6 +22,7 @@ type Props = {
 const ProjectCreateHeader: React.FC<Props> = (props) => {
   const { handleClose, isMobile = false } = props;
   const { watch, control } = useFormContext<IProject>();
+  const { t } = useTranslation();
   // derived values
   const coverImage = watch("cover_image_url");
 
@@ -33,7 +35,7 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
         <img
           src={getFileURL(coverImage)}
           className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
-          alt="Project cover image"
+          alt={t("project_cover_image_alt")}
         />
       )}
 
@@ -48,10 +50,10 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
           control={control}
           render={({ field: { value, onChange } }) => (
             <ImagePickerPopover
-              label="Change Cover"
+              label={t("change_cover")}
               onChange={onChange}
               control={control}
-              value={value}
+              value={value ?? null}
               tabIndex={getIndex("cover_image")}
             />
           )}
diff --git a/web/core/components/project/create/project-create-buttons.tsx b/web/core/components/project/create/project-create-buttons.tsx
index 2fa0706e0..22ce787da 100644
--- a/web/core/components/project/create/project-create-buttons.tsx
+++ b/web/core/components/project/create/project-create-buttons.tsx
@@ -1,9 +1,10 @@
 import { useFormContext } from "react-hook-form";
+// plane imports
+import { ETabIndices } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IProject } from "@plane/types";
 // ui
 import { Button } from "@plane/ui";
-// constants
-import { ETabIndices } from "@/constants/tab-indices";
 // helpers
 import { getTabIndex } from "@/helpers/tab-indices.helper";
 
@@ -13,6 +14,7 @@ type Props = {
 };
 
 const ProjectCreateButtons: React.FC<Props> = (props) => {
+  const { t } = useTranslation();
   const { handleClose, isMobile = false } = props;
   const {
     formState: { isSubmitting },
@@ -23,10 +25,10 @@ const ProjectCreateButtons: React.FC<Props> = (props) => {
   return (
     <div className="flex justify-end gap-2 py-4 border-t border-custom-border-100">
       <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
-        Cancel
+        {t("cancel")}
       </Button>
       <Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={getIndex("submit")}>
-        {isSubmitting ? "Creating" : "Create project"}
+        {isSubmitting ? t("creating") : t("create_project")}
       </Button>
     </div>
   );
diff --git a/web/core/components/project/delete-project-modal.tsx b/web/core/components/project/delete-project-modal.tsx
index c8deaf97e..4c0b8c9af 100644
--- a/web/core/components/project/delete-project-modal.tsx
+++ b/web/core/components/project/delete-project-modal.tsx
@@ -6,11 +6,11 @@ import { Controller, useForm } from "react-hook-form";
 import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // types
+import { PROJECT_DELETED } from "@plane/constants";
 import type { IProject } from "@plane/types";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PROJECT_DELETED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useProject } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
diff --git a/web/core/components/project/dropdowns/filters/access.tsx b/web/core/components/project/dropdowns/filters/access.tsx
index d15580257..b9b3dd6a2 100644
--- a/web/core/components/project/dropdowns/filters/access.tsx
+++ b/web/core/components/project/dropdowns/filters/access.tsx
@@ -1,9 +1,11 @@
 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";
-// constants
-import { NETWORK_CHOICES } from "@/constants/project";
+import { ProjectNetworkIcon } from "@/components/project";
 
 type Props = {
   appliedFilters: string[] | null;
@@ -15,9 +17,10 @@ export const FilterAccess: React.FC<Props> = observer((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.label.includes(searchQuery.toLowerCase()));
+  const filteredOptions = NETWORK_CHOICES.filter((a) => a.i18n_label.includes(searchQuery.toLowerCase()));
 
   return (
     <>
@@ -34,8 +37,8 @@ export const FilterAccess: React.FC<Props> = observer((props) => {
                 key={access.key}
                 isChecked={appliedFilters?.includes(`${access.key}`) ? true : false}
                 onClick={() => handleUpdate(`${access.key}`)}
-                icon={<access.icon className="h-3 w-3" />}
-                title={access.label}
+                icon={<ProjectNetworkIcon iconKey={access.iconKey} />}
+                title={t(access.i18n_label)}
               />
             ))
           ) : (
diff --git a/web/core/components/project/dropdowns/filters/created-at.tsx b/web/core/components/project/dropdowns/filters/created-at.tsx
index 85a2c3b95..87d45a2a5 100644
--- a/web/core/components/project/dropdowns/filters/created-at.tsx
+++ b/web/core/components/project/dropdowns/filters/created-at.tsx
@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
+// plane constants
+import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@plane/constants";
 // components
 import { DateFilterModal } from "@/components/core";
 import { FilterHeader, FilterOption } from "@/components/issues";
-// constants
-import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@/constants/filters";
+
 // helpers
 import { isInDateFormat } from "@/helpers/date-time.helper";
 
diff --git a/web/core/components/project/dropdowns/order-by.tsx b/web/core/components/project/dropdowns/order-by.tsx
index ace859c21..b9665b61a 100644
--- a/web/core/components/project/dropdowns/order-by.tsx
+++ b/web/core/components/project/dropdowns/order-by.tsx
@@ -1,11 +1,12 @@
 "use client";
 
 import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react";
+import { PROJECT_ORDER_BY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TProjectOrderByOptions } from "@plane/types";
 // ui
 import { CustomMenu, getButtonStyling } from "@plane/ui";
 // helpers
-import { PROJECT_ORDER_BY_OPTIONS } from "@/constants/project";
 import { cn } from "@/helpers/common.helper";
 // types
 // constants
@@ -20,6 +21,7 @@ const DISABLED_ORDERING_OPTIONS = ["sort_order"];
 
 export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
   const { onChange, value, isMobile = false } = props;
+  const { t } = useTranslation();
 
   const orderByDetails = PROJECT_ORDER_BY_OPTIONS.find((option) => value?.includes(option.key));
 
@@ -34,13 +36,13 @@ export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
           {isMobile ? (
             <div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
               <ArrowDownWideNarrow className="h-3 w-3" />
-              {orderByDetails?.label}
+              {orderByDetails && t(orderByDetails?.i18n_label)}
               <ChevronDown className="h-3 w-3" strokeWidth={2} />
             </div>
           ) : (
             <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-200")}>
               <ArrowDownWideNarrow className="h-3 w-3" />
-              {orderByDetails?.label}
+              {orderByDetails && t(orderByDetails?.i18n_label)}
               <ChevronDown className="h-3 w-3" strokeWidth={2} />
             </div>
           )}
@@ -59,7 +61,7 @@ export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
             else onChange(option.key);
           }}
         >
-          {option.label}
+          {option && t(option?.i18n_label)}
           {value?.includes(option.key) && <Check className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
diff --git a/web/core/components/project/filters.tsx b/web/core/components/project/filters.tsx
index 9434f7995..54ae3a752 100644
--- a/web/core/components/project/filters.tsx
+++ b/web/core/components/project/filters.tsx
@@ -2,9 +2,12 @@ import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ListFilter } from "lucide-react";
-// types
-import { cn } from "@plane/editor";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// plane types
 import { TProjectFilters } from "@plane/types";
+// plane utils
+import { cn } from "@plane/utils";
 // components
 import { FiltersDropdown } from "@/components/issues";
 import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project";
@@ -21,6 +24,8 @@ type Props = {
 };
 
 const HeaderFilters = observer(({ filterMenuButton, isMobile, classname = "", filterClassname = "" }: Props) => {
+  // i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug } = useParams();
   const {
@@ -71,7 +76,7 @@ const HeaderFilters = observer(({ filterMenuButton, isMobile, classname = "", fi
       <div className={cn(filterClassname)}>
         <FiltersDropdown
           icon={<ListFilter className="h-3 w-3" />}
-          title="Filters"
+          title={t("common.filters")}
           placement="bottom-end"
           isFiltersApplied={isFiltersApplied}
           menuButton={filterMenuButton || null}
diff --git a/web/core/components/project/form.tsx b/web/core/components/project/form.tsx
index 86da4a2f7..f87f8ba84 100644
--- a/web/core/components/project/form.tsx
+++ b/web/core/components/project/form.tsx
@@ -3,6 +3,8 @@
 import { FC, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Info, Lock } from "lucide-react";
+import { NETWORK_CHOICES, PROJECT_UPDATED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // plane types
 import { IProject, IWorkspace } from "@plane/types";
 // plane ui
@@ -16,16 +18,13 @@ import {
   CustomEmojiIconPicker,
   EmojiIconPickerTypes,
   Tooltip,
-  // CustomSearchSelect,
 } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
 import { ImagePickerPopover } from "@/components/core";
-// constants
-import { PROJECT_UPDATED } from "@/constants/event-tracker";
-import { NETWORK_CHOICES } from "@/constants/project";
+import { TimezoneSelect } from "@/components/global";
+import { ProjectNetworkIcon } from "@/components/project";
 // helpers
-// import { TTimezone, TIME_ZONES } from "@/constants/timezones";
 import { renderFormattedDate } from "@/helpers/date-time.helper";
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getFileURL } from "@/helpers/file.helper";
@@ -34,6 +33,7 @@ import { useEventTracker, useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // services
 import { ProjectService } from "@/services/project";
+
 export interface IProjectDetailsForm {
   project: IProject;
   workspaceSlug: string;
@@ -43,6 +43,7 @@ export interface IProjectDetailsForm {
 const projectService = new ProjectService();
 export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
   const { project, workspaceSlug, projectId, isAdmin } = props;
+  const { t } = useTranslation();
   // states
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -50,6 +51,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
   const { captureProjectEvent } = useEventTracker();
   const { updateProject } = useProject();
   const { isMobile } = usePlatformOS();
+
   // form info
   const {
     handleSubmit,
@@ -68,20 +70,6 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
   });
   // derived values
   const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
-  // const getTimeZoneLabel = (timezone: TTimezone | undefined) => {
-  //   if (!timezone) return undefined;
-  //   return (
-  //     <div className="flex gap-1.5">
-  //       <span className="text-custom-text-400">{timezone.gmtOffset}</span>
-  //       <span className="text-custom-text-200">{timezone.name}</span>
-  //     </div>
-  //   );
-  // };
-  // const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
-  //   value: timeZone.value,
-  //   query: timeZone.name + " " + timeZone.gmtOffset + " " + timeZone.value,
-  //   content: getTimeZoneLabel(timeZone),
-  // }));
   const coverImage = watch("cover_image_url");
 
   useEffect(() => {
@@ -119,8 +107,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
         });
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Project updated successfully",
+          title: t("toast.success"),
+          message: t("project_settings.general.toast.success"),
         });
       })
       .catch((error) => {
@@ -130,8 +118,8 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
         });
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: error?.error ?? "Project could not be updated. Please try again.",
+          title: t("toast.error"),
+          message: error?.error ?? t("project_settings.general.toast.error"),
         });
       });
   };
@@ -146,7 +134,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       description: formData.description,
 
       logo_props: formData.logo_props,
-      // timezone: formData.timezone,
+      timezone: formData.timezone,
     };
     // if unsplash or a pre-defined image is uploaded, delete the old uploaded asset
     if (formData.cover_image_url?.startsWith("http")) {
@@ -158,7 +146,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       await projectService
         .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
         .then(async (res) => {
-          if (res.exists) setError("identifier", { message: "Identifier already exists" });
+          if (res.exists) setError("identifier", { message: t("common.identifier_already_exists") });
           else await handleUpdateChange(payload);
         });
     else await handleUpdateChange(payload);
@@ -172,7 +160,10 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       <div className="relative h-44 w-full">
         <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
         <img
-          src={getFileURL(coverImage ?? "")}
+          src={getFileURL(
+            coverImage ??
+              "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+          )}
           alt="Project cover image"
           className="h-44 w-full rounded-md object-cover"
         />
@@ -219,7 +210,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 <span>{watch("identifier")} .</span>
                 <span className="flex items-center gap-1.5">
                   {project.network === 0 && <Lock className="h-2.5 w-2.5 text-white " />}
-                  {currentNetwork?.label}
+                  {currentNetwork && t(currentNetwork?.i18n_label)}
                 </span>
               </span>
             </div>
@@ -231,10 +222,10 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 name="cover_image_url"
                 render={({ field: { value, onChange } }) => (
                   <ImagePickerPopover
-                    label="Change cover"
+                    label={t("change_cover")}
                     control={control}
                     onChange={onChange}
-                    value={value}
+                    value={value ?? null}
                     disabled={!isAdmin}
                     projectId={project.id}
                   />
@@ -246,12 +237,12 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       </div>
       <div className="my-8 flex flex-col gap-8">
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">Project name</h4>
+          <h4 className="text-sm">{t("common.project_name")}</h4>
           <Controller
             control={control}
             name="name"
             rules={{
-              required: "Name is required",
+              required: t("name_is_required"),
               maxLength: {
                 value: 255,
                 message: "Project name should be less than 255 characters",
@@ -267,7 +258,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 onChange={onChange}
                 hasError={Boolean(errors.name)}
                 className="rounded-md !p-3 font-medium"
-                placeholder="Project name"
+                placeholder={t("common.project_name")}
                 disabled={!isAdmin}
               />
             )}
@@ -275,7 +266,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
           <span className="text-xs text-red-500">{errors?.name?.message}</span>
         </div>
         <div className="flex flex-col gap-1">
-          <h4 className="text-sm">Description</h4>
+          <h4 className="text-sm">{t("description")}</h4>
           <Controller
             name="description"
             control={control}
@@ -284,7 +275,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 id="description"
                 name="description"
                 value={value}
-                placeholder="Enter project description"
+                placeholder={t("project_description_placeholder")}
                 onChange={onChange}
                 className="min-h-[102px] text-sm font-medium"
                 hasError={Boolean(errors?.description)}
@@ -301,17 +292,15 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 control={control}
                 name="identifier"
                 rules={{
-                  required: "Project ID is required",
-                  validate: (value) =>
-                    /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) ||
-                    "Only Alphanumeric & Non-latin characters are allowed.",
+                  required: t("project_id_is_required"),
+                  validate: (value) => /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || t("project_id_allowed_char"),
                   minLength: {
                     value: 1,
-                    message: "Project ID must at least be of 1 character",
+                    message: t("project_id_min_char"),
                   },
                   maxLength: {
                     value: 5,
-                    message: "Project ID must at most be of 5 characters",
+                    message: t("project_id_max_char"),
                   },
                 }}
                 render={({ field: { value, ref } }) => (
@@ -323,7 +312,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                     onChange={handleIdentifierChange}
                     ref={ref}
                     hasError={Boolean(errors.identifier)}
-                    placeholder="Enter project ID"
+                    placeholder={t("project_settings.general.enter_project_id")}
                     className="w-full font-medium"
                     disabled={!isAdmin}
                   />
@@ -331,7 +320,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               />
               <Tooltip
                 isMobile={isMobile}
-                tooltipContent="Helps you identify issues in the project uniquely. Max 5 characters."
+                tooltipContent="Helps you identify work items in the project uniquely. Max 5 characters."
                 className="text-sm"
                 position="right-top"
               >
@@ -343,7 +332,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             </span>
           </div>
           <div className="flex flex-col gap-1">
-            <h4 className="text-sm">Network</h4>
+            <h4 className="text-sm">{t("workspace_projects.network.label")}</h4>
             <Controller
               name="network"
               control={control}
@@ -357,11 +346,11 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                       <div className="flex items-center gap-1">
                         {selectedNetwork ? (
                           <>
-                            <selectedNetwork.icon className="h-3.5 w-3.5" />
-                            {selectedNetwork.label}
+                            <ProjectNetworkIcon iconKey={selectedNetwork.iconKey} className="h-3.5 w-3.5" />
+                            {t(selectedNetwork.i18n_label)}
                           </>
                         ) : (
-                          <span className="text-custom-text-400">Select network</span>
+                          <span className="text-custom-text-400">{t("select_network")}</span>
                         )}
                       </div>
                     }
@@ -373,10 +362,10 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                     {NETWORK_CHOICES.map((network) => (
                       <CustomSelect.Option key={network.key} value={network.key}>
                         <div className="flex items-start gap-2">
-                          <network.icon className="h-3.5 w-3.5" />
+                          <ProjectNetworkIcon iconKey={network.iconKey} className="h-3.5 w-3.5" />
                           <div className="-mt-1">
-                            <p>{network.label}</p>
-                            <p className="text-xs text-custom-text-400">{network.description}</p>
+                            <p>{t(network.i18n_label)}</p>
+                            <p className="text-xs text-custom-text-400">{t(network.description)}</p>
                           </div>
                         </div>
                       </CustomSelect.Option>
@@ -386,39 +375,35 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               }}
             />
           </div>
-          {/* <div className="flex flex-col gap-1 col-span-1 sm:col-span-2 xl:col-span-1">
-            <h4 className="text-sm">Project Timezone</h4>
+          <div className="flex flex-col gap-1 col-span-1 sm:col-span-2 xl:col-span-1">
+            <h4 className="text-sm">{t("common.project_timezone")}</h4>
             <Controller
               name="timezone"
               control={control}
-              rules={{ required: "Please select a timezone" }}
+              rules={{ required: t("project_settings.general.please_select_a_timezone") }}
               render={({ field: { value, onChange } }) => (
-                <CustomSearchSelect
-                  value={value}
-                  label={
-                    value
-                      ? (getTimeZoneLabel(TIME_ZONES.find((t) => t.value === value)) ?? value)
-                      : "Select a timezone"
-                  }
-                  options={timeZoneOptions}
-                  onChange={onChange}
-                  buttonClassName={errors.timezone ? "border-red-500" : "border-none"}
-                  className="rounded-md border-[0.5px] !border-custom-border-200"
-                  optionsClassName="w-72"
-                  input
-                />
+                <>
+                  <TimezoneSelect
+                    value={value}
+                    onChange={(value: string) => {
+                      onChange(value);
+                    }}
+                    error={Boolean(errors.timezone)}
+                    buttonClassName="border-none"
+                  />
+                </>
               )}
             />
             {errors.timezone && <span className="text-xs text-red-500">{errors.timezone.message}</span>}
-          </div> */}
+          </div>
         </div>
         <div className="flex items-center justify-between py-2">
           <>
             <Button variant="primary" type="submit" loading={isLoading} disabled={!isAdmin}>
-              {isLoading ? "Updating..." : "Update project"}
+              {isLoading ? `${t("updating")}...` : t("common.update_project")}
             </Button>
             <span className="text-sm italic text-custom-sidebar-text-400">
-              Created on {renderFormattedDate(project?.created_at)}
+              {t("common.created_on")} {renderFormattedDate(project?.created_at)}
             </span>
           </>
         </div>
diff --git a/web/core/components/project/header.tsx b/web/core/components/project/header.tsx
index edb6d5815..17adc130e 100644
--- a/web/core/components/project/header.tsx
+++ b/web/core/components/project/header.tsx
@@ -1,40 +1,31 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
-import { Search, Briefcase, X } from "lucide-react";
-// plane helpers
-import { useOutsideClickDetector } from "@plane/hooks";
+import { Briefcase } from "lucide-react";
+// i18n
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
-// helpers
-import { cn } from "@/helpers/common.helper";
 // hooks
-import { useCommandPalette, useEventTracker, useProjectFilter, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useCommandPalette, useEventTracker, useUserPermissions } from "@/hooks/store";
+// plane web constants
+// components
 import HeaderFilters from "./filters";
+import { ProjectSearch } from "./search-projects";
 
 export const ProjectsBaseHeader = observer(() => {
-  // states
-  const [isSearchOpen, setIsSearchOpen] = useState(false);
-  // refs
-  const inputRef = useRef<HTMLInputElement>(null);
+  // i18n
+  const { t } = useTranslation();
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
 
   const pathname = usePathname();
-
-  const { searchQuery, updateSearchQuery } = useProjectFilter();
-
-  // outside click detector hook
-  useOutsideClickDetector(inputRef, () => {
-    if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
-  });
   // auth
   const isAuthorizedUser = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -42,74 +33,24 @@ export const ProjectsBaseHeader = observer(() => {
   );
   const isArchived = pathname.includes("/archives");
 
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Escape") {
-      if (searchQuery && searchQuery.trim() !== "") updateSearchQuery("");
-      else setIsSearchOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    if (searchQuery.trim() !== "") setIsSearchOpen(true);
-  }, [searchQuery]);
-
   return (
     <Header>
       <Header.LeftItem>
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
+            link={
+              <BreadcrumbLink
+                label={t("workspace_projects.label", { count: 2 })}
+                icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
           />
           {isArchived && <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Archived" />} />}
         </Breadcrumbs>
       </Header.LeftItem>
       <Header.RightItem>
-        <div className="flex items-center">
-          {!isSearchOpen && (
-            <button
-              type="button"
-              className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
-              onClick={() => {
-                setIsSearchOpen(true);
-                inputRef.current?.focus();
-              }}
-            >
-              <Search className="h-3.5 w-3.5" />
-            </button>
-          )}
-          <div
-            className={cn(
-              "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
-              {
-                "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
-              }
-            )}
-          >
-            <Search className="h-3.5 w-3.5" />
-            <input
-              ref={inputRef}
-              className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 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);
-                }}
-              >
-                <X className="h-3 w-3" />
-              </button>
-            )}
-          </div>
-        </div>
-
+        <ProjectSearch />
         <div className="hidden md:flex">
           <HeaderFilters />
         </div>
@@ -122,7 +63,8 @@ export const ProjectsBaseHeader = observer(() => {
             }}
             className="items-center gap-1"
           >
-            <span className="hidden sm:inline-block">Add</span> Project
+            <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>
         ) : (
           <></>
diff --git a/web/core/components/project/index.ts b/web/core/components/project/index.ts
index 5f47350a8..3f2b2b077 100644
--- a/web/core/components/project/index.ts
+++ b/web/core/components/project/index.ts
@@ -18,4 +18,7 @@ export * from "./member-list-item";
 export * from "./project-settings-member-defaults";
 export * from "./send-project-invitation-modal";
 export * from "./confirm-project-member-remove";
+export * from "./multi-select-modal";
+export * from "./search-projects";
+export * from "./project-network-icon";
 export * from "@/plane-web/components/projects/create/root";
diff --git a/web/core/components/project/join-project-modal.tsx b/web/core/components/project/join-project-modal.tsx
index 2006c491c..d46cf4d0b 100644
--- a/web/core/components/project/join-project-modal.tsx
+++ b/web/core/components/project/join-project-modal.tsx
@@ -25,7 +25,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
   const [isJoiningLoading, setIsJoiningLoading] = useState(false);
   // store hooks
   const { joinProject } = useUserPermissions();
-  const { fetchProjects } = useProject();
+  const { fetchProjectDetails } = useProject();
   // router
   const router = useAppRouter();
 
@@ -35,7 +35,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
     joinProject(workspaceSlug, project.id)
       .then(() => {
         router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
-        fetchProjects(workspaceSlug);
+        fetchProjectDetails(workspaceSlug, project.id);
         handleClose();
       })
       .finally(() => {
diff --git a/web/core/components/project/leave-project-modal.tsx b/web/core/components/project/leave-project-modal.tsx
index 470a5fe61..febfd9dc3 100644
--- a/web/core/components/project/leave-project-modal.tsx
+++ b/web/core/components/project/leave-project-modal.tsx
@@ -8,11 +8,11 @@ import { Controller, useForm } from "react-hook-form";
 import { AlertTriangleIcon } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // types
+import { PROJECT_MEMBER_LEAVE } from "@plane/constants";
 import { IProject } from "@plane/types";
 // ui
 import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PROJECT_MEMBER_LEAVE } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -144,7 +144,7 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to leave the project -
                       <span className="font-medium text-custom-text-100">{` "${project?.name}" `}</span>? All of the
-                      issues associated with you will become inaccessible.
+                      work items associated with you will become inaccessible.
                     </p>
                   </span>
 
diff --git a/web/core/components/project/member-list-item.tsx b/web/core/components/project/member-list-item.tsx
index 3a7c5ed03..2f52aecf7 100644
--- a/web/core/components/project/member-list-item.tsx
+++ b/web/core/components/project/member-list-item.tsx
@@ -2,14 +2,14 @@
 
 import { observer } from "mobx-react";
 
+import { PROJECT_MEMBER_LEAVE } from "@plane/constants";
 import { TOAST_TYPE, Table, setToast } from "@plane/ui";
 // components
 import { ConfirmProjectMemberRemove } from "@/components/project";
 // constants
-import { PROJECT_MEMBER_LEAVE } from "@/constants/event-tracker";
 
 // hooks
-import { useEventTracker, useMember, useProject, useUser, useUserPermissions } from "@/hooks/store";
+import { useEventTracker, useMember, useUser, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { useProjectColumns } from "@/plane-web/components/projects/settings/useProjectColumns";
 import { IProjectMemberDetails } from "@/store/member/project-member.store";
@@ -27,7 +27,6 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
   // store hooks
   const { leaveProject } = useUserPermissions();
   const { data: currentUser } = useUser();
-  const { fetchProjects } = useProject();
   const {
     project: { removeMemberFromProject },
   } = useMember();
@@ -38,19 +37,18 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
     if (!workspaceSlug || !projectId || !memberId) return;
 
     if (memberId === currentUser?.id) {
-      router.push(`/${workspaceSlug}/projects`);
       await leaveProject(workspaceSlug.toString(), projectId.toString())
         .then(async () => {
+          router.push(`/${workspaceSlug}/projects`);
           captureEvent(PROJECT_MEMBER_LEAVE, {
             state: "SUCCESS",
             element: "Project settings members page",
           });
-          await fetchProjects(workspaceSlug.toString());
         })
         .catch((err) =>
           setToast({
             type: TOAST_TYPE.ERROR,
-            title: "Error!",
+            title: "You can’t leave this project yet.",
             message: err?.error || "Something went wrong. Please try again.",
           })
         );
@@ -58,14 +56,13 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
       await removeMemberFromProject(workspaceSlug.toString(), projectId.toString(), memberId).catch((err) =>
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "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;
-  removeMemberModal && console.log("removeMemberModal", JSON.parse(JSON.stringify(removeMemberModal?.member)));
   return (
     <>
       {removeMemberModal && (
diff --git a/web/core/components/project/member-list.tsx b/web/core/components/project/member-list.tsx
index 5f75fa326..c6bf34640 100644
--- a/web/core/components/project/member-list.tsx
+++ b/web/core/components/project/member-list.tsx
@@ -2,18 +2,21 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { Search } from "lucide-react";
 // hooks
 // components
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
 import { ProjectMemberListItem, SendProjectInvitationModal } from "@/components/project";
 // ui
 import { MembersSettingsLoader } from "@/components/ui";
 import { useEventTracker, useMember, useUserPermissions } from "@/hooks/store";
-// plane-web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const ProjectMemberList: React.FC = observer(() => {
+  // router
+  const { projectId } = useParams();
   // states
   const [inviteModal, setInviteModal] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
@@ -23,8 +26,11 @@ export const ProjectMemberList: React.FC = observer(() => {
     project: { projectMemberIds, getProjectMemberDetails },
   } = useMember();
   const { allowPermissions } = useUserPermissions();
+
+  const { t } = useTranslation();
+
   const searchedMembers = (projectMemberIds ?? []).filter((userId) => {
-    const memberDetails = getProjectMemberDetails(userId);
+    const memberDetails = projectId ? getProjectMemberDetails(userId, projectId.toString()) : null;
 
     if (!memberDetails?.member) return false;
 
@@ -33,7 +39,9 @@ export const ProjectMemberList: React.FC = observer(() => {
 
     return displayName?.includes(searchQuery.toLowerCase()) || fullName.includes(searchQuery.toLowerCase());
   });
-  const memberDetails = searchedMembers?.map((memberId) => getProjectMemberDetails(memberId));
+  const memberDetails = searchedMembers?.map((memberId) =>
+    projectId ? getProjectMemberDetails(memberId, projectId.toString()) : null
+  );
 
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT);
 
@@ -42,7 +50,7 @@ export const ProjectMemberList: React.FC = observer(() => {
       <SendProjectInvitationModal isOpen={inviteModal} onClose={() => setInviteModal(false)} />
 
       <div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5 overflow-x-hidden">
-        <h4 className="text-xl font-medium">Members</h4>
+        <h4 className="text-xl font-medium">{t("members")}</h4>
         <div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
           <Search className="h-3.5 w-3.5" />
           <input
@@ -61,7 +69,7 @@ export const ProjectMemberList: React.FC = observer(() => {
               setInviteModal(true);
             }}
           >
-            Add member
+            {t("add_member")}
           </Button>
         )}
       </div>
@@ -72,7 +80,7 @@ export const ProjectMemberList: React.FC = observer(() => {
           {searchedMembers.length !== 0 && <ProjectMemberListItem memberDetails={memberDetails ?? []} />}
 
           {searchedMembers.length === 0 && (
-            <h4 className="text-sm mt-16 text-center text-custom-text-400">No matching members</h4>
+            <h4 className="text-sm mt-16 text-center text-custom-text-400">{t("no_matching_members")}</h4>
           )}
         </div>
       )}
diff --git a/web/core/components/project/member-select.tsx b/web/core/components/project/member-select.tsx
index 706481c23..2e809b234 100644
--- a/web/core/components/project/member-select.tsx
+++ b/web/core/components/project/member-select.tsx
@@ -2,8 +2,10 @@
 
 import React from "react";
 import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
 import { Ban } from "lucide-react";
 // plane ui
+import { EUserPermissions } from "@plane/constants";
 import { Avatar, CustomSearchSelect } from "@plane/ui";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
@@ -18,6 +20,8 @@ type Props = {
 
 export const MemberSelect: React.FC<Props> = observer((props) => {
   const { value, onChange, isDisabled = false } = props;
+  // router
+  const { projectId } = useParams();
   // store hooks
   const {
     project: { projectMemberIds, getProjectMemberDetails },
@@ -25,9 +29,11 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
 
   const options = projectMemberIds
     ?.map((userId) => {
-      const memberDetails = getProjectMemberDetails(userId);
+      const memberDetails = projectId ? getProjectMemberDetails(userId, projectId.toString()) : null;
 
       if (!memberDetails?.member) return;
+      const isGuest = memberDetails.role === EUserPermissions.GUEST;
+      if (isGuest) return;
 
       return {
         value: `${memberDetails?.member.id}`,
@@ -47,7 +53,7 @@ export const MemberSelect: React.FC<Props> = observer((props) => {
         content: React.JSX.Element;
       }[]
     | undefined;
-  const selectedOption = getProjectMemberDetails(value);
+  const selectedOption = projectId ? getProjectMemberDetails(value, projectId.toString()) : null;
 
   return (
     <CustomSearchSelect
diff --git a/web/core/components/project/multi-select-modal.tsx b/web/core/components/project/multi-select-modal.tsx
new file mode 100644
index 000000000..013cd1248
--- /dev/null
+++ b/web/core/components/project/multi-select-modal.tsx
@@ -0,0 +1,184 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import xor from "lodash/xor";
+import { observer } from "mobx-react";
+import { Search, X } from "lucide-react";
+import { Combobox } from "@headlessui/react";
+// plane ui
+import { useTranslation } from "@plane/i18n";
+import { Button, Checkbox, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+// components
+import { Logo } from "@/components/common";
+import { SimpleEmptyState } from "@/components/empty-state";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useProject } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedProjectIds: string[];
+  projectIds: string[];
+  onSubmit: (projectIds: string[]) => Promise<void>;
+};
+
+export const ProjectMultiSelectModal: React.FC<Props> = observer((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);
+  // 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 = useResolvedAssetPath({
+    basePath: "/empty-state/search/project",
+  });
+
+  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 px-4 border-b border-custom-border-100">
+          <Search className="flex-shrink-0 size-4 text-custom-text-400" aria-hidden="true" />
+          <Combobox.Input
+            className="h-12 w-full border-0 bg-transparent text-sm text-custom-text-100 outline-none placeholder:text-custom-text-400 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 pt-2 px-4">
+            {selectedProjectIds.map((projectId) => {
+              const projectDetails = projectDetailsMap.get(projectId);
+              if (!projectDetails) return null;
+              return (
+                <div
+                  key={projectDetails.id}
+                  className="group flex items-center gap-1.5 bg-custom-background-90 px-2 py-1 rounded cursor-pointer"
+                  onClick={() => {
+                    handleSelectedProjectChange(selectedProjectIds.filter((id) => id !== projectDetails.id));
+                  }}
+                >
+                  <Logo logo={projectDetails.logo_props} size={14} />
+                  <p className="text-xs truncate text-custom-text-300 group-hover:text-custom-text-200 transition-colors">
+                    {projectDetails.identifier}
+                  </p>
+                  <X className="size-3 flex-shrink-0 text-custom-text-400 group-hover:text-custom-text-200 transition-colors" />
+                </div>
+              );
+            })}
+          </div>
+        )}
+        <Combobox.Options
+          static
+          className="py-2 vertical-scrollbar scrollbar-md max-h-80 scroll-py-2 overflow-y-auto 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-custom-text-100", {
+                "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
+                    key={projectDetails.id}
+                    value={projectDetails.id}
+                    className={({ active }) =>
+                      cn(
+                        "flex items-center justify-between gap-2 truncate w-full cursor-pointer select-none rounded-md p-2 text-custom-text-200 transition-colors",
+                        {
+                          "bg-custom-background-80": active,
+                          "text-custom-text-100": isProjectSelected,
+                        }
+                      )
+                    }
+                  >
+                    <div className="flex items-center gap-2 truncate">
+                      <span className="flex-shrink-0 flex items-center gap-2.5">
+                        <Checkbox checked={isProjectSelected} />
+                        <Logo logo={projectDetails.logo_props} size={16} />
+                      </span>
+                      <span className="flex-shrink-0 text-[10px]">{projectDetails.identifier}</span>
+                      <p className="text-sm truncate">{projectDetails.name}</p>
+                    </div>
+                  </Combobox.Option>
+                );
+              })}
+            </ul>
+          )}
+        </Combobox.Options>
+      </Combobox>
+      <div className="flex items-center justify-end gap-2 p-3 border-t border-custom-border-100">
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          ref={moveButtonRef}
+          variant="primary"
+          size="sm"
+          onClick={handleSubmit}
+          loading={isSubmitting}
+          disabled={!areSelectedProjectsChanged}
+        >
+          {isSubmitting ? "Confirming" : "Confirm"}
+        </Button>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/web/core/components/project/project-feature-update.tsx b/web/core/components/project/project-feature-update.tsx
index ff10271d8..a6e453644 100644
--- a/web/core/components/project/project-feature-update.tsx
+++ b/web/core/components/project/project-feature-update.tsx
@@ -3,6 +3,7 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Button, getButtonStyling, Row } from "@plane/ui";
 // components
@@ -20,6 +21,7 @@ type Props = {
 export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, onClose } = props;
   // store hooks
+  const { t } = useTranslation();
   const { getProjectById } = useProject();
 
   if (!workspaceSlug || !projectId) return null;
@@ -33,12 +35,13 @@ export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
       </Row>
       <div className="flex items-center justify-between gap-2 mt-4 px-6 py-4 border-t border-custom-border-100">
         <div className="flex gap-1 text-sm text-custom-text-300 font-medium">
-          Congrats! Project <Logo logo={currentProjectDetails.logo_props} />{" "}
-          <p className="break-all">{currentProjectDetails.name}</p> created.
+          {t("congrats")}! {t("workspace_projects.label", { count: 1 })}{" "}
+          <Logo logo={currentProjectDetails.logo_props} /> <p className="break-all">{currentProjectDetails.name}</p>{" "}
+          {t("created").toLowerCase()}.
         </div>
         <div className="flex gap-2">
           <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={1}>
-            Close
+            {t("close")}
           </Button>
           <Link
             href={`/${workspaceSlug}/projects/${projectId}/issues`}
@@ -46,7 +49,7 @@ export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
             className={getButtonStyling("primary", "sm")}
             tabIndex={2}
           >
-            Open project
+            {t("open_project")}
           </Link>
         </div>
       </div>
diff --git a/web/core/components/project/project-network-icon.tsx b/web/core/components/project/project-network-icon.tsx
new file mode 100644
index 000000000..4133c44c0
--- /dev/null
+++ b/web/core/components/project/project-network-icon.tsx
@@ -0,0 +1,30 @@
+import { Lock, Globe2 } from "lucide-react";
+// plane imports
+import { TNetworkChoiceIconKey } from "@plane/constants";
+import { cn } from "@plane/utils";
+
+type Props = {
+  iconKey: TNetworkChoiceIconKey;
+  className?: string;
+};
+
+export const ProjectNetworkIcon = (props: Props) => {
+  const { iconKey, className } = props;
+  // Get the icon key
+  const getProjectNetworkIcon = () => {
+    switch (iconKey) {
+      case "Lock":
+        return Lock;
+      case "Globe2":
+        return Globe2;
+      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/web/core/components/project/project-settings-member-defaults.tsx b/web/core/components/project/project-settings-member-defaults.tsx
index 4b6c3cd39..2dfc0563e 100644
--- a/web/core/components/project/project-settings-member-defaults.tsx
+++ b/web/core/components/project/project-settings-member-defaults.tsx
@@ -5,6 +5,8 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import useSWR from "swr";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IProject, IUserLite, IWorkspace } from "@plane/types";
 // ui
 import { Loader, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
@@ -14,7 +16,6 @@ import { MemberSelect } from "@/components/project";
 import { PROJECT_MEMBERS } from "@/constants/fetch-keys";
 // hooks
 import { useProject, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 // types
 
@@ -29,12 +30,14 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
   // store hooks
   const { allowPermissions } = useUserPermissions();
 
+  const { t } = useTranslation();
+
   const { currentProjectDetails, fetchProjectDetails, updateProject } = useProject();
   // derived values
   const isAdmin = allowPermissions(
     [EUserPermissions.ADMIN],
     EUserPermissionsLevel.PROJECT,
-    currentProjectDetails?.workspace_detail?.slug,
+    workspaceSlug?.toString(),
     currentProjectDetails?.id
   );
   // form info
@@ -78,9 +81,9 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
     })
       .then(() => {
         setToast({
-          title: "Success!",
+          title: `${t("success")}!`,
           type: TOAST_TYPE.SUCCESS,
-          message: "Project updated successfully",
+          message: t("project_settings.general.toast.success"),
         });
       })
       .catch((err) => {
@@ -96,9 +99,9 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
     })
       .then(() => {
         setToast({
-          title: "Success!",
+          title: `${t("success")}!`,
           type: TOAST_TYPE.SUCCESS,
-          message: "Project updated successfully",
+          message: t("project_settings.general.toast.success"),
         });
       })
       .catch((err) => {
@@ -109,13 +112,13 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
   return (
     <>
       <div className="flex items-center border-b border-custom-border-100 pb-3.5">
-        <h3 className="text-xl font-medium">Defaults</h3>
+        <h3 className="text-xl font-medium">{t("common.defaults")}</h3>
       </div>
 
       <div className="flex w-full flex-col gap-2 pb-4">
         <div className="flex w-full items-center gap-4 py-4">
           <div className="flex w-1/2 flex-col gap-2">
-            <h4 className="text-sm">Project lead</h4>
+            <h4 className="text-sm">{t("project_settings.members.project_lead")}</h4>
             <div className="">
               {currentProjectDetails ? (
                 <Controller
@@ -140,7 +143,7 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
           </div>
 
           <div className="flex w-1/2 flex-col gap-2">
-            <h4 className="text-sm">Default assignee</h4>
+            <h4 className="text-sm">{t("project_settings.members.default_assignee")}</h4>
             <div className="">
               {currentProjectDetails ? (
                 <Controller
@@ -169,14 +172,14 @@ export const ProjectSettingsMemberDefaults: React.FC = observer(() => {
         <div className="relative pb-4 flex justify-between items-center gap-3">
           <div className="space-y-1">
             <h3 className="text-lg font-medium text-custom-text-100">
-              Grant view access to all issues for guest users:
+              {t("project_settings.members.guest_super_permissions.title")}
             </h3>
             <p className="text-sm text-custom-text-200">
-              This will allow guests to have view access to all the project issues.
+              {t("project_settings.members.guest_super_permissions.sub_heading")}
             </p>
           </div>
           <ToggleSwitch
-            value={currentProjectDetails?.guest_view_all_features}
+            value={!!currentProjectDetails?.guest_view_all_features}
             onChange={() => toggleGuestViewAllIssues(!currentProjectDetails?.guest_view_all_features)}
             disabled={!isAdmin}
             size="md"
diff --git a/web/core/components/project/root.tsx b/web/core/components/project/root.tsx
index 0d0315547..9475563fd 100644
--- a/web/core/components/project/root.tsx
+++ b/web/core/components/project/root.tsx
@@ -2,8 +2,9 @@
 
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
-// types
 import { useParams, usePathname } from "next/navigation";
+// i18n
+import { useTranslation } from "@plane/i18n";
 import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // components
 import { PageHead } from "@/components/core";
@@ -17,6 +18,7 @@ const Root = observer(() => {
   const { currentWorkspace } = useWorkspace();
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
+  const { t } = useTranslation();
   // store
   const { totalProjectIds, filteredProjectIds } = useProject();
   const {
@@ -28,7 +30,9 @@ const Root = observer(() => {
     updateDisplayFilters,
   } = useProjectFilter();
   // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Projects` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace?.name} - ${t("workspace_projects.label", { count: 2 })}`
+    : undefined;
 
   const isArchived = pathname.includes("/archives");
 
diff --git a/web/core/components/project/search-projects.tsx b/web/core/components/project/search-projects.tsx
new file mode 100644
index 000000000..412e979e9
--- /dev/null
+++ b/web/core/components/project/search-projects.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { FC, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { Search, X } from "lucide-react";
+// plane hooks
+import { useOutsideClickDetector } from "@plane/hooks";
+// i18n
+import { useTranslation } from "@plane/i18n";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useProjectFilter } from "@/hooks/store";
+
+export const ProjectSearch: FC = observer(() => {
+  // 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 && (
+        <button
+          type="button"
+          className="-mr-1 p-2 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+          onClick={() => {
+            setIsSearchOpen(true);
+            inputRef.current?.focus();
+          }}
+        >
+          <Search className="h-3.5 w-3.5" />
+        </button>
+      )}
+      <div
+        className={cn(
+          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          {
+            "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+          }
+        )}
+      >
+        <Search className="h-3.5 w-3.5" />
+        <input
+          ref={inputRef}
+          className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 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);
+            }}
+          >
+            <X className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/components/project/send-project-invitation-modal.tsx b/web/core/components/project/send-project-invitation-modal.tsx
index 6d821cfef..e7d0813c5 100644
--- a/web/core/components/project/send-project-invitation-modal.tsx
+++ b/web/core/components/project/send-project-invitation-modal.tsx
@@ -6,17 +6,17 @@ import { useParams } from "next/navigation";
 import { useForm, Controller, useFieldArray } from "react-hook-form";
 import { ChevronDown, Plus, X } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
+// plane imports
+import { ROLE, PROJECT_MEMBER_ADDED, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Avatar, Button, CustomSelect, CustomSearchSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { PROJECT_MEMBER_ADDED } from "@/constants/event-tracker";
-import { ROLE } from "@/constants/workspace";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
 import { useEventTracker, useMember, useUserPermissions } from "@/hooks/store";
 // plane-web constants
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   isOpen: boolean;
@@ -68,6 +68,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
     name: "members",
   });
 
+  const { t } = useTranslation();
+
   const currentProjectRole = projectUserInfo?.[workspaceSlug?.toString()]?.[projectId?.toString()]?.role;
 
   const uninvitedPeople = workspaceMemberIds?.filter((userId) => {
@@ -175,7 +177,10 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
     const currentMemberWorkspaceRole = getWorkspaceMemberDetails(value)?.role;
     if (!value || !currentMemberWorkspaceRole) return ROLE;
 
-    const isGuestOROwner = [EUserPermissions.ADMIN, EUserPermissions.GUEST].includes(currentMemberWorkspaceRole);
+    const isGuestOROwner = [EUserPermissions.ADMIN, EUserPermissions.GUEST].includes(
+      currentMemberWorkspaceRole as EUserPermissions
+    );
+
 
     return Object.fromEntries(
       Object.entries(ROLE).filter(([key]) => !isGuestOROwner || [currentMemberWorkspaceRole].includes(parseInt(key)))
@@ -212,10 +217,12 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
                     <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                      Invite members
+                      {t("project_settings.members.invite_members.title")}
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">Invite members to work on your project.</p>
+                      <p className="text-sm text-custom-text-200">
+                        {t("project_settings.members.invite_members.sub_heading")}
+                      </p>
                     </div>
 
                     <div className="mb-3 space-y-4">
@@ -339,16 +346,16 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                       onClick={appendField}
                     >
                       <Plus className="h-4 w-4" />
-                      Add more
+                      {t("common.add_more")}
                     </button>
                     <div className="flex items-center gap-2">
                       <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                        Cancel
+                        {t("cancel")}
                       </Button>
                       <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
                         {isSubmitting
-                          ? `${fields && fields.length > 1 ? "Adding members..." : "Adding member..."}`
-                          : `${fields && fields.length > 1 ? "Add members" : "Add member"}`}
+                          ? `${fields && fields.length > 1 ? `${t("add_members")}...` : `${t("add_member")}...`}`
+                          : `${fields && fields.length > 1 ? t("add_members") : t("add_member")}`}
                       </Button>
                     </div>
                   </div>
diff --git a/web/core/components/project/settings/archive-project/archive-restore-modal.tsx b/web/core/components/project/settings/archive-project/archive-restore-modal.tsx
index 969a7205b..f55ec8cdb 100644
--- a/web/core/components/project/settings/archive-project/archive-restore-modal.tsx
+++ b/web/core/components/project/settings/archive-project/archive-restore-modal.tsx
@@ -111,7 +111,7 @@ export const ArchiveRestoreProjectModal: React.FC<Props> = (props) => {
                   </h3>
                   <p className="mt-3 text-sm text-custom-text-200">
                     {archive
-                      ? "This project and its issues, cycles, modules, and pages will be archived. Its issues won’t appear in search. Only project admins can restore the project."
+                      ? "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">
diff --git a/web/core/components/project/settings/features-list.tsx b/web/core/components/project/settings/features-list.tsx
index 7bd0a15e6..1223a8ac8 100644
--- a/web/core/components/project/settings/features-list.tsx
+++ b/web/core/components/project/settings/features-list.tsx
@@ -2,6 +2,7 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
 import { IProject } from "@plane/types";
 import { ToggleSwitch, Tooltip, setPromiseToast } from "@plane/ui";
 // hooks
@@ -20,6 +21,7 @@ type Props = {
 export const ProjectFeaturesList: FC<Props> = observer((props) => {
   const { workspaceSlug, projectId, isAdmin } = props;
   // store hooks
+  const { t } = useTranslation();
   const { captureEvent } = useEventTracker();
   const { data: currentUser } = useUser();
   const { getProjectById, updateProject } = useProject();
@@ -62,8 +64,8 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
         return (
           <div key={featureSectionKey} className="">
             <div className="flex flex-col justify-center pb-2 border-b border-custom-border-100">
-              <h3 className="text-xl font-medium">{feature.title}</h3>
-              <h4 className="text-sm leading-5 text-custom-text-200">{feature.description}</h4>
+              <h3 className="text-xl font-medium">{t(feature.key)}</h3>
+              <h4 className="text-sm leading-5 text-custom-text-200">{t(`${feature.key}_description`)}</h4>
             </div>
             {Object.keys(feature.featureList).map((featureItemKey) => {
               const featureItem = feature.featureList[featureItemKey];
@@ -79,7 +81,7 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
                       </div>
                       <div>
                         <div className="flex items-center gap-2">
-                          <h4 className="text-sm font-medium leading-5">{featureItem.title}</h4>
+                          <h4 className="text-sm font-medium leading-5">{t(featureItem.key)}</h4>
                           {featureItem.isPro && (
                             <Tooltip tooltipContent="Pro feature" position="top">
                               <UpgradeBadge />
@@ -87,7 +89,7 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
                           )}
                         </div>
                         <p className="text-sm leading-5 tracking-tight text-custom-text-300">
-                          {featureItem.description}
+                          {t(`${featureItem.key}_description`)}
                         </p>
                       </div>
                     </div>
diff --git a/web/core/components/project/settings/member-columns.tsx b/web/core/components/project/settings/member-columns.tsx
index ce24098d5..f3b6ec956 100644
--- a/web/core/components/project/settings/member-columns.tsx
+++ b/web/core/components/project/settings/member-columns.tsx
@@ -3,18 +3,17 @@ import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { Trash2 } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
+// plane imports
+import { ROLE, EUserPermissions } from "@plane/constants";
 // plane types
 import { IUser, IWorkspaceMember } from "@plane/types";
 // plane ui
 import { CustomSelect, PopoverMenu, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { ROLE } from "@/constants/workspace";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
 import { useMember, useUser } from "@/hooks/store";
-// plane web constants
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 
 export interface RowData {
   member: IWorkspaceMember;
@@ -112,7 +111,7 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
     Number(getWorkspaceMemberDetails(rowData.member.id)?.role) ?? EUserPermissions.GUEST
   );
   const isCurrentUserProjectMember = currentUser
-    ? getProjectMemberDetails(currentUser.id)?.role === EUserPermissions.MEMBER
+    ? getProjectMemberDetails(currentUser.id, projectId)?.role === EUserPermissions.MEMBER
     : false;
   const isRoleNonEditable =
     isCurrentUser || (isProjectAdminOrGuest && !isWorkspaceMember) || isCurrentUserProjectMember;
@@ -132,7 +131,7 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
     <>
       {isRoleNonEditable ? (
         <div className="w-32 flex ">
-          <span>{ROLE[rowData.role as keyof typeof ROLE]}</span>
+          <span>{ROLE[rowData.role]}</span>
         </div>
       ) : (
         <Controller
@@ -154,14 +153,14 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
 
                   setToast({
                     type: TOAST_TYPE.ERROR,
-                    title: "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>{ROLE[rowData.role as keyof typeof ROLE]}</span>
+                  <span>{ROLE[rowData.role]}</span>
                 </div>
               }
               buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
diff --git a/web/core/components/stickies/action-bar.tsx b/web/core/components/stickies/action-bar.tsx
new file mode 100644
index 000000000..9b3789ea2
--- /dev/null
+++ b/web/core/components/stickies/action-bar.tsx
@@ -0,0 +1,141 @@
+import { useRef, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useSWR from "swr";
+import { Plus, StickyNote as StickyIcon, X } from "lucide-react";
+// plane hooks
+import { useOutsideClickDetector } from "@plane/hooks";
+// plane ui
+import { RecentStickyIcon, StickyNoteIcon, Tooltip } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
+// hooks
+import { useCommandPalette } from "@/hooks/store";
+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(() => {
+  // 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);
+  });
+
+  return (
+    <div
+      ref={ref}
+      className="sticky-action-bar__item flex flex-col bg-custom-background-90 rounded-full p-[2px] border-2 border-custom-primary-100/10 overflow-hidden"
+    >
+      <div
+        className={`flex flex-col gap-2 transition-all duration-300 ease-in-out origin-bottom ${isExpanded ? "scale-y-100 opacity-100 mb-2 " : "scale-y-0 opacity-0 h-0"}`}
+      >
+        <Tooltip tooltipContent="All stickies" isMobile={false} position="left">
+          <button
+            className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100"
+            onClick={() => toggleAllStickiesModal(true)}
+          >
+            <RecentStickyIcon className="size-5 rotate-90 text-custom-text-350" />
+          </button>
+        </Tooltip>
+        {recentStickyId && (
+          <Tooltip
+            className="scale-75 -mr-30 translate-x-10"
+            tooltipContent={
+              <div className="-m-2 max-h-[150px]">
+                <StickyNote
+                  className={"w-[290px]"}
+                  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>
+            }
+            isMobile={false}
+            position="left"
+            disabled={showRecentSticky}
+          >
+            <button
+              className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100"
+              onClick={() => setShowRecentSticky(true)}
+              style={{ color: recentStickyBackgroundColor }}
+            >
+              <StickyNoteIcon className={cn("size-5 rotate-90")} color={recentStickyBackgroundColor} />
+            </button>
+          </Tooltip>
+        )}
+        <Tooltip tooltipContent="Add sticky" isMobile={false} position="left">
+          <button
+            className="btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100"
+            onClick={() => {
+              updateActiveStickyId("");
+              toggleShowNewSticky(true);
+              setNewSticky(true);
+            }}
+          >
+            <Plus className="size-5 rotate-90 text-custom-text-350" />
+          </button>
+        </Tooltip>
+      </div>
+
+      <button
+        className={`btn btn--icon rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-custom-background-100 transition-transform duration-300 ${isExpanded ? "rotate-180" : ""}`}
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        {isExpanded ? (
+          <X className="size-5 text-custom-text-350" />
+        ) : (
+          <StickyIcon className="size-5 rotate-90 text-custom-text-350" />
+        )}
+      </button>
+
+      <div
+        className={cn(
+          "absolute bottom-16 right-0 z-[20]",
+          "transform transition-all duration-300 ease-in-out",
+          newSticky || showRecentSticky ? "translate-y-[0%] min-h-[300px]" : "translate-y-[100%] h-0"
+        )}
+      >
+        {(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/web/core/components/stickies/delete-modal.tsx b/web/core/components/stickies/delete-modal.tsx
new file mode 100644
index 000000000..ecbceae93
--- /dev/null
+++ b/web/core/components/stickies/delete-modal.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// ui
+import { useTranslation } from "@plane/i18n";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
+
+interface IStickyDelete {
+  isOpen: boolean;
+  handleSubmit: () => Promise<void>;
+  handleClose: () => void;
+}
+
+export const StickyDeleteModal: React.FC<IStickyDelete> = observer((props) => {
+  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/web/core/components/stickies/index.ts b/web/core/components/stickies/index.ts
new file mode 100644
index 000000000..91363220e
--- /dev/null
+++ b/web/core/components/stickies/index.ts
@@ -0,0 +1,3 @@
+export * from "./action-bar";
+export * from "./widget";
+export * from "./layout";
diff --git a/web/core/components/stickies/layout/index.ts b/web/core/components/stickies/layout/index.ts
new file mode 100644
index 000000000..e3afe22f9
--- /dev/null
+++ b/web/core/components/stickies/layout/index.ts
@@ -0,0 +1,3 @@
+export * from "./stickies-infinite";
+export * from "./stickies-list";
+export * from "./stickies-truncated";
diff --git a/web/core/components/stickies/layout/stickies-infinite.tsx b/web/core/components/stickies/layout/stickies-infinite.tsx
new file mode 100644
index 000000000..a81cb4476
--- /dev/null
+++ b/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -0,0 +1,62 @@
+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(() => {
+  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("flex min-h-[300px] box-border p-2 w-full")}
+              ref={setElementRef}
+              id="intersection-element"
+            >
+              <div className="flex w-full rounded min-h-[300px]">
+                <Loader className="w-full h-full">
+                  <Loader.Item height="100%" width="100%" />
+                </Loader>
+              </div>
+            </div>
+          )
+        }
+      />
+    </ContentWrapper>
+  );
+});
diff --git a/web/core/components/stickies/layout/stickies-list.tsx b/web/core/components/stickies/layout/stickies-list.tsx
new file mode 100644
index 000000000..47e6e6698
--- /dev/null
+++ b/web/core/components/stickies/layout/stickies-list.tsx
@@ -0,0 +1,199 @@
+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 Masonry from "react-masonry-component";
+import { Plus } from "lucide-react";
+// plane imports
+import { EUserPermissionsLevel, EUserWorkspaceRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// components
+import { DetailedEmptyState, SimpleEmptyState } from "@/components/empty-state";
+import { StickiesEmptyState } from "@/components/home/widgets/empty-states/stickies";
+// hooks
+import { useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+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((props: TProps) => {
+  const { workspaceSlug, intersectionElement, columnCount } = props;
+  // navigation
+  const pathname = usePathname();
+  // 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 = useResolvedAssetPath({ basePath: "/empty-state/stickies/stickies" });
+  const stickiesSearchResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/stickies/stickies-search",
+  });
+  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="size-full grid 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: <Plus 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 const 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 < 768) 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/web/core/components/stickies/layout/stickies-loader.tsx b/web/core/components/stickies/layout/stickies-loader.tsx
new file mode 100644
index 000000000..2afe5ff12
--- /dev/null
+++ b/web/core/components/stickies/layout/stickies-loader.tsx
@@ -0,0 +1,45 @@
+// plane ui
+import { Loader } from "@plane/ui";
+
+export const StickiesLoader = () => (
+  <div className="overflow-scroll pb-2 grid grid-cols-4 gap-4">
+    {Array.from({ length: 4 }).map((_, index) => (
+      <Loader key={index} className="space-y-5 border border-custom-border-200 p-3 rounded">
+        <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/web/core/components/stickies/layout/stickies-truncated.tsx b/web/core/components/stickies/layout/stickies-truncated.tsx
new file mode 100644
index 000000000..c163d7d32
--- /dev/null
+++ b/web/core/components/stickies/layout/stickies-truncated.tsx
@@ -0,0 +1,52 @@
+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((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(
+            "gap-1 w-full text-custom-primary-100 text-sm font-medium transition-opacity duration-300 bg-custom-background-90/20"
+          )}
+          onClick={handleClose}
+        >
+          {t("show_all")}
+        </Link>
+      }
+    >
+      <StickiesLayout workspaceSlug={workspaceSlug?.toString()} />
+    </ContentOverflowWrapper>
+  );
+});
diff --git a/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx b/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
new file mode 100644
index 000000000..203b3d154
--- /dev/null
+++ b/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
@@ -0,0 +1,140 @@
+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 {
+  draggable,
+  dropTargetForElements,
+  ElementDragPayload,
+} 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 { InstructionType } from "@plane/types";
+// plane ui
+import { DropIndicator } from "@plane/ui";
+// 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((props: Props) => {
+  const { stickyId, workspaceSlug, itemWidth, isLastChild, isInFirstRow, isInLastRow, 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="flex flex-col box-border 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/web/core/components/stickies/layout/sticky.helpers.ts b/web/core/components/stickies/layout/sticky.helpers.ts
new file mode 100644
index 000000000..930eb10aa
--- /dev/null
+++ b/web/core/components/stickies/layout/sticky.helpers.ts
@@ -0,0 +1,45 @@
+import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
+import { 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/web/core/components/stickies/modal/index.tsx b/web/core/components/stickies/modal/index.tsx
new file mode 100644
index 000000000..8a91bd113
--- /dev/null
+++ b/web/core/components/stickies/modal/index.tsx
@@ -0,0 +1,15 @@
+import { EModalWidth, ModalCore } from "@plane/ui";
+import { Stickies } from "./stickies";
+
+type TProps = {
+  isOpen: boolean;
+  handleClose: () => void;
+};
+export const AllStickiesModal = (props: TProps) => {
+  const { isOpen, handleClose } = props;
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VXL}>
+      <Stickies handleClose={handleClose} />
+    </ModalCore>
+  );
+};
diff --git a/web/core/components/stickies/modal/search.tsx b/web/core/components/stickies/modal/search.tsx
new file mode 100644
index 000000000..22499c03a
--- /dev/null
+++ b/web/core/components/stickies/modal/search.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import { FC, useCallback, useRef, useState } from "react";
+import { debounce } from "lodash";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Search, X } from "lucide-react";
+// plane hooks
+import { useOutsideClickDetector } from "@plane/hooks";
+// helpers
+import { useTranslation } from "@plane/i18n";
+import { cn } from "@/helpers/common.helper";
+import { useSticky } from "@/hooks/use-stickies";
+
+export const StickySearch: FC = observer(() => {
+  // 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="flex items-center mr-2 my-auto">
+      {!isSearchOpen && (
+        <button
+          type="button"
+          className="-mr-1 p-1 hover:bg-custom-background-80 rounded text-custom-text-400 grid place-items-center"
+          onClick={() => {
+            setIsSearchOpen(true);
+            inputRef.current?.focus();
+          }}
+        >
+          <Search className=" size-4 " />
+        </button>
+      )}
+      <div
+        className={cn(
+          "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-custom-background-100 text-custom-text-400 w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+          {
+            "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+          }
+        )}
+      >
+        <Search className="h-3.5 w-3.5" />
+        <input
+          ref={inputRef}
+          className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 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();
+            }}
+          >
+            <X className="h-3 w-3" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/components/stickies/modal/stickies.tsx b/web/core/components/stickies/modal/stickies.tsx
new file mode 100644
index 000000000..1cc16bfc6
--- /dev/null
+++ b/web/core/components/stickies/modal/stickies.tsx
@@ -0,0 +1,74 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Plus, X } from "lucide-react";
+// plane ui
+import { RecentStickyIcon } from "@plane/ui";
+// 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((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="p-6 pb-0 min-h-[620px]">
+      {/* header */}
+      <div className="flex items-center justify-between mb-6">
+        {/* Title */}
+        <div className="text-custom-text-200 flex items-center gap-2">
+          <RecentStickyIcon className="size-5 rotate-90 flex-shrink-0" />
+          <p className="text-xl font-medium">Your stickies</p>
+        </div>
+        {/* actions */}
+        <div className="flex gap-2">
+          <StickySearch />
+          <button
+            onClick={() => {
+              toggleShowNewSticky(true);
+              stickyOperations.create();
+            }}
+            className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
+            disabled={creatingSticky}
+          >
+            <Plus className="size-4 my-auto" /> <span>Add sticky</span>
+            {creatingSticky && (
+              <div className="flex items-center justify-center ml-2">
+                <div
+                  className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-custom-primary-100`}
+                  role="status"
+                  aria-label="loading"
+                />
+              </div>
+            )}
+          </button>
+          {handleClose && (
+            <button
+              type="button"
+              onClick={handleClose}
+              className="flex-shrink-0 grid place-items-center text-custom-text-300 hover:text-custom-text-100 hover:bg-custom-background-80 rounded p-1 transition-colors my-auto"
+            >
+              <X className="text-custom-text-400 size-4" />
+            </button>
+          )}
+        </div>
+      </div>
+      {/* content */}
+      <div className="mb-4 max-h-[625px] overflow-scroll">
+        <StickiesTruncated handleClose={handleClose} />
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/components/stickies/sticky/index.ts b/web/core/components/stickies/sticky/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/web/core/components/stickies/sticky/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/web/core/components/stickies/sticky/inputs.tsx b/web/core/components/stickies/sticky/inputs.tsx
new file mode 100644
index 000000000..ed03fe185
--- /dev/null
+++ b/web/core/components/stickies/sticky/inputs.tsx
@@ -0,0 +1,98 @@
+import { useCallback, useEffect, useRef } from "react";
+import { usePathname } from "next/navigation";
+import { Controller, useForm } from "react-hook-form";
+// plane editor
+import { EditorRefApi } from "@plane/editor";
+// plane types
+import { TSticky } from "@plane/types";
+// plane utils
+import { cn, isCommentEmpty } from "@plane/utils";
+// hooks
+import { useWorkspace } from "@/hooks/store";
+// components
+import { StickyEditor } from "../../editor";
+
+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 const 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(
+              "w-full min-h-[256px] max-h-[540px] overflow-y-scroll vertical-scrollbar scrollbar-sm p-4 text-base",
+              {
+                "max-h-[588px]": isStickiesPage,
+              }
+            )}
+            uploadFile={async () => ""}
+            showToolbar={showToolbar}
+            parentClassName="border-none p-0"
+            handleDelete={handleDelete}
+            handleColorChange={handleChange}
+            ref={editorRef}
+          />
+        )}
+      />
+    </div>
+  );
+};
diff --git a/web/core/components/stickies/sticky/root.tsx b/web/core/components/stickies/sticky/root.tsx
new file mode 100644
index 000000000..170440405
--- /dev/null
+++ b/web/core/components/stickies/sticky/root.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useState } from "react";
+import { debounce } from "lodash";
+import { observer } from "mobx-react";
+import { Minimize2 } from "lucide-react";
+// plane types
+import { 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((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("w-full h-fit flex flex-col rounded group/sticky overflow-y-scroll", className)}
+        style={{
+          backgroundColor,
+        }}
+      >
+        {/* {isStickiesPage && <StickyItemDragHandle isDragging={false} />}{" "} */}
+        {onClose && (
+          <button type="button" className="flex-shrink-0 flex justify-end p-2.5" onClick={onClose}>
+            <Minimize2 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/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx b/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
new file mode 100644
index 000000000..e46c981f6
--- /dev/null
+++ b/web/core/components/stickies/sticky/sticky-item-drag-handle.tsx
@@ -0,0 +1,28 @@
+"use client";
+import React, { FC } from "react";
+import { observer } from "mobx-react";
+// ui
+import { DragHandle } from "@plane/ui";
+// helper
+import { cn } from "@/helpers/common.helper";
+
+type Props = {
+  isDragging: boolean;
+};
+
+export const StickyItemDragHandle: FC<Props> = observer((props) => {
+  const { isDragging } = props;
+
+  return (
+    <div
+      className={cn(
+        "hidden group-hover/sticky:flex absolute top-3 left-1/2 -translate-x-1/2 items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2 rotate-90",
+        {
+          "cursor-grabbing": isDragging,
+        }
+      )}
+    >
+      <DragHandle className="bg-transparent" />
+    </div>
+  );
+});
diff --git a/web/core/components/stickies/sticky/use-operations.tsx b/web/core/components/stickies/sticky/use-operations.tsx
new file mode 100644
index 000000000..b582fd563
--- /dev/null
+++ b/web/core/components/stickies/sticky/use-operations.tsx
@@ -0,0 +1,149 @@
+import { useMemo } from "react";
+// plane types
+import { useTranslation } from "@plane/i18n";
+import { InstructionType, TSticky } from "@plane/types";
+// plane ui
+import { setToast, TOAST_TYPE } from "@plane/ui";
+// 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/web/core/components/stickies/widget.tsx b/web/core/components/stickies/widget.tsx
new file mode 100644
index 000000000..e94741cc0
--- /dev/null
+++ b/web/core/components/stickies/widget.tsx
@@ -0,0 +1,54 @@
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Plus } from "lucide-react";
+// hooks
+import { useTranslation } from "@plane/i18n";
+import { useSticky } from "@/hooks/use-stickies";
+import { StickiesTruncated } from "./layout";
+import { StickySearch } from "./modal/search";
+import { useStickyOperations } from "./sticky/use-operations";
+
+export const StickiesWidget: React.FC = observer(() => {
+  // 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="flex items-center justify-between mb-4">
+        <div className="text-base font-semibold text-custom-text-350">{t("stickies.title")}</div>
+        {/* actions */}
+        <div className="flex gap-2">
+          <StickySearch />
+          <button
+            onClick={() => {
+              toggleShowNewSticky(true);
+              stickyOperations.create();
+            }}
+            className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
+            disabled={creatingSticky}
+          >
+            <Plus className="size-4 my-auto" />
+            <span>{t("stickies.add")}</span>
+            {creatingSticky && (
+              <div
+                className="size-4 border-2 border-t-transparent border-custom-primary-100 rounded-full animate-spin"
+                role="status"
+                aria-label="loading"
+              />
+            )}
+          </button>
+        </div>
+      </div>
+      <div className="-mx-2">
+        <StickiesTruncated />
+      </div>
+    </div>
+  );
+});
diff --git a/web/core/components/ui/graphs/bar-graph.tsx b/web/core/components/ui/graphs/bar-graph.tsx
index 5aac757a0..1a724322e 100644
--- a/web/core/components/ui/graphs/bar-graph.tsx
+++ b/web/core/components/ui/graphs/bar-graph.tsx
@@ -1,7 +1,7 @@
 // nivo
 import { ResponsiveBar, BarSvgProps } from "@nivo/bar";
+import { CHARTS_THEME, CHART_DEFAULT_MARGIN } from "@plane/constants";
 // helpers
-import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
 import { generateYAxisTickValues } from "@/helpers/graph.helper";
 // types
 import { TGraph } from "./types";
@@ -27,8 +27,8 @@ export const BarGraph: React.FC<Props & TGraph & Omit<BarSvgProps<any>, "height"
     <ResponsiveBar
       indexBy={indexBy}
       keys={keys}
-      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
-      padding={rest.padding ?? rest.data.length > 7 ? 0.8 : 0.9}
+      margin={{ ...CHART_DEFAULT_MARGIN, ...(margin ?? {}) }}
+      padding={(rest.padding ?? rest.data.length > 7) ? 0.8 : 0.9}
       axisLeft={{
         tickSize: 0,
         tickPadding: 10,
diff --git a/web/core/components/ui/graphs/calendar-graph.tsx b/web/core/components/ui/graphs/calendar-graph.tsx
index d6726a249..5a63dd640 100644
--- a/web/core/components/ui/graphs/calendar-graph.tsx
+++ b/web/core/components/ui/graphs/calendar-graph.tsx
@@ -1,7 +1,7 @@
 // nivo
 import { ResponsiveCalendar, CalendarSvgProps } from "@nivo/calendar";
 // types
-import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
+import { CHARTS_THEME, CHART_DEFAULT_MARGIN } from "@plane/constants";
 import { TGraph } from "./types";
 // constants
 
@@ -14,7 +14,7 @@ export const CalendarGraph: React.FC<TGraph & Omit<CalendarSvgProps, "height" |
 }) => (
   <div style={{ height, width }}>
     <ResponsiveCalendar
-      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
+      margin={{ ...CHART_DEFAULT_MARGIN, ...(margin ?? {}) }}
       colors={
         rest.colors ?? [
           "rgba(var(--color-primary-100), 0.2)",
diff --git a/web/core/components/ui/graphs/line-graph.tsx b/web/core/components/ui/graphs/line-graph.tsx
index ee469babf..e04d7ea6c 100644
--- a/web/core/components/ui/graphs/line-graph.tsx
+++ b/web/core/components/ui/graphs/line-graph.tsx
@@ -1,7 +1,7 @@
 // nivo
 import { ResponsiveLine, LineSvgProps } from "@nivo/line";
 // helpers
-import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
+import { CHARTS_THEME, CHART_DEFAULT_MARGIN } from "@plane/constants";
 import { generateYAxisTickValues } from "@/helpers/graph.helper";
 // types
 import { TGraph } from "./types";
@@ -21,7 +21,7 @@ export const LineGraph: React.FC<Props & TGraph & LineSvgProps> = ({
 }) => (
   <div style={{ height, width }}>
     <ResponsiveLine
-      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
+      margin={{ ...CHART_DEFAULT_MARGIN, ...(margin ?? {}) }}
       axisLeft={{
         tickSize: 0,
         tickPadding: 10,
diff --git a/web/core/components/ui/graphs/pie-graph.tsx b/web/core/components/ui/graphs/pie-graph.tsx
index df7d80f06..645859741 100644
--- a/web/core/components/ui/graphs/pie-graph.tsx
+++ b/web/core/components/ui/graphs/pie-graph.tsx
@@ -1,7 +1,7 @@
 // nivo
 import { PieSvgProps, ResponsivePie } from "@nivo/pie";
 // types
-import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
+import { CHARTS_THEME, CHART_DEFAULT_MARGIN } from "@plane/constants";
 import { TGraph } from "./types";
 // constants
 
@@ -14,7 +14,7 @@ export const PieGraph: React.FC<TGraph & Omit<PieSvgProps<any>, "height" | "widt
 }) => (
   <div style={{ height, width }}>
     <ResponsivePie
-      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
+      margin={{ ...CHART_DEFAULT_MARGIN, ...(margin ?? {}) }}
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       animate
       {...rest}
diff --git a/web/core/components/ui/graphs/scatter-plot-graph.tsx b/web/core/components/ui/graphs/scatter-plot-graph.tsx
index d403c7677..e4a7d7fcc 100644
--- a/web/core/components/ui/graphs/scatter-plot-graph.tsx
+++ b/web/core/components/ui/graphs/scatter-plot-graph.tsx
@@ -1,7 +1,7 @@
 // nivo
 import { ResponsiveScatterPlot, ScatterPlotSvgProps } from "@nivo/scatterplot";
 // types
-import { CHARTS_THEME, DEFAULT_MARGIN } from "@/constants/graph";
+import { CHARTS_THEME, CHART_DEFAULT_MARGIN } from "@plane/constants";
 import { TGraph } from "./types";
 // constants
 
@@ -14,7 +14,7 @@ export const ScatterPlotGraph: React.FC<TGraph & Omit<ScatterPlotSvgProps<any>,
 }) => (
   <div style={{ height, width }}>
     <ResponsiveScatterPlot
-      margin={{ ...DEFAULT_MARGIN, ...(margin ?? {}) }}
+      margin={{ ...CHART_DEFAULT_MARGIN, ...(margin ?? {}) }}
       animate
       theme={{ ...CHARTS_THEME, ...(theme ?? {}) }}
       {...rest}
diff --git a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
index ebf92445e..9cf250a18 100644
--- a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx
@@ -1,7 +1,9 @@
 import { forwardRef } from "react";
 import range from "lodash/range";
-import { cn } from "@plane/editor";
+// plane ui
 import { ContentWrapper } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 
 export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number; shouldAnimate?: boolean }>(
   ({ cardHeight = 100, shouldAnimate = true }, ref) => (
diff --git a/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/web/core/components/ui/loader/layouts/list-layout-loader.tsx
index 65d4d1565..fdcaf8898 100644
--- a/web/core/components/ui/loader/layouts/list-layout-loader.tsx
+++ b/web/core/components/ui/loader/layouts/list-layout-loader.tsx
@@ -1,7 +1,9 @@
 import { Fragment, forwardRef } from "react";
 import range from "lodash/range";
-import { cn } from "@plane/editor";
+// plane ui
 import { Row } from "@plane/ui";
+// plane utils
+import { cn } from "@plane/utils";
 import { getRandomInt, getRandomLength } from "../utils";
 
 export const ListLoaderItemRow = forwardRef<
diff --git a/web/core/components/views/applied-filters/access.tsx b/web/core/components/views/applied-filters/access.tsx
index 8e418daec..ce46a800a 100644
--- a/web/core/components/views/applied-filters/access.tsx
+++ b/web/core/components/views/applied-filters/access.tsx
@@ -2,8 +2,10 @@ import { observer } from "mobx-react";
 // icons
 import { X } from "lucide-react";
 // constants
-import { EViewAccess, VIEW_ACCESS_SPECIFIERS } from "@/constants/views";
+import { EViewAccess } from "@plane/constants";
 // helpers
+import { useTranslation } from "@plane/i18n";
+import { VIEW_ACCESS_SPECIFIERS } from "@/helpers/views.helper";
 
 type Props = {
   editable: boolean | undefined;
@@ -13,10 +15,11 @@ type Props = {
 
 export const AppliedAccessFilters: React.FC<Props> = observer((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?.label;
+    return value?.i18n_label;
   };
 
   return (
@@ -28,7 +31,7 @@ export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
 
         return (
           <div key={access} className="flex items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs">
-            <span className="normal-case">{label}</span>
+            <span className="normal-case">{t(label)}</span>
             {editable && (
               <button
                 type="button"
diff --git a/web/core/components/views/applied-filters/root.tsx b/web/core/components/views/applied-filters/root.tsx
index 391e02bf2..8a881d2d0 100644
--- a/web/core/components/views/applied-filters/root.tsx
+++ b/web/core/components/views/applied-filters/root.tsx
@@ -1,10 +1,11 @@
 import { X } from "lucide-react";
+import { EViewAccess } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TViewFilterProps } from "@plane/types";
 // components
 import { Tag } from "@plane/ui";
 import { AppliedDateFilters, AppliedMembersFilters } from "@/components/common/applied-filters";
 // constants
-import { EViewAccess } from "@/constants/views";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper";
 import { AppliedAccessFilters } from "./access";
@@ -23,6 +24,7 @@ const VIEW_ACCESS_FILTERS = ["view_type"];
 
 export const ViewAppliedFiltersList: React.FC<Props> = (props) => {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
+  const { t } = useTranslation();
 
   if (!appliedFilters) return null;
   if (Object.keys(appliedFilters).length === 0) return null;
@@ -76,7 +78,7 @@ export const ViewAppliedFiltersList: React.FC<Props> = (props) => {
       {isEditingAllowed && (
         <button type="button" onClick={handleClearAllFilters}>
           <Tag>
-            Clear all
+            {t("common.clear_all")}
             <X size={12} strokeWidth={2} />
           </Tag>
         </button>
diff --git a/web/core/components/views/delete-view-modal.tsx b/web/core/components/views/delete-view-modal.tsx
index d66f5f321..558469c1c 100644
--- a/web/core/components/views/delete-view-modal.tsx
+++ b/web/core/components/views/delete-view-modal.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 // types
 import { IProjectView } from "@plane/types";
 // ui
@@ -22,6 +22,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   // router
   const { workspaceSlug, projectId } = useParams();
+  const router = useRouter();
   // store hooks
   const { deleteView } = useProjectView();
 
@@ -38,7 +39,7 @@ export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
     await deleteView(workspaceSlug.toString(), projectId.toString(), data.id)
       .then(() => {
         handleClose();
-
+        router.push(`/${workspaceSlug}/projects/${projectId}/views`);
         setToast({
           type: TOAST_TYPE.SUCCESS,
           title: "Success!",
diff --git a/web/core/components/views/filters/filter-selection.tsx b/web/core/components/views/filters/filter-selection.tsx
index 00b8ea817..d2a32fb79 100644
--- a/web/core/components/views/filters/filter-selection.tsx
+++ b/web/core/components/views/filters/filter-selection.tsx
@@ -1,12 +1,12 @@
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Search, X } from "lucide-react";
+import { EViewAccess } from "@plane/constants";
 import { TViewFilterProps, TViewFilters } from "@plane/types";
 // components
 import { FilterCreatedBy, FilterCreatedDate } from "@/components/common/filters";
 import { FilterOption } from "@/components/issues";
 // constants
-import { EViewAccess } from "@/constants/views";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web components
diff --git a/web/core/components/views/filters/order-by.tsx b/web/core/components/views/filters/order-by.tsx
index 1012700dc..399bf56d1 100644
--- a/web/core/components/views/filters/order-by.tsx
+++ b/web/core/components/views/filters/order-by.tsx
@@ -2,11 +2,12 @@
 
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check, ChevronDown } from "lucide-react";
 // types
+import { VIEW_SORT_BY_OPTIONS, VIEW_SORTING_KEY_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
 // ui
 import { CustomMenu, getButtonStyling } from "@plane/ui";
 // constants
-import { VIEW_SORTING_KEY_OPTIONS } from "@/constants/views";
 
 type Props = {
   onChange: (value: { key?: TViewFiltersSortKey; order?: TViewFiltersSortBy }) => void;
@@ -17,15 +18,11 @@ type Props = {
 
 export const ViewOrderByDropdown: React.FC<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 sortByOptions = [
-    { key: "asc", label: "Ascending", isSelected: !isDescending },
-    { key: "desc", label: "Descending", isSelected: isDescending },
-  ];
-
   const buttonClassName = isMobile
     ? "flex items-center text-sm text-custom-text-200 gap-2 w-full"
     : `${getButtonStyling("neutral-primary", "sm")} px-2 text-custom-text-300`;
@@ -39,7 +36,7 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
       customButton={
         <span className={buttonClassName}>
           {!isMobile && icon}
-          <span className="flex-shrink-0"> {orderByDetails?.label}</span>
+          <span className="flex-shrink-0"> {orderByDetails?.i18n_label && t(orderByDetails?.i18n_label)}</span>
           <ChevronDown className={chevronClassName} strokeWidth={2} />
         </span>
       }
@@ -54,30 +51,33 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
           className="flex items-center justify-between gap-2"
           onClick={() =>
             onChange({
-              key: option.key,
+              key: option.key as TViewFiltersSortKey,
             })
           }
         >
-          {option.label}
+          {t(option.i18n_label)}
           {sortKey === option.key && <Check className="h-3 w-3" />}
         </CustomMenu.MenuItem>
       ))}
       <hr className="my-2 border-custom-border-200" />
-      {sortByOptions.map((option) => (
-        <CustomMenu.MenuItem
-          key={option.key}
-          className="flex items-center justify-between gap-2"
-          onClick={() => {
-            if (!option.isSelected)
-              onChange({
-                order: option.key as TViewFiltersSortBy,
-              });
-          }}
-        >
-          {option.label}
-          {option.isSelected && <Check className="h-3 w-3" />}
-        </CustomMenu.MenuItem>
-      ))}
+      {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 && <Check className="h-3 w-3" />}
+          </CustomMenu.MenuItem>
+        );
+      })}
     </CustomMenu>
   );
 };
diff --git a/web/core/components/views/form.tsx b/web/core/components/views/form.tsx
index ede1fa10b..3e1d0fba3 100644
--- a/web/core/components/views/form.tsx
+++ b/web/core/components/views/form.tsx
@@ -4,6 +4,10 @@ import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Layers } from "lucide-react";
+// plane constants
+import { EIssueLayoutTypes, ETabIndices, EViewAccess, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IProjectView, IIssueFilterOptions, IIssueDisplayProperties, IIssueDisplayFilterOptions } from "@plane/types";
 // ui
@@ -11,10 +15,6 @@ import { Button, EmojiIconPicker, EmojiIconPickerTypes, Input, TextArea } from "
 // components
 import { Logo } from "@/components/common";
 import { AppliedFiltersList, DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
-// constants
-import { EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
-import { ETabIndices } from "@/constants/tab-indices";
-import { EViewAccess } from "@/constants/views";
 // helpers
 import { convertHexEmojiToDecimal } from "@/helpers/emoji.helper";
 import { getComputedDisplayFilters, getComputedDisplayProperties } from "@/helpers/issue.helper";
@@ -43,6 +43,8 @@ const defaultValues: Partial<IProjectView> = {
 
 export const ProjectViewForm: React.FC<Props> = observer((props) => {
   const { handleFormSubmit, handleClose, data, preLoadedData } = props;
+  // i18n
+  const { t } = useTranslation();
   // state
   const [isOpen, setIsOpen] = useState(false);
   // store hooks
@@ -138,7 +140,9 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5 p-5">
-        <h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Create"} view</h3>
+        <h3 className="text-xl font-medium text-custom-text-200">
+          {data ? t("view.update.label") : t("view.create.label")}
+        </h3>
         <div className="space-y-3">
           <div className="flex items-start gap-2 w-full">
             <EmojiIconPicker
@@ -185,10 +189,10 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                 control={control}
                 name="name"
                 rules={{
-                  required: "Title is required",
+                  required: t("form.title.required"),
                   maxLength: {
                     value: 255,
-                    message: "Title should be less than 255 characters",
+                    message: t("form.title.max_length", { length: 255 }),
                   },
                 }}
                 render={({ field: { value, onChange } }) => (
@@ -199,7 +203,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                     value={value}
                     onChange={onChange}
                     hasError={Boolean(errors.name)}
-                    placeholder="Title"
+                    placeholder={t("common.title")}
                     className="w-full text-base"
                     tabIndex={getIndex("name")}
                     autoFocus
@@ -217,7 +221,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                 <TextArea
                   id="description"
                   name="description"
-                  placeholder="Description"
+                  placeholder={t("common.description")}
                   className="w-full text-base resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   value={value}
@@ -250,7 +254,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                     control={control}
                     name="filters"
                     render={({ field: { onChange, value: filters } }) => (
-                      <FiltersDropdown title="Filters" tabIndex={getIndex("filters")}>
+                      <FiltersDropdown title={t("common.filters")} tabIndex={getIndex("filters")}>
                         <FilterSelection
                           filters={filters ?? {}}
                           handleFiltersUpdate={(key, value) => {
@@ -270,7 +274,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                               [key]: newValues,
                             });
                           }}
-                          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[displayFilters.layout]}
+                          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[displayFilters.layout]}
                           labels={projectLabels ?? undefined}
                           memberIds={projectMemberIds ?? undefined}
                           states={projectStates}
@@ -286,9 +290,9 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                     control={control}
                     name="display_properties"
                     render={({ field: { onChange: onDisplayPropertiesChange, value: displayProperties } }) => (
-                      <FiltersDropdown title="Display">
+                      <FiltersDropdown title={t("common.display")}>
                         <DisplayFiltersSelection
-                          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[displayFilters.layout]}
+                          layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_PAGE.issues[displayFilters.layout]}
                           displayFilters={displayFilters ?? {}}
                           handleDisplayFiltersUpdate={(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
                             onDisplayFiltersChange({
@@ -330,10 +334,16 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
       </div>
       <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={getIndex("cancel")}>
-          Cancel
+          {t("common.cancel")}
         </Button>
         <Button variant="primary" size="sm" type="submit" tabIndex={getIndex("submit")} loading={isSubmitting}>
-          {data ? (isSubmitting ? "Updating" : "Update View") : isSubmitting ? "Creating" : "Create View"}
+          {data
+            ? isSubmitting
+              ? t("common.updating")
+              : t("view.update.label")
+            : isSubmitting
+              ? t("common.creating")
+              : t("view.create.label")}
         </Button>
       </div>
     </form>
diff --git a/web/core/components/views/quick-actions.tsx b/web/core/components/views/quick-actions.tsx
index 1a9cfa607..bb7f4426f 100644
--- a/web/core/components/views/quick-actions.tsx
+++ b/web/core/components/views/quick-actions.tsx
@@ -4,6 +4,7 @@ import { useState } from "react";
 import { observer } from "mobx-react";
 import { ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
 // types
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IProjectView } from "@plane/types";
 // ui
 import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
@@ -15,7 +16,6 @@ import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useUser, useUserPermissions } from "@/hooks/store";
 import { PublishViewModal, useViewPublish } from "@/plane-web/components/views/publish";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   parentRef: React.RefObject<HTMLElement>;
diff --git a/web/core/components/views/view-list-item-action.tsx b/web/core/components/views/view-list-item-action.tsx
index 2d2829adb..9ec4a0288 100644
--- a/web/core/components/views/view-list-item-action.tsx
+++ b/web/core/components/views/view-list-item-action.tsx
@@ -3,18 +3,19 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Earth, Lock } from "lucide-react";
 // types
+import { EViewAccess, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IProjectView } from "@plane/types";
 // ui
 import { Tooltip, FavoriteStar } from "@plane/ui";
 // components
 import { DeleteProjectViewModal, CreateUpdateProjectViewModal, ViewQuickActions } from "@/components/views";
 // constants
-import { EViewAccess } from "@/constants/views";
 // helpers
 import { calculateTotalFilters } from "@/helpers/filter.helper";
+import { getPublishViewLink } from "@/helpers/project-views.helpers";
 // hooks
 import { useMember, useProjectView, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { PublishViewModal } from "@/plane-web/components/views/publish";
 import { ButtonAvatars } from "../dropdowns/member/avatar";
 
 type Props = {
@@ -27,6 +28,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
   // states
   const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
   const [deleteViewModal, setDeleteViewModal] = useState(false);
+  const [isPublishModalOpen, setPublishModalOpen] = useState<boolean>(false);
   // router
   const { workspaceSlug, projectId } = useParams();
   // store
@@ -45,6 +47,8 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
 
   const access = view.access;
 
+  const publishLink = getPublishViewLink(view?.anchor);
+
   // handlers
   const handleAddToFavorites = () => {
     if (!workspaceSlug || !projectId) return;
@@ -62,6 +66,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
 
   return (
     <>
+      <PublishViewModal isOpen={isPublishModalOpen} onClose={() => setPublishModalOpen(false)} view={view} />
       {workspaceSlug && projectId && view && (
         <CreateUpdateProjectViewModal
           isOpen={createUpdateViewModal}
@@ -82,6 +87,18 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
         </Tooltip>
       </div>
 
+      {view?.anchor && publishLink ? (
+        <div
+          className="px-3 py-1.5 bg-green-500/20 text-green-500 rounded text-xs font-medium flex items-center gap-1.5 cursor-pointer"
+          onClick={() => setPublishModalOpen(true)}
+        >
+          <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
+          Live
+        </div>
+      ) : (
+        <></>
+      )}
+
       {/* created by */}
       {<ButtonAvatars showTooltip={false} userIds={ownedByDetails?.id ?? []} />}
 
diff --git a/web/core/components/views/views-list.tsx b/web/core/components/views/views-list.tsx
index 6b7d41172..29a0c4cb0 100644
--- a/web/core/components/views/views-list.tsx
+++ b/web/core/components/views/views-list.tsx
@@ -1,31 +1,49 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
 import { ListLayout } from "@/components/core/list";
-import { EmptyState } from "@/components/empty-state";
+import { ComicBoxButton, DetailedEmptyState, SimpleEmptyState } from "@/components/empty-state";
 import { ViewListLoader } from "@/components/ui";
 import { ProjectViewListItem } from "@/components/views";
-// constants
-import { EmptyStateType } from "@/constants/empty-state";
 // hooks
-import { useCommandPalette, useProjectView } from "@/hooks/store";
-// assets
+import { useCommandPalette, useProjectView, useUserPermissions } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const ProjectViewsList = observer(() => {
   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
+  );
+  const generalViewResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/onboarding/views",
+  });
+  const filteredViewResolvedPath = useResolvedAssetPath({
+    basePath: "/empty-state/search/views",
+  });
 
   if (loader || !projectViews || !filteredProjectViews) return <ViewListLoader />;
 
   if (filteredProjectViews.length === 0 && projectViews.length > 0) {
     return (
       <div className="flex items-center justify-center h-full w-full">
-        <EmptyState type={EmptyStateType.VIEWS_EMPTY_SEARCH} layout="screen-simple" />
+        <SimpleEmptyState
+          title={t("project_views.empty_state.filter.title")}
+          description={t("project_views.empty_state.filter.description")}
+          assetPath={filteredViewResolvedPath}
+        />
       </div>
     );
   }
@@ -43,7 +61,20 @@ export const ProjectViewsList = observer(() => {
           </ListLayout>
         </div>
       ) : (
-        <EmptyState type={EmptyStateType.PROJECT_VIEW} primaryButtonOnClick={() => toggleCreateViewModal(true)} />
+        <DetailedEmptyState
+          title={t("project_views.empty_state.general.title")}
+          description={t("project_views.empty_state.general.description")}
+          assetPath={generalViewResolvedPath}
+          customPrimaryButton={
+            <ComicBoxButton
+              label={t("project_views.empty_state.general.primary_button.text")}
+              title={t("project_views.empty_state.general.primary_button.comic.title")}
+              description={t("project_views.empty_state.general.primary_button.comic.description")}
+              onClick={() => toggleCreateViewModal(true)}
+              disabled={!canPerformEmptyStateActions}
+            />
+          }
+        />
       )}
     </>
   );
diff --git a/web/core/components/web-hooks/create-webhook-modal.tsx b/web/core/components/web-hooks/create-webhook-modal.tsx
index 87a564cba..d5eecbe9c 100644
--- a/web/core/components/web-hooks/create-webhook-modal.tsx
+++ b/web/core/components/web-hooks/create-webhook-modal.tsx
@@ -3,6 +3,7 @@
 import React, { useState } from "react";
 import { useParams } from "next/navigation";
 // types
+import { useTranslation } from "@plane/i18n";
 import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
@@ -34,6 +35,7 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
   const [generatedWebhook, setGeneratedKey] = useState<IWebhook | null>(null);
   // router
   const { workspaceSlug } = useParams();
+  const { t } = useTranslation();
 
   const handleCreateWebhook = async (formData: IWebhook, webhookEventType: TWebhookEventTypes) => {
     if (!workspaceSlug) return;
@@ -65,8 +67,8 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
       .then(({ webHook, secretKey }) => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Webhook created successfully.",
+          title: t("workspace_settings.settings.webhooks.toasts.created.title"),
+          message: t("workspace_settings.settings.webhooks.toasts.created.message"),
         });
 
         setGeneratedKey(webHook);
@@ -77,8 +79,8 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
       .catch((error) => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: error?.error ?? "Something went wrong. Please try again.",
+          title: t("workspace_settings.settings.webhooks.toasts.not_created.title"),
+          message: error?.error ?? t("workspace_settings.settings.webhooks.toasts.not_created.message"),
         });
       });
   };
diff --git a/web/core/components/web-hooks/form/event-types.tsx b/web/core/components/web-hooks/form/event-types.tsx
index c90500a74..4cff42ff9 100644
--- a/web/core/components/web-hooks/form/event-types.tsx
+++ b/web/core/components/web-hooks/form/event-types.tsx
@@ -1,4 +1,5 @@
 // types
+import { useTranslation } from "@plane/i18n";
 import { TWebhookEventTypes } from "@plane/types";
 
 type Props = {
@@ -6,23 +7,24 @@ type Props = {
   onChange: (value: TWebhookEventTypes) => void;
 };
 
-const WEBHOOK_EVENT_TYPES: { key: TWebhookEventTypes; label: string }[] = [
+const WEBHOOK_EVENT_TYPES: { key: TWebhookEventTypes; i18n_label: string }[] = [
   {
     key: "all",
-    label: "Send me everything",
+    i18n_label: "workspace_settings.settings.webhooks.options.all",
   },
   {
     key: "individual",
-    label: "Select individual events",
+    i18n_label: "workspace_settings.settings.webhooks.options.individual",
   },
 ];
 
 export const WebhookOptions: React.FC<Props> = (props) => {
   const { value, onChange } = props;
+  const { t } = useTranslation();
 
   return (
     <>
-      <h6 className="text-sm font-medium">Which events would you like to trigger this webhook?</h6>
+      <h6 className="text-sm 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">
@@ -34,7 +36,7 @@ export const WebhookOptions: React.FC<Props> = (props) => {
               onChange={() => onChange(option.key)}
             />
             <label className="text-sm" htmlFor={option.key}>
-              {option.label}
+              {t(option.i18n_label)}
             </label>
           </div>
         ))}
diff --git a/web/core/components/web-hooks/form/form.tsx b/web/core/components/web-hooks/form/form.tsx
index bbb953cb3..5ecd7ff8e 100644
--- a/web/core/components/web-hooks/form/form.tsx
+++ b/web/core/components/web-hooks/form/form.tsx
@@ -3,6 +3,7 @@
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "@plane/i18n";
 import { IWebhook, TWebhookEventTypes } from "@plane/types";
 // hooks
 import { Button } from "@plane/ui";
@@ -39,6 +40,7 @@ export const WebhookForm: FC<Props> = observer((props) => {
   const [webhookEventType, setWebhookEventType] = useState<TWebhookEventTypes>("all");
   // store hooks
   const { webhookSecretKey } = useWebhook();
+  const { t } = useTranslation();
   // use form
   const {
     handleSubmit,
@@ -62,14 +64,18 @@ export const WebhookForm: FC<Props> = observer((props) => {
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-5 ">
-        <div className="text-xl font-medium text-custom-text-200">{data ? "Webhook details" : "Create webhook"}</div>
+        <div className="text-xl font-medium text-custom-text-200">
+          {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: "URL is required",
+                required: t("workspace_settings.settings.webhooks.modal.error"),
               }}
               render={({ field: { onChange, value } }) => (
                 <WebhookInput value={value} onChange={onChange} hasError={Boolean(errors.url)} />
@@ -88,17 +94,17 @@ export const WebhookForm: FC<Props> = observer((props) => {
         <div className="pt-0 space-y-5">
           <WebhookSecretKey data={data} />
           <Button type="submit" loading={isSubmitting}>
-            {isSubmitting ? "Updating" : "Update"}
+            {isSubmitting ? t("updating") : t("update")}
           </Button>
         </div>
       ) : (
         <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
           <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-            Cancel
+            {t("cancel")}
           </Button>
           {!webhookSecretKey && (
-            <Button type="submit" variant="primary" size="sm" loading={isSubmitting}>
-              {isSubmitting ? "Creating" : "Create"}
+            <Button type="submit" variant="primary" size="sm" loading={isSubmitting} className="capitalize">
+              {isSubmitting ? t("common.creating") : t("common.create")}
             </Button>
           )}
         </div>
diff --git a/web/core/components/web-hooks/form/individual-event-options.tsx b/web/core/components/web-hooks/form/individual-event-options.tsx
index 290e85c00..751d578f3 100644
--- a/web/core/components/web-hooks/form/individual-event-options.tsx
+++ b/web/core/components/web-hooks/form/individual-event-options.tsx
@@ -18,8 +18,8 @@ export const INDIVIDUAL_WEBHOOK_OPTIONS: {
   },
   {
     key: "issue",
-    label: "Issues",
-    description: "Issue created, updated, deleted, added to a cycle or module",
+    label: "Work items",
+    description: "Work item created, updated, deleted, added to a cycle or module",
   },
   {
     key: "module",
@@ -28,7 +28,7 @@ export const INDIVIDUAL_WEBHOOK_OPTIONS: {
   },
   {
     key: "issue_comment",
-    label: "Issue comments",
+    label: "Work item comments",
     description: "Comment posted, updated, or deleted",
   },
 ];
diff --git a/web/core/components/web-hooks/form/input.tsx b/web/core/components/web-hooks/form/input.tsx
index 997e97e79..c5ee281aa 100644
--- a/web/core/components/web-hooks/form/input.tsx
+++ b/web/core/components/web-hooks/form/input.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslation } from "@plane/i18n";
 import { Input } from "@plane/ui";
 
 type Props = {
@@ -9,10 +10,11 @@ type Props = {
 };
 export const WebhookInput: React.FC<Props> = (props) => {
   const { value, onChange, hasError } = props;
+  const { t } = useTranslation();
 
   return (
     <>
-      <h6 className="text-sm font-medium">Payload URL</h6>
+      <h6 className="text-sm font-medium">{t("workspace_settings.settings.webhooks.modal.payload")}</h6>
       <Input
         type="url"
         className="h-11 w-full"
diff --git a/web/core/components/web-hooks/form/secret-key.tsx b/web/core/components/web-hooks/form/secret-key.tsx
index 62815a6e2..f2d16c14e 100644
--- a/web/core/components/web-hooks/form/secret-key.tsx
+++ b/web/core/components/web-hooks/form/secret-key.tsx
@@ -6,6 +6,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { Copy, Eye, EyeOff, RefreshCw } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { IWebhook } from "@plane/types";
 // ui
 import { Button, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
@@ -35,6 +36,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
   const { currentWorkspace } = useWorkspace();
   const { currentWebhook, regenerateSecretKey, webhookSecretKey } = useWebhook();
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
   const handleCopySecretKey = () => {
     if (!webhookSecretKey) return;
 
@@ -42,15 +44,15 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
       .then(() =>
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Secret key copied to clipboard.",
+          title: `${t("success")!}`,
+          message: t("workspace_settings.settings.webhooks.toasts.secret_key_copied.message"),
         })
       )
       .catch(() =>
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Error occurred while copying secret key.",
+          title: `${t("error")}!`,
+          message: t("workspace_settings.settings.webhooks.toasts.secret_key_not_copied.message"),
         })
       );
   };
@@ -64,7 +66,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
+          title: `${t("success")!}`,
           message: "New key regenerated successfully.",
         });
 
@@ -76,8 +78,8 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
       .catch((err) =>
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: err?.error ?? "Something went wrong. Please try again.",
+          title: `${t("error")}!`,
+          message: err?.error ?? t("something_went_wrong_please_try_again"),
         })
       )
       .finally(() => setIsRegenerating(false));
@@ -94,8 +96,14 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
     <>
       {(data || webhookSecretKey) && (
         <div className="space-y-2">
-          {webhookId && <div className="text-sm font-medium">Secret key</div>}
-          <div className="text-xs text-custom-text-400">Generate a token to sign-in to the webhook payload</div>
+          {webhookId && (
+            <div className="text-sm font-medium">
+              {t("workspace_settings.settings.webhooks.modal.secret_key.title")}
+            </div>
+          )}
+          <div className="text-xs text-custom-text-400">
+            {t("workspace_settings.settings.webhooks.modal.secret_key.message")}
+          </div>
           <div className="flex flex-col md:flex-row md:items-center gap-4">
             <div className="flex flex-grow max-w-lg items-center justify-between self-stretch rounded border border-custom-border-200 px-2 h-8">
               <div className="select-none overflow-hidden font-medium">
@@ -125,7 +133,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
               <div>
                 <Button onClick={handleRegenerateSecretKey} variant="accent-primary" loading={isRegenerating}>
                   <RefreshCw className="h-3 w-3" />
-                  {isRegenerating ? "Re-generating..." : "Re-generate key"}
+                  {isRegenerating ? `${t("re_generating")}...` : t("re_generate_key")}
                 </Button>
               </div>
             )}
diff --git a/web/core/components/web-hooks/generated-hook-details.tsx b/web/core/components/web-hooks/generated-hook-details.tsx
index 2db0bcc79..bf616e880 100644
--- a/web/core/components/web-hooks/generated-hook-details.tsx
+++ b/web/core/components/web-hooks/generated-hook-details.tsx
@@ -2,6 +2,7 @@
 
 // components
 // ui
+import { useTranslation } from "@plane/i18n";
 import { IWebhook } from "@plane/types";
 import { Button } from "@plane/ui";
 // types
@@ -14,15 +15,17 @@ type Props = {
 
 export const GeneratedHookDetails: React.FC<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-xl font-medium text-custom-text-200">Key created</h3>
+          <h3 className="text-xl font-medium text-custom-text-200">
+            {t("workspace_settings.settings.webhooks.modal.secret_key.created")}
+          </h3>
           <p className="text-sm text-custom-text-400">
-            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.
+            {t("workspace_settings.settings.webhooks.modal.secret_key.copy_message")}
           </p>
         </div>
         <WebhookSecretKey data={webhookDetails} />
diff --git a/web/core/components/workspace-notifications/index.ts b/web/core/components/workspace-notifications/index.ts
index 2682c9114..8bc361a7c 100644
--- a/web/core/components/workspace-notifications/index.ts
+++ b/web/core/components/workspace-notifications/index.ts
@@ -1,2 +1,3 @@
 export * from "./notification-app-sidebar-option";
 export * from "./sidebar";
+export * from "./root";
diff --git a/web/ce/components/workspace-notifications/root.tsx b/web/core/components/workspace-notifications/root.tsx
similarity index 92%
rename from web/ce/components/workspace-notifications/root.tsx
rename to web/core/components/workspace-notifications/root.tsx
index 35c61263d..37623a613 100644
--- a/web/ce/components/workspace-notifications/root.tsx
+++ b/web/core/components/workspace-notifications/root.tsx
@@ -3,6 +3,9 @@
 import { FC, useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
+// plane imports
+import { NOTIFICATION_TABS, TNotificationTab } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
 import { Header, Row, ERowVariant, EHeaderVariant, ContentWrapper } from "@plane/ui";
 import { CountChip } from "@/components/common";
@@ -11,16 +14,13 @@ import {
   NotificationEmptyState,
   NotificationSidebarHeader,
   AppliedFilters,
-  NotificationCardListRoot,
 } from "@/components/workspace-notifications";
-// constants
-import { NOTIFICATION_TABS, TNotificationTab } from "@/constants/notification";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { getNumberCount } from "@/helpers/string.helper";
 // hooks
 import { useWorkspace, useWorkspaceNotifications } from "@/hooks/store";
-
+import { NotificationCardListRoot } from "@/plane-web/components/workspace-notifications";
 export const NotificationsSidebarRoot: FC = observer(() => {
   const { workspaceSlug } = useParams();
   // hooks
@@ -33,6 +33,8 @@ export const NotificationsSidebarRoot: FC = observer(() => {
     currentNotificationTab,
     setCurrentNotificationTab,
   } = useWorkspaceNotifications();
+
+  const { t } = useTranslation();
   // derived values
   const workspace = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString()) : undefined;
   const notificationIds = workspace ? notificationIdsByWorkspaceId(workspace.id) : undefined;
@@ -75,7 +77,7 @@ export const NotificationsSidebarRoot: FC = observer(() => {
                     : "text-custom-text-100 hover:text-custom-text-200"
                 )}
               >
-                <div className="font-medium">{tab.label}</div>
+                <div className="font-medium">{t(tab.i18n_label)}</div>
                 {tab.count(unreadNotificationsCount) > 0 && (
                   <CountChip count={getNumberCount(tab.count(unreadNotificationsCount))} />
                 )}
diff --git a/web/core/components/workspace-notifications/sidebar/empty-state.tsx b/web/core/components/workspace-notifications/sidebar/empty-state.tsx
index 3b2b0c0f5..b36bc58a5 100644
--- a/web/core/components/workspace-notifications/sidebar/empty-state.tsx
+++ b/web/core/components/workspace-notifications/sidebar/empty-state.tsx
@@ -2,17 +2,35 @@
 
 import { FC } from "react";
 import { observer } from "mobx-react";
+// plane imports
+import { ENotificationTab } from "@plane/constants";
 // components
-import { EmptyState } from "@/components/empty-state";
+import { useTranslation } from "@plane/i18n";
+import { SimpleEmptyState } from "@/components/empty-state";
 // constants
-import { EmptyStateType } from "@/constants/empty-state";
-import { ENotificationTab } from "@/constants/notification";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 
 export const NotificationEmptyState: FC = observer(() => {
+  // plane imports
+  const { t } = useTranslation();
   // derived values
-  const currentTabEmptyState = ENotificationTab.ALL
-    ? EmptyStateType.NOTIFICATION_ALL_EMPTY_STATE
-    : EmptyStateType.NOTIFICATION_MENTIONS_EMPTY_STATE;
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/search/notification" });
 
-  return <EmptyState type={currentTabEmptyState} layout="screen-simple" />;
+  return (
+    <>
+      {ENotificationTab.ALL ? (
+        <SimpleEmptyState
+          title={t("notification.empty_state.all.title")}
+          description={t("notification.empty_state.all.description")}
+          assetPath={resolvedPath}
+        />
+      ) : (
+        <SimpleEmptyState
+          title={t("notification.empty_state.mentions.title")}
+          description={t("notification.empty_state.mentions.description")}
+          assetPath={resolvedPath}
+        />
+      )}
+    </>
+  );
 });
diff --git a/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx b/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
index 66c5e3a2a..f551a25f4 100644
--- a/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
+++ b/web/core/components/workspace-notifications/sidebar/filters/applied-filter.tsx
@@ -3,9 +3,10 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { X } from "lucide-react";
-// constants
+// plane imports
+import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Header, EHeaderVariant, Tag } from "@plane/ui";
-import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@/constants/notification";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
 
@@ -17,6 +18,7 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
   const { workspaceSlug } = props;
   // hooks
   const { filters, updateFilters } = useWorkspaceNotifications();
+  const { t } = useTranslation();
   // derived values
   const isFiltersEnabled = Object.entries(filters.type || {}).some(([, value]) => value);
 
@@ -47,7 +49,7 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
               className="flex flex-wrap flex-start"
               onClick={() => handleFilterTypeChange(filter?.value, !isSelected)}
             >
-              <div className="whitespace-nowrap text-custom-text-200">{filter.label}</div>
+              <div className="whitespace-nowrap text-custom-text-200">{t(filter.i18n_label)}</div>
               <div className="w-4 h-4 flex justify-center items-center transition-all rounded-sm text-custom-text-200 hover:text-custom-text-100">
                 <X className="h-3 w-3" />
               </div>
@@ -56,7 +58,7 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
         })}
         <button type="button" onClick={handleClearFilters}>
           <Tag>
-            Clear all
+            {t("common.clear_all")}
             <X size={12} strokeWidth={2} />
           </Tag>
         </button>
diff --git a/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx b/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
index 144ba90fe..6fdca5595 100644
--- a/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
+++ b/web/core/components/workspace-notifications/sidebar/filters/menu/menu-option-item.tsx
@@ -3,8 +3,8 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Check } from "lucide-react";
-// constants
-import { ENotificationFilterType } from "@/constants/notification";
+// plane imports
+import { ENotificationFilterType } from "@plane/constants";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
diff --git a/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx b/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
index 751ef8446..e52e989a0 100644
--- a/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/filters/menu/root.tsx
@@ -3,23 +3,31 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
+// plane imports
+import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { PopoverMenu, Tooltip } from "@plane/ui";
 // components
 import { NotificationFilterOptionItem } from "@/components/workspace-notifications";
 // constants
-import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@/constants/notification";
 // hooks
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export const NotificationFilter: FC = observer(() => {
   // hooks
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  const translatedFilterTypeOptions = FILTER_TYPE_OPTIONS.map((filter) => ({
+    ...filter,
+    label: t(filter.i18n_label),
+  }));
 
   return (
     <PopoverMenu
-      data={FILTER_TYPE_OPTIONS}
+      data={translatedFilterTypeOptions}
       button={
-        <Tooltip tooltipContent="Inbox Filters" isMobile={isMobile} position="bottom">
+        <Tooltip tooltipContent={t("notification.options.filters")} isMobile={isMobile} position="bottom">
           <div className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm outline-none">
             <ListFilter className="h-3 w-3" />
           </div>
diff --git a/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx b/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
index b719838b5..21905a54d 100644
--- a/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/options/menu-option/root.tsx
@@ -3,6 +3,7 @@
 import { FC, ReactNode } from "react";
 import { observer } from "mobx-react";
 import { Check, CheckCircle, Clock } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { TNotificationFilter } from "@plane/types";
 import { ArchiveIcon, PopoverMenu } from "@plane/ui";
 // components
@@ -24,6 +25,7 @@ export type TPopoverMenuOptions = {
 export const NotificationHeaderMenuOption = observer(() => {
   // hooks
   const { filters, updateFilters, updateBulkFilters } = useWorkspaceNotifications();
+  const { t } = useTranslation();
 
   const handleFilterChange = (filterType: keyof TNotificationFilter, filterValue: boolean) =>
     updateFilters(filterType, filterValue);
@@ -34,7 +36,7 @@ export const NotificationHeaderMenuOption = observer(() => {
     {
       key: "menu-unread",
       type: "menu-item",
-      label: "Show unread",
+      label: t("notification.options.show_unread"),
       isActive: filters?.read,
       prependIcon: <CheckCircle className="flex-shrink-0 h-3 w-3" />,
       appendIcon: filters?.read ? <Check className="w-3 h-3" /> : undefined,
@@ -43,7 +45,7 @@ export const NotificationHeaderMenuOption = observer(() => {
     {
       key: "menu-archived",
       type: "menu-item",
-      label: "Show archived",
+      label: t("notification.options.show_archived"),
       isActive: filters?.archived,
       prependIcon: <ArchiveIcon className="flex-shrink-0 h-3 w-3" />,
       appendIcon: filters?.archived ? <Check className="w-3 h-3" /> : undefined,
@@ -56,7 +58,7 @@ export const NotificationHeaderMenuOption = observer(() => {
     {
       key: "menu-snoozed",
       type: "menu-item",
-      label: "Show snoozed",
+      label: t("notification.options.show_snoozed"),
       isActive: filters?.snoozed,
       prependIcon: <Clock className="flex-shrink-0 h-3 w-3" />,
       appendIcon: filters?.snoozed ? <Check className="w-3 h-3" /> : undefined,
diff --git a/web/core/components/workspace-notifications/sidebar/header/options/root.tsx b/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
index 8f2caf152..48426aad3 100644
--- a/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/options/root.tsx
@@ -1,12 +1,13 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { CheckCheck, RefreshCw } from "lucide-react";
+// plane imports
+import { ENotificationLoader, ENotificationQueryParamType, NOTIFICATIONS_READ } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Spinner, Tooltip } from "@plane/ui";
 // components
 import { NotificationFilter, NotificationHeaderMenuOption } from "@/components/workspace-notifications";
 // constants
-import { NOTIFICATIONS_READ } from "@/constants/event-tracker";
-import { ENotificationLoader, ENotificationQueryParamType } from "@/constants/notification";
 // hooks
 import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
@@ -21,6 +22,7 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
   const { isMobile } = usePlatformOS();
   const { loader, getNotifications, markAllNotificationsAsRead } = useWorkspaceNotifications();
   const { captureEvent } = useEventTracker();
+  const { t } = useTranslation();
 
   const refreshNotifications = async () => {
     if (loader) return;
@@ -44,7 +46,7 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
   return (
     <div className="relative flex justify-center items-center gap-2 text-sm">
       {/* mark all notifications as read*/}
-      <Tooltip tooltipContent="Mark all as read" isMobile={isMobile} position="bottom">
+      <Tooltip tooltipContent={t("notification.options.mark_all_as_read")} isMobile={isMobile} position="bottom">
         <div
           className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm"
           onClick={() => {
@@ -61,7 +63,7 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
       </Tooltip>
 
       {/* refetch current notifications */}
-      <Tooltip tooltipContent="Refresh" isMobile={isMobile} position="bottom">
+      <Tooltip tooltipContent={t("notification.options.refresh")} isMobile={isMobile} position="bottom">
         <div
           className="flex-shrink-0 w-5 h-5 flex justify-center items-center overflow-hidden cursor-pointer transition-all hover:bg-custom-background-80 rounded-sm"
           onClick={refreshNotifications}
diff --git a/web/core/components/workspace-notifications/sidebar/header/root.tsx b/web/core/components/workspace-notifications/sidebar/header/root.tsx
index d02b9c64e..c641bde19 100644
--- a/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -3,6 +3,7 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { Inbox } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
@@ -15,6 +16,7 @@ type TNotificationSidebarHeader = {
 
 export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observer((props) => {
   const { workspaceSlug } = props;
+  const { t } = useTranslation();
 
   if (!workspaceSlug) return <></>;
   return (
@@ -27,7 +29,11 @@ export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observe
           <Breadcrumbs.BreadcrumbItem
             type="text"
             link={
-              <BreadcrumbLink label="Inbox" icon={<Inbox className="h-4 w-4 text-custom-text-300" />} disableTooltip />
+              <BreadcrumbLink
+                label={t("notification.label")}
+                icon={<Inbox className="h-4 w-4 text-custom-text-300" />}
+                disableTooltip
+              />
             }
           />
         </Breadcrumbs>
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/index.ts b/web/core/components/workspace-notifications/sidebar/notification-card/index.ts
index d4000aa9e..8c086a5a8 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/index.ts
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/index.ts
@@ -1,3 +1,2 @@
-export * from "./root";
 export * from "./item";
 export * from "./options";
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
index c4dc7b2e7..a0c8142ec 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/item.tsx
@@ -100,8 +100,8 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
                     ? "commented"
                     : notificationField === "archived_at"
                       ? notification?.data?.issue_activity.new_value === "restore"
-                        ? "restored the issue"
-                        : "archived the issue"
+                        ? "restored the work item"
+                        : "archived the work item"
                       : notificationField === "None"
                         ? null
                         : replaceUnderscoreIfSnakeCase(notificationField)}{" "}
@@ -115,7 +115,7 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
                             notificationField === "target_date" ? (
                               renderFormattedDate(notification?.data?.issue_activity.new_value)
                             ) : notificationField === "attachment" ? (
-                              "the issue"
+                              "the work item"
                             ) : notificationField === "description" ? (
                               stripAndTruncateHTML(notification?.data?.issue_activity.new_value || "", 55)
                             ) : notificationField === "archived_at" ? null : (
@@ -129,7 +129,7 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
                             </span>
                           )
                         ) : (
-                          "the issue and assigned it to you."
+                          "the work item and assigned it to you."
                         )}
                       </span>
                     </>
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
index 651404a2f..cf048f780 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/options/archive.tsx
@@ -3,11 +3,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { ArchiveRestore } from "lucide-react";
+import { NOTIFICATION_ARCHIVED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { ArchiveIcon, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { NotificationItemOptionButton } from "@/components/workspace-notifications";
 // constants
-import { NOTIFICATION_ARCHIVED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
 // store
@@ -24,6 +25,7 @@ export const NotificationItemArchiveOption: FC<TNotificationItemArchiveOption> =
   const { captureEvent } = useEventTracker();
   const { currentNotificationTab } = useWorkspaceNotifications();
   const { asJson: data, archiveNotification, unArchiveNotification } = notification;
+  const { t } = useTranslation();
 
   const handleNotificationUpdate = async () => {
     try {
@@ -35,7 +37,7 @@ export const NotificationItemArchiveOption: FC<TNotificationItemArchiveOption> =
         state: "SUCCESS",
       });
       setToast({
-        title: data.archived_at ? "Notification un-archived" : "Notification archived",
+        title: data.archived_at ? t("notification.toasts.unarchived") : t("notification.toasts.archived"),
         type: TOAST_TYPE.SUCCESS,
       });
     } catch (e) {
@@ -45,7 +47,9 @@ export const NotificationItemArchiveOption: FC<TNotificationItemArchiveOption> =
 
   return (
     <NotificationItemOptionButton
-      tooltipContent={data.archived_at ? "Un archive" : "Archive"}
+      tooltipContent={
+        data.archived_at ? t("notification.options.mark_unarchive") : t("notification.options.mark_archive")
+      }
       callBack={handleNotificationUpdate}
     >
       {data.archived_at ? (
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
index 42b4e29f0..bd4353b28 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/options/read.tsx
@@ -3,11 +3,12 @@
 import { FC } from "react";
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
+import { NOTIFICATIONS_READ } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { NotificationItemOptionButton } from "@/components/workspace-notifications";
 // constants
-import { NOTIFICATIONS_READ } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useWorkspaceNotifications } from "@/hooks/store";
 // store
@@ -24,6 +25,7 @@ export const NotificationItemReadOption: FC<TNotificationItemReadOption> = obser
   const { captureEvent } = useEventTracker();
   const { currentNotificationTab } = useWorkspaceNotifications();
   const { asJson: data, markNotificationAsRead, markNotificationAsUnRead } = notification;
+  const { t } = useTranslation();
 
   const handleNotificationUpdate = async () => {
     try {
@@ -35,7 +37,7 @@ export const NotificationItemReadOption: FC<TNotificationItemReadOption> = obser
         state: "SUCCESS",
       });
       setToast({
-        title: data.read_at ? "Notification marked as unread" : "Notification marked as read",
+        title: data.read_at ? t("notification.toasts.unread") : t("notification.toasts.read"),
         type: TOAST_TYPE.SUCCESS,
       });
     } catch (e) {
@@ -45,7 +47,7 @@ export const NotificationItemReadOption: FC<TNotificationItemReadOption> = obser
 
   return (
     <NotificationItemOptionButton
-      tooltipContent={data.read_at ? "Mark as unread" : "Mark as read"}
+      tooltipContent={data.read_at ? t("notification.options.mark_unread") : t("notification.options.mark_read")}
       callBack={handleNotificationUpdate}
     >
       <MessageSquare className="h-3 w-3 text-custom-text-300" />
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
index e7bed6688..8b34af477 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/modal.tsx
@@ -5,11 +5,11 @@ import { useParams } from "next/navigation";
 import { useForm, Controller } from "react-hook-form";
 import { X } from "lucide-react";
 import { Transition, Dialog } from "@headlessui/react";
+// plane imports
+import { allTimeIn30MinutesInterval12HoursFormat } from "@plane/constants";
 import { Button, CustomSelect } from "@plane/ui";
 // components
 import { DateDropdown } from "@/components/dropdowns";
-// constants
-import { allTimeIn30MinutesInterval12HoursFormat } from "@/constants/notification";
 // helpers
 import { getDate } from "@/helpers/date-time.helper";
 
diff --git a/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx b/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
index 86e22049c..1695cd8c8 100644
--- a/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
+++ b/web/core/components/workspace-notifications/sidebar/notification-card/options/snooze/root.tsx
@@ -4,11 +4,13 @@ import { Dispatch, FC, Fragment, SetStateAction } from "react";
 import { observer } from "mobx-react";
 import { Clock } from "lucide-react";
 import { Popover, Transition } from "@headlessui/react";
+// plane imports
+import { NOTIFICATION_SNOOZE_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { Tooltip, setToast, TOAST_TYPE } from "@plane/ui";
 // components
 import { NotificationSnoozeModal } from "@/components/workspace-notifications";
-// constants
-import { NOTIFICATION_SNOOZE_OPTIONS } from "@/constants/notification";
+// helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store";
@@ -29,6 +31,7 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
   // hooks
   const { isMobile } = usePlatformOS();
   const {} = useWorkspaceNotifications();
+  const { t } = useTranslation();
   const { asJson: data, snoozeNotification, unSnoozeNotification } = notification;
 
   const handleNotificationSnoozeDate = async (snoozeTill: Date | undefined) => {
@@ -36,8 +39,8 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
       try {
         await snoozeNotification(workspaceSlug, snoozeTill);
         setToast({
-          title: "Success!",
-          message: "Notification snoozed successfully",
+          title: `${t("common.success")}!`,
+          message: t("notification.toasts.snoozed"),
           type: TOAST_TYPE.SUCCESS,
         });
       } catch (e) {
@@ -47,8 +50,8 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
       try {
         await unSnoozeNotification(workspaceSlug);
         setToast({
-          title: "Success!",
-          message: "Notification un snoozed successfully",
+          title: `${t("common.success")}!`,
+          message: t("notification.toasts.un_snoozed"),
           type: TOAST_TYPE.SUCCESS,
         });
       } catch (e) {
@@ -86,7 +89,12 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
 
           return (
             <>
-              <Tooltip tooltipContent={data.snoozed_till ? `Un snooze` : `Snooze`} isMobile={isMobile}>
+              <Tooltip
+                tooltipContent={
+                  data.snoozed_till ? t("notification.options.mark_unsnooze") : t("notification.options.mark_snooze")
+                }
+                isMobile={isMobile}
+              >
                 <Popover.Button
                   className={cn(
                     "relative flex-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center outline-none bg-custom-background-80 hover:bg-custom-background-90",
@@ -117,7 +125,7 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
                           handleDropdownSelect("un-snooze");
                         }}
                       >
-                        <div>Un snooze</div>
+                        <div>{t("notification.options.mark_unsnooze")}</div>
                       </button>
                     )}
 
@@ -131,7 +139,7 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
                           handleDropdownSelect(option.value != undefined ? option.value() : option.value);
                         }}
                       >
-                        <div>{option?.label}</div>
+                        <div>{t(option?.i18n_label)}</div>
                       </button>
                     ))}
                   </div>
diff --git a/web/core/components/workspace/confirm-workspace-member-remove.tsx b/web/core/components/workspace/confirm-workspace-member-remove.tsx
index 51408d1ee..07bd56a12 100644
--- a/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -5,6 +5,7 @@ import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
 // ui
+import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/ui";
 // hooks
 import { useUser } from "@/hooks/store";
@@ -25,6 +26,7 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
   const [isRemoving, setIsRemoving] = useState(false);
   // store hooks
   const { data: currentUser } = useUser();
+  const { t } = useTranslation();
 
   const handleClose = () => {
     onClose();
@@ -80,11 +82,11 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                       <div className="mt-2">
                         {currentUser?.id === userDetails.id ? (
                           <p className="text-sm text-custom-text-200">
-                            Are you sure you want to leave the workspace? You will no longer have access to this
-                            workspace. This action cannot be undone.
+                            {t("workspace_settings.settings.members.leave_confirmation")}
                           </p>
                         ) : (
                           <p className="text-sm text-custom-text-200">
+                            {/* 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.
@@ -96,16 +98,16 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
                   <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                    Cancel
+                    {t("cancel")}
                   </Button>
                   <Button variant="danger" size="sm" tabIndex={1} onClick={handleDeletion} loading={isRemoving}>
                     {currentUser?.id === userDetails.id
                       ? isRemoving
-                        ? "Leaving"
-                        : "Leave"
+                        ? t("leaving")
+                        : t("leave")
                       : isRemoving
-                        ? "Removing"
-                        : "Remove"}
+                        ? t("removing")
+                        : t("remove")}
                   </Button>
                 </div>
               </Dialog.Panel>
diff --git a/web/core/components/workspace/create-workspace-form.tsx b/web/core/components/workspace/create-workspace-form.tsx
index 72568cd5d..fe2302912 100644
--- a/web/core/components/workspace/create-workspace-form.tsx
+++ b/web/core/components/workspace/create-workspace-form.tsx
@@ -3,14 +3,13 @@
 import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
+import { ORGANIZATION_SIZE, RESTRICTED_URLS, WORKSPACE_CREATED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // constants
-import { ORGANIZATION_SIZE, RESTRICTED_URLS } from "@plane/constants";
 // types
 import { IWorkspace } from "@plane/types";
 // ui
 import { Button, CustomSelect, Input, TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { WORKSPACE_CREATED } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useWorkspace } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -35,14 +34,15 @@ type Props = {
 const workspaceService = new WorkspaceService();
 
 export const CreateWorkspaceForm: FC<Props> = observer((props) => {
+  const { t } = useTranslation();
   const {
     onSubmit,
     defaultValues,
     setDefaultValues,
     secondaryButton,
     primaryButtonText = {
-      loading: "Creating workspace",
-      default: "Create workspace",
+      loading: "workspace_creation.button.loading",
+      default: "workspace_creation.button.default",
     },
   } = props;
   // states
@@ -81,8 +81,8 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
               });
               setToast({
                 type: TOAST_TYPE.SUCCESS,
-                title: "Success!",
-                message: "Workspace created successfully.",
+                title: t("workspace_creation.toast.success.title"),
+                message: t("workspace_creation.toast.success.message"),
               });
 
               if (onSubmit) await onSubmit(res);
@@ -97,8 +97,8 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
               });
               setToast({
                 type: TOAST_TYPE.ERROR,
-                title: "Error!",
-                message: "Workspace could not be created. Please try again.",
+                title: t("workspace_creation.toast.error.title"),
+                message: t("workspace_creation.toast.error.message"),
               });
             });
         } else setSlugError(true);
@@ -106,8 +106,8 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Some error occurred while creating workspace. Please try again.",
+          title: t("workspace_creation.toast.error.title"),
+          message: t("workspace_creation.toast.error.message"),
         });
       });
   };
@@ -125,7 +125,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
       <div className="space-y-6 sm:space-y-7">
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceName">
-            Name your workspace
+            {t("workspace_creation.form.name.label")}
             <span className="ml-0.5 text-red-500">*</span>
           </label>
           <div className="flex flex-col gap-1">
@@ -133,13 +133,13 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
               control={control}
               name="name"
               rules={{
-                required: "This is a required field.",
+                required: t("common.errors.required"),
                 validate: (value) =>
                   /^[\w\s-]*$/.test(value) ||
-                  `Workspaces names can contain only (" "), ( - ), ( _ ) and alphanumeric characters.`,
+                  t("workspace_creation.errors.validation.name_alphanumeric"),
                 maxLength: {
                   value: 80,
-                  message: "Limit your name to 80 characters.",
+                  message: t("workspace_creation.errors.validation.name_length"),
                 },
               }}
               render={({ field: { value, ref, onChange } }) => (
@@ -156,7 +156,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   }}
                   ref={ref}
                   hasError={Boolean(errors.name)}
-                  placeholder="Something familiar and recognizable is always best."
+                  placeholder={t("workspace_creation.form.name.placeholder")}
                   className="w-full"
                 />
               )}
@@ -166,7 +166,7 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
         </div>
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceUrl">
-            Set your workspace&apos;s URL
+            {t("workspace_creation.form.url.label")}
             <span className="ml-0.5 text-red-500">*</span>
           </label>
           <div className="flex w-full items-center rounded-md border-[0.5px] border-custom-border-200 px-3">
@@ -175,10 +175,10 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
               control={control}
               name="slug"
               rules={{
-                required: "This is a required field.",
+                required: t("common.errors.required"),
                 maxLength: {
                   value: 48,
-                  message: "Limit your URL to 48 characters.",
+                  message: t("workspace_creation.errors.validation.url_length"),
                 },
               }}
               render={({ field: { onChange, value, ref } }) => (
@@ -193,34 +193,35 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   }}
                   ref={ref}
                   hasError={Boolean(errors.slug)}
-                  placeholder="workspace-name"
+                  placeholder={t("workspace_creation.form.url.placeholder")}
                   className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-sm"
                 />
               )}
             />
           </div>
-          {slugError && <p className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</p>}
+          {slugError && <p className="-mt-3 text-sm text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>}
           {invalidSlug && (
-            <p className="text-sm text-red-500">{`URLs can contain only ( - ), ( _ ) and alphanumeric characters.`}</p>
+            <p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
           {errors.slug && <span className="text-xs text-red-500">{errors.slug.message}</span>}
         </div>
         <div className="space-y-1 text-sm">
           <span>
-            How many people will use this workspace?<span className="ml-0.5 text-red-500">*</span>
+            {t("workspace_creation.form.organization_size.label")}
+            <span className="ml-0.5 text-red-500">*</span>
           </span>
           <div className="w-full">
             <Controller
               name="organization_size"
               control={control}
-              rules={{ required: "This is a required field." }}
+              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-custom-text-400">Select a range</span>
+                      <span className="text-custom-text-400">{t("workspace_creation.form.organization_size.placeholder")}</span>
                     )
                   }
                   buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
@@ -245,11 +246,11 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
       <div className="flex items-center gap-4">
         {secondaryButton}
         <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
-          {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
+          {isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
         </Button>
         {!secondaryButton && (
           <Button variant="neutral-primary" type="button" size="md" onClick={() => router.back()}>
-            Go back
+            {t("common.go_back")}
           </Button>
         )}
       </div>
diff --git a/web/core/components/workspace/delete-workspace-form.tsx b/web/core/components/workspace/delete-workspace-form.tsx
new file mode 100644
index 000000000..b83d07b33
--- /dev/null
+++ b/web/core/components/workspace/delete-workspace-form.tsx
@@ -0,0 +1,175 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { AlertTriangle } from "lucide-react";
+// types
+import { WORKSPACE_DELETED } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import type { IWorkspace } from "@plane/types";
+// ui
+import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
+// constants
+// hooks
+import { cn } from "@plane/utils";
+import { useEventTracker, useWorkspace } from "@/hooks/store";
+import { useAppRouter } from "@/hooks/use-app-router";
+
+type Props = {
+  data: IWorkspace | null;
+  onClose: () => void;
+};
+
+const defaultValues = {
+  workspaceName: "",
+  confirmDelete: "",
+};
+
+export const DeleteWorkspaceForm: React.FC<Props> = observer((props) => {
+  const { data, onClose } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { captureWorkspaceEvent } = useEventTracker();
+  const { deleteWorkspace } = useWorkspace();
+  const { t } = useTranslation();
+  // 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;
+
+    await deleteWorkspace(data.slug)
+      .then(() => {
+        handleClose();
+        router.push("/profile");
+        captureWorkspaceEvent({
+          eventName: WORKSPACE_DELETED,
+          payload: {
+            ...data,
+            state: "SUCCESS",
+            element: "Workspace general settings page",
+          },
+        });
+        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(() => {
+        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"),
+        });
+        captureWorkspaceEvent({
+          eventName: WORKSPACE_DELETED,
+          payload: {
+            ...data,
+            state: "FAILED",
+            element: "Workspace general settings page",
+          },
+        });
+      });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
+      <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
+        <span
+          className={cn(
+            "flex-shrink-0 grid place-items-center rounded-full size-12 sm:size-10 bg-red-500/20 text-red-100"
+          )}
+        >
+          <AlertTriangle className="size-5 text-red-600" aria-hidden="true" />
+        </span>
+        <div>
+          <div className="text-center sm:text-left">
+            <h3 className="text-lg font-medium">{t("workspace_settings.settings.general.delete_modal.title")}</h3>
+            <p className="mt-1 text-sm text-custom-text-200">
+              You are about to delete the workspace <span className="break-words font-semibold">{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="text-custom-text-200 mt-4">
+            <p className="break-words text-sm ">Type in this workspace&apos;s name to continue.</p>
+            <Controller
+              control={control}
+              name="workspaceName"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="workspaceName"
+                  name="workspaceName"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.workspaceName)}
+                  placeholder={data?.name}
+                  className="mt-2 w-full"
+                  autoComplete="off"
+                />
+              )}
+            />
+          </div>
+
+          <div className="text-custom-text-200 mt-4">
+            <p className="text-sm">
+              For final confirmation, type{" "}
+              <span className="font-medium text-custom-text-100">delete my workspace </span>
+              below.
+            </p>
+            <Controller
+              control={control}
+              name="confirmDelete"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="confirmDelete"
+                  name="confirmDelete"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.confirmDelete)}
+                  placeholder=""
+                  className="mt-2 w-full"
+                  autoComplete="off"
+                />
+              )}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          {t("cancel")}
+        </Button>
+        <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
+          {isSubmitting ? t("deleting") : t("confirm")}
+        </Button>
+      </div>
+    </form>
+  );
+});
diff --git a/web/core/components/workspace/delete-workspace-modal.tsx b/web/core/components/workspace/delete-workspace-modal.tsx
deleted file mode 100644
index b3ada6dd7..000000000
--- a/web/core/components/workspace/delete-workspace-modal.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-"use client";
-
-import React from "react";
-import { observer } from "mobx-react";
-import { Controller, useForm } from "react-hook-form";
-import { AlertTriangle } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-// types
-import type { IWorkspace } from "@plane/types";
-// ui
-import { Button, Input, TOAST_TYPE, setToast } from "@plane/ui";
-// constants
-import { WORKSPACE_DELETED } from "@/constants/event-tracker";
-// hooks
-import { useEventTracker, useWorkspace } from "@/hooks/store";
-import { useAppRouter } from "@/hooks/use-app-router";
-
-type Props = {
-  isOpen: boolean;
-  data: IWorkspace | null;
-  onClose: () => void;
-};
-
-const defaultValues = {
-  workspaceName: "",
-  confirmDelete: "",
-};
-
-export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
-  const { isOpen, data, onClose } = props;
-  // router
-  const router = useAppRouter();
-  // store hooks
-  const { captureWorkspaceEvent } = useEventTracker();
-  const { deleteWorkspace } = useWorkspace();
-  // 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;
-
-    await deleteWorkspace(data.slug)
-      .then(() => {
-        handleClose();
-        router.push("/");
-        captureWorkspaceEvent({
-          eventName: WORKSPACE_DELETED,
-          payload: {
-            ...data,
-            state: "SUCCESS",
-            element: "Workspace general settings page",
-          },
-        });
-        setToast({
-          type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Workspace deleted successfully.",
-        });
-      })
-      .catch(() => {
-        setToast({
-          type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong. Please try again later.",
-        });
-        captureWorkspaceEvent({
-          eventName: WORKSPACE_DELETED,
-          payload: {
-            ...data,
-            state: "FAILED",
-            element: "Workspace general settings page",
-          },
-        });
-      });
-  };
-
-  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-custom-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-custom-background-100 text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
-                <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-red-500/20 p-4">
-                      <AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
-                    </span>
-                    <span className="flex items-center justify-start">
-                      <h3 className="text-xl font-medium 2xl:text-2xl">Delete workspace</h3>
-                    </span>
-                  </div>
-
-                  <span>
-                    <p className="text-sm leading-7 text-custom-text-200">
-                      Are you sure you want to delete workspace{" "}
-                      <span className="break-words font-semibold">{data?.name}</span>? All of the data related to the
-                      workspace will be permanently removed. This action cannot be undone.
-                    </p>
-                  </span>
-
-                  <div className="text-custom-text-200">
-                    <p className="break-words text-sm ">
-                      Enter the workspace name <span className="font-medium text-custom-text-100">{data?.name}</span> to
-                      continue:
-                    </p>
-                    <Controller
-                      control={control}
-                      name="workspaceName"
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="workspaceName"
-                          name="workspaceName"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.workspaceName)}
-                          placeholder="Workspace name"
-                          className="mt-2 w-full"
-                          autoComplete="off"
-                        />
-                      )}
-                    />
-                  </div>
-
-                  <div className="text-custom-text-200">
-                    <p className="text-sm">
-                      To confirm, type <span className="font-medium text-custom-text-100">delete my workspace</span>{" "}
-                      below:
-                    </p>
-                    <Controller
-                      control={control}
-                      name="confirmDelete"
-                      render={({ field: { value, onChange, ref } }) => (
-                        <Input
-                          id="confirmDelete"
-                          name="confirmDelete"
-                          type="text"
-                          value={value}
-                          onChange={onChange}
-                          ref={ref}
-                          hasError={Boolean(errors.confirmDelete)}
-                          placeholder="Enter 'delete my workspace'"
-                          className="mt-2 w-full"
-                          autoComplete="off"
-                        />
-                      )}
-                    />
-                  </div>
-
-                  <div className="flex justify-end gap-2">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                      Cancel
-                    </Button>
-                    <Button variant="danger" size="sm" type="submit" disabled={!canDelete} loading={isSubmitting}>
-                      {isSubmitting ? "Deleting" : "Delete workspace"}
-                    </Button>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-});
diff --git a/web/core/components/workspace/index.ts b/web/core/components/workspace/index.ts
index a8f404d1b..ebf6b18d2 100644
--- a/web/core/components/workspace/index.ts
+++ b/web/core/components/workspace/index.ts
@@ -3,6 +3,5 @@ export * from "./sidebar";
 export * from "./views";
 export * from "./confirm-workspace-member-remove";
 export * from "./create-workspace-form";
-export * from "./delete-workspace-modal";
 export * from "./logo";
-export * from "./send-workspace-invitation-modal";
+export * from "./invite-modal";
diff --git a/web/core/components/workspace/invite-modal/actions.tsx b/web/core/components/workspace/invite-modal/actions.tsx
new file mode 100644
index 000000000..e6c535282
--- /dev/null
+++ b/web/core/components/workspace/invite-modal/actions.tsx
@@ -0,0 +1,64 @@
+import { observer } from "mobx-react";
+import { Plus } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/ui";
+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: React.FC<TInvitationModalActionsProps> = observer((props) => {
+  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-xs font-medium text-custom-primary outline-custom-primary",
+          {
+            "cursor-not-allowed opacity-60": isInviteDisabled,
+          }
+        )}
+        onClick={appendField}
+        disabled={isInviteDisabled}
+      >
+        <Plus className="h-3.5 w-3.5" />
+        {addMoreButtonText || t("common.add_more")}
+      </button>
+      <div className="flex items-center gap-2">
+        <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+          {cancelButtonText || t("cancel")}
+        </Button>
+        <Button variant="primary" size="sm" 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/web/core/components/workspace/invite-modal/fields.tsx b/web/core/components/workspace/invite-modal/fields.tsx
new file mode 100644
index 000000000..d46a24995
--- /dev/null
+++ b/web/core/components/workspace/invite-modal/fields.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { Control, Controller, FieldArrayWithId, FormState } from "react-hook-form";
+import { X } from "lucide-react";
+// plane imports
+import { ROLE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CustomSelect, Input } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useUserPermissions } from "@/hooks/store";
+import { 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((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="relative group mb-1 flex items-start justify-between gap-x-4 text-sm w-full">
+          <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 } }) => (
+                <>
+                  <Input
+                    id={`emails.${index}.email`}
+                    name={`emails.${index}.email`}
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.emails?.[index]?.email)}
+                    placeholder={t("workspace_settings.settings.members.modal.placeholder")}
+                    className="w-full text-xs sm:text-sm"
+                  />
+                  {errors.emails?.[index]?.email && (
+                    <span className="ml-1 text-xs text-red-500">{errors.emails?.[index]?.email?.message}</span>
+                  )}
+                </>
+              )}
+            />
+          </div>
+          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
+            <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-xs sm:text-sm">{ROLE[value]}</span>}
+                    onChange={onChange}
+                    optionsClassName="w-full"
+                    className="flex-grow w-24"
+                    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" onClick={() => remove(index)}>
+                  <X className="h-4 w-4 text-custom-text-200" />
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/core/components/workspace/invite-modal/form.tsx b/web/core/components/workspace/invite-modal/form.tsx
new file mode 100644
index 000000000..1178f1f6e
--- /dev/null
+++ b/web/core/components/workspace/invite-modal/form.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+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((props: TInvitationFormProps) => {
+  const { title, description, children, actions, onSubmit, className } = props;
+
+  return (
+    <form
+      onSubmit={onSubmit}
+      onKeyDown={(e) => {
+        if (e.code === "Enter") e.preventDefault();
+      }}
+      className={className}
+    >
+      <div className="space-y-4">
+        <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
+          {title}
+        </Dialog.Title>
+        <div className="text-sm text-custom-text-200">{description}</div>
+        {children}
+      </div>
+      {actions}
+    </form>
+  );
+});
diff --git a/web/core/components/workspace/invite-modal/index.ts b/web/core/components/workspace/invite-modal/index.ts
new file mode 100644
index 000000000..235edf980
--- /dev/null
+++ b/web/core/components/workspace/invite-modal/index.ts
@@ -0,0 +1,3 @@
+export * from "./actions";
+export * from "./fields";
+export * from "./form";
diff --git a/web/core/components/workspace/logo.tsx b/web/core/components/workspace/logo.tsx
index 4407205e0..460e076c5 100644
--- a/web/core/components/workspace/logo.tsx
+++ b/web/core/components/workspace/logo.tsx
@@ -1,5 +1,6 @@
+// plane utils
+import { cn } from "@plane/utils";
 // helpers
-import { cn } from "@plane/editor";
 import { getFileURL } from "@/helpers/file.helper";
 
 type Props = {
diff --git a/web/core/components/workspace/send-workspace-invitation-modal.tsx b/web/core/components/workspace/send-workspace-invitation-modal.tsx
deleted file mode 100644
index 27fb26e89..000000000
--- a/web/core/components/workspace/send-workspace-invitation-modal.tsx
+++ /dev/null
@@ -1,237 +0,0 @@
-"use client";
-
-import React, { useEffect } from "react";
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-import { Controller, useFieldArray, useForm } from "react-hook-form";
-import { Plus, X } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
-import { IWorkspaceBulkInviteFormData } from "@plane/types";
-// ui
-import { Button, CustomSelect, Input } from "@plane/ui";
-// constants
-import { ROLE } from "@/constants/workspace";
-// hooks
-import { useUserPermissions } from "@/hooks/store";
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
-// types
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-  onSubmit: (data: IWorkspaceBulkInviteFormData) => Promise<void> | undefined;
-};
-
-type EmailRole = {
-  email: string;
-  role: EUserPermissions;
-};
-
-type FormValues = {
-  emails: EmailRole[];
-};
-
-const defaultValues: FormValues = {
-  emails: [
-    {
-      email: "",
-      role: 15,
-    },
-  ],
-};
-
-export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) => {
-  const { isOpen, onClose, onSubmit } = props;
-  // store hooks
-  const { workspaceInfoBySlug } = useUserPermissions();
-  // router
-  const { workspaceSlug } = useParams();
-  // form info
-  const {
-    control,
-    reset,
-    handleSubmit,
-    formState: { isSubmitting, errors },
-  } = useForm<FormValues>();
-
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: "emails",
-  });
-
-  const currentWorkspaceRole = workspaceInfoBySlug(workspaceSlug.toString())?.role;
-
-  const handleClose = () => {
-    onClose();
-
-    const timeout = setTimeout(() => {
-      reset(defaultValues);
-      clearTimeout(timeout);
-    }, 350);
-  };
-
-  const appendField = () => {
-    append({ email: "", role: 15 });
-  };
-
-  const onSubmitForm = async (data: FormValues) => {
-    await onSubmit(data)?.then(() => {
-      reset(defaultValues);
-    });
-  };
-
-  useEffect(() => {
-    if (fields.length === 0) append([{ email: "", role: 15 }]);
-  }, [fields, append]);
-
-  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-custom-backdrop transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-20 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-center">
-            <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 translate-y-0 transform rounded-lg bg-custom-background-100 p-5 text-left opacity-100 shadow-custom-shadow-md transition-all w-full sm:max-w-2xl sm:scale-100">
-                <form
-                  onSubmit={handleSubmit(onSubmitForm)}
-                  onKeyDown={(e) => {
-                    if (e.code === "Enter") e.preventDefault();
-                  }}
-                >
-                  <div className="space-y-5">
-                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
-                      Invite people to collaborate
-                    </Dialog.Title>
-                    <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">Invite members to work on your workspace.</p>
-                    </div>
-
-                    <div className="mb-3 space-y-4">
-                      {fields.map((field, index) => (
-                        <div
-                          key={field.id}
-                          className="relative group mb-1 flex items-start justify-between gap-x-4 text-sm w-full"
-                        >
-                          <div className="w-full">
-                            <Controller
-                              control={control}
-                              name={`emails.${index}.email`}
-                              rules={{
-                                required: "Email ID is required",
-                                pattern: {
-                                  value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
-                                  message: "Invalid Email ID",
-                                },
-                              }}
-                              render={({ field: { value, onChange, ref } }) => (
-                                <>
-                                  <Input
-                                    id={`emails.${index}.email`}
-                                    name={`emails.${index}.email`}
-                                    type="text"
-                                    value={value}
-                                    onChange={onChange}
-                                    ref={ref}
-                                    hasError={Boolean(errors.emails?.[index]?.email)}
-                                    placeholder="Enter their email..."
-                                    className="w-full text-xs sm:text-sm"
-                                  />
-                                  {errors.emails?.[index]?.email && (
-                                    <span className="ml-1 text-xs text-red-500">
-                                      {errors.emails?.[index]?.email?.message}
-                                    </span>
-                                  )}
-                                </>
-                              )}
-                            />
-                          </div>
-                          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
-                            <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-xs sm:text-sm">{ROLE[value]}</span>}
-                                    onChange={onChange}
-                                    optionsClassName="w-full"
-                                    className="flex-grow w-24"
-                                    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"
-                                  onClick={() => remove(index)}
-                                >
-                                  <X className="h-4 w-4 text-custom-text-200" />
-                                </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-sm font-medium text-custom-primary outline-custom-primary"
-                      onClick={appendField}
-                    >
-                      <Plus className="h-4 w-4" />
-                      Add more
-                    </button>
-                    <div className="flex items-center gap-2">
-                      <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-                        Cancel
-                      </Button>
-                      <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-                        {isSubmitting ? "Sending invitation" : "Send invitation"}
-                      </Button>
-                    </div>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-});
diff --git a/web/core/components/workspace/settings/invitations-list-item.tsx b/web/core/components/workspace/settings/invitations-list-item.tsx
index 09ca653f3..dc815b52c 100644
--- a/web/core/components/workspace/settings/invitations-list-item.tsx
+++ b/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -3,17 +3,16 @@
 import { useState, FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronDown, XCircle } from "lucide-react";
-// ui
-import { CustomSelect, Tooltip, TOAST_TYPE, setToast } from "@plane/ui";
+import { ChevronDown, LinkIcon, Trash2 } from "lucide-react";
+// plane imports
+import { ROLE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CustomSelect, TOAST_TYPE, setToast, TContextMenuItem, CustomMenu } from "@plane/ui";
+import { cn, copyTextToClipboard } from "@plane/utils";
 // components
 import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
-// constants
-import { ROLE } from "@/constants/workspace";
 // hooks
 import { useMember, useUserPermissions } from "@/hooks/store";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   invitationId: string;
@@ -21,21 +20,31 @@ type Props = {
 
 export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
   const { invitationId } = props;
-  // states
-  const [removeMemberModal, setRemoveMemberModal] = useState(false);
   // 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();
-  const { isMobile } = usePlatformOS();
   // 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 () => {
     if (!workspaceSlug || !invitationDetails) return;
@@ -57,21 +66,41 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
       );
   };
 
-  if (!invitationDetails) return null;
+  if (!invitationDetails || !currentWorkspaceMemberInfo) return null;
 
-  // is the current logged in user admin
-  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
+  const handleCopyText = () => {
+    try {
+      const inviteLink = new URL(invitationDetails.invite_link, window.location.origin).href;
+      copyTextToClipboard(inviteLink).then(() => {
+        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);
+    }
+  };
 
-  // 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
-  );
-
-  if (!currentWorkspaceMemberInfo) return null;
+  const MENU_ITEMS: TContextMenuItem[] = [
+    {
+      key: "copy-link",
+      action: handleCopyText,
+      title: t("common.actions.copy_link"),
+      icon: LinkIcon,
+      shouldRender: !!invitationDetails.invite_link,
+    },
+    {
+      key: "remove",
+      action: () => setRemoveMemberModal(true),
+      title: t("common.remove"),
+      icon: Trash2,
+      shouldRender: isAdmin,
+      className: "text-red-500",
+      iconClassName: "text-red-500",
+    },
+  ];
 
   return (
     <>
@@ -84,7 +113,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
         }}
         onSubmit={handleRemoveInvitation}
       />
-      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90 w-full">
+      <div className="group flex items-center justify-between px-3 py-4 hover:bg-custom-background-90 w-full h-full">
         <div className="flex items-center gap-x-4 gap-y-2">
           <span className="relative flex h-10 w-10 items-center justify-center rounded bg-gray-700 p-4 capitalize text-white">
             {(invitationDetails.email ?? "?")[0]}
@@ -95,7 +124,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
         </div>
         <div className="flex items-center gap-2 text-xs">
           <div className="flex items-center justify-center rounded bg-yellow-500/20 px-2.5 py-1 text-center text-xs font-medium text-yellow-500">
-            <p>Pending</p>
+            <p>{t("common.pending")}</p>
           </div>
           <CustomSelect
             customButton={
@@ -120,11 +149,11 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
 
               updateMemberInvitation(workspaceSlug.toString(), invitationDetails.id, {
                 role: value,
-              }).catch(() => {
+              }).catch((error) => {
                 setToast({
                   type: TOAST_TYPE.ERROR,
                   title: "Error!",
-                  message: "An error occurred while updating member role. Please try again.",
+                  message: error?.error || "An error occurred while updating member role. Please try again.",
                 });
               });
             }}
@@ -143,17 +172,43 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
             })}
           </CustomSelect>
           {isAdmin && (
-            <Tooltip tooltipContent="Remove member" disabled={!isAdmin} isMobile={isMobile}>
-              <button
-                type="button"
-                onClick={() => setRemoveMemberModal(true)}
-                className={`pointer-events-none opacity-0 ${
-                  isAdmin ? "group-hover:pointer-events-auto group-hover:opacity-100" : ""
-                }`}
-              >
-                <XCircle className="h-3.5 w-3.5 text-red-500" strokeWidth={2} />
-              </button>
-            </Tooltip>
+            <CustomMenu ellipsis placement="bottom-end" closeOnSelect>
+              {MENU_ITEMS.map((item) => {
+                if (item.shouldRender === false) return null;
+                return (
+                  <CustomMenu.MenuItem
+                    key={item.key}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      item.action();
+                    }}
+                    className={cn(
+                      "flex items-center gap-2",
+                      {
+                        "text-custom-text-400": 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("text-custom-text-300 whitespace-pre-line", {
+                            "text-custom-text-400": item.disabled,
+                          })}
+                        >
+                          {item.description}
+                        </p>
+                      )}
+                    </div>
+                  </CustomMenu.MenuItem>
+                );
+              })}
+            </CustomMenu>
           )}
         </div>
       </div>
diff --git a/web/core/components/workspace/settings/member-columns.tsx b/web/core/components/workspace/settings/member-columns.tsx
index a323dbaf6..7f8771e8a 100644
--- a/web/core/components/workspace/settings/member-columns.tsx
+++ b/web/core/components/workspace/settings/member-columns.tsx
@@ -3,18 +3,17 @@ import Link from "next/link";
 import { Controller, useForm } from "react-hook-form";
 import { Trash2 } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
-// plane types
+// plane imports
+import { ROLE, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { IUser, IWorkspaceMember } from "@plane/types";
 // plane ui
 import { CustomSelect, PopoverMenu, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { ROLE } from "@/constants/workspace";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
 import { useMember, useUser, useUserPermissions } from "@/hooks/store";
 // plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export interface RowData {
   member: IWorkspaceMember;
@@ -112,7 +111,7 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
     <>
       {isRoleNonEditable ? (
         <div className="w-32 flex ">
-          <span>{ROLE[rowData.role as keyof typeof ROLE]}</span>
+          <span>{ROLE[rowData.role]}</span>
         </div>
       ) : (
         <Controller
@@ -140,7 +139,7 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
               }}
               label={
                 <div className="flex ">
-                  <span>{ROLE[rowData.role as keyof typeof ROLE]}</span>
+                  <span>{ROLE[rowData.role]}</span>
                 </div>
               }
               buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
diff --git a/web/core/components/workspace/settings/members-list-item.tsx b/web/core/components/workspace/settings/members-list-item.tsx
index d4ee6dafe..3c2610a09 100644
--- a/web/core/components/workspace/settings/members-list-item.tsx
+++ b/web/core/components/workspace/settings/members-list-item.tsx
@@ -4,13 +4,14 @@ import { FC } from "react";
 import { isEmpty } from "lodash";
 import { observer } from "mobx-react";
 // ui
+import { WORKSPACE_MEMBER_LEAVE } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IWorkspaceMember } from "@plane/types";
 import { TOAST_TYPE, Table, setToast } from "@plane/ui";
 // components
 import { MembersLayoutLoader } from "@/components/ui/loader/layouts/members-layout-loader";
 import { ConfirmWorkspaceMemberRemove } from "@/components/workspace";
 // constants
-import { WORKSPACE_MEMBER_LEAVE } from "@/constants/event-tracker";
 // hooks
 import { useEventTracker, useMember, useUser, useUserPermissions } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
@@ -32,6 +33,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
   } = useMember();
   const { leaveWorkspace } = useUserPermissions();
   const { captureEvent } = useEventTracker();
+  const { t } = useTranslation();
   // derived values
 
   const handleLeaveWorkspace = async () => {
@@ -49,7 +51,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: err?.error || "Something went wrong. Please try again.",
+          message: err?.error || t("something_went_wrong_please_try_again"),
         })
       );
   };
@@ -61,7 +63,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
       setToast({
         type: TOAST_TYPE.ERROR,
         title: "Error!",
-        message: err?.error || "Something went wrong. Please try again.",
+        message: err?.error || t("something_went_wrong_please_try_again"),
       })
     );
   };
diff --git a/web/core/components/workspace/settings/members-list.tsx b/web/core/components/workspace/settings/members-list.tsx
index 9c19d2f8f..61d22d078 100644
--- a/web/core/components/workspace/settings/members-list.tsx
+++ b/web/core/components/workspace/settings/members-list.tsx
@@ -4,6 +4,7 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 import { ChevronDown } from "lucide-react";
 import { Disclosure } from "@headlessui/react";
+import { useTranslation } from "@plane/i18n";
 import { Collapsible } from "@plane/ui";
 import { CountChip } from "@/components/common";
 import { MembersSettingsLoader } from "@/components/ui";
@@ -29,6 +30,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
       getWorkspaceMemberDetails,
     },
   } = useMember();
+  const { t } = useTranslation();
   // fetching workspace invitations
   useSWR(
     workspaceSlug ? `WORKSPACE_MEMBERS_AND_MEMBER_INVITATIONS_${workspaceSlug.toString()}` : null,
@@ -52,7 +54,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
       <div className="divide-y-[0.5px] divide-custom-border-100 overflow-scroll	">
         {searchedMemberIds?.length !== 0 && <WorkspaceMembersListItem memberDetails={memberDetails ?? []} />}
         {searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
-          <h4 className="mt-16 text-center text-sm text-custom-text-400">No matching members</h4>
+          <h4 className="mt-16 text-center text-sm text-custom-text-400">{t("no_matching_members")}</h4>
         )}
       </div>
       {isAdmin && searchedInvitationsIds && searchedInvitationsIds.length > 0 && (
@@ -60,10 +62,11 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
           isOpen={showPendingInvites}
           onToggle={() => setShowPendingInvites((prev) => !prev)}
           buttonClassName="w-full"
+          className="h-full"
           title={
             <div className="flex w-full items-center justify-between pt-4">
               <div className="flex">
-                <h4 className="text-xl font-medium pt-2 pb-2">Pending invites</h4>
+                <h4 className="text-xl font-medium pt-2 pb-2">{t("workspace_settings.settings.members.pending_invites")}</h4>
                 {searchedInvitationsIds && (
                   <CountChip count={searchedInvitationsIds.length} className="h-5  m-auto ml-2" />
                 )}
@@ -73,7 +76,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
           }
         >
           <Disclosure.Panel>
-            <div className="ml-auto  items-center gap-1.5 rounded-md bg-custom-background-100  py-1.5">
+            <div className="ml-auto items-center gap-1.5 rounded-md bg-custom-background-100 py-1.5">
               {searchedInvitationsIds?.map((invitationId) => (
                 <WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
               ))}
diff --git a/web/core/components/workspace/settings/workspace-details.tsx b/web/core/components/workspace/settings/workspace-details.tsx
index 8368705b5..b3371f548 100644
--- a/web/core/components/workspace/settings/workspace-details.tsx
+++ b/web/core/components/workspace/settings/workspace-details.tsx
@@ -5,16 +5,14 @@ import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { Pencil } from "lucide-react";
 // constants
-import { ORGANIZATION_SIZE } from "@plane/constants";
-// types
+import { ORGANIZATION_SIZE, WORKSPACE_UPDATED ,EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IWorkspace } from "@plane/types";
 // ui
 import { Button, CustomSelect, Input, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { LogoSpinner } from "@/components/common";
 import { WorkspaceImageUploadModal } from "@/components/core";
-// constants
-import { WORKSPACE_UPDATED } from "@/constants/event-tracker";
 // helpers
 import { getFileURL } from "@/helpers/file.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
@@ -22,7 +20,6 @@ import { copyUrlToClipboard } from "@/helpers/string.helper";
 import { useEventTracker, useUserPermissions, useWorkspace } from "@/hooks/store";
 // plane web components
 import { DeleteWorkspaceSection } from "@/plane-web/components/workspace";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const defaultValues: Partial<IWorkspace> = {
   name: "",
@@ -39,6 +36,7 @@ export const WorkspaceDetails: FC = observer(() => {
   const { captureWorkspaceEvent } = useEventTracker();
   const { currentWorkspace, updateWorkspace } = useWorkspace();
   const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
 
   // form info
   const {
@@ -190,10 +188,10 @@ export const WorkspaceDetails: FC = observer(() => {
                 {workspaceLogo && workspaceLogo !== "" ? (
                   <>
                     <Pencil className="h-3 w-3" />
-                    Edit logo
+                    {t("workspace_settings.settings.general.edit_logo")}
                   </>
                 ) : (
-                  "Upload logo"
+                  t("workspace_settings.settings.general.upload_logo")
                 )}
               </button>
             )}
@@ -203,15 +201,15 @@ export const WorkspaceDetails: FC = observer(() => {
         <div className="my-8 flex flex-col gap-8">
           <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-1">
-              <h4 className="text-sm">Workspace name</h4>
+              <h4 className="text-sm">{t("workspace_settings.settings.general.name")}</h4>
               <Controller
                 control={control}
                 name="name"
                 rules={{
-                  required: "Name is required",
+                  required: t("workspace_settings.settings.general.errors.name.required"),
                   maxLength: {
                     value: 80,
-                    message: "Workspace name should not exceed 80 characters",
+                    message: t("workspace_settings.settings.general.errors.name.max_length"),
                   },
                 }}
                 render={({ field: { value, onChange, ref } }) => (
@@ -223,7 +221,7 @@ export const WorkspaceDetails: FC = observer(() => {
                     onChange={onChange}
                     ref={ref}
                     hasError={Boolean(errors.name)}
-                    placeholder="Name"
+                    placeholder={t("workspace_settings.settings.general.name")}
                     className="w-full rounded-md font-medium"
                     disabled={!isAdmin}
                   />
@@ -232,7 +230,7 @@ export const WorkspaceDetails: FC = observer(() => {
             </div>
 
             <div className="flex flex-col gap-1 ">
-              <h4 className="text-sm">Company size</h4>
+              <h4 className="text-sm">{t("workspace_settings.settings.general.company_size")}</h4>
               <Controller
                 name="organization_size"
                 control={control}
@@ -240,7 +238,10 @@ export const WorkspaceDetails: FC = observer(() => {
                   <CustomSelect
                     value={value}
                     onChange={onChange}
-                    label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
+                    label={
+                      ORGANIZATION_SIZE.find((c) => c === value) ??
+                      t("workspace_settings.settings.general.errors.company_size.select_a_range")
+                    }
                     optionsClassName="w-full"
                     buttonClassName="!border-[0.5px] !border-custom-border-200 !shadow-none"
                     input
@@ -257,7 +258,7 @@ export const WorkspaceDetails: FC = observer(() => {
             </div>
 
             <div className="flex flex-col gap-1 ">
-              <h4 className="text-sm">Workspace URL</h4>
+              <h4 className="text-sm">{t("workspace_settings.settings.general.url")}</h4>
               <Controller
                 control={control}
                 name="url"
@@ -284,7 +285,7 @@ export const WorkspaceDetails: FC = observer(() => {
           {isAdmin && (
             <div className="flex items-center justify-between py-2">
               <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isLoading}>
-                {isLoading ? "Updating" : "Update workspace"}
+                {isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
               </Button>
             </div>
           )}
diff --git a/web/core/components/workspace/sidebar/dropdown-item.tsx b/web/core/components/workspace/sidebar/dropdown-item.tsx
new file mode 100644
index 000000000..2259f95d2
--- /dev/null
+++ b/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -0,0 +1,118 @@
+"use client";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { Check, Settings, UserPlus } from "lucide-react";
+// plane imports
+import { Menu } from "@headlessui/react";
+import { EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IWorkspace } from "@plane/types";
+import { cn, getFileURL } from "@plane/utils";
+// helpers
+import { getUserRole } from "@/helpers/user.helper";
+// plane web imports
+import { SubscriptionPill } from "@/plane-web/components/common/subscription";
+
+type TProps = {
+  workspace: IWorkspace;
+  activeWorkspace: IWorkspace | null;
+  handleItemClick: () => void;
+  handleWorkspaceNavigation: (workspace: IWorkspace) => void;
+  handleClose: () => void;
+};
+const SidebarDropdownItem = observer((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-custom-sidebar-background-90": workspace.id === activeWorkspace?.id,
+          "hover:bg-custom-sidebar-background-90": workspace.id !== activeWorkspace?.id,
+        })}
+      >
+        <div className="flex items-center justify-between gap-1 rounded p-1 text-sm text-custom-sidebar-text-100 ">
+          <div className="flex items-center justify-start gap-2.5 w-[80%] relative">
+            <span
+              className={`relative flex h-8 w-8 flex-shrink-0 items-center  justify-center p-2 text-base uppercase font-medium border-custom-border-200 ${
+                !workspace?.logo_url && "rounded-md bg-custom-primary-500 text-white"
+              }`}
+            >
+              {workspace?.logo_url && workspace.logo_url !== "" ? (
+                <img
+                  src={getFileURL(workspace.logo_url)}
+                  className="absolute left-0 top-0 h-full w-full rounded object-cover"
+                  alt={t("workspace_logo")}
+                />
+              ) : (
+                (workspace?.name?.[0] ?? "...")
+              )}
+            </span>
+            <div className="w-[inherit]">
+              <div
+                className={`truncate text-ellipsis text-sm font-medium ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"}`}
+              >
+                {workspace.name}
+              </div>
+              <div className="text-sm text-custom-text-300 flex gap-2 capitalize w-fit">
+                <span>{getUserRole(workspace.role)?.toLowerCase() || "guest"}</span>
+                <div className="w-1 h-1 bg-custom-text-300/50 rounded-full m-auto" />
+                <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">
+              <Check className="h-5 w-5 text-custom-sidebar-text-100" />
+            </span>
+          ) : (
+            <SubscriptionPill workspace={workspace} />
+          )}
+        </div>
+        {workspace.id === activeWorkspace?.id && (
+          <>
+            {workspace?.role === EUserPermissions.ADMIN && (
+              <div className="mt-2 mb-1 flex gap-2">
+                <Link
+                  href={`/${workspace.slug}/settings`}
+                  onClick={handleClose}
+                  className="flex border border-custom-border-200 rounded-md py-1 px-2 gap-1 bg-custom-sidebar-background-100 hover:shadow-sm hover:text-custom-text-200 text-custom-text-300 hover:border-custom-border-300 "
+                >
+                  <Settings className="h-4 w-4 my-auto" />
+                  <span className="text-sm font-medium my-auto">{t("settings")}</span>
+                </Link>
+                <Link
+                  href={`/${workspace.slug}/settings/members`}
+                  onClick={handleClose}
+                  className="flex border border-custom-border-200 rounded-md py-1 px-2 gap-1 bg-custom-sidebar-background-100 hover:shadow-sm hover:text-custom-text-200 text-custom-text-300 hover:border-custom-border-300 "
+                >
+                  <UserPlus className="h-4 w-4 my-auto" />
+                  <span className="text-sm font-medium my-auto">
+                    {t("project_settings.members.invite_members.title")}
+                  </span>
+                </Link>
+              </div>
+            )}
+          </>
+        )}
+      </Menu.Item>
+    </Link>
+  );
+});
+
+export default SidebarDropdownItem;
diff --git a/web/core/components/workspace/sidebar/dropdown.tsx b/web/core/components/workspace/sidebar/dropdown.tsx
index 472f1b4ef..f9e2aca59 100644
--- a/web/core/components/workspace/sidebar/dropdown.tsx
+++ b/web/core/components/workspace/sidebar/dropdown.tsx
@@ -3,49 +3,30 @@
 import { Fragment, Ref, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams } from "next/navigation";
 import { usePopper } from "react-popper";
 // icons
-import { Check, ChevronDown, LogOut, Mails, PlusSquare, Settings } from "lucide-react";
+import { ChevronDown, CirclePlus, LogOut, Mails, Settings } from "lucide-react";
 // ui
 import { Menu, Transition } from "@headlessui/react";
-// types
+// plane imports
+import { useTranslation } from "@plane/i18n";
 import { IWorkspace } from "@plane/types";
-// plane ui
 import { Avatar, Loader, TOAST_TYPE, setToast } from "@plane/ui";
-import { GOD_MODE_URL, cn } from "@/helpers/common.helper";
+import { orderWorkspacesList } from "@plane/utils";
 // helpers
+import { GOD_MODE_URL, cn } from "@/helpers/common.helper";
 import { getFileURL } from "@/helpers/file.helper";
 // hooks
-import { useAppTheme, useUser, useUserPermissions, useUserProfile, useWorkspace } from "@/hooks/store";
-// plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+import { useAppTheme, useUser, useUserProfile, useWorkspace } from "@/hooks/store";
 // plane web helpers
 import { getIsWorkspaceCreationDisabled } from "@/plane-web/helpers/instance.helper";
 // components
 import { WorkspaceLogo } from "../logo";
-
-// Static Data
-const userLinks = (workspaceSlug: string) => [
-  {
-    key: "workspace_invites",
-    name: "Workspace invites",
-    href: "/invitations",
-    icon: Mails,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-  },
-  {
-    key: "settings",
-    name: "Workspace settings",
-    href: `/${workspaceSlug}/settings`,
-    icon: Settings,
-    access: [EUserPermissions.ADMIN],
-  },
-];
+import SidebarDropdownItem from "./dropdown-item";
 
 export const SidebarDropdown = observer(() => {
-  // router params
-  const { workspaceSlug } = useParams();
+  const { t } = useTranslation();
+
   // store hooks
   const { sidebarCollapsed, toggleSidebar } = useAppTheme();
   const { data: currentUser } = useUser();
@@ -55,8 +36,6 @@ export const SidebarDropdown = observer(() => {
     signOut,
   } = useUser();
   const { updateUserProfile } = useUserProfile();
-  const { allowPermissions } = useUserPermissions();
-  // derived values
   const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
 
   const isUserInstanceAdmin = false;
@@ -67,27 +46,17 @@ export const SidebarDropdown = observer(() => {
   // popper-js init
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: "right",
-    modifiers: [
-      {
-        name: "preventOverflow",
-        options: {
-          padding: 12,
-        },
-      },
-    ],
+    modifiers: [{ name: "preventOverflow", options: { padding: 12 } }],
   });
 
-  const handleWorkspaceNavigation = (workspace: IWorkspace) =>
-    updateUserProfile({
-      last_workspace_id: workspace?.id,
-    });
+  const handleWorkspaceNavigation = (workspace: IWorkspace) => updateUserProfile({ last_workspace_id: workspace?.id });
 
   const handleSignOut = async () => {
     await signOut().catch(() =>
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Failed to sign out. Please try again.",
+        title: t("sign_out.toast.error.title"),
+        message: t("sign_out.toast.error.message"),
       })
     );
   };
@@ -97,31 +66,33 @@ export const SidebarDropdown = observer(() => {
       toggleSidebar();
     }
   };
-  const workspacesList = Object.values(workspaces ?? {});
+  const workspacesList = orderWorkspacesList(Object.values(workspaces ?? {}));
   // TODO: fix workspaces list scroll
   return (
-    <div className="flex items-center justify-center gap-x-3 gap-y-2">
+    <div
+      className={cn("flex items-center justify-center gap-x-3 gap-y-2", {
+        "flex-col gap-y-3": sidebarCollapsed,
+      })}
+    >
       <Menu
         as="div"
         className={cn("relative h-full truncate text-left flex-grow flex justify-stretch", {
           "flex-grow-0 justify-center": sidebarCollapsed,
         })}
       >
-        {({ open }) => (
+        {({ open, close }) => (
           <>
             <Menu.Button
               className={cn(
                 "group/menu-button flex items-center justify-between gap-1 p-1 truncate rounded text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:outline-none",
-                {
-                  "flex-grow": !sidebarCollapsed,
-                }
+                { "flex-grow": !sidebarCollapsed }
               )}
             >
               <div className="flex-grow flex items-center gap-2 truncate">
                 <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
                 {!sidebarCollapsed && (
                   <h4 className="truncate text-base font-medium text-custom-text-100">
-                    {activeWorkspace?.name ?? "Loading..."}
+                    {activeWorkspace?.name ?? t("loading")}
                   </h4>
                 )}
               </div>
@@ -129,9 +100,7 @@ export const SidebarDropdown = observer(() => {
                 <ChevronDown
                   className={cn(
                     "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
-                    {
-                      "rotate-180": open,
-                    }
+                    { "rotate-180": open }
                   )}
                 />
               )}
@@ -147,57 +116,27 @@ export const SidebarDropdown = observer(() => {
             >
               <Menu.Items as={Fragment}>
                 <div className="fixed top-12 left-4 z-[21] mt-1 flex w-full max-w-[19rem] origin-top-left flex-col divide-y divide-custom-border-100 rounded-md border-[0.5px] border-custom-sidebar-border-300 bg-custom-sidebar-background-100 shadow-custom-shadow-rg outline-none">
-                  <div className="vertical-scrollbar scrollbar-sm mb-2 flex max-h-96 flex-col items-start justify-start gap-2 overflow-y-scroll px-4">
-                    <h6 className="sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-sidebar-text-400">
+                  <div className="overflow-x-hidden vertical-scrollbar scrollbar-sm flex max-h-96 flex-col items-start justify-start overflow-y-scroll">
+                    <span className="rounded-md px-4 sticky top-0 z-[21] h-full w-full bg-custom-sidebar-background-100 pb-1 pt-3 text-sm font-medium text-custom-text-400 truncate flex-shrink-0">
                       {currentUser?.email}
-                    </h6>
+                    </span>
                     {workspacesList ? (
-                      <div className="size-full flex flex-col items-start justify-start gap-1.5">
-                        {workspacesList.map((workspace) => (
-                          <Link
+                      <div className="size-full flex flex-col items-start justify-start">
+                        {(activeWorkspace
+                          ? [
+                              activeWorkspace,
+                              ...workspacesList.filter((workspace) => workspace.id !== activeWorkspace?.id),
+                            ]
+                          : workspacesList
+                        ).map((workspace) => (
+                          <SidebarDropdownItem
                             key={workspace.id}
-                            href={`/${workspace.slug}`}
-                            onClick={() => {
-                              handleWorkspaceNavigation(workspace);
-                              handleItemClick();
-                            }}
-                            className="w-full"
-                          >
-                            <Menu.Item
-                              as="div"
-                              className="flex items-center justify-between gap-1 rounded p-1 text-sm text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-80"
-                            >
-                              <div className="flex items-center justify-start gap-2.5 truncate">
-                                <span
-                                  className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
-                                    !workspace?.logo_url && "rounded bg-custom-primary-500 text-white"
-                                  }`}
-                                >
-                                  {workspace?.logo_url && workspace.logo_url !== "" ? (
-                                    <img
-                                      src={getFileURL(workspace.logo_url)}
-                                      className="absolute left-0 top-0 h-full w-full rounded object-cover"
-                                      alt="Workspace Logo"
-                                    />
-                                  ) : (
-                                    (workspace?.name?.[0] ?? "...")
-                                  )}
-                                </span>
-                                <h5
-                                  className={`truncate text-sm font-medium ${
-                                    workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
-                                  }`}
-                                >
-                                  {workspace.name}
-                                </h5>
-                              </div>
-                              {workspace.id === activeWorkspace?.id && (
-                                <span className="flex-shrink-0 p-1">
-                                  <Check className="h-5 w-5 text-custom-sidebar-text-100" />
-                                </span>
-                              )}
-                            </Menu.Item>
-                          </Link>
+                            workspace={workspace}
+                            activeWorkspace={activeWorkspace}
+                            handleItemClick={handleItemClick}
+                            handleWorkspaceNavigation={handleWorkspaceNavigation}
+                            handleClose={close}
+                          />
                         ))}
                       </div>
                     ) : (
@@ -216,43 +155,33 @@ export const SidebarDropdown = observer(() => {
                           as="div"
                           className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                         >
-                          <PlusSquare strokeWidth={1.75} className="h-4 w-4 flex-shrink-0" />
-                          Create workspace
+                          <CirclePlus className="size-4 flex-shrink-0" />
+                          {t("create_workspace")}
                         </Menu.Item>
                       </Link>
                     )}
-                    {userLinks(workspaceSlug?.toString() ?? "").map(
-                      (link, index) =>
-                        allowPermissions(link.access, EUserPermissionsLevel.WORKSPACE) && (
-                          <Link
-                            key={link.key}
-                            href={link.href}
-                            className="w-full"
-                            onClick={() => {
-                              if (index > 0) handleItemClick();
-                            }}
-                          >
-                            <Menu.Item
-                              as="div"
-                              className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
-                            >
-                              <link.icon className="h-4 w-4 flex-shrink-0" />
-                              {link.name}
-                            </Menu.Item>
-                          </Link>
-                        )
-                    )}
-                  </div>
-                  <div className="w-full px-4 py-2">
-                    <Menu.Item
-                      as="button"
-                      type="button"
-                      className="flex w-full items-center gap-2 rounded px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
-                      onClick={handleSignOut}
-                    >
-                      <LogOut className="size-4 flex-shrink-0" />
-                      Sign out
-                    </Menu.Item>
+
+                    <Link href="/invitations" className="w-full" onClick={handleItemClick}>
+                      <Menu.Item
+                        as="div"
+                        className="flex items-center gap-2 rounded px-2 py-1 text-sm font-medium text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
+                      >
+                        <Mails 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 px-2 py-1 text-sm font-medium text-red-600 hover:bg-custom-sidebar-background-80"
+                        onClick={handleSignOut}
+                      >
+                        <LogOut className="size-4 flex-shrink-0" />
+                        {t("sign_out")}
+                      </Menu.Item>
+                    </div>
                   </div>
                 </div>
               </Menu.Items>
@@ -260,70 +189,68 @@ export const SidebarDropdown = observer(() => {
           </>
         )}
       </Menu>
-      {!sidebarCollapsed && (
-        <Menu as="div" className="relative flex-shrink-0">
-          <Menu.Button className="grid place-items-center outline-none" ref={setReferenceElement}>
-            <Avatar
-              name={currentUser?.display_name}
-              src={getFileURL(currentUser?.avatar_url ?? "")}
-              size={24}
-              shape="square"
-              className="!text-base"
-            />
-          </Menu.Button>
-          <Transition
-            as={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"
-          >
-            <Menu.Items
-              className="absolute left-0 z-[21] mt-1 flex w-52 origin-top-left  flex-col divide-y
+      <Menu as="div" className="relative flex-shrink-0">
+        <Menu.Button className="grid place-items-center outline-none" ref={setReferenceElement}>
+          <Avatar
+            name={currentUser?.display_name}
+            src={getFileURL(currentUser?.avatar_url ?? "")}
+            size={24}
+            shape="circle"
+            className="!text-base"
+          />
+        </Menu.Button>
+        <Transition
+          as={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"
+        >
+          <Menu.Items
+            className="absolute left-0 z-[21] mt-1 flex w-52 origin-top-left  flex-col divide-y
             divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
-              ref={setPopperElement as Ref<HTMLDivElement>}
-              style={styles.popper}
-              {...attributes.popper}
-            >
-              <div className="flex flex-col gap-2.5 pb-2">
-                <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
-                <Link href="/profile">
-                  <Menu.Item as="div">
-                    <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                      <Settings className="h-4 w-4 stroke-[1.5]" />
-                      <span>Settings</span>
+            ref={setPopperElement as Ref<HTMLDivElement>}
+            style={styles.popper}
+            {...attributes.popper}
+          >
+            <div className="flex flex-col gap-2.5 pb-2">
+              <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+              <Link href="/profile">
+                <Menu.Item as="div">
+                  <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
+                    <Settings className="h-4 w-4 stroke-[1.5]" />
+                    <span>{t("settings")}</span>
+                  </span>
+                </Menu.Item>
+              </Link>
+            </div>
+            <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
+              <Menu.Item
+                as="button"
+                type="button"
+                className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                onClick={handleSignOut}
+              >
+                <LogOut className="size-4 stroke-[1.5]" />
+                {t("sign_out")}
+              </Menu.Item>
+            </div>
+            {isUserInstanceAdmin && (
+              <div className="p-2 pb-0">
+                <Link href={GOD_MODE_URL}>
+                  <Menu.Item as="button" type="button" className="w-full">
+                    <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
+                      {t("enter_god_mode")}
                     </span>
                   </Menu.Item>
                 </Link>
               </div>
-              <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-2" : ""}`}>
-                <Menu.Item
-                  as="button"
-                  type="button"
-                  className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                  onClick={handleSignOut}
-                >
-                  <LogOut className="size-4 stroke-[1.5]" />
-                  Sign out
-                </Menu.Item>
-              </div>
-              {isUserInstanceAdmin && (
-                <div className="p-2 pb-0">
-                  <Link href={GOD_MODE_URL}>
-                    <Menu.Item as="button" type="button" className="w-full">
-                      <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
-                        Enter God Mode
-                      </span>
-                    </Menu.Item>
-                  </Link>
-                </div>
-              )}
-            </Menu.Items>
-          </Transition>
-        </Menu>
-      )}
+            )}
+          </Menu.Items>
+        </Transition>
+      </Menu>
     </div>
   );
 });
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 6fc2c1b52..289a5ec6a 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -27,6 +27,7 @@ import { CustomMenu, Tooltip, DropIndicator, FavoriteFolderIcon, DragHandle } fr
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme } from "@/hooks/store";
+import { useFavorite } from "@/hooks/store/use-favorite";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // constants
 import { FavoriteRoot } from "./favorite-items";
@@ -45,7 +46,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
   const { favorite, handleRemoveFromFavorites, isLastChild, handleDrop } = props;
   // store hooks
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
-
+  const { getGroupedFavorites } = useFavorite();
   const { isMobile } = usePlatformOS();
   const { workspaceSlug } = useParams();
   // states
@@ -58,6 +59,12 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
   const actionSectionRef = useRef<HTMLDivElement | null>(null);
   const elementRef = useRef<HTMLDivElement | null>(null);
 
+  useEffect(() => {
+    if (favorite.children === undefined && workspaceSlug) {
+      getGroupedFavorites(workspaceSlug.toString(), favorite.id);
+    }
+  }, [favorite.id, favorite.children, workspaceSlug, getGroupedFavorites]);
+
   useEffect(() => {
     const element = elementRef.current;
 
@@ -123,7 +130,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
       })
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDragging, favorite.id]);
+  }, [isDragging, favorite.id, isLastChild, favorite.id]);
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
 
@@ -168,20 +175,20 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                     "justify-center": isSidebarCollapsed,
                   })}
                 >
-                  <Disclosure.Button as="button" className="size-8 aspect-square flex-shrink-0 grid place-items-center">
-                    <div className="size-4 grid place-items-center flex-shrink-0">
-                      <FavoriteFolderIcon />
-                    </div>
-                  </Disclosure.Button>
+                  <Tooltip tooltipContent={favorite.name} position="right" isMobile={isMobile}>
+                    <Disclosure.Button
+                      as="button"
+                      className="size-8 aspect-square flex-shrink-0 grid place-items-center"
+                    >
+                      <div className="size-4 grid place-items-center flex-shrink-0">
+                        <FavoriteFolderIcon />
+                      </div>
+                    </Disclosure.Button>
+                  </Tooltip>
                 </div>
               ) : (
                 <>
-                  <Tooltip
-                    tooltipContent={`${favorite.name}`}
-                    position="right"
-                    disabled={!isSidebarCollapsed}
-                    isMobile={isMobile}
-                  >
+                  <Tooltip tooltipContent={`${favorite.name}`} position="right" className="ml-8" isMobile={isMobile}>
                     <div className="flex-grow flex truncate">
                       <Disclosure.Button
                         as="button"
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
index 98dcb033b..847c45f7a 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -2,6 +2,8 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
+import { Tooltip } from "@plane/ui";
+import { cn } from "@plane/utils";
 import { useAppTheme } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -27,9 +29,11 @@ export const FavoriteItemTitle: FC<Props> = observer((props) => {
   };
 
   return (
-    <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
-      <span className="flex items-center justify-center size-5">{icon}</span>
-      {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
-    </Link>
+    <Tooltip tooltipContent={title} isMobile={isMobile} position="right" className={cn(!isSidebarCollapsed && "ml-8")}>
+      <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
+        <span className="flex items-center justify-center size-5">{icon}</span>
+        {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
+      </Link>
+    </Tooltip>
   );
 });
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
index 2ae16528a..49931802e 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx
@@ -131,7 +131,7 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
       })
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [elementRef?.current, isDragging]);
+  }, [elementRef?.current, isDragging, isLastChild, favorite.id]);
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
 
diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index 8aea968ec..bbb98aab4 100644
--- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -13,6 +13,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ChevronRight, FolderPlus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { IFavorite } from "@plane/types";
 import { setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
@@ -38,6 +39,7 @@ export const SidebarFavoritesMenu = observer(() => {
   const [isDragging, setIsDragging] = useState(false);
 
   // store hooks
+  const { t } = useTranslation();
   const { sidebarCollapsed } = useAppTheme();
   const {
     favoriteIds,
@@ -65,8 +67,8 @@ export const SidebarFavoritesMenu = observer(() => {
     }).catch(() => {
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Failed to move favorite.",
+        title: t("error"),
+        message: t("failed_to_move_favorite"),
       });
     });
   };
@@ -87,33 +89,27 @@ export const SidebarFavoritesMenu = observer(() => {
     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);
+        handleMoveToFolder(sourceData.id, parentId); /**parent id  */
       }
-      //handle remove from folder if dropped outside of the folder
-      if (parentId && parentId !== sourceData.parentId && sourceData.isChild) {
-        handleRemoveFromFavoritesFolder(sourceData.id);
-      }
-
       // handle reordering at root level
       if (droppedFavId) {
         if (instruction != "make-child") {
-          handleReorder(sourceData.id, droppedFavId, instruction);
+          handleReorder(sourceData.id, droppedFavId, instruction); /** sequence */
         }
       }
     } else {
       //handling reordering for favorites
       if (droppedFavId) {
-        handleReorder(sourceData.id, droppedFavId, instruction);
+        handleReorder(sourceData.id, droppedFavId, instruction); /** sequence */
       }
+    }
 
-      // handle removal from folder if dropped outside a folder
-      if (!parentId && sourceData.isChild) {
-        handleRemoveFromFavoritesFolder(sourceData.id);
-      }
+    /**remove if dropped outside and source is a child */
+    if (!parentId && sourceData.isChild) {
+      handleRemoveFromFavoritesFolder(sourceData.id); /**parent null */
     }
   };
 
@@ -122,15 +118,15 @@ export const SidebarFavoritesMenu = observer(() => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Favorite removed successfully.",
+          title: t("success"),
+          message: t("favorite_removed_successfully"),
         });
       })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong!",
+          title: t("error"),
+          message: t("something_went_wrong"),
         });
       });
   };
@@ -138,8 +134,8 @@ export const SidebarFavoritesMenu = observer(() => {
     removeFromFavoriteFolder(workspaceSlug.toString(), favoriteId).catch(() => {
       setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Failed to move favorite.",
+        title: t("error"),
+        message: t("failed_to_move_favorite"),
       });
     });
   };
@@ -149,8 +145,8 @@ export const SidebarFavoritesMenu = observer(() => {
       reOrderFavorite(workspaceSlug.toString(), favoriteId, droppedFavId, edge).catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Failed reorder favorite",
+          title: t("error"),
+          message: t("failed_to_reorder_favorite"),
         });
       });
     },
@@ -197,17 +193,17 @@ export const SidebarFavoritesMenu = observer(() => {
             ref={elementRef}
             as="button"
             className={cn(
-              "sticky top-0 bg-custom-sidebar-background-100 z-10 group/workspace-button w-full px-2 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-xs font-semibold",
+              "sticky top-0 bg-custom-sidebar-background-100 z-10 group/workspace-button w-full px-2 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-sm font-semibold",
               {
                 "bg-custom-sidebar-background-80 opacity-60": isDragging,
               }
             )}
           >
             <span onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)} className="flex-1 text-start">
-              YOUR FAVORITES
+              {t("favorites")}
             </span>
             <span className="flex flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded p-0.5 ">
-              <Tooltip tooltipHeading="Create folder" tooltipContent="">
+              <Tooltip tooltipHeading={t("create_folder")} tooltipContent="">
                 <FolderPlus
                   onClick={() => {
                     setCreateNewFolder(true);
@@ -246,7 +242,9 @@ export const SidebarFavoritesMenu = observer(() => {
               {Object.keys(groupedFavorites).length === 0 ? (
                 <>
                   {!sidebarCollapsed && (
-                    <span className="text-custom-text-400 text-xs font-medium px-8 py-1.5">No favorites yet</span>
+                    <span className="text-custom-text-400 text-xs font-medium px-8 py-1.5">
+                      {t("no_favorites_yet")}
+                    </span>
                   )}
                 </>
               ) : (
@@ -287,11 +285,9 @@ export const SidebarFavoritesMenu = observer(() => {
         </Transition>
       </Disclosure>
 
-      <hr
-        className={cn("flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1", {
-          "opacity-0": !sidebarCollapsed || favoriteIds.length === 0,
-        })}
-      />
+      {sidebarCollapsed && favoriteIds.length > 0 && (
+        <hr className="flex-shrink-0 border-custom-sidebar-border-300 h-[0.5px] w-3/5 mx-auto my-1" />
+      )}
     </>
   );
 });
diff --git a/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx b/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
index fcf8e44a0..01ad26f13 100644
--- a/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
+++ b/web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx
@@ -2,8 +2,9 @@ import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
-// plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+// plane helpers
 // plane ui
 import { FavoriteFolderIcon, Input, setToast, TOAST_TYPE } from "@plane/ui";
 // hooks
@@ -24,6 +25,7 @@ type TProps = {
 };
 export const NewFavoriteFolder = observer((props: TProps) => {
   const { setCreateNewFolder, actionType, defaultName, favoriteId } = props;
+  const { t } = useTranslation();
   const { workspaceSlug } = useParams();
   const { addFavorite, updateFavorite, existingFolders } = useFavorite();
 
@@ -42,8 +44,8 @@ export const NewFavoriteFolder = observer((props: TProps) => {
     if (existingFolders.includes(formData.name))
       return setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Folder already exists",
+        title: t("error"),
+        message: t("folder_already_exists"),
       });
     formData = {
       entity_type: "folder",
@@ -56,23 +58,23 @@ export const NewFavoriteFolder = observer((props: TProps) => {
     if (formData.name === "")
       return setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Folder name cannot be empty",
+        title: t("error"),
+        message: t("folder_name_cannot_be_empty"),
       });
 
     addFavorite(workspaceSlug.toString(), formData)
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Favorite created successfully.",
+          title: t("success"),
+          message: t("favorite_created_successfully"),
         });
       })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong!",
+          title: t("error"),
+          message: t("something_went_wrong"),
         });
       });
     setCreateNewFolder(false);
@@ -84,8 +86,8 @@ export const NewFavoriteFolder = observer((props: TProps) => {
     if (existingFolders.includes(formData.name))
       return setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Folder already exists",
+        title: t("error"),
+        message: t("folder_already_exists"),
       });
     const payload = {
       name: formData.name.trim(),
@@ -94,23 +96,23 @@ export const NewFavoriteFolder = observer((props: TProps) => {
     if (formData.name.trim() === "")
       return setToast({
         type: TOAST_TYPE.ERROR,
-        title: "Error!",
-        message: "Folder name cannot be empty",
+        title: t("error"),
+        message: t("folder_name_cannot_be_empty"),
       });
 
     updateFavorite(workspaceSlug.toString(), favoriteId, payload)
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: "Success!",
-          message: "Favorite updated successfully.",
+          title: t("success"),
+          message: t("favorite_updated_successfully"),
         });
       })
       .catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong!",
+          title: t("error"),
+          message: t("something_went_wrong"),
         });
       });
     setCreateNewFolder(false);
@@ -132,7 +134,7 @@ export const NewFavoriteFolder = observer((props: TProps) => {
           name="name"
           control={control}
           rules={{ required: true }}
-          render={({ field }) => <Input className="w-full" placeholder="New folder" {...field} />}
+          render={({ field }) => <Input className="w-full" placeholder={t("new_folder")} {...field} />}
         />
       </form>
     </div>
diff --git a/web/core/components/workspace/sidebar/help-section.tsx b/web/core/components/workspace/sidebar/help-section.tsx
index 7f67e4083..04ef02fea 100644
--- a/web/core/components/workspace/sidebar/help-section.tsx
+++ b/web/core/components/workspace/sidebar/help-section.tsx
@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { FileText, HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react";
+import { useTranslation } from "@plane/i18n";
 // ui
 import { CustomMenu, Tooltip, ToggleSwitch } from "@plane/ui";
 // components
@@ -24,6 +25,7 @@ export interface WorkspaceHelpSectionProps {
 export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
   const { workspaceSlug, projectId } = useParams();
   // store hooks
+  const { t } = useTranslation();
   const { sidebarCollapsed, toggleSidebar } = useAppTheme();
   const { toggleShortcutModal } = useCommandPalette();
   const { isMobile } = usePlatformOS();
@@ -83,7 +85,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                 className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
               >
                 <FileText className="h-3.5 w-3.5 text-custom-text-200" size={14} />
-                <span className="text-xs">Documentation</span>
+                <span className="text-xs">{t("documentation")}</span>
               </a>
             </CustomMenu.MenuItem>
             {config?.intercom_app_id && config?.is_intercom_enabled && (
@@ -94,7 +96,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                   className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
                 >
                   <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
-                  <span className="text-xs">Message support</span>
+                  <span className="text-xs">{t("message_support")}</span>
                 </button>
               </CustomMenu.MenuItem>
             )}
@@ -105,7 +107,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                 className="flex items-center justify- gap-x-2 rounded text-xs hover:bg-custom-background-80"
               >
                 <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
-                <span className="text-xs">Contact sales</span>
+                <span className="text-xs">{t("contact_sales")}</span>
               </a>
             </CustomMenu.MenuItem>
             <div className="my-1 border-t border-custom-border-200" />
@@ -117,7 +119,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                 }}
                 className="flex w-full items-center justify-between text-xs hover:bg-custom-background-80"
               >
-                <span className="racking-tight">Hyper Mode</span>
+                <span className="racking-tight">{t("hyper_mode")}</span>
                 <ToggleSwitch
                   value={canUseLocalDB}
                   onChange={() => toggleLocalDB(workspaceSlug?.toString(), projectId?.toString())}
@@ -130,7 +132,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                 onClick={() => toggleShortcutModal(true)}
                 className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
               >
-                <span className="text-xs">Keyboard shortcuts</span>
+                <span className="text-xs">{t("keyboard_shortcuts")}</span>
               </button>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem>
@@ -139,7 +141,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
                 onClick={() => setProductUpdatesModalOpen(true)}
                 className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
               >
-                <span className="text-xs">What&apos;s new</span>
+                <span className="text-xs">{t("whats_new")}</span>
               </button>
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem>
diff --git a/web/core/components/workspace/sidebar/index.ts b/web/core/components/workspace/sidebar/index.ts
index 564e31771..0a1f2a920 100644
--- a/web/core/components/workspace/sidebar/index.ts
+++ b/web/core/components/workspace/sidebar/index.ts
@@ -6,4 +6,7 @@ export * from "./projects-list";
 export * from "./project-navigation";
 export * from "./quick-actions";
 export * from "./user-menu";
+export * from "./user-menu-item";
 export * from "./workspace-menu";
+export * from "./workspace-menu-item";
+export * from "./workspace-menu-header";
diff --git a/web/core/components/workspace/sidebar/project-navigation.tsx b/web/core/components/workspace/sidebar/project-navigation.tsx
index 3e75adbfd..3c73a7e03 100644
--- a/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -5,6 +5,8 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { FileText, Layers } from "lucide-react";
+import { EUserPermissionsLevel, EUserPermissions, EUserProjectRoles } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // plane ui
 import { Tooltip, DiceIcon, ContrastIcon, LayersIcon, Intake } from "@plane/ui";
 // components
@@ -13,35 +15,36 @@ import { SidebarNavItem } from "@/components/sidebar";
 import { useAppTheme, useProject, useUserPermissions } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane-web constants
-import { EUserPermissions } from "@/plane-web/constants";
-import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export type TNavigationItem = {
   name: string;
   href: string;
   icon: React.ElementType;
-  access: EUserPermissions[];
+  access: EUserPermissions[] | EUserProjectRoles[];
   shouldRender: boolean;
   sortOrder: number;
+  i18n_key: string;
 };
 
 type TProjectItemsProps = {
   workspaceSlug: string;
   projectId: string;
   additionalNavigationItems?: (workspaceSlug: string, projectId: string) => TNavigationItem[];
+  isSidebarCollapsed: boolean;
 };
 
 export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
-  const { workspaceSlug, projectId, additionalNavigationItems } = props;
+  const { workspaceSlug, projectId, additionalNavigationItems, isSidebarCollapsed } = props;
   // store hooks
-  const { sidebarCollapsed: isSidebarCollapsed, toggleSidebar } = useAppTheme();
-  const { getProjectById } = useProject();
+  const { t } = useTranslation();
+  const { toggleSidebar } = useAppTheme();
+  const { getPartialProjectById } = useProject();
   const { isMobile } = usePlatformOS();
   const { allowPermissions } = useUserPermissions();
   // pathname
   const pathname = usePathname();
   // derived values
-  const project = getProjectById(projectId);
+  const project = getPartialProjectById(projectId);
   // handlers
   const handleProjectClick = () => {
     if (window.innerWidth < 768) {
@@ -54,7 +57,8 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
   const baseNavigation = useCallback(
     (workspaceSlug: string, projectId: string): TNavigationItem[] => [
       {
-        name: "Issues",
+        i18n_key: "sidebar.work_items",
+        name: "Work items",
         href: `/${workspaceSlug}/projects/${projectId}/issues`,
         icon: LayersIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
@@ -62,6 +66,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         sortOrder: 1,
       },
       {
+        i18n_key: "sidebar.cycles",
         name: "Cycles",
         href: `/${workspaceSlug}/projects/${projectId}/cycles`,
         icon: ContrastIcon,
@@ -70,6 +75,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         sortOrder: 2,
       },
       {
+        i18n_key: "sidebar.modules",
         name: "Modules",
         href: `/${workspaceSlug}/projects/${projectId}/modules`,
         icon: DiceIcon,
@@ -78,6 +84,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         sortOrder: 3,
       },
       {
+        i18n_key: "sidebar.views",
         name: "Views",
         href: `/${workspaceSlug}/projects/${projectId}/views`,
         icon: Layers,
@@ -86,6 +93,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         sortOrder: 4,
       },
       {
+        i18n_key: "sidebar.pages",
         name: "Pages",
         href: `/${workspaceSlug}/projects/${projectId}/pages`,
         icon: FileText,
@@ -94,6 +102,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         sortOrder: 5,
       },
       {
+        i18n_key: "sidebar.intake",
         name: "Intake",
         href: `/${workspaceSlug}/projects/${projectId}/inbox`,
         icon: Intake,
@@ -137,7 +146,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
           <Tooltip
             key={item.name}
             isMobile={isMobile}
-            tooltipContent={`${project?.name}: ${item.name}`}
+            tooltipContent={`${project?.name}: ${t(item.i18n_key)}`}
             position="right"
             className="ml-2"
             disabled={!isSidebarCollapsed}
@@ -145,13 +154,17 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
             <Link href={item.href} onClick={handleProjectClick}>
               <SidebarNavItem
                 className={`pl-[18px] ${isSidebarCollapsed ? "p-0 size-7 justify-center mx-auto" : ""}`}
-                isActive={pathname.includes(item.href)}
+                isActive={
+                  item.i18n_key === "sidebar.work_items"
+                    ? pathname.includes(item.href) || pathname.includes(`/${workspaceSlug}/browse/`)
+                    : pathname.includes(item.href)
+                }
               >
                 <div className="flex items-center gap-1.5 py-[1px]">
                   <item.icon
                     className={`flex-shrink-0 size-4 ${item.name === "Intake" ? "stroke-1" : "stroke-[1.5]"}`}
                   />
-                  {!isSidebarCollapsed && <span className="text-xs font-medium">{item.name}</span>}
+                  {!isSidebarCollapsed && <span className="text-xs font-medium">{t(item.i18n_key)}</span>}
                 </div>
               </SidebarNavItem>
             </Link>
diff --git a/web/core/components/workspace/sidebar/projects-list-item.tsx b/web/core/components/workspace/sidebar/projects-list-item.tsx
index 9e1e4d769..a776cada4 100644
--- a/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -8,14 +8,16 @@ import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/el
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
+import { useParams } from "next/navigation";
 import { createRoot } from "react-dom/client";
-import { LinkIcon, Star, Settings, Share2, LogOut, MoreHorizontal, ChevronRight } from "lucide-react";
+import { LinkIcon, Settings, Share2, LogOut, MoreHorizontal, ChevronRight } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
 // ui
-import { CustomMenu, Tooltip, ArchiveIcon, setPromiseToast, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
+import { CustomMenu, Tooltip, ArchiveIcon, DropIndicator, DragHandle, ControlLink } from "@plane/ui";
 // components
 import { Logo } from "@/components/common";
 import { LeaveProjectModal, PublishProjectModal } from "@/components/project";
@@ -27,7 +29,6 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane-web components
 import { ProjectNavigationRoot } from "@/plane-web/components/sidebar";
 // constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 import { HIGHLIGHT_CLASS, highlightIssueOnDrop } from "../../issues/issue-layouts/utils";
 
 type Props = {
@@ -42,15 +43,25 @@ type Props = {
   disableDrag?: boolean;
   disableDrop?: boolean;
   isLastChild: boolean;
+  renderInExtendedSidebar?: boolean;
 };
 
 export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
-  const { projectId, handleCopyText, disableDrag, disableDrop, isLastChild, handleOnProjectDrop, projectListType } =
-    props;
+  const {
+    projectId,
+    handleCopyText,
+    disableDrag,
+    disableDrop,
+    isLastChild,
+    handleOnProjectDrop,
+    projectListType,
+    renderInExtendedSidebar = false,
+  } = props;
   // store hooks
-  const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
+  const { sidebarCollapsed } = useAppTheme();
+  const { t } = useTranslation();
   const { setTrackElement } = useEventTracker();
-  const { addProjectToFavorites, removeProjectFromFavorites, getProjectById } = useProject();
+  const { getPartialProjectById } = useProject();
   const { isMobile } = usePlatformOS();
   const { allowPermissions } = useUserPermissions();
   // states
@@ -65,10 +76,9 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const projectRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   // router
-  const router = useRouter();
   const { workspaceSlug, projectId: URLProjectId } = useParams();
   // derived values
-  const project = getProjectById(projectId);
+  const project = getPartialProjectById(projectId);
   // auth
   const isAdmin = allowPermissions(
     [EUserPermissions.ADMIN],
@@ -83,45 +93,13 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     project?.id
   );
 
-  const handleAddToFavorites = () => {
-    if (!workspaceSlug || !project) return;
-
-    const addToFavoritePromise = addProjectToFavorites(workspaceSlug.toString(), project.id);
-    setPromiseToast(addToFavoritePromise, {
-      loading: "Adding project to favorites...",
-      success: {
-        title: "Success!",
-        message: () => "Project added to favorites.",
-      },
-      error: {
-        title: "Error!",
-        message: () => "Couldn't add the project to favorites. Please try again.",
-      },
-    });
-  };
-
-  const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !project) 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 handleLeaveProject = () => {
     setTrackElement("APP_SIDEBAR_PROJECT_DROPDOWN");
     setLeaveProjectModal(true);
   };
 
+  const isSidebarCollapsed = sidebarCollapsed && !renderInExtendedSidebar;
+
   useEffect(() => {
     const element = projectRef.current;
     const dragHandleElement = dragHandleRef.current;
@@ -220,11 +198,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     if (URLProjectId === project.id) setIsProjectListOpen(true);
   }, [URLProjectId]);
 
-  const handleItemClick = () => {
-    if (!isProjectListOpen && !isMobile) router.push(`/${workspaceSlug}/projects/${project.id}/issues`);
-    setIsProjectListOpen((prev) => !prev);
-  };
-
+  const handleItemClick = () => setIsProjectListOpen((prev) => !prev);
   return (
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
@@ -251,7 +225,9 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
             {!disableDrag && (
               <Tooltip
                 isMobile={isMobile}
-                tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
+                tooltipContent={
+                  project.sort_order === null ? t("join_the_project_to_rearrange") : t("drag_to_rearrange")
+                }
                 position="top-right"
                 disabled={isDragging}
               >
@@ -262,7 +238,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                     {
                       "cursor-not-allowed opacity-60": project.sort_order === null,
                       "cursor-grabbing": isDragging,
-                      flex: isMenuActive,
+                      flex: isMenuActive || renderInExtendedSidebar,
                       "!hidden": isSidebarCollapsed,
                     }
                   )}
@@ -333,7 +309,8 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                   placement="bottom-start"
                   useCaptureForOutsideClick
                 >
-                  {isAuthorized && (
+                  {/* TODO: Removed is_favorite logic due to the optimization in projects API */}
+                  {/* {isAuthorized && (
                     <CustomMenu.MenuItem
                       onClick={project.is_favorite ? handleRemoveFromFavorites : handleAddToFavorites}
                     >
@@ -343,10 +320,10 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                             "fill-yellow-500 stroke-yellow-500": project.is_favorite,
                           })}
                         />
-                        <span>{project.is_favorite ? "Remove from favorites" : "Add to favorites"}</span>
+                        <span>{project.is_favorite ? t("remove_from_favorites") : t("add_to_favorites")}</span>
                       </span>
                     </CustomMenu.MenuItem>
-                  )}
+                  )} */}
 
                   {/* publish project settings */}
                   {isAdmin && (
@@ -355,24 +332,14 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                         <div className="flex h-4 w-4 cursor-pointer items-center justify-center rounded text-custom-sidebar-text-200 transition-all duration-300 hover:bg-custom-sidebar-background-80">
                           <Share2 className="h-3.5 w-3.5 stroke-[1.5]" />
                         </div>
-                        <div>{project.anchor ? "Publish settings" : "Publish"}</div>
+                        <div>{t("publish_settings")}</div>
                       </div>
                     </CustomMenu.MenuItem>
                   )}
-                  {/* {isAuthorized && (
-                    <CustomMenu.MenuItem>
-                      <Link href={`/${workspaceSlug}/projects/${project?.id}/draft-issues/`}>
-                        <div className="flex items-center justify-start gap-2">
-                          <PenSquare className="h-3.5 w-3.5 stroke-[1.5] text-custom-text-300" />
-                          <span>Draft issues</span>
-                        </div>
-                      </Link>
-                    </CustomMenu.MenuItem>
-                  )} */}
                   <CustomMenu.MenuItem onClick={handleCopyText}>
                     <span className="flex items-center justify-start gap-2">
                       <LinkIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                      <span>Copy link</span>
+                      <span>{t("copy_link")}</span>
                     </span>
                   </CustomMenu.MenuItem>
                   {isAuthorized && (
@@ -380,7 +347,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                       <Link href={`/${workspaceSlug}/projects/${project?.id}/archives/issues`}>
                         <div className="flex items-center justify-start gap-2">
                           <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                          <span>Archives</span>
+                          <span>{t("archives")}</span>
                         </div>
                       </Link>
                     </CustomMenu.MenuItem>
@@ -389,7 +356,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                     <Link href={`/${workspaceSlug}/projects/${project?.id}/settings`}>
                       <div className="flex items-center justify-start gap-2">
                         <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
-                        <span>Settings</span>
+                        <span>{t("settings")}</span>
                       </div>
                     </Link>
                   </CustomMenu.MenuItem>
@@ -398,7 +365,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                     <CustomMenu.MenuItem onClick={handleLeaveProject}>
                       <div className="flex items-center justify-start gap-2">
                         <LogOut className="h-3.5 w-3.5 stroke-[1.5]" />
-                        <span>Leave project</span>
+                        <span>{t("leave_project")}</span>
                       </div>
                     </CustomMenu.MenuItem>
                   )}
@@ -434,7 +401,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
           >
             {isProjectListOpen && (
               <Disclosure.Panel as="div" className="flex flex-col gap-0.5 mt-1">
-                <ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+                <ProjectNavigationRoot
+                  workspaceSlug={workspaceSlug.toString()}
+                  projectId={projectId.toString()}
+                  isSidebarCollapsed={!!isSidebarCollapsed}
+                />
               </Disclosure.Panel>
             )}
           </Transition>
diff --git a/web/core/components/workspace/sidebar/projects-list.tsx b/web/core/components/workspace/sidebar/projects-list.tsx
index b1206caf3..f3e9f36fa 100644
--- a/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/web/core/components/workspace/sidebar/projects-list.tsx
@@ -5,12 +5,15 @@ 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 { Briefcase, ChevronRight, Plus } from "lucide-react";
+import { Briefcase, ChevronRight, Ellipsis, Plus } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // ui
-import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
+import { Loader, TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components
 import { CreateProjectModal } from "@/components/project";
+import { SidebarNavItem } from "@/components/sidebar";
 import { SidebarProjectsListItem } from "@/components/workspace";
 // helpers
 import { cn } from "@/helpers/common.helper";
@@ -19,7 +22,6 @@ import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 // plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // plane web types
 import { TProject } from "@/plane-web/types";
 
@@ -34,12 +36,13 @@ export const SidebarProjectsList: FC = observer(() => {
   // refs
   const containerRef = useRef<HTMLDivElement | null>(null);
   // store hooks
+  const { t } = useTranslation();
   const { toggleCreateProjectModal } = useCommandPalette();
   const { sidebarCollapsed } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { allowPermissions } = useUserPermissions();
 
-  const { getProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
+  const { loader, getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
   // router params
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
@@ -54,8 +57,8 @@ export const SidebarProjectsList: FC = observer(() => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
-        title: "Link Copied!",
-        message: "Project link copied to clipboard.",
+        title: t("link_copied"),
+        message: t("project_link_copied_to_clipboard"),
       });
     });
   };
@@ -70,7 +73,7 @@ export const SidebarProjectsList: FC = observer(() => {
 
     const joinedProjectsList: TProject[] = [];
     joinedProjects.map((projectId) => {
-      const projectDetails = getProjectById(projectId);
+      const projectDetails = getPartialProjectById(projectId);
       if (projectDetails) joinedProjectsList.push(projectDetails);
     });
 
@@ -84,8 +87,8 @@ export const SidebarProjectsList: FC = observer(() => {
       updateProjectView(workspaceSlug.toString(), sourceId, { sort_order: updatedSortOrder }).catch(() => {
         setToast({
           type: TOAST_TYPE.ERROR,
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
+          title: t("error"),
+          message: t("something_went_wrong"),
         });
       });
   };
@@ -175,12 +178,12 @@ export const SidebarProjectsList: FC = observer(() => {
                 )}
                 onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
               >
-                <Tooltip tooltipHeading="YOUR PROJECTS" tooltipContent="" position="right" disabled={!isCollapsed}>
+                <Tooltip tooltipHeading={t("projects")} tooltipContent="" position="right" disabled={!isCollapsed}>
                   <>
                     {isCollapsed ? (
                       <Briefcase className="flex-shrink-0 size-3" />
                     ) : (
-                      <span className="text-xs font-semibold">YOUR PROJECTS</span>
+                      <span className="text-sm font-semibold">{t("projects")}</span>
                     )}
                   </>
                 </Tooltip>
@@ -188,7 +191,7 @@ export const SidebarProjectsList: FC = observer(() => {
               {!isCollapsed && (
                 <div className="flex items-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto">
                   {isAuthorizedUser && (
-                    <Tooltip tooltipHeading="Create project" tooltipContent="">
+                    <Tooltip tooltipHeading={t("create_project")} tooltipContent="">
                       <button
                         type="button"
                         className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
@@ -225,26 +228,35 @@ export const SidebarProjectsList: FC = observer(() => {
               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={cn("space-y-1", {
+                  className={cn("flex flex-col gap-0.5", {
                     "space-y-0 ml-0": isCollapsed,
                   })}
                   static
                 >
-                  {joinedProjects.map((projectId, index) => (
-                    <SidebarProjectsListItem
-                      key={projectId}
-                      projectId={projectId}
-                      handleCopyText={() => handleCopyText(projectId)}
-                      projectListType={"JOINED"}
-                      disableDrag={false}
-                      disableDrop={false}
-                      isLastChild={index === joinedProjects.length - 1}
-                      handleOnProjectDrop={handleOnProjectDrop}
-                    />
-                  ))}
+                  <>
+                    {joinedProjects.map((projectId, index) => (
+                      <SidebarProjectsListItem
+                        key={projectId}
+                        projectId={projectId}
+                        handleCopyText={() => handleCopyText(projectId)}
+                        projectListType={"JOINED"}
+                        disableDrag={false}
+                        disableDrop={false}
+                        isLastChild={index === joinedProjects.length - 1}
+                        handleOnProjectDrop={handleOnProjectDrop}
+                      />
+                    ))}
+                  </>
                 </Disclosure.Panel>
               )}
             </Transition>
@@ -265,7 +277,7 @@ export const SidebarProjectsList: FC = observer(() => {
               toggleCreateProjectModal(true);
             }}
           >
-            {!isCollapsed && "Add project"}
+            {!isCollapsed && t("add_project")}
           </button>
         )}
       </div>
diff --git a/web/core/components/workspace/sidebar/quick-actions.tsx b/web/core/components/workspace/sidebar/quick-actions.tsx
index 895e71335..150c08d68 100644
--- a/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -1,7 +1,9 @@
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { ChevronUp, PenSquare, Search } from "lucide-react";
+import { PenSquare } from "lucide-react";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // types
 import { TIssue } from "@plane/types";
 // components
@@ -12,9 +14,11 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useCommandPalette, useEventTracker, useProject, useUserPermissions } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
+// plane web components
+import { AppSearch } from "@/plane-web/components/workspace";
 
 export const SidebarQuickActions = observer(() => {
+  const { t } = useTranslation();
   // states
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
   const [isDraftButtonOpen, setIsDraftButtonOpen] = useState(false);
@@ -25,7 +29,7 @@ export const SidebarQuickActions = observer(() => {
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
   const workspaceSlug = routerWorkspaceSlug?.toString();
   // store hooks
-  const { toggleCreateIssueModal, toggleCommandPaletteModal } = useCommandPalette();
+  const { toggleCreateIssueModal } = useCommandPalette();
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
   const { setTrackElement } = useEventTracker();
   const { joinedProjectIds } = useProject();
@@ -92,19 +96,11 @@ export const SidebarQuickActions = observer(() => {
           disabled={disabled}
         >
           <PenSquare className="size-4" />
-          {!isSidebarCollapsed && <span className="text-sm font-medium">New issue</span>}
-        </button>
-        <button
-          className={cn(
-            "flex-shrink-0 size-8 aspect-square grid place-items-center rounded hover:bg-custom-sidebar-background-90 outline-none",
-            {
-              "border-[0.5px] border-custom-sidebar-border-300": !isSidebarCollapsed,
-            }
+          {!isSidebarCollapsed && (
+            <span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
           )}
-          onClick={() => toggleCommandPaletteModal(true)}
-        >
-          <Search className="size-4 text-custom-sidebar-text-300" />
         </button>
+        <AppSearch />
       </div>
     </>
   );
diff --git a/web/core/components/workspace/sidebar/sidebar-menu-items.tsx b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
new file mode 100644
index 000000000..bedfa02a3
--- /dev/null
+++ b/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -0,0 +1,69 @@
+"use client";
+import React, { useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { Ellipsis } from "lucide-react";
+// plane imports
+import {
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS,
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS,
+} from "@plane/constants";
+import { cn } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar";
+// store hooks
+import { useAppTheme, useWorkspace } from "@/hooks/store";
+// plane-web imports
+import { SidebarItem } from "@/plane-web/components/workspace/sidebar";
+
+export const SidebarMenuItems = observer(() => {
+  // routers
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { sidebarCollapsed, toggleExtendedSidebar } = useAppTheme();
+  const { getNavigationPreferences } = useWorkspace();
+
+  // derived values
+  const currentWorkspaceNavigationPreferences = getNavigationPreferences(workspaceSlug.toString());
+
+  const sortedNavigationItems = useMemo(
+    () =>
+      WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.map((item) => {
+        const preference = currentWorkspaceNavigationPreferences?.[item.key];
+        return {
+          ...item,
+          sort_order: preference ? preference.sort_order : 0,
+        };
+      }).sort((a, b) => a.sort_order - b.sort_order),
+    [currentWorkspaceNavigationPreferences]
+  );
+
+  return (
+    <>
+      <div
+        className={cn("flex flex-col gap-0.5", {
+          "space-y-0": sidebarCollapsed,
+        })}
+      >
+        {WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
+          <SidebarItem key={`static_${_index}`} item={item} />
+        ))}
+        {sortedNavigationItems.map((item, _index) => (
+          <SidebarItem key={`dynamic_${_index}`} item={item} />
+        ))}
+        <SidebarNavItem className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}>
+          <button
+            onClick={() => toggleExtendedSidebar()}
+            className={cn("flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350", {
+              "justify-center": sidebarCollapsed,
+            })}
+            id="extended-sidebar-toggle"
+          >
+            <Ellipsis className="size-4" />
+            {!sidebarCollapsed && <span>More</span>}
+          </button>
+        </SidebarNavItem>
+      </div>
+    </>
+  );
+});
diff --git a/web/core/components/workspace/sidebar/user-menu-item.tsx b/web/core/components/workspace/sidebar/user-menu-item.tsx
new file mode 100644
index 000000000..f8f0f120a
--- /dev/null
+++ b/web/core/components/workspace/sidebar/user-menu-item.tsx
@@ -0,0 +1,84 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { EUserPermissionsLevel, SIDEBAR_CLICKED, EUserWorkspaceRoles } from "@plane/constants";
+import { usePlatformOS } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@plane/ui";
+// components
+import { SidebarNavItem } from "@/components/sidebar";
+import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
+// hooks
+import { useAppTheme, useEventTracker, useUserPermissions } from "@/hooks/store";
+
+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: FC<SidebarUserMenuItemProps> = observer((props) => {
+  const { item, draftIssueCount } = props;
+  // nextjs hooks
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  // package hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { captureEvent } = useEventTracker();
+  const { allowPermissions } = useUserPermissions();
+  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
+  const { isMobile } = usePlatformOS();
+
+  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 = (itemKey: string) => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+    captureEvent(SIDEBAR_CLICKED, {
+      destination: itemKey,
+    });
+  };
+
+  return (
+    <Tooltip
+      tooltipContent={t(item.labelTranslationKey)}
+      position="right"
+      className="ml-2"
+      disabled={!sidebarCollapsed}
+      isMobile={isMobile}
+    >
+      <Link href={item.href} onClick={() => handleLinkClick(item.key)}>
+        <SidebarNavItem
+          className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
+          isActive={isActive}
+        >
+          <div className="flex items-center gap-1.5 py-[1px]">
+            <item.Icon className="size-4 flex-shrink-0" />
+            {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
+          </div>
+          {item.key === "notifications" && (
+            <NotificationAppSidebarOption
+              workspaceSlug={workspaceSlug.toString()}
+              isSidebarCollapsed={sidebarCollapsed ?? false}
+            />
+          )}
+        </SidebarNavItem>
+      </Link>
+    </Tooltip>
+  );
+});
diff --git a/web/core/components/workspace/sidebar/user-menu.tsx b/web/core/components/workspace/sidebar/user-menu.tsx
index 3df26a87f..2d625ae6b 100644
--- a/web/core/components/workspace/sidebar/user-menu.tsx
+++ b/web/core/components/workspace/sidebar/user-menu.tsx
@@ -2,56 +2,54 @@
 
 import React from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
+import { useParams } from "next/navigation";
+import { Home, Inbox, PenSquare } from "lucide-react";
+// plane imports
+import { EUserWorkspaceRoles } from "@plane/constants";
+import { UserActivityIcon } from "@plane/ui";
 // components
-import { Tooltip } from "@plane/ui";
-import { SidebarNavItem } from "@/components/sidebar";
-import { NotificationAppSidebarOption } from "@/components/workspace-notifications";
-// constants
-import { SIDEBAR_CLICKED } from "@/constants/event-tracker";
+import { SidebarUserMenuItem } from "@/components/workspace/sidebar";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useEventTracker, useUser, useUserPermissions } from "@/hooks/store";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane web constants
-import { SIDEBAR_USER_MENU_ITEMS } from "@/plane-web/constants/dashboard";
-import { EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
-// plane web helpers
-import { isUserFeatureEnabled } from "@/plane-web/helpers/dashboard.helper";
+import { useAppTheme, useUserPermissions, useUser } from "@/hooks/store";
 
 export const SidebarUserMenu = observer(() => {
-  // store hooks
-  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
-  const { captureEvent } = useEventTracker();
-  const { isMobile } = usePlatformOS();
-  const { data: currentUser } = useUser();
-  const { allowPermissions, workspaceUserInfo } = useUserPermissions();
-  // router params
   const { workspaceSlug } = useParams();
-  // pathname
-  const pathname = usePathname();
-  // computed
+  const { sidebarCollapsed } = useAppTheme();
+  const { workspaceUserInfo } = useUserPermissions();
+  const { data: currentUser } = useUser();
 
-  const getHref = (link: any) =>
-    `/${workspaceSlug}${link.href}${link.key === "your-work" ? `/${currentUser?.id}` : ""}`;
-
-  const handleLinkClick = (itemKey: string) => {
-    if (window.innerWidth < 768) {
-      toggleSidebar();
-    }
-    captureEvent(SIDEBAR_CLICKED, {
-      destination: itemKey,
-    });
-  };
-
-  const notificationIndicatorElement = (
-    <NotificationAppSidebarOption
-      workspaceSlug={workspaceSlug.toString()}
-      isSidebarCollapsed={sidebarCollapsed ?? false}
-    />
-  );
+  const SIDEBAR_USER_MENU_ITEMS = [
+    {
+      key: "home",
+      labelTranslationKey: "sidebar.home",
+      href: `/${workspaceSlug.toString()}/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: Home,
+    },
+    {
+      key: "your-work",
+      labelTranslationKey: "sidebar.your_work",
+      href: `/${workspaceSlug.toString()}/profile/${currentUser?.id}/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: UserActivityIcon,
+    },
+    {
+      key: "notifications",
+      labelTranslationKey: "sidebar.inbox",
+      href: `/${workspaceSlug.toString()}/notifications/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: Inbox,
+    },
+    {
+      key: "drafts",
+      labelTranslationKey: "sidebar.drafts",
+      href: `/${workspaceSlug.toString()}/drafts/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: PenSquare,
+    },
+  ];
 
   const draftIssueCount = workspaceUserInfo[workspaceSlug.toString()]?.draft_issue_count;
 
@@ -61,35 +59,9 @@ export const SidebarUserMenu = observer(() => {
         "space-y-0": sidebarCollapsed,
       })}
     >
-      {SIDEBAR_USER_MENU_ITEMS.map((link) => {
-        if (link.key === "drafts" && draftIssueCount === 0) return null;
-        if (!isUserFeatureEnabled(link.key)) return null;
-        return (
-          allowPermissions(link.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString()) && (
-            <Tooltip
-              key={link.key}
-              tooltipContent={link.label}
-              position="right"
-              className="ml-2"
-              disabled={!sidebarCollapsed}
-              isMobile={isMobile}
-            >
-              <Link key={link.key} href={getHref(link)} onClick={() => handleLinkClick(link.key)}>
-                <SidebarNavItem
-                  className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
-                  isActive={link.highlight(pathname, `/${workspaceSlug}`, { userId: currentUser?.id })}
-                >
-                  <div className="flex items-center gap-1.5 py-[1px]">
-                    <link.Icon className="size-4 flex-shrink-0" />
-                    {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{link.label}</p>}
-                  </div>
-                  {link.key === "notifications" && notificationIndicatorElement}
-                </SidebarNavItem>
-              </Link>
-            </Tooltip>
-          )
-        );
-      })}
+      {SIDEBAR_USER_MENU_ITEMS.map((item) => (
+        <SidebarUserMenuItem key={item.key} item={item} draftIssueCount={draftIssueCount} />
+      ))}
     </div>
   );
 });
diff --git a/web/core/components/workspace/sidebar/workspace-menu-header.tsx b/web/core/components/workspace/sidebar/workspace-menu-header.tsx
new file mode 100644
index 000000000..3367a2b34
--- /dev/null
+++ b/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -0,0 +1,116 @@
+import { FC, useState, useRef } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import { MoreHorizontal, ArchiveIcon, ChevronRight, Settings } from "lucide-react";
+import { Disclosure } from "@headlessui/react";
+// plane imports
+import { EUserWorkspaceRoles, EUserPermissionsLevel } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { CustomMenu } from "@plane/ui";
+import { cn } from "@plane/utils";
+// store hooks
+import { useAppTheme, useUserPermissions } from "@/hooks/store";
+
+export type SidebarWorkspaceMenuHeaderProps = {
+  isWorkspaceMenuOpen: boolean;
+  toggleWorkspaceMenu: (value: boolean) => void;
+};
+
+export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = observer((props) => {
+  const { isWorkspaceMenuOpen, toggleWorkspaceMenu } = props;
+  // state
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  // refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  // hooks
+  const { workspaceSlug } = useParams();
+  const { sidebarCollapsed } = useAppTheme();
+  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);
+
+  if (sidebarCollapsed) {
+    return <></>;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex px-2 bg-custom-sidebar-background-100 group/workspace-button hover:bg-custom-sidebar-background-90 rounded",
+        {
+          "mt-2.5": !sidebarCollapsed,
+        }
+      )}
+    >
+      <Disclosure.Button
+        as="button"
+        className="flex-1 sticky top-0  z-10  w-full  py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400  text-sm font-semibold"
+        onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
+      >
+        <span>{t("workspace")}</span>
+      </Disclosure.Button>
+      <CustomMenu
+        customButton={
+          <span
+            ref={actionSectionRef}
+            className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded my-auto"
+            onClick={() => {
+              setIsMenuActive(!isMenuActive);
+            }}
+          >
+            <MoreHorizontal className="size-4" />
+          </span>
+        }
+        className={cn(
+          "h-full flex items-center opacity-0 z-20 pointer-events-none flex-shrink-0 group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto my-auto",
+          {
+            "opacity-100 pointer-events-auto": isMenuActive,
+          }
+        )}
+        customButtonClassName="grid place-items-center"
+        placement="bottom-start"
+      >
+        <CustomMenu.MenuItem>
+          <Link href={`/${workspaceSlug}/projects/archives`}>
+            <div className="flex items-center justify-start gap-2">
+              <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
+              <span>{t("archives")}</span>
+            </div>
+          </Link>
+        </CustomMenu.MenuItem>
+
+        {isAdmin && (
+          <CustomMenu.MenuItem>
+            <Link href={`/${workspaceSlug}/settings`}>
+              <div className="flex items-center justify-start gap-2">
+                <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
+                <span>{t("settings")}</span>
+              </div>
+            </Link>
+          </CustomMenu.MenuItem>
+        )}
+      </CustomMenu>
+      <Disclosure.Button
+        as="button"
+        className="sticky top-0 z-10 group/workspace-button px-0.5 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-xs font-semibold"
+        onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
+      >
+        {" "}
+        <span className="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded hover:bg-custom-sidebar-background-80">
+          <ChevronRight
+            className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
+              "rotate-90": isWorkspaceMenuOpen,
+            })}
+          />
+        </span>
+      </Disclosure.Button>
+    </div>
+  );
+});
diff --git a/web/core/components/workspace/sidebar/workspace-menu-item.tsx b/web/core/components/workspace/sidebar/workspace-menu-item.tsx
new file mode 100644
index 000000000..6b06390e4
--- /dev/null
+++ b/web/core/components/workspace/sidebar/workspace-menu-item.tsx
@@ -0,0 +1,82 @@
+import { FC } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams, usePathname } from "next/navigation";
+// plane imports
+import { EUserWorkspaceRoles, EUserPermissionsLevel } from "@plane/constants";
+import { usePlatformOS } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { Tooltip } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar";
+// hooks
+import { useAppTheme, useUserPermissions } from "@/hooks/store";
+// plane web imports
+import { UpgradeBadge } from "@/plane-web/components/workspace";
+
+export type SidebarWorkspaceMenuItemProps = {
+  item: {
+    labelTranslationKey: string;
+    key: string;
+    href: string;
+    Icon: any;
+    access: EUserWorkspaceRoles[];
+  };
+};
+
+export const SidebarWorkspaceMenuItem: FC<SidebarWorkspaceMenuItemProps> = observer((props) => {
+  const { item } = props;
+
+  const { t } = useTranslation();
+  // nextjs hooks
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  const { allowPermissions } = useUserPermissions();
+  // store hooks
+  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
+  const { isMobile } = usePlatformOS();
+
+  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 (
+    <Tooltip
+      tooltipContent={t(item.labelTranslationKey)}
+      position="right"
+      className="ml-2"
+      disabled={!sidebarCollapsed}
+      isMobile={isMobile}
+    >
+      <Link href={item.href} onClick={() => handleLinkClick()}>
+        <SidebarNavItem
+          className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
+          isActive={isActive}
+        >
+          <div className="flex items-center gap-1.5 py-[1px]">
+            <item.Icon
+              className={cn("size-4", {
+                "rotate-180": item.key === "active_cycles",
+              })}
+            />
+            {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(item.labelTranslationKey)}</p>}
+          </div>
+          {!sidebarCollapsed && item.key === "active_cycles" && (
+            <div className="flex-shrink-0">
+              <UpgradeBadge />
+            </div>
+          )}
+        </SidebarNavItem>
+      </Link>
+    </Tooltip>
+  );
+});
diff --git a/web/core/components/workspace/sidebar/workspace-menu.tsx b/web/core/components/workspace/sidebar/workspace-menu.tsx
index cf786f405..2b2fa90b3 100644
--- a/web/core/components/workspace/sidebar/workspace-menu.tsx
+++ b/web/core/components/workspace/sidebar/workspace-menu.tsx
@@ -1,146 +1,69 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
-import { ArchiveIcon, ChevronRight, MoreHorizontal, Settings } from "lucide-react";
+import { useParams } from "next/navigation";
+import { BarChart2, Briefcase, Layers } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
-// plane helpers
-import { useOutsideClickDetector } from "@plane/hooks";
 // ui
-import { CustomMenu, Tooltip } from "@plane/ui";
+import { EUserWorkspaceRoles } from "@plane/constants";
+import { ContrastIcon } from "@plane/ui";
 // components
-import { SidebarNavItem } from "@/components/sidebar";
-// constants
-import { SIDEBAR_WORKSPACE_MENU_ITEMS } from "@/constants/dashboard";
-import { SIDEBAR_CLICKED } from "@/constants/event-tracker";
+import { SidebarWorkspaceMenuHeader, SidebarWorkspaceMenuItem } from "@/components/workspace/sidebar";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useEventTracker, useUserPermissions } from "@/hooks/store";
+import { useAppTheme } from "@/hooks/store";
 import useLocalStorage from "@/hooks/use-local-storage";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane web components
-import { UpgradeBadge } from "@/plane-web/components/workspace";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 export const SidebarWorkspaceMenu = observer(() => {
-  // state
-  const [isMenuActive, setIsMenuActive] = useState(false);
-  // refs
-  const actionSectionRef = useRef<HTMLDivElement | null>(null);
-  // store hooks
-  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
-  const { captureEvent } = useEventTracker();
-  const { isMobile } = usePlatformOS();
-  const { allowPermissions } = useUserPermissions();
   // router params
   const { workspaceSlug } = useParams();
-  // pathname
-  const pathname = usePathname();
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
   // local storage
   const { setValue: toggleWorkspaceMenu, storedValue } = useLocalStorage<boolean>("is_workspace_menu_open", true);
   // derived values
   const isWorkspaceMenuOpen = !!storedValue;
-  const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
-
-  const handleLinkClick = (itemKey: string) => {
-    if (window.innerWidth < 768) {
-      toggleSidebar();
-    }
-    captureEvent(SIDEBAR_CLICKED, {
-      destination: itemKey,
-    });
-  };
 
   useEffect(() => {
     if (sidebarCollapsed) toggleWorkspaceMenu(true);
   }, [sidebarCollapsed, toggleWorkspaceMenu]);
-  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
 
-  const indicatorElement = (
-    <div className="flex-shrink-0">
-      <UpgradeBadge />
-    </div>
-  );
+  const SIDEBAR_WORKSPACE_MENU_ITEMS = [
+    {
+      key: "projects",
+      labelTranslationKey: "sidebar.projects",
+      href: `/${workspaceSlug}/projects/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: Briefcase,
+    },
+    {
+      key: "views",
+      labelTranslationKey: "sidebar.views",
+      href: `/${workspaceSlug}/workspace-views/all-issues/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: Layers,
+    },
+    {
+      key: "active-cycles",
+      labelTranslationKey: "sidebar.cycles",
+      href: `/${workspaceSlug}/active-cycles/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: ContrastIcon,
+    },
+    {
+      key: "analytics",
+      labelTranslationKey: "sidebar.analytics",
+      href: `/${workspaceSlug}/analytics/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: BarChart2,
+    },
+  ];
 
   return (
     <Disclosure as="div" defaultOpen>
-      {!sidebarCollapsed && (
-        <div
-          className={cn(
-            "flex px-2 bg-custom-sidebar-background-100 group/workspace-button hover:bg-custom-sidebar-background-90 rounded",
-            {
-              "mt-2.5": !sidebarCollapsed,
-            }
-          )}
-        >
-          {" "}
-          <Disclosure.Button
-            as="button"
-            className="flex-1 sticky top-0  z-10  w-full  py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400  text-xs font-semibold"
-            onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
-          >
-            <span>WORKSPACE</span>
-          </Disclosure.Button>
-          <CustomMenu
-            customButton={
-              <span
-                ref={actionSectionRef}
-                className="grid place-items-center p-0.5 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 rounded my-auto"
-                onClick={() => {
-                  setIsMenuActive(!isMenuActive);
-                }}
-              >
-                <MoreHorizontal className="size-4" />
-              </span>
-            }
-            className={cn(
-              "h-full flex items-center opacity-0 z-20 pointer-events-none flex-shrink-0 group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto my-auto",
-              {
-                "opacity-100 pointer-events-auto": isMenuActive,
-              }
-            )}
-            customButtonClassName="grid place-items-center"
-            placement="bottom-start"
-          >
-            <CustomMenu.MenuItem>
-              <Link href={`/${workspaceSlug}/projects/archives`}>
-                <div className="flex items-center justify-start gap-2">
-                  <ArchiveIcon className="h-3.5 w-3.5 stroke-[1.5]" />
-                  <span>Archives</span>
-                </div>
-              </Link>
-            </CustomMenu.MenuItem>
-
-            {isAdmin && (
-              <CustomMenu.MenuItem>
-                <Link href={`/${workspaceSlug}/settings`}>
-                  <div className="flex items-center justify-start gap-2">
-                    <Settings className="h-3.5 w-3.5 stroke-[1.5]" />
-                    <span>Settings</span>
-                  </div>
-                </Link>
-              </CustomMenu.MenuItem>
-            )}
-          </CustomMenu>
-          <Disclosure.Button
-            as="button"
-            className="sticky top-0 z-10 group/workspace-button px-0.5 py-1.5 flex items-center justify-between gap-1 text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-90 rounded text-xs font-semibold"
-            onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
-          >
-            {" "}
-            <span className="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded hover:bg-custom-sidebar-background-80">
-              <ChevronRight
-                className={cn("size-4 flex-shrink-0 text-custom-sidebar-text-400 transition-transform", {
-                  "rotate-90": isWorkspaceMenuOpen,
-                })}
-              />
-            </span>
-          </Disclosure.Button>
-        </div>
-      )}
+      <SidebarWorkspaceMenuHeader isWorkspaceMenuOpen={isWorkspaceMenuOpen} toggleWorkspaceMenu={toggleWorkspaceMenu} />
       <Transition
         show={isWorkspaceMenuOpen}
         enter="transition duration-100 ease-out"
@@ -158,37 +81,9 @@ export const SidebarWorkspaceMenu = observer(() => {
             })}
             static
           >
-            {SIDEBAR_WORKSPACE_MENU_ITEMS.map(
-              (link) =>
-                allowPermissions(link.access, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString()) && (
-                  <Tooltip
-                    key={link.key}
-                    tooltipContent={link.label}
-                    position="right"
-                    className="ml-2"
-                    disabled={!sidebarCollapsed}
-                    isMobile={isMobile}
-                  >
-                    <Link href={`/${workspaceSlug}${link.href}`} onClick={() => handleLinkClick(link.key)}>
-                      <SidebarNavItem
-                        key={link.key}
-                        className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
-                        isActive={link.highlight(pathname, `/${workspaceSlug}`)}
-                      >
-                        <div className="flex items-center gap-1.5 py-[1px]">
-                          <link.Icon
-                            className={cn("size-4", {
-                              "rotate-180": link.key === "active-cycles",
-                            })}
-                          />
-                          {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{link.label}</p>}
-                        </div>
-                        {!sidebarCollapsed && link.key === "active-cycles" && indicatorElement}
-                      </SidebarNavItem>
-                    </Link>
-                  </Tooltip>
-                )
-            )}
+            {SIDEBAR_WORKSPACE_MENU_ITEMS.map((item) => (
+              <SidebarWorkspaceMenuItem key={item.key} item={item} />
+            ))}
           </Disclosure.Panel>
         )}
       </Transition>
diff --git a/web/core/components/workspace/views/default-view-list-item.tsx b/web/core/components/workspace/views/default-view-list-item.tsx
index 0d0e627b6..de64052cf 100644
--- a/web/core/components/workspace/views/default-view-list-item.tsx
+++ b/web/core/components/workspace/views/default-view-list-item.tsx
@@ -1,15 +1,17 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
+import { useTranslation } from "@plane/i18n";
 // helpers
 import { truncateText } from "@/helpers/string.helper";
 
-type Props = { view: { key: string; label: string } };
+type Props = { view: { key: string; i18n_label: string } };
 
 export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
   const { view } = props;
   // router
   const { workspaceSlug } = useParams();
+  const { t } = useTranslation();
 
   return (
     <div className="group border-b border-custom-border-200 hover:bg-custom-background-90">
@@ -18,7 +20,7 @@ export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
           <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-sm font-medium leading-4">{truncateText(view.label, 75)}</p>
+                <p className="truncate text-sm font-medium leading-4">{truncateText(t(view.i18n_label), 75)}</p>
               </div>
             </div>
           </div>
diff --git a/web/core/components/workspace/views/default-view-quick-action.tsx b/web/core/components/workspace/views/default-view-quick-action.tsx
index dac8a2202..0ee4facab 100644
--- a/web/core/components/workspace/views/default-view-quick-action.tsx
+++ b/web/core/components/workspace/views/default-view-quick-action.tsx
@@ -3,6 +3,8 @@
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { ExternalLink, LinkIcon } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
 // ui
 import { TStaticViewTypes } from "@plane/types";
 import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
@@ -16,13 +18,15 @@ type Props = {
   globalViewId: string | undefined;
   view: {
     key: TStaticViewTypes;
-    label: string;
+    i18n_label: string;
   };
 };
 
 export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
   const { parentRef, globalViewId, view, workspaceSlug } = props;
 
+  const { t } = useTranslation();
+
   const viewLink = `${workspaceSlug}/workspace-views/${view.key}`;
   const handleCopyText = () =>
     copyUrlToClipboard(viewLink).then(() => {
@@ -38,13 +42,13 @@ export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props
     {
       key: "open-new-tab",
       action: handleOpenInNewTab,
-      title: "Open in new tab",
+      title: t("open_in_new_tab"),
       icon: ExternalLink,
     },
     {
       key: "copy-link",
       action: handleCopyText,
-      title: "Copy link",
+      title: t("copy_link"),
       icon: LinkIcon,
     },
   ];
@@ -64,7 +68,7 @@ export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props
                     : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
                 }`}
               >
-                {view.label}
+                {t(view.i18n_label)}
               </span>
             ) : (
               <Link
@@ -79,7 +83,7 @@ export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props
                       : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
                   }`}
                 >
-                  {view.label}
+                  {t(view.i18n_label)}
                 </span>
               </Link>
             )}
@@ -110,7 +114,7 @@ export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props
             >
               {item.icon && <item.icon className={cn("h-3 w-3", item.iconClassName)} />}
               <div>
-                <h5>{item.title}</h5>
+                <h5>{t(item.title || "")}</h5>
                 {item.description && (
                   <p
                     className={cn("text-custom-text-300 whitespace-pre-line", {
diff --git a/web/core/components/workspace/views/delete-view-modal.tsx b/web/core/components/workspace/views/delete-view-modal.tsx
index 10cc8d2d1..63016d157 100644
--- a/web/core/components/workspace/views/delete-view-modal.tsx
+++ b/web/core/components/workspace/views/delete-view-modal.tsx
@@ -4,11 +4,11 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
+import { GLOBAL_VIEW_DELETED } from "@plane/constants";
 import { IWorkspaceView } from "@plane/types";
 // ui
 import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
-import { GLOBAL_VIEW_DELETED } from "@/constants/event-tracker";
 // hooks
 import { useGlobalView, useEventTracker } from "@/hooks/store";
 
@@ -42,7 +42,7 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
           state: "SUCCESS",
         });
       })
-      .catch(() => {
+      .catch((error: any) => {
         captureEvent(GLOBAL_VIEW_DELETED, {
           view_id: data.id,
           state: "FAILED",
@@ -50,7 +50,7 @@ export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
         setToast({
           type: TOAST_TYPE.ERROR,
           title: "Error!",
-          message: "Something went wrong while deleting the view. Please try again.",
+          message: error?.error ?? "Something went wrong while deleting the view. Please try again.",
         });
       })
       .finally(() => {
diff --git a/web/core/components/workspace/views/form.tsx b/web/core/components/workspace/views/form.tsx
index 6fce455a8..5abe7f2dd 100644
--- a/web/core/components/workspace/views/form.tsx
+++ b/web/core/components/workspace/views/form.tsx
@@ -3,15 +3,16 @@
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
+// constant
+import { EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_PAGE, EViewAccess } from "@plane/constants";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, IWorkspaceView } from "@plane/types";
 // ui
 import { Button, Input, TextArea } from "@plane/ui";
 // components
 import { AppliedFiltersList, DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
-// constants
-import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
-import { EViewAccess } from "@/constants/views";
 // helpers
 import { getComputedDisplayFilters, getComputedDisplayProperties } from "@/helpers/issue.helper";
 // hooks
@@ -30,11 +31,16 @@ const defaultValues: Partial<IWorkspaceView> = {
   description: "",
   access: EViewAccess.PUBLIC,
   display_properties: getComputedDisplayProperties(),
-  display_filters: getComputedDisplayFilters(),
+  display_filters: getComputedDisplayFilters({
+    layout: EIssueLayoutTypes.SPREADSHEET,
+    order_by: "-created_at",
+  }),
 };
 
 export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
   const { handleFormSubmit, handleClose, data, preLoadedData } = props;
+  // i18n
+  const { t } = useTranslation();
   // store hooks
   const { workspaceLabels } = useLabel();
   const {
@@ -107,17 +113,19 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5 p-5">
-        <h3 className="text-xl font-medium text-custom-text-200">{data ? "Update" : "Create"} View</h3>
+        <h3 className="text-xl font-medium text-custom-text-200">
+          {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: "Title is required",
+                required: t("form.title.required"),
                 maxLength: {
                   value: 255,
-                  message: "Title should be less than 255 characters",
+                  message: t("form.title.max_length", { length: 255 }),
                 },
               }}
               render={({ field: { value, onChange, ref } }) => (
@@ -129,7 +137,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                   onChange={onChange}
                   ref={ref}
                   hasError={Boolean(errors.name)}
-                  placeholder="Title"
+                  placeholder={t("common.title")}
                   className="w-full text-base"
                 />
               )}
@@ -145,7 +153,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                   id="description"
                   name="description"
                   value={value}
-                  placeholder="Description"
+                  placeholder={t("common.description")}
                   onChange={onChange}
                   className="w-full text-base resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
@@ -160,7 +168,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
               control={control}
               name="filters"
               render={({ field: { onChange, value: filters } }) => (
-                <FiltersDropdown title="Filters">
+                <FiltersDropdown title={t("common.filters")}>
                   <FilterSelection
                     filters={filters ?? {}}
                     handleFiltersUpdate={(key, value) => {
@@ -180,7 +188,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                         [key]: newValues,
                       });
                     }}
-                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.spreadsheet}
                     labels={workspaceLabels ?? undefined}
                     memberIds={workspaceMemberIds ?? undefined}
                   />
@@ -197,9 +205,9 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                   control={control}
                   name="display_properties"
                   render={({ field: { onChange: onDisplayPropertiesChange, value: displayProperties } }) => (
-                    <FiltersDropdown title="Display">
+                    <FiltersDropdown title={t("common.display")}>
                       <DisplayFiltersSelection
-                        layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                        layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_PAGE.my_issues.spreadsheet}
                         displayFilters={displayFilters ?? {}}
                         handleDisplayFiltersUpdate={(updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
                           onDisplayFiltersChange({
@@ -237,10 +245,16 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
       </div>
       <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-custom-border-200">
         <Button variant="neutral-primary" size="sm" onClick={handleClose}>
-          Cancel
+          {t("common.cancel")}
         </Button>
         <Button variant="primary" size="sm" type="submit" loading={isSubmitting}>
-          {data ? (isSubmitting ? "Updating" : "Update View") : isSubmitting ? "Creating" : "Create View"}
+          {data
+            ? isSubmitting
+              ? t("common.updating")
+              : t("view.update.label")
+            : isSubmitting
+              ? t("common.creating")
+              : t("view.create.label")}
         </Button>
       </div>
     </form>
diff --git a/web/core/components/workspace/views/header.tsx b/web/core/components/workspace/views/header.tsx
index 559bd6578..f449c553b 100644
--- a/web/core/components/workspace/views/header.tsx
+++ b/web/core/components/workspace/views/header.tsx
@@ -3,7 +3,13 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { Plus } from "lucide-react";
-// types
+// plane imports
+import {
+  DEFAULT_GLOBAL_VIEWS_LIST,
+  GLOBAL_VIEW_OPENED,
+  EUserPermissions,
+  EUserPermissionsLevel,
+} from "@plane/constants";
 import { TStaticViewTypes } from "@plane/types";
 // components
 import { Header, EHeaderVariant } from "@plane/ui";
@@ -13,11 +19,8 @@ import {
   WorkspaceViewQuickActions,
 } from "@/components/workspace";
 // constants
-import { GLOBAL_VIEW_OPENED } from "@/constants/event-tracker";
-import { DEFAULT_GLOBAL_VIEWS_LIST } from "@/constants/workspace";
 // store hooks
 import { useEventTracker, useGlobalView, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 const ViewTab = observer((props: { viewId: string }) => {
   const { viewId } = props;
@@ -48,7 +51,7 @@ const ViewTab = observer((props: { viewId: string }) => {
 const DefaultViewTab = (props: {
   tab: {
     key: TStaticViewTypes;
-    label: string;
+    i18n_label: string;
   };
 }) => {
   const { tab } = props;
diff --git a/web/core/components/workspace/views/modal.tsx b/web/core/components/workspace/views/modal.tsx
index 7a4b6cc8f..7ed07d0ec 100644
--- a/web/core/components/workspace/views/modal.tsx
+++ b/web/core/components/workspace/views/modal.tsx
@@ -4,13 +4,13 @@ import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // types
+import { GLOBAL_VIEW_CREATED, GLOBAL_VIEW_UPDATED } from "@plane/constants";
 import { IWorkspaceView } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { WorkspaceViewForm } from "@/components/workspace";
 // constants
-import { GLOBAL_VIEW_CREATED, GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker";
 // store hooks
 import { useEventTracker, useGlobalView } from "@/hooks/store";
 import { useAppRouter } from "@/hooks/use-app-router";
diff --git a/web/core/components/workspace/views/quick-action.tsx b/web/core/components/workspace/views/quick-action.tsx
index 68dff8d34..2251244b4 100644
--- a/web/core/components/workspace/views/quick-action.tsx
+++ b/web/core/components/workspace/views/quick-action.tsx
@@ -5,19 +5,19 @@ import { observer } from "mobx-react";
 import Link from "next/link";
 import { ExternalLink, LinkIcon, Pencil, Trash2, Lock } from "lucide-react";
 // types
+import { EViewAccess, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 import { IWorkspaceView } from "@plane/types";
 // ui
 import { ContextMenu, CustomMenu, TContextMenuItem, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "@/components/workspace";
 // constants
-import { EViewAccess } from "@/constants/views";
 // helpers
 import { cn } from "@/helpers/common.helper";
 import { copyUrlToClipboard } from "@/helpers/string.helper";
 // hooks
 import { useUser, useUserPermissions } from "@/hooks/store";
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 type Props = {
   parentRef: React.RefObject<HTMLElement>;
@@ -35,6 +35,7 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
   // store hooks
   const { data } = useUser();
   const { allowPermissions } = useUserPermissions();
+  const { t } = useTranslation();
   // auth
   const isOwner = view?.owned_by === data?.id;
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
@@ -54,26 +55,26 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
     {
       key: "edit",
       action: () => setUpdateViewModal(true),
-      title: "Edit",
+      title: t("edit"),
       icon: Pencil,
       shouldRender: isOwner,
     },
     {
       key: "open-new-tab",
       action: handleOpenInNewTab,
-      title: "Open in new tab",
+      title: t("open_in_new_tab"),
       icon: ExternalLink,
     },
     {
       key: "copy-link",
       action: handleCopyText,
-      title: "Copy link",
+      title: t("copy_link"),
       icon: LinkIcon,
     },
     {
       key: "delete",
       action: () => setDeleteViewModal(true),
-      title: "Delete",
+      title: t("delete"),
       icon: Trash2,
       shouldRender: isOwner || isAdmin,
     },
@@ -114,43 +115,7 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
 
       <ContextMenu parentRef={parentRef} items={MENU_ITEMS} />
 
-      <CustomMenu customButton={customButton} placement="bottom-end" menuItemsClassName="z-20" closeOnSelect>
-        {MENU_ITEMS.map((item) => {
-          if (item.shouldRender === false) return null;
-          return (
-            <CustomMenu.MenuItem
-              key={item.key}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                item.action();
-              }}
-              className={cn(
-                "flex items-center gap-2",
-                {
-                  "text-custom-text-400": 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("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
-                    })}
-                  >
-                    {item.description}
-                  </p>
-                )}
-              </div>
-            </CustomMenu.MenuItem>
-          );
-        })}
-      </CustomMenu>
+      {customButton}
     </>
   );
 });
diff --git a/web/core/constants/analytics.ts b/web/core/constants/analytics.ts
deleted file mode 100644
index 58abd208c..000000000
--- a/web/core/constants/analytics.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-// types
-import { TXAxisValues, TYAxisValues } from "@plane/types";
-
-export const ANALYTICS_TABS = [
-  { key: "scope_and_demand", title: "Scope and Demand" },
-  { key: "custom", title: "Custom Analytics" },
-];
-
-export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] = [
-  {
-    value: "state_id",
-    label: "State name",
-  },
-  {
-    value: "state__group",
-    label: "State group",
-  },
-  {
-    value: "priority",
-    label: "Priority",
-  },
-  {
-    value: "labels__id",
-    label: "Label",
-  },
-  {
-    value: "assignees__id",
-    label: "Assignee",
-  },
-  {
-    value: "estimate_point__value",
-    label: "Estimate point",
-  },
-  {
-    value: "issue_cycle__cycle_id",
-    label: "Cycle",
-  },
-  {
-    value: "issue_module__module_id",
-    label: "Module",
-  },
-  {
-    value: "completed_at",
-    label: "Completed date",
-  },
-  {
-    value: "target_date",
-    label: "Due date",
-  },
-  {
-    value: "start_date",
-    label: "Start date",
-  },
-  {
-    value: "created_at",
-    label: "Created date",
-  },
-];
-
-export const ANALYTICS_Y_AXIS_VALUES: { value: TYAxisValues; label: string }[] = [
-  {
-    value: "issue_count",
-    label: "Issue Count",
-  },
-  {
-    value: "estimate",
-    label: "Estimate",
-  },
-];
-
-export const DATE_KEYS = ["completed_at", "target_date", "start_date", "created_at"];
diff --git a/web/core/constants/archives.ts b/web/core/constants/archives.ts
deleted file mode 100644
index 13bc131c5..000000000
--- a/web/core/constants/archives.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-// types
-import { IProject } from "@plane/types";
-// icons
-import { ContrastIcon, DiceIcon, LayersIcon } from "@plane/ui";
-
-export const ARCHIVES_TAB_LIST: {
-  key: string;
-  label: string;
-  shouldRender: (projectDetails: IProject) => boolean;
-}[] = [
-  {
-    key: "issues",
-    label: "Issues",
-    shouldRender: () => true,
-  },
-  {
-    key: "cycles",
-    label: "Cycles",
-    shouldRender: (projectDetails) => projectDetails.cycle_view,
-  },
-  {
-    key: "modules",
-    label: "Modules",
-    shouldRender: (projectDetails) => projectDetails.module_view,
-  },
-];
-
-export const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
-  [key: string]: {
-    label: string;
-    href: string;
-    icon: React.FC<React.SVGAttributes<SVGElement> & { className?: string }>;
-  };
-} = {
-  issues: {
-    label: "Issues",
-    href: "/issues",
-    icon: LayersIcon,
-  },
-  cycles: {
-    label: "Cycles",
-    href: "/cycles",
-    icon: ContrastIcon,
-  },
-  modules: {
-    label: "Modules",
-    href: "/modules",
-    icon: DiceIcon,
-  },
-};
diff --git a/web/core/constants/common.ts b/web/core/constants/common.ts
deleted file mode 100644
index 99dce1b21..000000000
--- a/web/core/constants/common.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export const MAX_STATIC_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-
-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";
-
-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",
-  },
-];
diff --git a/web/core/constants/cycle.ts b/web/core/constants/cycle.ts
deleted file mode 100644
index 6f69e8f50..000000000
--- a/web/core/constants/cycle.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import {
-  GanttChartSquare,
-  LayoutGrid,
-  List,
-  AlertOctagon,
-  BarChart4,
-  CircleDashed,
-  Folder,
-  Microscope,
-  Search,
-} from "lucide-react";
-
-// types
-import { TCycleLayoutOptions, TCycleTabOptions } from "@plane/types";
-
-export const CYCLE_TABS_LIST: {
-  key: TCycleTabOptions;
-  name: string;
-}[] = [
-  {
-    key: "active",
-    name: "Active",
-  },
-  {
-    key: "all",
-    name: "All",
-  },
-];
-
-export const CYCLE_VIEW_LAYOUTS: {
-  key: TCycleLayoutOptions;
-  icon: any;
-  title: string;
-}[] = [
-  {
-    key: "list",
-    icon: List,
-    title: "List layout",
-  },
-  {
-    key: "board",
-    icon: LayoutGrid,
-    title: "Gallery layout",
-  },
-  {
-    key: "gantt",
-    icon: GanttChartSquare,
-    title: "Timeline layout",
-  },
-];
-
-export const CYCLE_STATUS: {
-  label: string;
-  value: "current" | "upcoming" | "completed" | "draft";
-  title: string;
-  color: string;
-  textColor: string;
-  bgColor: string;
-}[] = [
-  {
-    label: "day left",
-    value: "current",
-    title: "In progress",
-    color: "#F59E0B",
-    textColor: "text-amber-500",
-    bgColor: "bg-amber-50",
-  },
-  {
-    label: "Yet to start",
-    value: "upcoming",
-    title: "Yet to start",
-    color: "#3F76FF",
-    textColor: "text-blue-500",
-    bgColor: "bg-indigo-50",
-  },
-  {
-    label: "Completed",
-    value: "completed",
-    title: "Completed",
-    color: "#16A34A",
-    textColor: "text-green-600",
-    bgColor: "bg-green-50",
-  },
-  {
-    label: "Draft",
-    value: "draft",
-    title: "Draft",
-    color: "#525252",
-    textColor: "text-custom-text-300",
-    bgColor: "bg-custom-background-90",
-  },
-];
-
-export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [
-  {
-    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: Folder,
-  },
-  {
-    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,
-  },
-  {
-    title: "Compare burndowns.",
-    description: "Monitor how each of your teams are performing with a peek into each cycle’s burndown report.",
-    icon: BarChart4,
-  },
-  {
-    title: "Quickly see make-or-break issues. ",
-    description:
-      "Preview high-priority issues for each cycle against due dates. See all of them per cycle in one click.",
-    icon: AlertOctagon,
-  },
-  {
-    title: "Zoom into cycles that need attention. ",
-    description: "Investigate the state of any cycle that doesn’t conform to expectations in one click.",
-    icon: Search,
-  },
-  {
-    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,
-  },
-];
diff --git a/web/core/constants/dashboard.ts b/web/core/constants/dashboard.ts
deleted file mode 100644
index 8d9848a48..000000000
--- a/web/core/constants/dashboard.ts
+++ /dev/null
@@ -1,297 +0,0 @@
-"use client";
-
-import { linearGradientDef } from "@nivo/core";
-// icons
-import { BarChart2, Briefcase, Layers } from "lucide-react";
-// types
-import { TIssuesListTypes, TStateGroups } from "@plane/types";
-// ui
-import { ContrastIcon } from "@plane/ui";
-import { Props } from "@/components/icons/types";
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
-// assets
-import CompletedIssuesDark from "@/public/empty-state/dashboard/dark/completed-issues.svg";
-import OverdueIssuesDark from "@/public/empty-state/dashboard/dark/overdue-issues.svg";
-import UpcomingIssuesDark from "@/public/empty-state/dashboard/dark/upcoming-issues.svg";
-import CompletedIssuesLight from "@/public/empty-state/dashboard/light/completed-issues.svg";
-import OverdueIssuesLight from "@/public/empty-state/dashboard/light/overdue-issues.svg";
-import UpcomingIssuesLight from "@/public/empty-state/dashboard/light/upcoming-issues.svg";
-
-// gradients for issues by priority widget graph bars
-export const PRIORITY_GRAPH_GRADIENTS = [
-  linearGradientDef(
-    "gradientUrgent",
-    [
-      { offset: 0, color: "#A90408" },
-      { offset: 100, color: "#DF4D51" },
-    ],
-    {
-      x1: 1,
-      y1: 0,
-      x2: 0,
-      y2: 0,
-    }
-  ),
-  linearGradientDef(
-    "gradientHigh",
-    [
-      { offset: 0, color: "#FE6B00" },
-      { offset: 100, color: "#FFAC88" },
-    ],
-    {
-      x1: 1,
-      y1: 0,
-      x2: 0,
-      y2: 0,
-    }
-  ),
-  linearGradientDef(
-    "gradientMedium",
-    [
-      { offset: 0, color: "#F5AC00" },
-      { offset: 100, color: "#FFD675" },
-    ],
-    {
-      x1: 1,
-      y1: 0,
-      x2: 0,
-      y2: 0,
-    }
-  ),
-  linearGradientDef(
-    "gradientLow",
-    [
-      { offset: 0, color: "#1B46DE" },
-      { offset: 100, color: "#4F9BF4" },
-    ],
-    {
-      x1: 1,
-      y1: 0,
-      x2: 0,
-      y2: 0,
-    }
-  ),
-  linearGradientDef(
-    "gradientNone",
-    [
-      { offset: 0, color: "#A0A1A9" },
-      { offset: 100, color: "#B9BBC6" },
-    ],
-    {
-      x1: 1,
-      y1: 0,
-      x2: 0,
-      y2: 0,
-    }
-  ),
-];
-
-// colors for issues by state group widget graph arcs
-export const STATE_GROUP_GRAPH_GRADIENTS = [
-  linearGradientDef("gradientBacklog", [
-    { offset: 0, color: "#DEDEDE" },
-    { offset: 100, color: "#BABABE" },
-  ]),
-  linearGradientDef("gradientUnstarted", [
-    { offset: 0, color: "#D4D4D4" },
-    { offset: 100, color: "#878796" },
-  ]),
-  linearGradientDef("gradientStarted", [
-    { offset: 0, color: "#FFD300" },
-    { offset: 100, color: "#FAE270" },
-  ]),
-  linearGradientDef("gradientCompleted", [
-    { offset: 0, color: "#0E8B1B" },
-    { offset: 100, color: "#37CB46" },
-  ]),
-  linearGradientDef("gradientCanceled", [
-    { offset: 0, color: "#C90004" },
-    { offset: 100, color: "#FF7679" },
-  ]),
-];
-
-export const STATE_GROUP_GRAPH_COLORS: Record<TStateGroups, string> = {
-  backlog: "#CDCED6",
-  unstarted: "#80838D",
-  started: "#FFC53D",
-  completed: "#3E9B4F",
-  cancelled: "#E5484D",
-};
-
-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-green-500/20",
-  "bg-red-500/20",
-  "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 const ASSIGNED_ISSUES_EMPTY_STATES = {
-  pending: {
-    title: "Issues assigned to you that are pending\nwill show up here.",
-    darkImage: UpcomingIssuesDark,
-    lightImage: UpcomingIssuesLight,
-  },
-  upcoming: {
-    title: "Upcoming issues assigned to\nyou will show up here.",
-    darkImage: UpcomingIssuesDark,
-    lightImage: UpcomingIssuesLight,
-  },
-  overdue: {
-    title: "Issues assigned to you that are past\ntheir due date will show up here.",
-    darkImage: OverdueIssuesDark,
-    lightImage: OverdueIssuesLight,
-  },
-  completed: {
-    title: "Issues assigned to you that you have\nmarked Completed will show up here.",
-    darkImage: CompletedIssuesDark,
-    lightImage: CompletedIssuesLight,
-  },
-};
-
-export const CREATED_ISSUES_EMPTY_STATES = {
-  pending: {
-    title: "Issues created by you that are pending\nwill show up here.",
-    darkImage: UpcomingIssuesDark,
-    lightImage: UpcomingIssuesLight,
-  },
-  upcoming: {
-    title: "Upcoming issues you created\nwill show up here.",
-    darkImage: UpcomingIssuesDark,
-    lightImage: UpcomingIssuesLight,
-  },
-  overdue: {
-    title: "Issues created by you that are past their\ndue date will show up here.",
-    darkImage: OverdueIssuesDark,
-    lightImage: OverdueIssuesLight,
-  },
-  completed: {
-    title: "Issues created by you that you have\nmarked completed will show up here.",
-    darkImage: CompletedIssuesDark,
-    lightImage: CompletedIssuesLight,
-  },
-};
-
-export const SIDEBAR_WORKSPACE_MENU_ITEMS: {
-  key: string;
-  label: string;
-  href: string;
-  access: EUserPermissions[];
-  highlight: (pathname: string, baseUrl: string) => boolean;
-  Icon: React.FC<Props>;
-}[] = [
-  {
-    key: "projects",
-    label: "Projects",
-    href: `/projects`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/projects/`,
-    Icon: Briefcase,
-  },
-  {
-    key: "all-issues",
-    label: "Views",
-    href: `/workspace-views/all-issues`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/workspace-views/`),
-    Icon: Layers,
-  },
-  {
-    key: "active-cycles",
-    label: "Cycles",
-    href: `/active-cycles`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    highlight: (pathname: string, baseUrl: string) => pathname === `${baseUrl}/active-cycles/`,
-    Icon: ContrastIcon,
-  },
-  {
-    key: "analytics",
-    label: "Analytics",
-    href: `/analytics`,
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    highlight: (pathname: string, baseUrl: string) => pathname.includes(`${baseUrl}/analytics/`),
-    Icon: BarChart2,
-  },
-];
-
-export type TLinkOptions = {
-  userId: string | undefined;
-};
diff --git a/web/core/constants/editor.ts b/web/core/constants/editor.ts
index a1b389fd0..e3cb487b6 100644
--- a/web/core/constants/editor.ts
+++ b/web/core/constants/editor.ts
@@ -30,7 +30,7 @@ import { MonospaceIcon, SansSerifIcon, SerifIcon } from "@plane/ui";
 // helpers
 import { convertRemToPixel } from "@/helpers/common.helper";
 
-type TEditorTypes = "lite" | "document";
+type TEditorTypes = "lite" | "document" | "sticky";
 
 // Utility type to enforce the necessary extra props or make extraProps optional
 type ExtraPropsForCommand<T extends TEditorCommands> = T extends keyof TCommandExtraProps
@@ -93,7 +93,7 @@ export const TEXT_ALIGNMENT_ITEMS: ToolbarMenuItem<"text-align">[] = [
   },
 ];
 
-const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strikethrough">[] = [
+const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strike">[] = [
   {
     itemKey: "bold",
     renderKey: "bold",
@@ -119,7 +119,7 @@ const BASIC_MARK_ITEMS: ToolbarMenuItem<"bold" | "italic" | "underline" | "strik
     editors: ["lite", "document"],
   },
   {
-    itemKey: "strikethrough",
+    itemKey: "strike",
     renderKey: "strikethrough",
     name: "Strikethrough",
     icon: Strikethrough,
@@ -184,6 +184,10 @@ export const TOOLBAR_ITEMS: {
     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.name)),
+    list: LIST_ITEMS.filter((item) => ["To-do list"].includes(item.name)),
+  },
 };
 
 export const EDITOR_FONT_STYLES: {
diff --git a/web/core/constants/empty-state.ts b/web/core/constants/empty-state.ts
deleted file mode 100644
index b2477eead..000000000
--- a/web/core/constants/empty-state.ts
+++ /dev/null
@@ -1,792 +0,0 @@
-import { EUserPermissions } from "ee/constants/user-permissions";
-
-export interface EmptyStateDetails {
-  key: EmptyStateType;
-  title?: string;
-  description?: string;
-  path?: string;
-  primaryButton?: {
-    icon?: React.ReactNode;
-    text: string;
-    comicBox?: {
-      title?: string;
-      description?: string;
-    };
-  };
-  secondaryButton?: {
-    icon?: React.ReactNode;
-    text: string;
-    comicBox?: {
-      title?: string;
-      description?: string;
-    };
-  };
-  accessType?: "workspace" | "project";
-  access?: any;
-}
-
-export enum EmptyStateType {
-  WORKSPACE_DASHBOARD = "workspace-dashboard",
-  WORKSPACE_ANALYTICS = "workspace-analytics",
-  WORKSPACE_PROJECTS = "workspace-projects",
-  WORKSPACE_ALL_ISSUES = "workspace-all-issues",
-  WORKSPACE_ASSIGNED = "workspace-assigned",
-  WORKSPACE_CREATED = "workspace-created",
-  WORKSPACE_SUBSCRIBED = "workspace-subscribed",
-  WORKSPACE_CUSTOM_VIEW = "workspace-custom-view",
-  WORKSPACE_NO_PROJECTS = "workspace-no-projects",
-  WORKSPACE_PROJECT_NOT_FOUND = "workspace-project-not-found",
-  WORKSPACE_SETTINGS_API_TOKENS = "workspace-settings-api-tokens",
-  WORKSPACE_SETTINGS_WEBHOOKS = "workspace-settings-webhooks",
-  WORKSPACE_SETTINGS_EXPORT = "workspace-settings-export",
-  WORKSPACE_SETTINGS_IMPORT = "workspace-settings-import",
-  PROFILE_ACTIVITY = "profile-activity",
-  PROFILE_ASSIGNED = "profile-assigned",
-  PROFILE_CREATED = "profile-created",
-  PROFILE_SUBSCRIBED = "profile-subscribed",
-  PROJECT_SETTINGS_LABELS = "project-settings-labels",
-  PROJECT_SETTINGS_INTEGRATIONS = "project-settings-integrations",
-  PROJECT_SETTINGS_ESTIMATE = "project-settings-estimate",
-  PROJECT_CYCLES = "project-cycles",
-  PROJECT_CYCLE_NO_ISSUES = "project-cycle-no-issues",
-  PROJECT_CYCLE_ACTIVE = "project-cycle-active",
-  PROJECT_CYCLE_ALL = "project-cycle-all",
-  PROJECT_CYCLE_COMPLETED_NO_ISSUES = "project-cycle-completed-no-issues",
-  PROJECT_ARCHIVED_NO_CYCLES = "project-archived-no-cycles",
-  PROJECT_EMPTY_FILTER = "project-empty-filter",
-  PROJECT_ARCHIVED_EMPTY_FILTER = "project-archived-empty-filter",
-  PROJECT_DRAFT_EMPTY_FILTER = "project-draft-empty-filter",
-  PROJECT_NO_ISSUES = "project-no-issues",
-  PROJECT_ARCHIVED_NO_ISSUES = "project-archived-no-issues",
-  PROJECT_DRAFT_NO_ISSUES = "project-draft-no-issues",
-  VIEWS_EMPTY_SEARCH = "views-empty-search",
-  PROJECTS_EMPTY_SEARCH = "projects-empty-search",
-  MEMBERS_EMPTY_SEARCH = "members-empty-search",
-  PROJECT_MODULE_ISSUES = "project-module-issues",
-  PROJECT_MODULE = "project-module",
-  PROJECT_ARCHIVED_NO_MODULES = "project-archived-no-modules",
-  PROJECT_VIEW = "project-view",
-  PROJECT_PAGE = "project-page",
-  PROJECT_PAGE_PRIVATE = "project-page-private",
-  PROJECT_PAGE_PUBLIC = "project-page-public",
-  PROJECT_PAGE_ARCHIVED = "project-page-archived",
-  WORKSPACE_PAGE = "workspace-page",
-  WORKSPACE_PAGE_PRIVATE = "workspace-page-private",
-  WORKSPACE_PAGE_PUBLIC = "workspace-page-public",
-  WORKSPACE_PAGE_ARCHIVED = "workspace-page-archived",
-
-  COMMAND_K_SEARCH_EMPTY_STATE = "command-k-search-empty-state",
-  ISSUE_RELATION_SEARCH_EMPTY_STATE = "issue-relation-search-empty-state",
-  ISSUE_RELATION_EMPTY_STATE = "issue-relation-empty-state",
-  ISSUE_COMMENT_EMPTY_STATE = "issue-comment-empty-state",
-
-  NOTIFICATION_DETAIL_EMPTY_STATE = "notification-detail-empty-state",
-  NOTIFICATION_ALL_EMPTY_STATE = "notification-all-empty-state",
-  NOTIFICATION_MENTIONS_EMPTY_STATE = "notification-mentions-empty-state",
-  NOTIFICATION_MY_ISSUE_EMPTY_STATE = "notification-my-issues-empty-state",
-  NOTIFICATION_CREATED_EMPTY_STATE = "notification-created-empty-state",
-  NOTIFICATION_SUBSCRIBED_EMPTY_STATE = "notification-subscribed-empty-state",
-  NOTIFICATION_ARCHIVED_EMPTY_STATE = "notification-archived-empty-state",
-  NOTIFICATION_SNOOZED_EMPTY_STATE = "notification-snoozed-empty-state",
-  NOTIFICATION_UNREAD_EMPTY_STATE = "notification-unread-empty-state",
-
-  ACTIVE_CYCLE_PROGRESS_EMPTY_STATE = "active-cycle-progress-empty-state",
-  ACTIVE_CYCLE_CHART_EMPTY_STATE = "active-cycle-chart-empty-state",
-  ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE = "active-cycle-priority-issue-empty-state",
-  ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE = "active-cycle-assignee-empty-state",
-  ACTIVE_CYCLE_LABEL_EMPTY_STATE = "active-cycle-label-empty-state",
-
-  DISABLED_PROJECT_INBOX = "disabled-project-inbox",
-  DISABLED_PROJECT_CYCLE = "disabled-project-cycle",
-  DISABLED_PROJECT_MODULE = "disabled-project-module",
-  DISABLED_PROJECT_VIEW = "disabled-project-view",
-  DISABLED_PROJECT_PAGE = "disabled-project-page",
-
-  INBOX_SIDEBAR_OPEN_TAB = "inbox-sidebar-open-tab",
-  INBOX_SIDEBAR_CLOSED_TAB = "inbox-sidebar-closed-tab",
-  INBOX_SIDEBAR_FILTER_EMPTY_STATE = "inbox-sidebar-filter-empty-state",
-  INBOX_DETAIL_EMPTY_STATE = "inbox-detail-empty-state",
-
-  WORKSPACE_DRAFT_ISSUES = "workspace-draft-issues",
-}
-
-const emptyStateDetails = {
-  // workspace
-  [EmptyStateType.WORKSPACE_DASHBOARD]: {
-    key: EmptyStateType.WORKSPACE_DASHBOARD,
-    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 issues, and this page will transform into a space that helps you progress. Admins will also see items which help their team progress.",
-    path: "/empty-state/onboarding/dashboard",
-    // path: "/empty-state/onboarding/",
-    primaryButton: {
-      text: "Build your first project",
-      comicBox: {
-        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.",
-      },
-    },
-
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_ANALYTICS]: {
-    key: EmptyStateType.WORKSPACE_ANALYTICS,
-    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.",
-    path: "/empty-state/onboarding/analytics",
-    primaryButton: {
-      text: "Start your first project",
-      comicBox: {
-        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.",
-      },
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_PROJECTS]: {
-    key: EmptyStateType.WORKSPACE_PROJECTS,
-    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.",
-    path: "/empty-state/onboarding/projects",
-    primaryButton: {
-      text: "Start your first project",
-      comicBox: {
-        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.",
-      },
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  // all-issues
-  [EmptyStateType.WORKSPACE_ALL_ISSUES]: {
-    key: EmptyStateType.WORKSPACE_ALL_ISSUES,
-    title: "No issues in the project",
-    description: "First project done! Now, slice your work into trackable pieces with issues. Let's go!",
-    path: "/empty-state/all-issues/all-issues",
-    primaryButton: {
-      text: "Create new issue",
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_ASSIGNED]: {
-    key: EmptyStateType.WORKSPACE_ASSIGNED,
-    title: "No issues yet",
-    description: "Issues assigned to you can be tracked from here.",
-    path: "/empty-state/all-issues/assigned",
-    primaryButton: {
-      text: "Create new issue",
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_CREATED]: {
-    key: EmptyStateType.WORKSPACE_CREATED,
-    title: "No issues yet",
-    description: "All issues created by you come here, track them here directly.",
-    path: "/empty-state/all-issues/created",
-    primaryButton: {
-      text: "Create new issue",
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_SUBSCRIBED]: {
-    key: EmptyStateType.WORKSPACE_SUBSCRIBED,
-    title: "No issues yet",
-    description: "Subscribe to issues you are interested in, track all of them here.",
-    path: "/empty-state/all-issues/subscribed",
-  },
-  [EmptyStateType.WORKSPACE_CUSTOM_VIEW]: {
-    key: EmptyStateType.WORKSPACE_CUSTOM_VIEW,
-    title: "No issues yet",
-    description: "Issues that applies to the filters, track all of them here.",
-    path: "/empty-state/all-issues/custom-view",
-  },
-  [EmptyStateType.WORKSPACE_PROJECT_NOT_FOUND]: {
-    key: EmptyStateType.WORKSPACE_PROJECT_NOT_FOUND,
-    title: "No such project exists",
-    description: "To create issues or manage your work, you need to create a project or be a part of one.",
-    path: "/empty-state/onboarding/projects",
-    primaryButton: {
-      text: "Create Project",
-      comicBox: {
-        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.",
-      },
-    },
-
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_NO_PROJECTS]: {
-    key: EmptyStateType.WORKSPACE_NO_PROJECTS,
-    title: "No project",
-    description: "To create issues or manage your work, you need to create a project or be a part of one.",
-    path: "/empty-state/onboarding/projects",
-    primaryButton: {
-      text: "Start your first project",
-      comicBox: {
-        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.",
-      },
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  // workspace settings
-  [EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS]: {
-    key: EmptyStateType.WORKSPACE_SETTINGS_API_TOKENS,
-    title: "No API tokens created",
-    description:
-      "Plane APIs can be used to integrate your data in Plane with any external system. Create a token to get started.",
-    path: "/empty-state/workspace-settings/api-tokens",
-  },
-  [EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS]: {
-    key: EmptyStateType.WORKSPACE_SETTINGS_WEBHOOKS,
-    title: "No webhooks added",
-    description: "Create webhooks to receive real-time updates and automate actions.",
-    path: "/empty-state/workspace-settings/webhooks",
-  },
-  [EmptyStateType.WORKSPACE_SETTINGS_EXPORT]: {
-    key: EmptyStateType.WORKSPACE_SETTINGS_EXPORT,
-    title: "No previous exports yet",
-    description: "Anytime you export, you will also have a copy here for reference.",
-    path: "/empty-state/workspace-settings/exports",
-  },
-  [EmptyStateType.WORKSPACE_SETTINGS_IMPORT]: {
-    key: EmptyStateType.WORKSPACE_SETTINGS_IMPORT,
-    title: "No previous imports yet",
-    description: "Find all your previous imports here and download them.",
-    path: "/empty-state/workspace-settings/imports",
-  },
-  // profile
-  [EmptyStateType.PROFILE_ACTIVITY]: {
-    key: EmptyStateType.PROFILE_ASSIGNED,
-    title: "No activities yet",
-    description:
-      "Get started by creating a new issue! Add details and properties to it. Explore more in Plane to see your activity.",
-    path: "/empty-state/profile/activity",
-  },
-  [EmptyStateType.PROFILE_ASSIGNED]: {
-    key: EmptyStateType.PROFILE_ASSIGNED,
-    title: "No issues are assigned to you",
-    description: "Issues assigned to you can be tracked from here.",
-    path: "/empty-state/profile/assigned",
-  },
-  [EmptyStateType.PROFILE_CREATED]: {
-    key: EmptyStateType.PROFILE_CREATED,
-    title: "No issues yet",
-    description: "All issues created by you come here, track them here directly.",
-    path: "/empty-state/profile/created",
-  },
-  [EmptyStateType.PROFILE_SUBSCRIBED]: {
-    key: EmptyStateType.PROFILE_SUBSCRIBED,
-    title: "No issues yet",
-    description: "Subscribe to issues you are interested in, track all of them here.",
-    path: "/empty-state/profile/subscribed",
-  },
-  // project settings
-  [EmptyStateType.PROJECT_SETTINGS_LABELS]: {
-    key: EmptyStateType.PROJECT_SETTINGS_LABELS,
-    title: "No labels yet",
-    description: "Create labels to help organize and filter issues in you project.",
-    path: "/empty-state/project-settings/labels",
-  },
-  [EmptyStateType.PROJECT_SETTINGS_INTEGRATIONS]: {
-    key: EmptyStateType.PROJECT_SETTINGS_INTEGRATIONS,
-    title: "No integrations configured",
-    description: "Configure GitHub and other integrations to sync your project issues.",
-    path: "/empty-state/project-settings/integrations",
-  },
-  [EmptyStateType.PROJECT_SETTINGS_ESTIMATE]: {
-    key: EmptyStateType.PROJECT_SETTINGS_ESTIMATE,
-    title: "No estimates added",
-    description: "Create a set of estimates to communicate the amount of work per issue.",
-    path: "/empty-state/project-settings/estimates",
-  },
-  // project cycles
-  [EmptyStateType.PROJECT_CYCLES]: {
-    key: EmptyStateType.PROJECT_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.",
-    path: "/empty-state/onboarding/cycles",
-    primaryButton: {
-      text: "Set your first cycle",
-      comicBox: {
-        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.",
-      },
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_CYCLE_NO_ISSUES]: {
-    key: EmptyStateType.PROJECT_CYCLE_NO_ISSUES,
-    title: "No issues added to the cycle",
-    description: "Add or create issues you wish to timebox and deliver within this cycle",
-    path: "/empty-state/cycle-issues/",
-    primaryButton: {
-      text: "Create new issue ",
-    },
-    secondaryButton: {
-      text: "Add an existing issue",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_CYCLE_ACTIVE]: {
-    key: EmptyStateType.PROJECT_CYCLE_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.",
-    path: "/empty-state/cycle/active",
-  },
-  [EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES]: {
-    key: EmptyStateType.PROJECT_CYCLE_COMPLETED_NO_ISSUES,
-    title: "No issues in the cycle",
-    description:
-      "No issues in the cycle. Issues are either transferred or hidden. To see hidden issues if any, update your display properties accordingly.",
-    path: "/empty-state/cycle/completed-no-issues",
-  },
-  [EmptyStateType.PROJECT_ARCHIVED_NO_CYCLES]: {
-    key: EmptyStateType.PROJECT_ARCHIVED_NO_CYCLES,
-    title: "No archived cycles yet",
-    description: "To tidy up your project, archive completed cycles. Find them here once archived.",
-    path: "/empty-state/archived/empty-cycles",
-  },
-  [EmptyStateType.PROJECT_CYCLE_ALL]: {
-    key: EmptyStateType.PROJECT_CYCLE_ALL,
-    title: "No cycles",
-    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.",
-    path: "/empty-state/cycle/active",
-  },
-  // empty filters
-  [EmptyStateType.PROJECT_EMPTY_FILTER]: {
-    key: EmptyStateType.PROJECT_EMPTY_FILTER,
-    title: "No issues found matching the filters applied",
-    path: "/empty-state/empty-filters/",
-    secondaryButton: {
-      text: "Clear all filters",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER]: {
-    key: EmptyStateType.PROJECT_ARCHIVED_EMPTY_FILTER,
-    title: "No issues found matching the filters applied",
-    path: "/empty-state/empty-filters/",
-    secondaryButton: {
-      text: "Clear all filters",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER]: {
-    key: EmptyStateType.PROJECT_DRAFT_EMPTY_FILTER,
-    title: "No issues found matching the filters applied",
-    path: "/empty-state/empty-filters/",
-    secondaryButton: {
-      text: "Clear all filters",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  //  project issues
-  [EmptyStateType.PROJECT_NO_ISSUES]: {
-    key: EmptyStateType.PROJECT_NO_ISSUES,
-    title: "Create an issue and assign it to someone, even yourself",
-    description:
-      "Think of issues as jobs, tasks, work, or JTBD. Which we like. An issue and its sub-issues are usually time-based actionables assigned to members of your team. Your team creates, assigns, and completes issues to move your project towards its goal.",
-    path: "/empty-state/onboarding/issues",
-    primaryButton: {
-      text: "Create your first issue",
-      comicBox: {
-        title: "Issues are building blocks in Plane.",
-        description:
-          "Redesign the Plane UI, Rebrand the company, or Launch the new fuel injection system are examples of issues that likely have sub-issues.",
-      },
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES]: {
-    key: EmptyStateType.PROJECT_ARCHIVED_NO_ISSUES,
-    title: "No archived issues yet",
-    description:
-      "Manually or through automation, you can archive issues that are completed or cancelled. Find them here once archived.",
-    path: "/empty-state/archived/empty-issues",
-    primaryButton: {
-      text: "Set automation",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_DRAFT_NO_ISSUES]: {
-    key: EmptyStateType.PROJECT_DRAFT_NO_ISSUES,
-    title: "No draft issues yet",
-    description:
-      "Quickly stepping away but want to keep your place? No worries – save a draft now. Your issues will be right here waiting for you.",
-    path: "/empty-state/draft/draft-issues-empty",
-  },
-  [EmptyStateType.VIEWS_EMPTY_SEARCH]: {
-    key: EmptyStateType.VIEWS_EMPTY_SEARCH,
-    title: "No matching views",
-    description: "No views match the search criteria. \n Create a new view instead.",
-    path: "/empty-state/search/views",
-  },
-  [EmptyStateType.PROJECTS_EMPTY_SEARCH]: {
-    key: EmptyStateType.PROJECTS_EMPTY_SEARCH,
-    title: "No matching projects",
-    description: "No projects detected with the matching criteria. Create a new project instead.",
-    path: "/empty-state/search/project",
-  },
-  [EmptyStateType.MEMBERS_EMPTY_SEARCH]: {
-    key: EmptyStateType.MEMBERS_EMPTY_SEARCH,
-    title: "No matching members",
-    description: "Add them to the project if they are already a part of the workspace",
-    path: "/empty-state/search/member",
-  },
-  // project module
-  [EmptyStateType.PROJECT_MODULE_ISSUES]: {
-    key: EmptyStateType.PROJECT_MODULE_ISSUES,
-    title: "No issues in the module",
-    description: "Create or add issues which you want to accomplish as part of this module",
-    path: "/empty-state/module-issues/",
-    primaryButton: {
-      text: "Create new issue ",
-    },
-    secondaryButton: {
-      text: "Add an existing issue",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_MODULE]: {
-    key: EmptyStateType.PROJECT_MODULE,
-    title: "Map your project milestones to Modules and track aggregated work easily.",
-    description:
-      "A group of issues 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.",
-    path: "/empty-state/onboarding/modules",
-    primaryButton: {
-      text: "Build your first module",
-      comicBox: {
-        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.",
-      },
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_ARCHIVED_NO_MODULES]: {
-    key: EmptyStateType.PROJECT_ARCHIVED_NO_MODULES,
-    title: "No archived Modules yet",
-    description: "To tidy up your project, archive completed or cancelled modules. Find them here once archived.",
-    path: "/empty-state/archived/empty-modules",
-  },
-  // project views
-  [EmptyStateType.PROJECT_VIEW]: {
-    key: EmptyStateType.PROJECT_VIEW,
-    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.",
-    path: "/empty-state/onboarding/views",
-    primaryButton: {
-      text: "Create your first view",
-      comicBox: {
-        title: "Views work atop Issue properties.",
-        description: "You can create a view from here with as many properties as filters as you see fit.",
-      },
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-  },
-  // project pages
-  [EmptyStateType.PROJECT_PAGE]: {
-    key: EmptyStateType.PROJECT_PAGE,
-    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 issues, 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.",
-    path: "/empty-state/onboarding/pages",
-    primaryButton: {
-      text: "Create your first page",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_PAGE_PRIVATE]: {
-    key: EmptyStateType.PROJECT_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.",
-    path: "/empty-state/pages/private",
-    primaryButton: {
-      text: "Create your first page",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_PAGE_PUBLIC]: {
-    key: EmptyStateType.PROJECT_PAGE_PUBLIC,
-    title: "No public pages yet",
-    description: "See pages shared with everyone in your project right here.",
-    path: "/empty-state/pages/public",
-    primaryButton: {
-      text: "Create your first page",
-    },
-    accessType: "project",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.PROJECT_PAGE_ARCHIVED]: {
-    key: EmptyStateType.PROJECT_PAGE_ARCHIVED,
-    title: "No archived pages yet",
-    description: "Archive pages not on your radar. Access them here when needed.",
-    path: "/empty-state/pages/archived",
-  },
-  [EmptyStateType.WORKSPACE_PAGE]: {
-    key: EmptyStateType.WORKSPACE_PAGE,
-    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 issues, 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.",
-    path: "/empty-state/onboarding/pages",
-    primaryButton: {
-      text: "Create your first page",
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_PAGE_PRIVATE]: {
-    key: EmptyStateType.WORKSPACE_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.",
-    path: "/empty-state/pages/private",
-    primaryButton: {
-      text: "Create your first page",
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_PAGE_PUBLIC]: {
-    key: EmptyStateType.WORKSPACE_PAGE_PUBLIC,
-    title: "No public pages yet",
-    description: "See pages shared with everyone in your workspace right here.",
-    path: "/empty-state/pages/public",
-    primaryButton: {
-      text: "Create your first page",
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-  [EmptyStateType.WORKSPACE_PAGE_ARCHIVED]: {
-    key: EmptyStateType.WORKSPACE_PAGE_ARCHIVED,
-    title: "No archived pages yet",
-    description: "Archive pages not on your radar. Access them here when needed.",
-    path: "/empty-state/pages/archived",
-  },
-
-  [EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE]: {
-    key: EmptyStateType.COMMAND_K_SEARCH_EMPTY_STATE,
-    title: "No results found",
-    path: "/empty-state/search/search",
-  },
-  [EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE]: {
-    key: EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE,
-    title: "No maching issues found",
-    path: "/empty-state/search/search",
-  },
-  [EmptyStateType.ISSUE_RELATION_EMPTY_STATE]: {
-    key: EmptyStateType.ISSUE_RELATION_EMPTY_STATE,
-    title: "No issues found",
-    path: "/empty-state/search/issues",
-  },
-  [EmptyStateType.ISSUE_COMMENT_EMPTY_STATE]: {
-    key: EmptyStateType.ISSUE_COMMENT_EMPTY_STATE,
-    title: "No comments yet",
-    description: "Comments can be used as a discussion and \n follow-up space for the issues",
-    path: "/empty-state/search/comments",
-  },
-
-  [EmptyStateType.NOTIFICATION_DETAIL_EMPTY_STATE]: {
-    key: EmptyStateType.INBOX_DETAIL_EMPTY_STATE,
-    title: "Select to view details.",
-    path: "/empty-state/intake/issue-detail",
-  },
-  [EmptyStateType.NOTIFICATION_ALL_EMPTY_STATE]: {
-    key: EmptyStateType.NOTIFICATION_ALL_EMPTY_STATE,
-    title: "No issues assigned",
-    description: "Updates for issues assigned to you can be \n seen here",
-    path: "/empty-state/search/notification",
-  },
-  [EmptyStateType.NOTIFICATION_MENTIONS_EMPTY_STATE]: {
-    key: EmptyStateType.NOTIFICATION_MENTIONS_EMPTY_STATE,
-    title: "No issues assigned",
-    description: "Updates for issues assigned to you can be \n seen here",
-    path: "/empty-state/search/notification",
-  },
-  [EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE]: {
-    key: EmptyStateType.NOTIFICATION_MY_ISSUE_EMPTY_STATE,
-    title: "No issues assigned",
-    description: "Updates for issues assigned to you can be \n seen here",
-    path: "/empty-state/search/notification",
-  },
-  [EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE]: {
-    key: EmptyStateType.NOTIFICATION_CREATED_EMPTY_STATE,
-    title: "No updates to issues",
-    description: "Updates to issues created by you can be \n seen here",
-    path: "/empty-state/search/notification",
-  },
-  [EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE]: {
-    key: EmptyStateType.NOTIFICATION_SUBSCRIBED_EMPTY_STATE,
-    title: "No updates to issues",
-    description: "Updates to any issue you are \n subscribed to can be seen here",
-    path: "/empty-state/search/notification",
-  },
-  [EmptyStateType.NOTIFICATION_UNREAD_EMPTY_STATE]: {
-    key: EmptyStateType.NOTIFICATION_UNREAD_EMPTY_STATE,
-    title: "No unread notifications",
-    description: "Congratulations, you are up-to-date \n with everything happening in the issues \n you care about",
-    path: "/empty-state/search/notification",
-  },
-  [EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE]: {
-    key: EmptyStateType.NOTIFICATION_SNOOZED_EMPTY_STATE,
-    title: "No snoozed notifications yet",
-    description: "Any notification you snooze for later will \n be available here to act upon",
-    path: "/empty-state/search/snooze",
-  },
-  [EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE]: {
-    key: EmptyStateType.NOTIFICATION_ARCHIVED_EMPTY_STATE,
-    title: "No archived notifications yet",
-    description: "Any notification you archive will be \n available here to help you focus",
-    path: "/empty-state/search/archive",
-  },
-
-  [EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_PROGRESS_EMPTY_STATE,
-    title: "Add issues to the cycle to view it's \n progress",
-    path: "/empty-state/active-cycle/progress",
-  },
-  [EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_CHART_EMPTY_STATE,
-    title: "Add issues to the cycle to view the \n burndown chart.",
-    path: "/empty-state/active-cycle/chart",
-  },
-  [EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_PRIORITY_ISSUE_EMPTY_STATE,
-    title: "Observe high priority issues tackled in \n the cycle at a glance.",
-    path: "/empty-state/active-cycle/priority",
-  },
-  [EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_ASSIGNEE_EMPTY_STATE,
-    title: "Add assignees to issues to see a \n breakdown of work by assignees.",
-    path: "/empty-state/active-cycle/assignee",
-  },
-  [EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE]: {
-    key: EmptyStateType.ACTIVE_CYCLE_LABEL_EMPTY_STATE,
-    title: "Add labels to issues to see the \n breakdown of work by labels.",
-    path: "/empty-state/active-cycle/label",
-  },
-  [EmptyStateType.DISABLED_PROJECT_INBOX]: {
-    key: EmptyStateType.DISABLED_PROJECT_INBOX,
-    title: "Intake is not enabled for the project.",
-    description:
-      "Intake helps you manage incoming requests to your project and add them as issues in your workflow. Enable intake \n from project settings to manage requests.",
-    accessType: "project",
-    access: [EUserPermissions.ADMIN],
-    path: "/empty-state/disabled-feature/intake",
-    primaryButton: {
-      text: "Manage features",
-    },
-  },
-  [EmptyStateType.DISABLED_PROJECT_CYCLE]: {
-    key: EmptyStateType.DISABLED_PROJECT_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.",
-    accessType: "project",
-    access: [EUserPermissions.ADMIN],
-    path: "/empty-state/disabled-feature/cycles",
-    primaryButton: {
-      text: "Manage features",
-    },
-  },
-  [EmptyStateType.DISABLED_PROJECT_MODULE]: {
-    key: EmptyStateType.DISABLED_PROJECT_MODULE,
-    title: "Modules are not enabled for the project.",
-    description:
-      "A group of issues that belong to a logical, hierarchical parent form a module. Think of them as a way to track work by project milestones. Enable modules from project settings.",
-    accessType: "project",
-    access: [EUserPermissions.ADMIN],
-    path: "/empty-state/disabled-feature/modules",
-    primaryButton: {
-      text: "Manage features",
-    },
-  },
-  [EmptyStateType.DISABLED_PROJECT_PAGE]: {
-    key: EmptyStateType.DISABLED_PROJECT_PAGE,
-    title: "Pages are not enabled for the project.",
-    description:
-      "Pages are thought spotting space in Plane. Take down meeting notes, format them easily, embed issues, lay them out using a library of components, and keep them all in your project’s context. Enable the pages feature to start creating them in your project.",
-    accessType: "project",
-    access: [EUserPermissions.ADMIN],
-    path: "/empty-state/disabled-feature/pages",
-    primaryButton: {
-      text: "Manage features",
-    },
-  },
-  [EmptyStateType.DISABLED_PROJECT_VIEW]: {
-    key: EmptyStateType.DISABLED_PROJECT_VIEW,
-    title: "Views is not enabled for this project.",
-    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. Enable views in the project settings to start using them.",
-    accessType: "project",
-    access: [EUserPermissions.ADMIN],
-    path: "/empty-state/disabled-feature/views",
-    primaryButton: {
-      text: "Manage features",
-    },
-  },
-  [EmptyStateType.INBOX_SIDEBAR_OPEN_TAB]: {
-    key: EmptyStateType.INBOX_SIDEBAR_OPEN_TAB,
-    title: "No open issues",
-    description: "Find open issues here. Create new issue.",
-    path: "/empty-state/intake/intake-issue",
-  },
-  [EmptyStateType.INBOX_SIDEBAR_CLOSED_TAB]: {
-    key: EmptyStateType.INBOX_SIDEBAR_CLOSED_TAB,
-    title: "No closed issues",
-    description: "All the issues whether accepted or \n declined can be found here.",
-    path: "/empty-state/intake/intake-issue",
-  },
-  [EmptyStateType.INBOX_SIDEBAR_FILTER_EMPTY_STATE]: {
-    key: EmptyStateType.INBOX_SIDEBAR_FILTER_EMPTY_STATE,
-    title: "No  matching issues",
-    description: "No issue matches filter applied in intake. \n Create a new issue.",
-    path: "/empty-state/intake/filter-issue",
-  },
-  [EmptyStateType.INBOX_DETAIL_EMPTY_STATE]: {
-    key: EmptyStateType.INBOX_DETAIL_EMPTY_STATE,
-    title: "Select an issue to view its details.",
-    path: "/empty-state/intake/issue-detail",
-  },
-  [EmptyStateType.WORKSPACE_DRAFT_ISSUES]: {
-    key: EmptyStateType.WORKSPACE_DRAFT_ISSUES,
-    title: "Half-written issues, and soon, comments will show up here.",
-    description: "To try this out, start adding an issue and leave it mid-way or create your first draft below. 😉",
-    path: "/empty-state/workspace-draft/issue",
-    primaryButton: {
-      text: "Create your first draft",
-    },
-    accessType: "workspace",
-    access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-  },
-} as const;
-
-export const EMPTY_STATE_DETAILS: Record<EmptyStateType, EmptyStateDetails> = emptyStateDetails;
diff --git a/web/core/constants/errors.ts b/web/core/constants/errors.ts
deleted file mode 100644
index b682c2ee1..000000000
--- a/web/core/constants/errors.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-export enum EErrorCodes {
-  "INVALID_ARCHIVE_STATE_GROUP" = 4091,
-  "INVALID_ISSUE_START_DATE" = 4101,
-  "INVALID_ISSUE_TARGET_DATE" = 4102,
-}
-
-export const ERROR_DETAILS: {
-  [key in EErrorCodes]: {
-    title: string;
-    message: string;
-  };
-} = {
-  [EErrorCodes.INVALID_ARCHIVE_STATE_GROUP]: {
-    title: "Unable to archive issues",
-    message: "Only issues belonging to Completed or Canceled state groups can be archived.",
-  },
-  [EErrorCodes.INVALID_ISSUE_START_DATE]: {
-    title: "Unable to update issues",
-    message: "Start date selected succeeds the due date for some issues. Ensure start date to be before the due date.",
-  },
-  [EErrorCodes.INVALID_ISSUE_TARGET_DATE]: {
-    title: "Unable to update issues",
-    message: "Due date selected precedes the start date for some issues. Ensure due date to be after the start date.",
-  },
-};
diff --git a/web/core/constants/inbox.tsx b/web/core/constants/inbox.tsx
deleted file mode 100644
index fb0f4ec63..000000000
--- a/web/core/constants/inbox.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-// icons
-import { AlertTriangle, CheckCircle2, Clock, Copy, LucideIcon, XCircle } from "lucide-react";
-// types
-import { TInboxIssueSortingOrderByKeys, TInboxIssueSortingSortByKeys, TInboxIssueStatus } from "@plane/types";
-// helpers
-import { findHowManyDaysLeft } from "@/helpers/date-time.helper";
-import { EInboxIssueStatus } from "@/helpers/inbox.helper";
-
-export const INBOX_STATUS: {
-  key: string;
-  status: TInboxIssueStatus;
-  icon: LucideIcon;
-  title: string;
-  description: (snoozedTillDate: Date) => string;
-  textColor: (snoozeDatePassed: boolean) => string;
-  bgColor: (snoozeDatePassed: boolean) => string;
-}[] = [
-  {
-    key: "pending",
-    status: EInboxIssueStatus.PENDING,
-    icon: AlertTriangle,
-    title: "Pending",
-    description: () => `Pending`,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#AB6400]"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#FFF7C2]"),
-  },
-  {
-    key: "declined",
-    status: EInboxIssueStatus.DECLINED,
-    icon: XCircle,
-    title: "Declined",
-    description: () => `Declined`,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#CE2C31]"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#FEEBEC]"),
-  },
-  {
-    key: "snoozed",
-    status: EInboxIssueStatus.SNOOZED,
-    icon: Clock,
-    title: "Snoozed",
-    description: (snoozedTillDate: Date = new Date()) => `${findHowManyDaysLeft(snoozedTillDate)} days to go`,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-custom-text-400"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-red-500/10" : "bg-[#E0E1E6]"),
-  },
-  {
-    key: "accepted",
-    status: EInboxIssueStatus.ACCEPTED,
-    icon: CheckCircle2,
-    title: "Accepted",
-    description: () => `Accepted`,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-[#3E9B4F]"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-[#E9F6E9]"),
-  },
-  {
-    key: "duplicate",
-    status: EInboxIssueStatus.DUPLICATE,
-    icon: Copy,
-    title: "Duplicate",
-    description: () => `Duplicate`,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-custom-text-200"),
-    bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-gray-500/10"),
-  },
-];
-
-export const INBOX_ISSUE_SOURCE = "in-app";
-
-export const INBOX_ISSUE_ORDER_BY_OPTIONS: { key: TInboxIssueSortingOrderByKeys; label: string }[] = [
-  {
-    key: "issue__created_at",
-    label: "Created at",
-  },
-  {
-    key: "issue__updated_at",
-    label: "Updated at",
-  },
-  {
-    key: "issue__sequence_id",
-    label: "ID",
-  },
-];
-
-export const INBOX_ISSUE_SORT_BY_OPTIONS: { key: TInboxIssueSortingSortByKeys; label: string }[] = [
-  {
-    key: "asc",
-    label: "Ascending",
-  },
-  {
-    key: "desc",
-    label: "Descending",
-  },
-];
diff --git a/web/core/constants/issue.ts b/web/core/constants/issue.ts
deleted file mode 100644
index 8629c05a2..000000000
--- a/web/core/constants/issue.ts
+++ /dev/null
@@ -1,495 +0,0 @@
-// icons
-import { Calendar, GanttChartSquare, Kanban, List, Sheet } from "lucide-react";
-// types
-import {
-  IIssueFilterOptions,
-  IIssueDisplayProperties,
-  TIssueExtraOptions,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  TIssuePriorities,
-  TIssueGroupingFilters,
-} from "@plane/types";
-
-export const DRAG_ALLOWED_GROUPS: TIssueGroupByOptions[] = [
-  "state",
-  "priority",
-  "assignees",
-  "labels",
-  "module",
-  "cycle",
-];
-
-export enum EIssuesStoreType {
-  GLOBAL = "GLOBAL",
-  PROFILE = "PROFILE",
-  PROJECT = "PROJECT",
-  CYCLE = "CYCLE",
-  MODULE = "MODULE",
-  PROJECT_VIEW = "PROJECT_VIEW",
-  ARCHIVED = "ARCHIVED",
-  DRAFT = "DRAFT",
-  DEFAULT = "DEFAULT",
-  WORKSPACE_DRAFT = "WORKSPACE_DRAFT",
-}
-
-export enum EIssueLayoutTypes {
-  LIST = "list",
-  KANBAN = "kanban",
-  CALENDAR = "calendar",
-  GANTT = "gantt_chart",
-  SPREADSHEET = "spreadsheet",
-}
-
-export type TCreateModalStoreTypes =
-  | EIssuesStoreType.PROJECT
-  | EIssuesStoreType.PROJECT_VIEW
-  | EIssuesStoreType.PROFILE
-  | EIssuesStoreType.CYCLE
-  | EIssuesStoreType.MODULE;
-
-export enum EIssueFilterType {
-  FILTERS = "filters",
-  DISPLAY_FILTERS = "display_filters",
-  DISPLAY_PROPERTIES = "display_properties",
-  KANBAN_FILTERS = "kanban_filters",
-}
-
-export enum EIssueCommentAccessSpecifier {
-  EXTERNAL = "EXTERNAL",
-  INTERNAL = "INTERNAL",
-}
-
-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 ISSUE_GROUP_BY_OPTIONS: {
-  key: TIssueGroupByOptions;
-  title: string;
-}[] = [
-  { key: "state", title: "States" },
-  { key: "state_detail.group", title: "State Groups" },
-  { key: "priority", title: "Priority" },
-  { key: "project", title: "Project" }, // required this on my issues
-  { key: "cycle", title: "Cycle" }, // required this on my issues
-  { key: "module", title: "Module" }, // required this on my issues
-  { key: "labels", title: "Labels" },
-  { key: "assignees", title: "Assignees" },
-  { key: "created_by", title: "Created By" },
-  { key: null, title: "None" },
-];
-
-export const ISSUE_ORDER_BY_OPTIONS: {
-  key: TIssueOrderByOptions;
-  title: string;
-}[] = [
-  { key: "sort_order", title: "Manual" },
-  { key: "-created_at", title: "Last Created" },
-  { key: "-updated_at", title: "Last Updated" },
-  { key: "start_date", title: "Start Date" },
-  { key: "target_date", title: "Due Date" },
-  { key: "-priority", title: "Priority" },
-];
-
-export const ISSUE_FILTER_OPTIONS: {
-  key: TIssueGroupingFilters;
-  title: string;
-}[] = [
-  { key: null, title: "All" },
-  { key: "active", title: "Active Issues" },
-  { key: "backlog", title: "Backlog Issues" },
-  // { key: "draft", title: "Draft Issues" },
-];
-
-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 ISSUE_DISPLAY_PROPERTIES: {
-  key: keyof IIssueDisplayProperties;
-  title: string;
-}[] = [
-  { key: "key", title: "ID" },
-  { key: "issue_type", title: "Issue Type" },
-  { key: "assignee", title: "Assignee" },
-  { key: "start_date", title: "Start date" },
-  { key: "due_date", title: "Due date" },
-  { key: "labels", title: "Labels" },
-  { key: "priority", title: "Priority" },
-  { key: "state", title: "State" },
-  { key: "sub_issue_count", title: "Sub issue count" },
-  { key: "attachment_count", title: "Attachment count" },
-  { key: "link", title: "Link" },
-  { key: "estimate", title: "Estimate" },
-  { key: "modules", title: "Modules" },
-  { key: "cycle", title: "Cycle" },
-];
-
-export const ISSUE_EXTRA_OPTIONS: {
-  key: TIssueExtraOptions;
-  title: string;
-}[] = [
-  { key: "sub_issue", title: "Show sub-issues" }, // in spreadsheet its always false
-  { key: "show_empty_groups", title: "Show empty groups" }, // filter on front-end
-];
-
-export const ISSUE_LAYOUT_MAP = {
-  [EIssueLayoutTypes.LIST]: { key: EIssueLayoutTypes.LIST, title: "List layout", label: "List", icon: List },
-  [EIssueLayoutTypes.KANBAN]: { key: EIssueLayoutTypes.KANBAN, title: "Board layout", label: "Board", icon: Kanban },
-  [EIssueLayoutTypes.CALENDAR]: {
-    key: EIssueLayoutTypes.CALENDAR,
-    title: "Calendar layout",
-    label: "Calendar",
-    icon: Calendar,
-  },
-  [EIssueLayoutTypes.SPREADSHEET]: {
-    key: EIssueLayoutTypes.SPREADSHEET,
-    title: "Table layout",
-    label: "Table",
-    icon: Sheet,
-  },
-  [EIssueLayoutTypes.GANTT]: {
-    key: EIssueLayoutTypes.GANTT,
-    title: "Timeline layout",
-    label: "Timeline",
-    icon: GanttChartSquare,
-  },
-};
-
-export const ISSUE_LAYOUTS: {
-  key: EIssueLayoutTypes;
-  title: string;
-  icon: any;
-}[] = Object.values(ISSUE_LAYOUT_MAP);
-
-export interface ILayoutDisplayFiltersOptions {
-  filters: (keyof IIssueFilterOptions)[];
-  display_properties: (keyof IIssueDisplayProperties)[];
-  display_filters: {
-    group_by?: TIssueGroupByOptions[];
-    sub_group_by?: TIssueGroupByOptions[];
-    order_by?: TIssueOrderByOptions[];
-    type?: TIssueGroupingFilters[];
-  };
-  extra_options: {
-    access: boolean;
-    values: TIssueExtraOptions[];
-  };
-}
-
-export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
-  [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
-} = {
-  profile_issues: {
-    list: {
-      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
-      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: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-    },
-    kanban: {
-      filters: ["priority", "state_group", "labels", "start_date", "target_date"],
-      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: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups"],
-      },
-    },
-  },
-  archived_issues: {
-    list: {
-      filters: [
-        "priority",
-        "state",
-        "cycle",
-        "module",
-        "assignees",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "issue_type",
-      ],
-      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
-      display_filters: {
-        group_by: [
-          "state",
-          "cycle",
-          "module",
-          "state_detail.group",
-          "priority",
-          "labels",
-          "assignees",
-          "created_by",
-          null,
-        ],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups"],
-      },
-    },
-  },
-  draft_issues: {
-    list: {
-      filters: ["priority", "state_group", "cycle", "module", "labels", "start_date", "target_date", "issue_type"],
-      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
-      display_filters: {
-        group_by: ["state_detail.group", "cycle", "module", "priority", "project", "labels", null],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups"],
-      },
-    },
-    kanban: {
-      filters: ["priority", "state_group", "cycle", "module", "labels", "start_date", "target_date", "issue_type"],
-      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
-      display_filters: {
-        group_by: ["state_detail.group", "cycle", "module", "priority", "project", "labels"],
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups"],
-      },
-    },
-  },
-  my_issues: {
-    spreadsheet: {
-      filters: [
-        "priority",
-        "state_group",
-        "labels",
-        "assignees",
-        "created_by",
-        "subscriber",
-        "project",
-        "start_date",
-        "target_date",
-      ],
-      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
-      display_filters: {
-        order_by: [],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["sub_issue"],
-      },
-    },
-    list: {
-      filters: [
-        "priority",
-        "state_group",
-        "labels",
-        "assignees",
-        "created_by",
-        "subscriber",
-        "project",
-        "start_date",
-        "target_date",
-      ],
-      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
-      display_filters: {
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: false,
-        values: [],
-      },
-    },
-  },
-  issues: {
-    list: {
-      filters: [
-        "priority",
-        "state",
-        "cycle",
-        "module",
-        "assignees",
-        "mentions",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "issue_type",
-      ],
-      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"],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-    },
-    kanban: {
-      filters: [
-        "priority",
-        "state",
-        "cycle",
-        "module",
-        "assignees",
-        "mentions",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "issue_type",
-      ],
-      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: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["show_empty_groups", "sub_issue"],
-      },
-    },
-    calendar: {
-      filters: [
-        "priority",
-        "state",
-        "cycle",
-        "module",
-        "assignees",
-        "mentions",
-        "created_by",
-        "labels",
-        "start_date",
-        "issue_type",
-      ],
-      display_properties: ["key", "issue_type"],
-      display_filters: {
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["sub_issue"],
-      },
-    },
-    spreadsheet: {
-      filters: [
-        "priority",
-        "state",
-        "cycle",
-        "module",
-        "assignees",
-        "mentions",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "issue_type",
-      ],
-      display_properties: ISSUE_DISPLAY_PROPERTIES_KEYS,
-      display_filters: {
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["sub_issue"],
-      },
-    },
-    gantt_chart: {
-      filters: [
-        "priority",
-        "state",
-        "cycle",
-        "module",
-        "assignees",
-        "mentions",
-        "created_by",
-        "labels",
-        "start_date",
-        "target_date",
-        "issue_type",
-      ],
-      display_properties: ["key", "issue_type"],
-      display_filters: {
-        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "-priority"],
-        type: [null, "active", "backlog"],
-      },
-      extra_options: {
-        access: true,
-        values: ["sub_issue"],
-      },
-    },
-  },
-};
-
-export enum EIssueListRow {
-  HEADER = "HEADER",
-  ISSUE = "ISSUE",
-  NO_ISSUES = "NO_ISSUES",
-  QUICK_ADD = "QUICK_ADD",
-}
-
-// issue reactions
-export const issueReactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
-
-export const groupReactionEmojis = (reactions: any) => {
-  let groupedEmojis: any = {};
-
-  issueReactionEmojis.map((_r) => {
-    groupedEmojis = { ...groupedEmojis, [_r]: [] };
-  });
-
-  if (reactions && reactions.length > 0) {
-    reactions.map((_reaction: any) => {
-      groupedEmojis = {
-        ...groupedEmojis,
-        [_reaction.reaction]: [...groupedEmojis[_reaction.reaction], _reaction],
-      };
-    });
-  }
-
-  return groupedEmojis;
-};
diff --git a/web/core/constants/meta.ts b/web/core/constants/meta.ts
deleted file mode 100644
index 3deed24ae..000000000
--- a/web/core/constants/meta.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const SITE_NAME = "Plane";
-export const SITE_TITLE = "Plane | Simple, extensible, open-source project management tool.";
-export const SITE_DESCRIPTION =
-  "Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.";
diff --git a/web/core/constants/page.ts b/web/core/constants/page.ts
deleted file mode 100644
index 20314b263..000000000
--- a/web/core/constants/page.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Globe2, Lock, LucideIcon } from "lucide-react";
-// types
-import { TPageFiltersSortKey, TPageFiltersSortBy } from "@plane/types";
-
-export enum EPageAccess {
-  PUBLIC = 0,
-  PRIVATE = 1,
-}
-
-export const PAGE_ACCESS_SPECIFIERS: {
-  key: EPageAccess;
-  label: string;
-  icon: LucideIcon;
-}[] = [
-  { key: EPageAccess.PUBLIC, label: "Public", icon: Globe2 },
-  { key: EPageAccess.PRIVATE, label: "Private", icon: Lock },
-];
-
-export 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 const PAGE_SORT_BY_OPTIONS: {
-  key: TPageFiltersSortBy;
-  label: string;
-}[] = [
-  { key: "asc", label: "Ascending" },
-  { key: "desc", label: "Descending" },
-];
-
-export type TCreatePageModal = {
-  isOpen: boolean;
-  pageAccess?: EPageAccess;
-}
-
-export const DEFAULT_CREATE_PAGE_MODAL_DATA: TCreatePageModal = {
-  isOpen: false,
-  pageAccess: EPageAccess.PUBLIC,
-};
diff --git a/web/core/constants/seo-variables.ts b/web/core/constants/seo-variables.ts
deleted file mode 100644
index aafd5f7a3..000000000
--- a/web/core/constants/seo-variables.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-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 issues, sprints, and product roadmaps with peace of mind.";
-export const SITE_KEYWORDS =
-  "software development, plan, ship, software, accelerate, code management, release management, project management, issue 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.";
diff --git a/web/core/constants/spreadsheet.ts b/web/core/constants/spreadsheet.ts
deleted file mode 100644
index e4ca07ffb..000000000
--- a/web/core/constants/spreadsheet.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-"use client";
-import { FC } from "react";
-// icons
-import {
-  CalendarDays,
-  Link2,
-  Signal,
-  Tag,
-  Triangle,
-  Paperclip,
-  CalendarCheck2,
-  CalendarClock,
-  Users,
-} from "lucide-react";
-// types
-import { IIssueDisplayProperties, TIssue, TIssueOrderByOptions } from "@plane/types";
-// ui
-import { LayersIcon, DoubleCircleIcon, DiceIcon, ContrastIcon } from "@plane/ui";
-import { ISvgIcons } from "@plane/ui/src/icons/type";
-import {
-  SpreadsheetAssigneeColumn,
-  SpreadsheetAttachmentColumn,
-  SpreadsheetCreatedOnColumn,
-  SpreadsheetDueDateColumn,
-  SpreadsheetEstimateColumn,
-  SpreadsheetLabelColumn,
-  SpreadsheetModuleColumn,
-  SpreadsheetCycleColumn,
-  SpreadsheetLinkColumn,
-  SpreadsheetPriorityColumn,
-  SpreadsheetStartDateColumn,
-  SpreadsheetStateColumn,
-  SpreadsheetSubIssueColumn,
-  SpreadsheetUpdatedOnColumn,
-} from "@/components/issues/issue-layouts/spreadsheet";
-
-export const SPREADSHEET_PROPERTY_DETAILS: {
-  [key: string]: {
-    title: string;
-    ascendingOrderKey: TIssueOrderByOptions;
-    ascendingOrderTitle: string;
-    descendingOrderKey: TIssueOrderByOptions;
-    descendingOrderTitle: string;
-    icon: FC<ISvgIcons>;
-    Column: React.FC<{
-      issue: TIssue;
-      onClose: () => void;
-      onChange: (issue: TIssue, data: Partial<TIssue>, updates: any) => void;
-      disabled: boolean;
-    }>;
-  };
-} = {
-  assignee: {
-    title: "Assignees",
-    ascendingOrderKey: "assignees__first_name",
-    ascendingOrderTitle: "A",
-    descendingOrderKey: "-assignees__first_name",
-    descendingOrderTitle: "Z",
-    icon: Users,
-    Column: SpreadsheetAssigneeColumn,
-  },
-  created_on: {
-    title: "Created on",
-    ascendingOrderKey: "-created_at",
-    ascendingOrderTitle: "New",
-    descendingOrderKey: "created_at",
-    descendingOrderTitle: "Old",
-    icon: CalendarDays,
-    Column: SpreadsheetCreatedOnColumn,
-  },
-  due_date: {
-    title: "Due date",
-    ascendingOrderKey: "-target_date",
-    ascendingOrderTitle: "New",
-    descendingOrderKey: "target_date",
-    descendingOrderTitle: "Old",
-    icon: CalendarCheck2,
-    Column: SpreadsheetDueDateColumn,
-  },
-  estimate: {
-    title: "Estimate",
-    ascendingOrderKey: "estimate_point__key",
-    ascendingOrderTitle: "Low",
-    descendingOrderKey: "-estimate_point__key",
-    descendingOrderTitle: "High",
-    icon: Triangle,
-    Column: SpreadsheetEstimateColumn,
-  },
-  labels: {
-    title: "Labels",
-    ascendingOrderKey: "labels__name",
-    ascendingOrderTitle: "A",
-    descendingOrderKey: "-labels__name",
-    descendingOrderTitle: "Z",
-    icon: Tag,
-    Column: SpreadsheetLabelColumn,
-  },
-  modules: {
-    title: "Modules",
-    ascendingOrderKey: "issue_module__module__name",
-    ascendingOrderTitle: "A",
-    descendingOrderKey: "-issue_module__module__name",
-    descendingOrderTitle: "Z",
-    icon: DiceIcon,
-    Column: SpreadsheetModuleColumn,
-  },
-  cycle: {
-    title: "Cycle",
-    ascendingOrderKey: "issue_cycle__cycle__name",
-    ascendingOrderTitle: "A",
-    descendingOrderKey: "-issue_cycle__cycle__name",
-    descendingOrderTitle: "Z",
-    icon: ContrastIcon,
-    Column: SpreadsheetCycleColumn,
-  },
-  priority: {
-    title: "Priority",
-    ascendingOrderKey: "priority",
-    ascendingOrderTitle: "None",
-    descendingOrderKey: "-priority",
-    descendingOrderTitle: "Urgent",
-    icon: Signal,
-    Column: SpreadsheetPriorityColumn,
-  },
-  start_date: {
-    title: "Start date",
-    ascendingOrderKey: "-start_date",
-    ascendingOrderTitle: "New",
-    descendingOrderKey: "start_date",
-    descendingOrderTitle: "Old",
-    icon: CalendarClock,
-    Column: SpreadsheetStartDateColumn,
-  },
-  state: {
-    title: "State",
-    ascendingOrderKey: "state__name",
-    ascendingOrderTitle: "A",
-    descendingOrderKey: "-state__name",
-    descendingOrderTitle: "Z",
-    icon: DoubleCircleIcon,
-    Column: SpreadsheetStateColumn,
-  },
-  updated_on: {
-    title: "Updated on",
-    ascendingOrderKey: "-updated_at",
-    ascendingOrderTitle: "New",
-    descendingOrderKey: "updated_at",
-    descendingOrderTitle: "Old",
-    icon: CalendarDays,
-    Column: SpreadsheetUpdatedOnColumn,
-  },
-  link: {
-    title: "Link",
-    ascendingOrderKey: "-link_count",
-    ascendingOrderTitle: "Most",
-    descendingOrderKey: "link_count",
-    descendingOrderTitle: "Least",
-    icon: Link2,
-    Column: SpreadsheetLinkColumn,
-  },
-  attachment_count: {
-    title: "Attachment",
-    ascendingOrderKey: "-attachment_count",
-    ascendingOrderTitle: "Most",
-    descendingOrderKey: "attachment_count",
-    descendingOrderTitle: "Least",
-    icon: Paperclip,
-    Column: SpreadsheetAttachmentColumn,
-  },
-  sub_issue_count: {
-    title: "Sub-issue",
-    ascendingOrderKey: "-sub_issues_count",
-    ascendingOrderTitle: "Most",
-    descendingOrderKey: "sub_issues_count",
-    descendingOrderTitle: "Least",
-    icon: LayersIcon,
-    Column: SpreadsheetSubIssueColumn,
-  },
-};
-
-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_SELECT_GROUP = "spreadsheet-issues";
diff --git a/web/core/constants/swr-config.ts b/web/core/constants/swr-config.ts
deleted file mode 100644
index 59a945051..000000000
--- a/web/core/constants/swr-config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const SWR_CONFIG = {
-  refreshWhenHidden: false,
-  revalidateIfStale: true,
-  revalidateOnFocus: true,
-  revalidateOnMount: true,
-  errorRetryCount: 3,
-};
diff --git a/web/core/constants/timezones.ts b/web/core/constants/timezones.ts
deleted file mode 100644
index 6db9dfea8..000000000
--- a/web/core/constants/timezones.ts
+++ /dev/null
@@ -1,2983 +0,0 @@
-export type TTimezone = {
-  name: string;
-  gmtOffset: string;
-  value: string;
-};
-
-export const TIME_ZONES: TTimezone[] = [
-  {
-    name: "Africa/Abidjan",
-    gmtOffset: "GMT",
-    value: "Africa/Abidjan",
-  },
-  {
-    name: "Africa/Accra",
-    gmtOffset: "GMT",
-    value: "Africa/Accra",
-  },
-  {
-    name: "Africa/Addis_Ababa",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Addis_Ababa",
-  },
-  {
-    name: "Africa/Algiers",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Algiers",
-  },
-  {
-    name: "Africa/Asmara",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Asmara",
-  },
-  {
-    name: "Africa/Asmera",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Asmera",
-  },
-  {
-    name: "Africa/Bamako",
-    gmtOffset: "GMT",
-    value: "Africa/Bamako",
-  },
-  {
-    name: "Africa/Bangui",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Bangui",
-  },
-  {
-    name: "Africa/Banjul",
-    gmtOffset: "GMT",
-    value: "Africa/Banjul",
-  },
-  {
-    name: "Africa/Bissau",
-    gmtOffset: "GMT",
-    value: "Africa/Bissau",
-  },
-  {
-    name: "Africa/Blantyre",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Blantyre",
-  },
-  {
-    name: "Africa/Brazzaville",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Brazzaville",
-  },
-  {
-    name: "Africa/Bujumbura",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Bujumbura",
-  },
-  {
-    name: "Africa/Cairo",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Cairo",
-  },
-  {
-    name: "Africa/Casablanca",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Casablanca",
-  },
-  {
-    name: "Africa/Ceuta",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Ceuta",
-  },
-  {
-    name: "Africa/Conakry",
-    gmtOffset: "GMT",
-    value: "Africa/Conakry",
-  },
-  {
-    name: "Africa/Dakar",
-    gmtOffset: "GMT",
-    value: "Africa/Dakar",
-  },
-  {
-    name: "Africa/Dar_es_Salaam",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Dar_es_Salaam",
-  },
-  {
-    name: "Africa/Djibouti",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Djibouti",
-  },
-  {
-    name: "Africa/Douala",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Douala",
-  },
-  {
-    name: "Africa/El_Aaiun",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/El_Aaiun",
-  },
-  {
-    name: "Africa/Freetown",
-    gmtOffset: "GMT",
-    value: "Africa/Freetown",
-  },
-  {
-    name: "Africa/Gaborone",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Gaborone",
-  },
-  {
-    name: "Africa/Harare",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Harare",
-  },
-  {
-    name: "Africa/Johannesburg",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Johannesburg",
-  },
-  {
-    name: "Africa/Juba",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Juba",
-  },
-  {
-    name: "Africa/Kampala",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Kampala",
-  },
-  {
-    name: "Africa/Khartoum",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Khartoum",
-  },
-  {
-    name: "Africa/Kigali",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Kigali",
-  },
-  {
-    name: "Africa/Kinshasa",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Kinshasa",
-  },
-  {
-    name: "Africa/Lagos",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Lagos",
-  },
-  {
-    name: "Africa/Libreville",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Libreville",
-  },
-  {
-    name: "Africa/Lome",
-    gmtOffset: "GMT",
-    value: "Africa/Lome",
-  },
-  {
-    name: "Africa/Luanda",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Luanda",
-  },
-  {
-    name: "Africa/Lubumbashi",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Lubumbashi",
-  },
-  {
-    name: "Africa/Lusaka",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Lusaka",
-  },
-  {
-    name: "Africa/Malabo",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Malabo",
-  },
-  {
-    name: "Africa/Maputo",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Maputo",
-  },
-  {
-    name: "Africa/Maseru",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Maseru",
-  },
-  {
-    name: "Africa/Mbabane",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Mbabane",
-  },
-  {
-    name: "Africa/Mogadishu",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Mogadishu",
-  },
-  {
-    name: "Africa/Monrovia",
-    gmtOffset: "GMT",
-    value: "Africa/Monrovia",
-  },
-  {
-    name: "Africa/Nairobi",
-    gmtOffset: "GMT+03:00",
-    value: "Africa/Nairobi",
-  },
-  {
-    name: "Africa/Ndjamena",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Ndjamena",
-  },
-  {
-    name: "Africa/Niamey",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Niamey",
-  },
-  {
-    name: "Africa/Nouakchott",
-    gmtOffset: "GMT",
-    value: "Africa/Nouakchott",
-  },
-  {
-    name: "Africa/Ouagadougou",
-    gmtOffset: "GMT",
-    value: "Africa/Ouagadougou",
-  },
-  {
-    name: "Africa/Porto-Novo",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Porto-Novo",
-  },
-  {
-    name: "Africa/Sao_Tome",
-    gmtOffset: "GMT",
-    value: "Africa/Sao_Tome",
-  },
-  {
-    name: "Africa/Timbuktu",
-    gmtOffset: "GMT",
-    value: "Africa/Timbuktu",
-  },
-  {
-    name: "Africa/Tripoli",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Tripoli",
-  },
-  {
-    name: "Africa/Tunis",
-    gmtOffset: "GMT+01:00",
-    value: "Africa/Tunis",
-  },
-  {
-    name: "Africa/Windhoek",
-    gmtOffset: "GMT+02:00",
-    value: "Africa/Windhoek",
-  },
-  {
-    name: "America/Adak",
-    gmtOffset: "GMT-09:00",
-    value: "America/Adak",
-  },
-  {
-    name: "America/Anchorage",
-    gmtOffset: "GMT-08:00",
-    value: "America/Anchorage",
-  },
-  {
-    name: "America/Anguilla",
-    gmtOffset: "GMT-04:00",
-    value: "America/Anguilla",
-  },
-  {
-    name: "America/Antigua",
-    gmtOffset: "GMT-04:00",
-    value: "America/Antigua",
-  },
-  {
-    name: "America/Araguaina",
-    gmtOffset: "GMT-03:00",
-    value: "America/Araguaina",
-  },
-  {
-    name: "America/Argentina/Buenos_Aires",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Buenos_Aires",
-  },
-  {
-    name: "America/Argentina/Catamarca",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Catamarca",
-  },
-  {
-    name: "America/Argentina/ComodRivadavia",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/ComodRivadavia",
-  },
-  {
-    name: "America/Argentina/Cordoba",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Cordoba",
-  },
-  {
-    name: "America/Argentina/Jujuy",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Jujuy",
-  },
-  {
-    name: "America/Argentina/La_Rioja",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/La_Rioja",
-  },
-  {
-    name: "America/Argentina/Mendoza",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Mendoza",
-  },
-  {
-    name: "America/Argentina/Rio_Gallegos",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Rio_Gallegos",
-  },
-  {
-    name: "America/Argentina/Salta",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Salta",
-  },
-  {
-    name: "America/Argentina/San_Juan",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/San_Juan",
-  },
-  {
-    name: "America/Argentina/San_Luis",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/San_Luis",
-  },
-  {
-    name: "America/Argentina/Tucuman",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Tucuman",
-  },
-  {
-    name: "America/Argentina/Ushuaia",
-    gmtOffset: "GMT-03:00",
-    value: "America/Argentina/Ushuaia",
-  },
-  {
-    name: "America/Aruba",
-    gmtOffset: "GMT-04:00",
-    value: "America/Aruba",
-  },
-  {
-    name: "America/Asuncion",
-    gmtOffset: "GMT-04:00",
-    value: "America/Asuncion",
-  },
-  {
-    name: "America/Atikokan",
-    gmtOffset: "GMT-05:00",
-    value: "America/Atikokan",
-  },
-  {
-    name: "America/Atka",
-    gmtOffset: "GMT-09:00",
-    value: "America/Atka",
-  },
-  {
-    name: "America/Bahia",
-    gmtOffset: "GMT-03:00",
-    value: "America/Bahia",
-  },
-  {
-    name: "America/Bahia_Banderas",
-    gmtOffset: "GMT-06:00",
-    value: "America/Bahia_Banderas",
-  },
-  {
-    name: "America/Barbados",
-    gmtOffset: "GMT-04:00",
-    value: "America/Barbados",
-  },
-  {
-    name: "America/Belem",
-    gmtOffset: "GMT-03:00",
-    value: "America/Belem",
-  },
-  {
-    name: "America/Belize",
-    gmtOffset: "GMT-06:00",
-    value: "America/Belize",
-  },
-  {
-    name: "America/Blanc-Sablon",
-    gmtOffset: "GMT-04:00",
-    value: "America/Blanc-Sablon",
-  },
-  {
-    name: "America/Boa_Vista",
-    gmtOffset: "GMT-04:00",
-    value: "America/Boa_Vista",
-  },
-  {
-    name: "America/Bogota",
-    gmtOffset: "GMT-05:00",
-    value: "America/Bogota",
-  },
-  {
-    name: "America/Boise",
-    gmtOffset: "GMT-06:00",
-    value: "America/Boise",
-  },
-  {
-    name: "America/Buenos_Aires",
-    gmtOffset: "GMT-03:00",
-    value: "America/Buenos_Aires",
-  },
-  {
-    name: "America/Cambridge_Bay",
-    gmtOffset: "GMT-06:00",
-    value: "America/Cambridge_Bay",
-  },
-  {
-    name: "America/Campo_Grande",
-    gmtOffset: "GMT-04:00",
-    value: "America/Campo_Grande",
-  },
-  {
-    name: "America/Cancun",
-    gmtOffset: "GMT-05:00",
-    value: "America/Cancun",
-  },
-  {
-    name: "America/Caracas",
-    gmtOffset: "GMT-04:00",
-    value: "America/Caracas",
-  },
-  {
-    name: "America/Catamarca",
-    gmtOffset: "GMT-03:00",
-    value: "America/Catamarca",
-  },
-  {
-    name: "America/Cayenne",
-    gmtOffset: "GMT-03:00",
-    value: "America/Cayenne",
-  },
-  {
-    name: "America/Cayman",
-    gmtOffset: "GMT-05:00",
-    value: "America/Cayman",
-  },
-  {
-    name: "America/Chicago",
-    gmtOffset: "GMT-05:00",
-    value: "America/Chicago",
-  },
-  {
-    name: "America/Chihuahua",
-    gmtOffset: "GMT-06:00",
-    value: "America/Chihuahua",
-  },
-  {
-    name: "America/Ciudad_Juarez",
-    gmtOffset: "GMT-06:00",
-    value: "America/Ciudad_Juarez",
-  },
-  {
-    name: "America/Coral_Harbour",
-    gmtOffset: "GMT-05:00",
-    value: "America/Coral_Harbour",
-  },
-  {
-    name: "America/Cordoba",
-    gmtOffset: "GMT-03:00",
-    value: "America/Cordoba",
-  },
-  {
-    name: "America/Costa_Rica",
-    gmtOffset: "GMT-06:00",
-    value: "America/Costa_Rica",
-  },
-  {
-    name: "America/Creston",
-    gmtOffset: "GMT-07:00",
-    value: "America/Creston",
-  },
-  {
-    name: "America/Cuiaba",
-    gmtOffset: "GMT-04:00",
-    value: "America/Cuiaba",
-  },
-  {
-    name: "America/Curacao",
-    gmtOffset: "GMT-04:00",
-    value: "America/Curacao",
-  },
-  {
-    name: "America/Danmarkshavn",
-    gmtOffset: "GMT",
-    value: "America/Danmarkshavn",
-  },
-  {
-    name: "America/Dawson",
-    gmtOffset: "GMT-07:00",
-    value: "America/Dawson",
-  },
-  {
-    name: "America/Dawson_Creek",
-    gmtOffset: "GMT-07:00",
-    value: "America/Dawson_Creek",
-  },
-  {
-    name: "America/Denver",
-    gmtOffset: "GMT-06:00",
-    value: "America/Denver",
-  },
-  {
-    name: "America/Detroit",
-    gmtOffset: "GMT-04:00",
-    value: "America/Detroit",
-  },
-  {
-    name: "America/Dominica",
-    gmtOffset: "GMT-04:00",
-    value: "America/Dominica",
-  },
-  {
-    name: "America/Edmonton",
-    gmtOffset: "GMT-06:00",
-    value: "America/Edmonton",
-  },
-  {
-    name: "America/Eirunepe",
-    gmtOffset: "GMT-05:00",
-    value: "America/Eirunepe",
-  },
-  {
-    name: "America/El_Salvador",
-    gmtOffset: "GMT-06:00",
-    value: "America/El_Salvador",
-  },
-  {
-    name: "America/Ensenada",
-    gmtOffset: "GMT-07:00",
-    value: "America/Ensenada",
-  },
-  {
-    name: "America/Fort_Nelson",
-    gmtOffset: "GMT-07:00",
-    value: "America/Fort_Nelson",
-  },
-  {
-    name: "America/Fort_Wayne",
-    gmtOffset: "GMT-04:00",
-    value: "America/Fort_Wayne",
-  },
-  {
-    name: "America/Fortaleza",
-    gmtOffset: "GMT-03:00",
-    value: "America/Fortaleza",
-  },
-  {
-    name: "America/Glace_Bay",
-    gmtOffset: "GMT-03:00",
-    value: "America/Glace_Bay",
-  },
-  {
-    name: "America/Godthab",
-    gmtOffset: "GMT-02:00",
-    value: "America/Godthab",
-  },
-  {
-    name: "America/Goose_Bay",
-    gmtOffset: "GMT-03:00",
-    value: "America/Goose_Bay",
-  },
-  {
-    name: "America/Grand_Turk",
-    gmtOffset: "GMT-04:00",
-    value: "America/Grand_Turk",
-  },
-  {
-    name: "America/Grenada",
-    gmtOffset: "GMT-04:00",
-    value: "America/Grenada",
-  },
-  {
-    name: "America/Guadeloupe",
-    gmtOffset: "GMT-04:00",
-    value: "America/Guadeloupe",
-  },
-  {
-    name: "America/Guatemala",
-    gmtOffset: "GMT-06:00",
-    value: "America/Guatemala",
-  },
-  {
-    name: "America/Guayaquil",
-    gmtOffset: "GMT-05:00",
-    value: "America/Guayaquil",
-  },
-  {
-    name: "America/Guyana",
-    gmtOffset: "GMT-04:00",
-    value: "America/Guyana",
-  },
-  {
-    name: "America/Halifax",
-    gmtOffset: "GMT-03:00",
-    value: "America/Halifax",
-  },
-  {
-    name: "America/Havana",
-    gmtOffset: "GMT-04:00",
-    value: "America/Havana",
-  },
-  {
-    name: "America/Hermosillo",
-    gmtOffset: "GMT-07:00",
-    value: "America/Hermosillo",
-  },
-  {
-    name: "America/Indiana/Indianapolis",
-    gmtOffset: "GMT-04:00",
-    value: "America/Indiana/Indianapolis",
-  },
-  {
-    name: "America/Indiana/Knox",
-    gmtOffset: "GMT-05:00",
-    value: "America/Indiana/Knox",
-  },
-  {
-    name: "America/Indiana/Marengo",
-    gmtOffset: "GMT-04:00",
-    value: "America/Indiana/Marengo",
-  },
-  {
-    name: "America/Indiana/Petersburg",
-    gmtOffset: "GMT-04:00",
-    value: "America/Indiana/Petersburg",
-  },
-  {
-    name: "America/Indiana/Tell_City",
-    gmtOffset: "GMT-05:00",
-    value: "America/Indiana/Tell_City",
-  },
-  {
-    name: "America/Indiana/Vevay",
-    gmtOffset: "GMT-04:00",
-    value: "America/Indiana/Vevay",
-  },
-  {
-    name: "America/Indiana/Vincennes",
-    gmtOffset: "GMT-04:00",
-    value: "America/Indiana/Vincennes",
-  },
-  {
-    name: "America/Indiana/Winamac",
-    gmtOffset: "GMT-04:00",
-    value: "America/Indiana/Winamac",
-  },
-  {
-    name: "America/Indianapolis",
-    gmtOffset: "GMT-04:00",
-    value: "America/Indianapolis",
-  },
-  {
-    name: "America/Inuvik",
-    gmtOffset: "GMT-06:00",
-    value: "America/Inuvik",
-  },
-  {
-    name: "America/Iqaluit",
-    gmtOffset: "GMT-04:00",
-    value: "America/Iqaluit",
-  },
-  {
-    name: "America/Jamaica",
-    gmtOffset: "GMT-05:00",
-    value: "America/Jamaica",
-  },
-  {
-    name: "America/Jujuy",
-    gmtOffset: "GMT-03:00",
-    value: "America/Jujuy",
-  },
-  {
-    name: "America/Juneau",
-    gmtOffset: "GMT-08:00",
-    value: "America/Juneau",
-  },
-  {
-    name: "America/Kentucky/Louisville",
-    gmtOffset: "GMT-04:00",
-    value: "America/Kentucky/Louisville",
-  },
-  {
-    name: "America/Kentucky/Monticello",
-    gmtOffset: "GMT-04:00",
-    value: "America/Kentucky/Monticello",
-  },
-  {
-    name: "America/Knox_IN",
-    gmtOffset: "GMT-05:00",
-    value: "America/Knox_IN",
-  },
-  {
-    name: "America/Kralendijk",
-    gmtOffset: "GMT-04:00",
-    value: "America/Kralendijk",
-  },
-  {
-    name: "America/La_Paz",
-    gmtOffset: "GMT-04:00",
-    value: "America/La_Paz",
-  },
-  {
-    name: "America/Lima",
-    gmtOffset: "GMT-05:00",
-    value: "America/Lima",
-  },
-  {
-    name: "America/Los_Angeles",
-    gmtOffset: "GMT-07:00",
-    value: "America/Los_Angeles",
-  },
-  {
-    name: "America/Louisville",
-    gmtOffset: "GMT-04:00",
-    value: "America/Louisville",
-  },
-  {
-    name: "America/Lower_Princes",
-    gmtOffset: "GMT-04:00",
-    value: "America/Lower_Princes",
-  },
-  {
-    name: "America/Maceio",
-    gmtOffset: "GMT-03:00",
-    value: "America/Maceio",
-  },
-  {
-    name: "America/Managua",
-    gmtOffset: "GMT-06:00",
-    value: "America/Managua",
-  },
-  {
-    name: "America/Manaus",
-    gmtOffset: "GMT-04:00",
-    value: "America/Manaus",
-  },
-  {
-    name: "America/Marigot",
-    gmtOffset: "GMT-04:00",
-    value: "America/Marigot",
-  },
-  {
-    name: "America/Martinique",
-    gmtOffset: "GMT-04:00",
-    value: "America/Martinique",
-  },
-  {
-    name: "America/Matamoros",
-    gmtOffset: "GMT-05:00",
-    value: "America/Matamoros",
-  },
-  {
-    name: "America/Mazatlan",
-    gmtOffset: "GMT-07:00",
-    value: "America/Mazatlan",
-  },
-  {
-    name: "America/Mendoza",
-    gmtOffset: "GMT-03:00",
-    value: "America/Mendoza",
-  },
-  {
-    name: "America/Menominee",
-    gmtOffset: "GMT-05:00",
-    value: "America/Menominee",
-  },
-  {
-    name: "America/Merida",
-    gmtOffset: "GMT-06:00",
-    value: "America/Merida",
-  },
-  {
-    name: "America/Metlakatla",
-    gmtOffset: "GMT-08:00",
-    value: "America/Metlakatla",
-  },
-  {
-    name: "America/Mexico_City",
-    gmtOffset: "GMT-06:00",
-    value: "America/Mexico_City",
-  },
-  {
-    name: "America/Miquelon",
-    gmtOffset: "GMT-02:00",
-    value: "America/Miquelon",
-  },
-  {
-    name: "America/Moncton",
-    gmtOffset: "GMT-03:00",
-    value: "America/Moncton",
-  },
-  {
-    name: "America/Monterrey",
-    gmtOffset: "GMT-06:00",
-    value: "America/Monterrey",
-  },
-  {
-    name: "America/Montevideo",
-    gmtOffset: "GMT-03:00",
-    value: "America/Montevideo",
-  },
-  {
-    name: "America/Montreal",
-    gmtOffset: "GMT-04:00",
-    value: "America/Montreal",
-  },
-  {
-    name: "America/Montserrat",
-    gmtOffset: "GMT-04:00",
-    value: "America/Montserrat",
-  },
-  {
-    name: "America/Nassau",
-    gmtOffset: "GMT-04:00",
-    value: "America/Nassau",
-  },
-  {
-    name: "America/New_York",
-    gmtOffset: "GMT-04:00",
-    value: "America/New_York",
-  },
-  {
-    name: "America/Nipigon",
-    gmtOffset: "GMT-04:00",
-    value: "America/Nipigon",
-  },
-  {
-    name: "America/Nome",
-    gmtOffset: "GMT-08:00",
-    value: "America/Nome",
-  },
-  {
-    name: "America/Noronha",
-    gmtOffset: "GMT-02:00",
-    value: "America/Noronha",
-  },
-  {
-    name: "America/North_Dakota/Beulah",
-    gmtOffset: "GMT-05:00",
-    value: "America/North_Dakota/Beulah",
-  },
-  {
-    name: "America/North_Dakota/Center",
-    gmtOffset: "GMT-05:00",
-    value: "America/North_Dakota/Center",
-  },
-  {
-    name: "America/North_Dakota/New_Salem",
-    gmtOffset: "GMT-05:00",
-    value: "America/North_Dakota/New_Salem",
-  },
-  {
-    name: "America/Nuuk",
-    gmtOffset: "GMT-02:00",
-    value: "America/Nuuk",
-  },
-  {
-    name: "America/Ojinaga",
-    gmtOffset: "GMT-05:00",
-    value: "America/Ojinaga",
-  },
-  {
-    name: "America/Panama",
-    gmtOffset: "GMT-05:00",
-    value: "America/Panama",
-  },
-  {
-    name: "America/Pangnirtung",
-    gmtOffset: "GMT-04:00",
-    value: "America/Pangnirtung",
-  },
-  {
-    name: "America/Paramaribo",
-    gmtOffset: "GMT-03:00",
-    value: "America/Paramaribo",
-  },
-  {
-    name: "America/Phoenix",
-    gmtOffset: "GMT-07:00",
-    value: "America/Phoenix",
-  },
-  {
-    name: "America/Port-au-Prince",
-    gmtOffset: "GMT-04:00",
-    value: "America/Port-au-Prince",
-  },
-  {
-    name: "America/Port_of_Spain",
-    gmtOffset: "GMT-04:00",
-    value: "America/Port_of_Spain",
-  },
-  {
-    name: "America/Porto_Acre",
-    gmtOffset: "GMT-05:00",
-    value: "America/Porto_Acre",
-  },
-  {
-    name: "America/Porto_Velho",
-    gmtOffset: "GMT-04:00",
-    value: "America/Porto_Velho",
-  },
-  {
-    name: "America/Puerto_Rico",
-    gmtOffset: "GMT-04:00",
-    value: "America/Puerto_Rico",
-  },
-  {
-    name: "America/Punta_Arenas",
-    gmtOffset: "GMT-03:00",
-    value: "America/Punta_Arenas",
-  },
-  {
-    name: "America/Rainy_River",
-    gmtOffset: "GMT-05:00",
-    value: "America/Rainy_River",
-  },
-  {
-    name: "America/Rankin_Inlet",
-    gmtOffset: "GMT-05:00",
-    value: "America/Rankin_Inlet",
-  },
-  {
-    name: "America/Recife",
-    gmtOffset: "GMT-03:00",
-    value: "America/Recife",
-  },
-  {
-    name: "America/Regina",
-    gmtOffset: "GMT-06:00",
-    value: "America/Regina",
-  },
-  {
-    name: "America/Resolute",
-    gmtOffset: "GMT-05:00",
-    value: "America/Resolute",
-  },
-  {
-    name: "America/Rio_Branco",
-    gmtOffset: "GMT-05:00",
-    value: "America/Rio_Branco",
-  },
-  {
-    name: "America/Rosario",
-    gmtOffset: "GMT-03:00",
-    value: "America/Rosario",
-  },
-  {
-    name: "America/Santa_Isabel",
-    gmtOffset: "GMT-07:00",
-    value: "America/Santa_Isabel",
-  },
-  {
-    name: "America/Santarem",
-    gmtOffset: "GMT-03:00",
-    value: "America/Santarem",
-  },
-  {
-    name: "America/Santiago",
-    gmtOffset: "GMT-04:00",
-    value: "America/Santiago",
-  },
-  {
-    name: "America/Santo_Domingo",
-    gmtOffset: "GMT-04:00",
-    value: "America/Santo_Domingo",
-  },
-  {
-    name: "America/Sao_Paulo",
-    gmtOffset: "GMT-03:00",
-    value: "America/Sao_Paulo",
-  },
-  {
-    name: "America/Scoresbysund",
-    gmtOffset: "GMT-01:00",
-    value: "America/Scoresbysund",
-  },
-  {
-    name: "America/Shiprock",
-    gmtOffset: "GMT-06:00",
-    value: "America/Shiprock",
-  },
-  {
-    name: "America/Sitka",
-    gmtOffset: "GMT-08:00",
-    value: "America/Sitka",
-  },
-  {
-    name: "America/St_Barthelemy",
-    gmtOffset: "GMT-04:00",
-    value: "America/St_Barthelemy",
-  },
-  {
-    name: "America/St_Johns",
-    gmtOffset: "GMT-02:30",
-    value: "America/St_Johns",
-  },
-  {
-    name: "America/St_Kitts",
-    gmtOffset: "GMT-04:00",
-    value: "America/St_Kitts",
-  },
-  {
-    name: "America/St_Lucia",
-    gmtOffset: "GMT-04:00",
-    value: "America/St_Lucia",
-  },
-  {
-    name: "America/St_Thomas",
-    gmtOffset: "GMT-04:00",
-    value: "America/St_Thomas",
-  },
-  {
-    name: "America/St_Vincent",
-    gmtOffset: "GMT-04:00",
-    value: "America/St_Vincent",
-  },
-  {
-    name: "America/Swift_Current",
-    gmtOffset: "GMT-06:00",
-    value: "America/Swift_Current",
-  },
-  {
-    name: "America/Tegucigalpa",
-    gmtOffset: "GMT-06:00",
-    value: "America/Tegucigalpa",
-  },
-  {
-    name: "America/Thule",
-    gmtOffset: "GMT-03:00",
-    value: "America/Thule",
-  },
-  {
-    name: "America/Thunder_Bay",
-    gmtOffset: "GMT-04:00",
-    value: "America/Thunder_Bay",
-  },
-  {
-    name: "America/Tijuana",
-    gmtOffset: "GMT-07:00",
-    value: "America/Tijuana",
-  },
-  {
-    name: "America/Toronto",
-    gmtOffset: "GMT-04:00",
-    value: "America/Toronto",
-  },
-  {
-    name: "America/Tortola",
-    gmtOffset: "GMT-04:00",
-    value: "America/Tortola",
-  },
-  {
-    name: "America/Vancouver",
-    gmtOffset: "GMT-07:00",
-    value: "America/Vancouver",
-  },
-  {
-    name: "America/Virgin",
-    gmtOffset: "GMT-04:00",
-    value: "America/Virgin",
-  },
-  {
-    name: "America/Whitehorse",
-    gmtOffset: "GMT-07:00",
-    value: "America/Whitehorse",
-  },
-  {
-    name: "America/Winnipeg",
-    gmtOffset: "GMT-05:00",
-    value: "America/Winnipeg",
-  },
-  {
-    name: "America/Yakutat",
-    gmtOffset: "GMT-08:00",
-    value: "America/Yakutat",
-  },
-  {
-    name: "America/Yellowknife",
-    gmtOffset: "GMT-06:00",
-    value: "America/Yellowknife",
-  },
-  {
-    name: "Antarctica/Casey",
-    gmtOffset: "GMT+11:00",
-    value: "Antarctica/Casey",
-  },
-  {
-    name: "Antarctica/Davis",
-    gmtOffset: "GMT+07:00",
-    value: "Antarctica/Davis",
-  },
-  {
-    name: "Antarctica/DumontDUrville",
-    gmtOffset: "GMT+10:00",
-    value: "Antarctica/DumontDUrville",
-  },
-  {
-    name: "Antarctica/Macquarie",
-    gmtOffset: "GMT+11:00",
-    value: "Antarctica/Macquarie",
-  },
-  {
-    name: "Antarctica/Mawson",
-    gmtOffset: "GMT+05:00",
-    value: "Antarctica/Mawson",
-  },
-  {
-    name: "Antarctica/McMurdo",
-    gmtOffset: "GMT+13:00",
-    value: "Antarctica/McMurdo",
-  },
-  {
-    name: "Antarctica/Palmer",
-    gmtOffset: "GMT-03:00",
-    value: "Antarctica/Palmer",
-  },
-  {
-    name: "Antarctica/Rothera",
-    gmtOffset: "GMT-03:00",
-    value: "Antarctica/Rothera",
-  },
-  {
-    name: "Antarctica/South_Pole",
-    gmtOffset: "GMT+13:00",
-    value: "Antarctica/South_Pole",
-  },
-  {
-    name: "Antarctica/Syowa",
-    gmtOffset: "GMT+03:00",
-    value: "Antarctica/Syowa",
-  },
-  {
-    name: "Antarctica/Troll",
-    gmtOffset: "GMT",
-    value: "Antarctica/Troll",
-  },
-  {
-    name: "Antarctica/Vostok",
-    gmtOffset: "GMT+06:00",
-    value: "Antarctica/Vostok",
-  },
-  {
-    name: "Arctic/Longyearbyen",
-    gmtOffset: "GMT+02:00",
-    value: "Arctic/Longyearbyen",
-  },
-  {
-    name: "Asia/Aden",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Aden",
-  },
-  {
-    name: "Asia/Almaty",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Almaty",
-  },
-  {
-    name: "Asia/Amman",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Amman",
-  },
-  {
-    name: "Asia/Anadyr",
-    gmtOffset: "GMT+12:00",
-    value: "Asia/Anadyr",
-  },
-  {
-    name: "Asia/Aqtau",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Aqtau",
-  },
-  {
-    name: "Asia/Aqtobe",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Aqtobe",
-  },
-  {
-    name: "Asia/Ashgabat",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Ashgabat",
-  },
-  {
-    name: "Asia/Ashkhabad",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Ashkhabad",
-  },
-  {
-    name: "Asia/Atyrau",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Atyrau",
-  },
-  {
-    name: "Asia/Baghdad",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Baghdad",
-  },
-  {
-    name: "Asia/Bahrain",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Bahrain",
-  },
-  {
-    name: "Asia/Baku",
-    gmtOffset: "GMT+04:00",
-    value: "Asia/Baku",
-  },
-  {
-    name: "Asia/Bangkok",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Bangkok",
-  },
-  {
-    name: "Asia/Barnaul",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Barnaul",
-  },
-  {
-    name: "Asia/Beirut",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Beirut",
-  },
-  {
-    name: "Asia/Bishkek",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Bishkek",
-  },
-  {
-    name: "Asia/Brunei",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Brunei",
-  },
-  {
-    name: "Asia/Calcutta",
-    gmtOffset: "GMT+05:30",
-    value: "Asia/Calcutta",
-  },
-  {
-    name: "Asia/Chita",
-    gmtOffset: "GMT+09:00",
-    value: "Asia/Chita",
-  },
-  {
-    name: "Asia/Choibalsan",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Choibalsan",
-  },
-  {
-    name: "Asia/Chongqing",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Chongqing",
-  },
-  {
-    name: "Asia/Chungking",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Chungking",
-  },
-  {
-    name: "Asia/Colombo",
-    gmtOffset: "GMT+05:30",
-    value: "Asia/Colombo",
-  },
-  {
-    name: "Asia/Dacca",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Dacca",
-  },
-  {
-    name: "Asia/Damascus",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Damascus",
-  },
-  {
-    name: "Asia/Dhaka",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Dhaka",
-  },
-  {
-    name: "Asia/Dili",
-    gmtOffset: "GMT+09:00",
-    value: "Asia/Dili",
-  },
-  {
-    name: "Asia/Dubai",
-    gmtOffset: "GMT+04:00",
-    value: "Asia/Dubai",
-  },
-  {
-    name: "Asia/Dushanbe",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Dushanbe",
-  },
-  {
-    name: "Asia/Famagusta",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Famagusta",
-  },
-  {
-    name: "Asia/Gaza",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Gaza",
-  },
-  {
-    name: "Asia/Harbin",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Harbin",
-  },
-  {
-    name: "Asia/Hebron",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Hebron",
-  },
-  {
-    name: "Asia/Ho_Chi_Minh",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Ho_Chi_Minh",
-  },
-  {
-    name: "Asia/Hong_Kong",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Hong_Kong",
-  },
-  {
-    name: "Asia/Hovd",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Hovd",
-  },
-  {
-    name: "Asia/Irkutsk",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Irkutsk",
-  },
-  {
-    name: "Asia/Istanbul",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Istanbul",
-  },
-  {
-    name: "Asia/Jakarta",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Jakarta",
-  },
-  {
-    name: "Asia/Jayapura",
-    gmtOffset: "GMT+09:00",
-    value: "Asia/Jayapura",
-  },
-  {
-    name: "Asia/Jerusalem",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Jerusalem",
-  },
-  {
-    name: "Asia/Kabul",
-    gmtOffset: "GMT+04:30",
-    value: "Asia/Kabul",
-  },
-  {
-    name: "Asia/Kamchatka",
-    gmtOffset: "GMT+12:00",
-    value: "Asia/Kamchatka",
-  },
-  {
-    name: "Asia/Karachi",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Karachi",
-  },
-  {
-    name: "Asia/Kashgar",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Kashgar",
-  },
-  {
-    name: "Asia/Kathmandu",
-    gmtOffset: "GMT+05:45",
-    value: "Asia/Kathmandu",
-  },
-  {
-    name: "Asia/Katmandu",
-    gmtOffset: "GMT+05:45",
-    value: "Asia/Katmandu",
-  },
-  {
-    name: "Asia/Khandyga",
-    gmtOffset: "GMT+09:00",
-    value: "Asia/Khandyga",
-  },
-  {
-    name: "Asia/Kolkata",
-    gmtOffset: "GMT+05:30",
-    value: "Asia/Kolkata",
-  },
-  {
-    name: "Asia/Krasnoyarsk",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Krasnoyarsk",
-  },
-  {
-    name: "Asia/Kuala_Lumpur",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Kuala_Lumpur",
-  },
-  {
-    name: "Asia/Kuching",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Kuching",
-  },
-  {
-    name: "Asia/Kuwait",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Kuwait",
-  },
-  {
-    name: "Asia/Macao",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Macao",
-  },
-  {
-    name: "Asia/Macau",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Macau",
-  },
-  {
-    name: "Asia/Magadan",
-    gmtOffset: "GMT+11:00",
-    value: "Asia/Magadan",
-  },
-  {
-    name: "Asia/Makassar",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Makassar",
-  },
-  {
-    name: "Asia/Manila",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Manila",
-  },
-  {
-    name: "Asia/Muscat",
-    gmtOffset: "GMT+04:00",
-    value: "Asia/Muscat",
-  },
-  {
-    name: "Asia/Nicosia",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Nicosia",
-  },
-  {
-    name: "Asia/Novokuznetsk",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Novokuznetsk",
-  },
-  {
-    name: "Asia/Novosibirsk",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Novosibirsk",
-  },
-  {
-    name: "Asia/Omsk",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Omsk",
-  },
-  {
-    name: "Asia/Oral",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Oral",
-  },
-  {
-    name: "Asia/Phnom_Penh",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Phnom_Penh",
-  },
-  {
-    name: "Asia/Pontianak",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Pontianak",
-  },
-  {
-    name: "Asia/Pyongyang",
-    gmtOffset: "GMT+09:00",
-    value: "Asia/Pyongyang",
-  },
-  {
-    name: "Asia/Qatar",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Qatar",
-  },
-  {
-    name: "Asia/Qostanay",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Qostanay",
-  },
-  {
-    name: "Asia/Qyzylorda",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Qyzylorda",
-  },
-  {
-    name: "Asia/Rangoon",
-    gmtOffset: "GMT+06:30",
-    value: "Asia/Rangoon",
-  },
-  {
-    name: "Asia/Riyadh",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Riyadh",
-  },
-  {
-    name: "Asia/Saigon",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Saigon",
-  },
-  {
-    name: "Asia/Sakhalin",
-    gmtOffset: "GMT+11:00",
-    value: "Asia/Sakhalin",
-  },
-  {
-    name: "Asia/Samarkand",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Samarkand",
-  },
-  {
-    name: "Asia/Seoul",
-    gmtOffset: "GMT+09:00",
-    value: "Asia/Seoul",
-  },
-  {
-    name: "Asia/Shanghai",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Shanghai",
-  },
-  {
-    name: "Asia/Singapore",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Singapore",
-  },
-  {
-    name: "Asia/Srednekolymsk",
-    gmtOffset: "GMT+11:00",
-    value: "Asia/Srednekolymsk",
-  },
-  {
-    name: "Asia/Taipei",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Taipei",
-  },
-  {
-    name: "Asia/Tashkent",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Tashkent",
-  },
-  {
-    name: "Asia/Tbilisi",
-    gmtOffset: "GMT+04:00",
-    value: "Asia/Tbilisi",
-  },
-  {
-    name: "Asia/Tehran",
-    gmtOffset: "GMT+03:30",
-    value: "Asia/Tehran",
-  },
-  {
-    name: "Asia/Tel_Aviv",
-    gmtOffset: "GMT+03:00",
-    value: "Asia/Tel_Aviv",
-  },
-  {
-    name: "Asia/Thimbu",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Thimbu",
-  },
-  {
-    name: "Asia/Thimphu",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Thimphu",
-  },
-  {
-    name: "Asia/Tokyo",
-    gmtOffset: "GMT+09:00",
-    value: "Asia/Tokyo",
-  },
-  {
-    name: "Asia/Tomsk",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Tomsk",
-  },
-  {
-    name: "Asia/Ujung_Pandang",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Ujung_Pandang",
-  },
-  {
-    name: "Asia/Ulaanbaatar",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Ulaanbaatar",
-  },
-  {
-    name: "Asia/Ulan_Bator",
-    gmtOffset: "GMT+08:00",
-    value: "Asia/Ulan_Bator",
-  },
-  {
-    name: "Asia/Urumqi",
-    gmtOffset: "GMT+06:00",
-    value: "Asia/Urumqi",
-  },
-  {
-    name: "Asia/Ust-Nera",
-    gmtOffset: "GMT+10:00",
-    value: "Asia/Ust-Nera",
-  },
-  {
-    name: "Asia/Vientiane",
-    gmtOffset: "GMT+07:00",
-    value: "Asia/Vientiane",
-  },
-  {
-    name: "Asia/Vladivostok",
-    gmtOffset: "GMT+10:00",
-    value: "Asia/Vladivostok",
-  },
-  {
-    name: "Asia/Yakutsk",
-    gmtOffset: "GMT+09:00",
-    value: "Asia/Yakutsk",
-  },
-  {
-    name: "Asia/Yangon",
-    gmtOffset: "GMT+06:30",
-    value: "Asia/Yangon",
-  },
-  {
-    name: "Asia/Yekaterinburg",
-    gmtOffset: "GMT+05:00",
-    value: "Asia/Yekaterinburg",
-  },
-  {
-    name: "Asia/Yerevan",
-    gmtOffset: "GMT+04:00",
-    value: "Asia/Yerevan",
-  },
-  {
-    name: "Atlantic/Azores",
-    gmtOffset: "GMT-01:00",
-    value: "Atlantic/Azores",
-  },
-  {
-    name: "Atlantic/Bermuda",
-    gmtOffset: "GMT-03:00",
-    value: "Atlantic/Bermuda",
-  },
-  {
-    name: "Atlantic/Canary",
-    gmtOffset: "GMT",
-    value: "Atlantic/Canary",
-  },
-  {
-    name: "Atlantic/Cape_Verde",
-    gmtOffset: "GMT-01:00",
-    value: "Atlantic/Cape_Verde",
-  },
-  {
-    name: "Atlantic/Faeroe",
-    gmtOffset: "GMT",
-    value: "Atlantic/Faeroe",
-  },
-  {
-    name: "Atlantic/Faroe",
-    gmtOffset: "GMT",
-    value: "Atlantic/Faroe",
-  },
-  {
-    name: "Atlantic/Jan_Mayen",
-    gmtOffset: "GMT+01:00",
-    value: "Atlantic/Jan_Mayen",
-  },
-  {
-    name: "Atlantic/Madeira",
-    gmtOffset: "GMT",
-    value: "Atlantic/Madeira",
-  },
-  {
-    name: "Atlantic/Reykjavik",
-    gmtOffset: "GMT",
-    value: "Atlantic/Reykjavik",
-  },
-  {
-    name: "Atlantic/South_Georgia",
-    gmtOffset: "GMT-02:00",
-    value: "Atlantic/South_Georgia",
-  },
-  {
-    name: "Atlantic/St_Helena",
-    gmtOffset: "GMT",
-    value: "Atlantic/St_Helena",
-  },
-  {
-    name: "Atlantic/Stanley",
-    gmtOffset: "GMT-03:00",
-    value: "Atlantic/Stanley",
-  },
-  {
-    name: "Australia/ACT",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/ACT",
-  },
-  {
-    name: "Australia/Adelaide",
-    gmtOffset: "GMT+10:30",
-    value: "Australia/Adelaide",
-  },
-  {
-    name: "Australia/Brisbane",
-    gmtOffset: "GMT+10:00",
-    value: "Australia/Brisbane",
-  },
-  {
-    name: "Australia/Broken_Hill",
-    gmtOffset: "GMT+10:30",
-    value: "Australia/Broken_Hill",
-  },
-  {
-    name: "Australia/Canberra",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/Canberra",
-  },
-  {
-    name: "Australia/Currie",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/Currie",
-  },
-  {
-    name: "Australia/Darwin",
-    gmtOffset: "GMT+09:30",
-    value: "Australia/Darwin",
-  },
-  {
-    name: "Australia/Eucla",
-    gmtOffset: "GMT+08:45",
-    value: "Australia/Eucla",
-  },
-  {
-    name: "Australia/Hobart",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/Hobart",
-  },
-  {
-    name: "Australia/LHI",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/LHI",
-  },
-  {
-    name: "Australia/Lindeman",
-    gmtOffset: "GMT+10:00",
-    value: "Australia/Lindeman",
-  },
-  {
-    name: "Australia/Lord_Howe",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/Lord_Howe",
-  },
-  {
-    name: "Australia/Melbourne",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/Melbourne",
-  },
-  {
-    name: "Australia/NSW",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/NSW",
-  },
-  {
-    name: "Australia/North",
-    gmtOffset: "GMT+09:30",
-    value: "Australia/North",
-  },
-  {
-    name: "Australia/Perth",
-    gmtOffset: "GMT+08:00",
-    value: "Australia/Perth",
-  },
-  {
-    name: "Australia/Queensland",
-    gmtOffset: "GMT+10:00",
-    value: "Australia/Queensland",
-  },
-  {
-    name: "Australia/South",
-    gmtOffset: "GMT+10:30",
-    value: "Australia/South",
-  },
-  {
-    name: "Australia/Sydney",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/Sydney",
-  },
-  {
-    name: "Australia/Tasmania",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/Tasmania",
-  },
-  {
-    name: "Australia/Victoria",
-    gmtOffset: "GMT+11:00",
-    value: "Australia/Victoria",
-  },
-  {
-    name: "Australia/West",
-    gmtOffset: "GMT+08:00",
-    value: "Australia/West",
-  },
-  {
-    name: "Australia/Yancowinna",
-    gmtOffset: "GMT+10:30",
-    value: "Australia/Yancowinna",
-  },
-  {
-    name: "Brazil/Acre",
-    gmtOffset: "GMT-05:00",
-    value: "Brazil/Acre",
-  },
-  {
-    name: "Brazil/DeNoronha",
-    gmtOffset: "GMT-02:00",
-    value: "Brazil/DeNoronha",
-  },
-  {
-    name: "Brazil/East",
-    gmtOffset: "GMT-03:00",
-    value: "Brazil/East",
-  },
-  {
-    name: "Brazil/West",
-    gmtOffset: "GMT-04:00",
-    value: "Brazil/West",
-  },
-  {
-    name: "CET",
-    gmtOffset: "GMT+01:00",
-    value: "CET",
-  },
-  {
-    name: "CST6CDT",
-    gmtOffset: "GMT-06:00",
-    value: "CST6CDT",
-  },
-  {
-    name: "Canada/Atlantic",
-    gmtOffset: "GMT-03:00",
-    value: "Canada/Atlantic",
-  },
-  {
-    name: "Canada/Central",
-    gmtOffset: "GMT-06:00",
-    value: "Canada/Central",
-  },
-  {
-    name: "Canada/Eastern",
-    gmtOffset: "GMT-04:00",
-    value: "Canada/Eastern",
-  },
-  {
-    name: "Canada/Mountain",
-    gmtOffset: "GMT-07:00",
-    value: "Canada/Mountain",
-  },
-  {
-    name: "Canada/Newfoundland",
-    gmtOffset: "GMT-02:30",
-    value: "Canada/Newfoundland",
-  },
-  {
-    name: "Canada/Pacific",
-    gmtOffset: "GMT-07:00",
-    value: "Canada/Pacific",
-  },
-  {
-    name: "Canada/Saskatchewan",
-    gmtOffset: "GMT-06:00",
-    value: "Canada/Saskatchewan",
-  },
-  {
-    name: "Canada/Yukon",
-    gmtOffset: "GMT-07:00",
-    value: "Canada/Yukon",
-  },
-  {
-    name: "Chile/Continental",
-    gmtOffset: "GMT-04:00",
-    value: "Chile/Continental",
-  },
-  {
-    name: "Chile/EasterIsland",
-    gmtOffset: "GMT-06:00",
-    value: "Chile/EasterIsland",
-  },
-  {
-    name: "Cuba",
-    gmtOffset: "GMT-04:00",
-    value: "Cuba",
-  },
-  {
-    name: "EET",
-    gmtOffset: "GMT+02:00",
-    value: "EET",
-  },
-  {
-    name: "EST",
-    gmtOffset: "GMT-05:00",
-    value: "EST",
-  },
-  {
-    name: "EST5EDT",
-    gmtOffset: "GMT-05:00",
-    value: "EST5EDT",
-  },
-  {
-    name: "Egypt",
-    gmtOffset: "GMT+02:00",
-    value: "Egypt",
-  },
-  {
-    name: "Eire",
-    gmtOffset: "GMT",
-    value: "Eire",
-  },
-  {
-    name: "Etc/GMT",
-    gmtOffset: "GMT",
-    value: "Etc/GMT",
-  },
-  {
-    name: "Etc/GMT+0",
-    gmtOffset: "GMT",
-    value: "Etc/GMT+0",
-  },
-  {
-    name: "Etc/GMT+1",
-    gmtOffset: "GMT-01:00",
-    value: "Etc/GMT+1",
-  },
-  {
-    name: "Etc/GMT+10",
-    gmtOffset: "GMT-10:00",
-    value: "Etc/GMT+10",
-  },
-  {
-    name: "Etc/GMT+11",
-    gmtOffset: "GMT-11:00",
-    value: "Etc/GMT+11",
-  },
-  {
-    name: "Etc/GMT+12",
-    gmtOffset: "GMT-12:00",
-    value: "Etc/GMT+12",
-  },
-  {
-    name: "Etc/GMT+2",
-    gmtOffset: "GMT-02:00",
-    value: "Etc/GMT+2",
-  },
-  {
-    name: "Etc/GMT+3",
-    gmtOffset: "GMT-03:00",
-    value: "Etc/GMT+3",
-  },
-  {
-    name: "Etc/GMT+4",
-    gmtOffset: "GMT-04:00",
-    value: "Etc/GMT+4",
-  },
-  {
-    name: "Etc/GMT+5",
-    gmtOffset: "GMT-05:00",
-    value: "Etc/GMT+5",
-  },
-  {
-    name: "Etc/GMT+6",
-    gmtOffset: "GMT-06:00",
-    value: "Etc/GMT+6",
-  },
-  {
-    name: "Etc/GMT+7",
-    gmtOffset: "GMT-07:00",
-    value: "Etc/GMT+7",
-  },
-  {
-    name: "Etc/GMT+8",
-    gmtOffset: "GMT-08:00",
-    value: "Etc/GMT+8",
-  },
-  {
-    name: "Etc/GMT+9",
-    gmtOffset: "GMT-09:00",
-    value: "Etc/GMT+9",
-  },
-  {
-    name: "Etc/GMT-0",
-    gmtOffset: "GMT",
-    value: "Etc/GMT-0",
-  },
-  {
-    name: "Etc/GMT-1",
-    gmtOffset: "GMT+01:00",
-    value: "Etc/GMT-1",
-  },
-  {
-    name: "Etc/GMT-10",
-    gmtOffset: "GMT+10:00",
-    value: "Etc/GMT-10",
-  },
-  {
-    name: "Etc/GMT-11",
-    gmtOffset: "GMT+11:00",
-    value: "Etc/GMT-11",
-  },
-  {
-    name: "Etc/GMT-12",
-    gmtOffset: "GMT+12:00",
-    value: "Etc/GMT-12",
-  },
-  {
-    name: "Etc/GMT-13",
-    gmtOffset: "GMT+13:00",
-    value: "Etc/GMT-13",
-  },
-  {
-    name: "Etc/GMT-14",
-    gmtOffset: "GMT+14:00",
-    value: "Etc/GMT-14",
-  },
-  {
-    name: "Etc/GMT-2",
-    gmtOffset: "GMT+02:00",
-    value: "Etc/GMT-2",
-  },
-  {
-    name: "Etc/GMT-3",
-    gmtOffset: "GMT+03:00",
-    value: "Etc/GMT-3",
-  },
-  {
-    name: "Etc/GMT-4",
-    gmtOffset: "GMT+04:00",
-    value: "Etc/GMT-4",
-  },
-  {
-    name: "Etc/GMT-5",
-    gmtOffset: "GMT+05:00",
-    value: "Etc/GMT-5",
-  },
-  {
-    name: "Etc/GMT-6",
-    gmtOffset: "GMT+06:00",
-    value: "Etc/GMT-6",
-  },
-  {
-    name: "Etc/GMT-7",
-    gmtOffset: "GMT+07:00",
-    value: "Etc/GMT-7",
-  },
-  {
-    name: "Etc/GMT-8",
-    gmtOffset: "GMT+08:00",
-    value: "Etc/GMT-8",
-  },
-  {
-    name: "Etc/GMT-9",
-    gmtOffset: "GMT+09:00",
-    value: "Etc/GMT-9",
-  },
-  {
-    name: "Etc/GMT0",
-    gmtOffset: "GMT",
-    value: "Etc/GMT0",
-  },
-  {
-    name: "Etc/Greenwich",
-    gmtOffset: "GMT",
-    value: "Etc/Greenwich",
-  },
-  {
-    name: "Etc/UCT",
-    gmtOffset: "GMT",
-    value: "Etc/UCT",
-  },
-  {
-    name: "Etc/UTC",
-    gmtOffset: "GMT",
-    value: "Etc/UTC",
-  },
-  {
-    name: "Etc/Universal",
-    gmtOffset: "GMT",
-    value: "Etc/Universal",
-  },
-  {
-    name: "Etc/Zulu",
-    gmtOffset: "GMT",
-    value: "Etc/Zulu",
-  },
-  {
-    name: "Europe/Amsterdam",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Amsterdam",
-  },
-  {
-    name: "Europe/Andorra",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Andorra",
-  },
-  {
-    name: "Europe/Astrakhan",
-    gmtOffset: "GMT+04:00",
-    value: "Europe/Astrakhan",
-  },
-  {
-    name: "Europe/Athens",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Athens",
-  },
-  {
-    name: "Europe/Belfast",
-    gmtOffset: "GMT",
-    value: "Europe/Belfast",
-  },
-  {
-    name: "Europe/Belgrade",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Belgrade",
-  },
-  {
-    name: "Europe/Berlin",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Berlin",
-  },
-  {
-    name: "Europe/Bratislava",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Bratislava",
-  },
-  {
-    name: "Europe/Brussels",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Brussels",
-  },
-  {
-    name: "Europe/Bucharest",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Bucharest",
-  },
-  {
-    name: "Europe/Budapest",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Budapest",
-  },
-  {
-    name: "Europe/Busingen",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Busingen",
-  },
-  {
-    name: "Europe/Chisinau",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Chisinau",
-  },
-  {
-    name: "Europe/Copenhagen",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Copenhagen",
-  },
-  {
-    name: "Europe/Dublin",
-    gmtOffset: "GMT",
-    value: "Europe/Dublin",
-  },
-  {
-    name: "Europe/Gibraltar",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Gibraltar",
-  },
-  {
-    name: "Europe/Guernsey",
-    gmtOffset: "GMT",
-    value: "Europe/Guernsey",
-  },
-  {
-    name: "Europe/Helsinki",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Helsinki",
-  },
-  {
-    name: "Europe/Isle_of_Man",
-    gmtOffset: "GMT",
-    value: "Europe/Isle_of_Man",
-  },
-  {
-    name: "Europe/Istanbul",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Istanbul",
-  },
-  {
-    name: "Europe/Jersey",
-    gmtOffset: "GMT",
-    value: "Europe/Jersey",
-  },
-  {
-    name: "Europe/Kaliningrad",
-    gmtOffset: "GMT+02:00",
-    value: "Europe/Kaliningrad",
-  },
-  {
-    name: "Europe/Kiev",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Kiev",
-  },
-  {
-    name: "Europe/Kirov",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Kirov",
-  },
-  {
-    name: "Europe/Lisbon",
-    gmtOffset: "GMT",
-    value: "Europe/Lisbon",
-  },
-  {
-    name: "Europe/Ljubljana",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Ljubljana",
-  },
-  {
-    name: "Europe/London",
-    gmtOffset: "GMT",
-    value: "Europe/London",
-  },
-  {
-    name: "Europe/Luxembourg",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Luxembourg",
-  },
-  {
-    name: "Europe/Madrid",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Madrid",
-  },
-  {
-    name: "Europe/Malta",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Malta",
-  },
-  {
-    name: "Europe/Mariehamn",
-    gmtOffset: "GMT+02:00",
-    value: "Europe/Mariehamn",
-  },
-  {
-    name: "Europe/Minsk",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Minsk",
-  },
-  {
-    name: "Europe/Monaco",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Monaco",
-  },
-  {
-    name: "Europe/Moscow",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Moscow",
-  },
-  {
-    name: "Europe/Nicosia",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Nicosia",
-  },
-  {
-    name: "Europe/Oslo",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Oslo",
-  },
-  {
-    name: "Europe/Paris",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Paris",
-  },
-  {
-    name: "Europe/Podgorica",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Podgorica",
-  },
-  {
-    name: "Europe/Prague",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Prague",
-  },
-  {
-    name: "Europe/Riga",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Riga",
-  },
-  {
-    name: "Europe/Rome",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Rome",
-  },
-  {
-    name: "Europe/Samara",
-    gmtOffset: "GMT+04:00",
-    value: "Europe/Samara",
-  },
-  {
-    name: "Europe/San_Marino",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/San_Marino",
-  },
-  {
-    name: "Europe/Sarajevo",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Sarajevo",
-  },
-  {
-    name: "Europe/Saratov",
-    gmtOffset: "GMT+04:00",
-    value: "Europe/Saratov",
-  },
-  {
-    name: "Europe/Simferopol",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Simferopol",
-  },
-  {
-    name: "Europe/Skopje",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Skopje",
-  },
-  {
-    name: "Europe/Sofia",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Sofia",
-  },
-  {
-    name: "Europe/Stockholm",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Stockholm",
-  },
-  {
-    name: "Europe/Tallinn",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Tallinn",
-  },
-  {
-    name: "Europe/Tirane",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Tirane",
-  },
-  {
-    name: "Europe/Tiraspol",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Tiraspol",
-  },
-  {
-    name: "Europe/Ulyanovsk",
-    gmtOffset: "GMT+04:00",
-    value: "Europe/Ulyanovsk",
-  },
-  {
-    name: "Europe/Uzhgorod",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Uzhgorod",
-  },
-  {
-    name: "Europe/Vaduz",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Vaduz",
-  },
-  {
-    name: "Europe/Vatican",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Vatican",
-  },
-  {
-    name: "Europe/Vienna",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Vienna",
-  },
-  {
-    name: "Europe/Vilnius",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Vilnius",
-  },
-  {
-    name: "Europe/Volgograd",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Volgograd",
-  },
-  {
-    name: "Europe/Warsaw",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Warsaw",
-  },
-  {
-    name: "Europe/Zagreb",
-    gmtOffset: "GMT+01:00",
-    value: "Europe/Zagreb",
-  },
-  {
-    name: "Europe/Zaporozhye",
-    gmtOffset: "GMT+03:00",
-    value: "Europe/Zaporozhye",
-  },
-  {
-    name: "Europe/Zurich",
-    gmtOffset: "GMT+02:00",
-    value: "Europe/Zurich",
-  },
-  {
-    name: "GB",
-    gmtOffset: "GMT+01:00",
-    value: "GB",
-  },
-  {
-    name: "GB-Eire",
-    gmtOffset: "GMT+01:00",
-    value: "GB-Eire",
-  },
-  {
-    name: "GMT",
-    gmtOffset: "GMT",
-    value: "GMT",
-  },
-  {
-    name: "GMT+0",
-    gmtOffset: "GMT",
-    value: "GMT+0",
-  },
-  {
-    name: "GMT-0",
-    gmtOffset: "GMT",
-    value: "GMT-0",
-  },
-  {
-    name: "GMT0",
-    gmtOffset: "GMT",
-    value: "GMT0",
-  },
-  {
-    name: "Greenwich",
-    gmtOffset: "GMT",
-    value: "Greenwich",
-  },
-  {
-    name: "HST",
-    gmtOffset: "GMT-10:00",
-    value: "HST",
-  },
-  {
-    name: "Hongkong",
-    gmtOffset: "GMT+08:00",
-    value: "Hongkong",
-  },
-  {
-    name: "Iceland",
-    gmtOffset: "GMT",
-    value: "Iceland",
-  },
-  {
-    name: "Indian/Antananarivo",
-    gmtOffset: "GMT+03:00",
-    value: "Indian/Antananarivo",
-  },
-  {
-    name: "Indian/Chagos",
-    gmtOffset: "GMT+06:00",
-    value: "Indian/Chagos",
-  },
-  {
-    name: "Indian/Christmas",
-    gmtOffset: "GMT+07:00",
-    value: "Indian/Christmas",
-  },
-  {
-    name: "Indian/Cocos",
-    gmtOffset: "GMT+06:30",
-    value: "Indian/Cocos",
-  },
-  {
-    name: "Indian/Comoro",
-    gmtOffset: "GMT+03:00",
-    value: "Indian/Comoro",
-  },
-  {
-    name: "Indian/Kerguelen",
-    gmtOffset: "GMT+05:00",
-    value: "Indian/Kerguelen",
-  },
-  {
-    name: "Indian/Mahe",
-    gmtOffset: "GMT+04:00",
-    value: "Indian/Mahe",
-  },
-  {
-    name: "Indian/Maldives",
-    gmtOffset: "GMT+05:00",
-    value: "Indian/Maldives",
-  },
-  {
-    name: "Indian/Mauritius",
-    gmtOffset: "GMT+04:00",
-    value: "Indian/Mauritius",
-  },
-  {
-    name: "Indian/Mayotte",
-    gmtOffset: "GMT+03:00",
-    value: "Indian/Mayotte",
-  },
-  {
-    name: "Indian/Reunion",
-    gmtOffset: "GMT+04:00",
-    value: "Indian/Reunion",
-  },
-  {
-    name: "Iran",
-    gmtOffset: "GMT+03:30",
-    value: "Iran",
-  },
-  {
-    name: "Israel",
-    gmtOffset: "GMT+03:00",
-    value: "Israel",
-  },
-  {
-    name: "Jamaica",
-    gmtOffset: "GMT-05:00",
-    value: "Jamaica",
-  },
-  {
-    name: "Japan",
-    gmtOffset: "GMT+09:00",
-    value: "Japan",
-  },
-  {
-    name: "Kwajalein",
-    gmtOffset: "GMT+12:00",
-    value: "Kwajalein",
-  },
-  {
-    name: "Libya",
-    gmtOffset: "GMT+02:00",
-    value: "Libya",
-  },
-  {
-    name: "MET",
-    gmtOffset: "GMT+02:00",
-    value: "MET",
-  },
-  {
-    name: "MST",
-    gmtOffset: "GMT-07:00",
-    value: "MST",
-  },
-  {
-    name: "MST7MDT",
-    gmtOffset: "GMT-06:00",
-    value: "MST7MDT",
-  },
-  {
-    name: "Mexico/BajaNorte",
-    gmtOffset: "GMT-07:00",
-    value: "Mexico/BajaNorte",
-  },
-  {
-    name: "Mexico/BajaSur",
-    gmtOffset: "GMT-07:00",
-    value: "Mexico/BajaSur",
-  },
-  {
-    name: "Mexico/General",
-    gmtOffset: "GMT-06:00",
-    value: "Mexico/General",
-  },
-  {
-    name: "NZ",
-    gmtOffset: "GMT+12:00",
-    value: "NZ",
-  },
-  {
-    name: "NZ-CHAT",
-    gmtOffset: "GMT+12:45",
-    value: "NZ-CHAT",
-  },
-  {
-    name: "Navajo",
-    gmtOffset: "GMT-06:00",
-    value: "Navajo",
-  },
-  {
-    name: "PRC",
-    gmtOffset: "GMT+08:00",
-    value: "PRC",
-  },
-  {
-    name: "PST8PDT",
-    gmtOffset: "GMT-07:00",
-    value: "PST8PDT",
-  },
-  {
-    name: "Pacific/Apia",
-    gmtOffset: "GMT+13:00",
-    value: "Pacific/Apia",
-  },
-  {
-    name: "Pacific/Auckland",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Auckland",
-  },
-  {
-    name: "Pacific/Bougainville",
-    gmtOffset: "GMT+11:00",
-    value: "Pacific/Bougainville",
-  },
-  {
-    name: "Pacific/Chatham",
-    gmtOffset: "GMT+12:45",
-    value: "Pacific/Chatham",
-  },
-  {
-    name: "Pacific/Chuuk",
-    gmtOffset: "GMT+10:00",
-    value: "Pacific/Chuuk",
-  },
-  {
-    name: "Pacific/Easter",
-    gmtOffset: "GMT-06:00",
-    value: "Pacific/Easter",
-  },
-  {
-    name: "Pacific/Efate",
-    gmtOffset: "GMT+11:00",
-    value: "Pacific/Efate",
-  },
-  {
-    name: "Pacific/Enderbury",
-    gmtOffset: "GMT+13:00",
-    value: "Pacific/Enderbury",
-  },
-  {
-    name: "Pacific/Fakaofo",
-    gmtOffset: "GMT+13:00",
-    value: "Pacific/Fakaofo",
-  },
-  {
-    name: "Pacific/Fiji",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Fiji",
-  },
-  {
-    name: "Pacific/Funafuti",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Funafuti",
-  },
-  {
-    name: "Pacific/Galapagos",
-    gmtOffset: "GMT-06:00",
-    value: "Pacific/Galapagos",
-  },
-  {
-    name: "Pacific/Gambier",
-    gmtOffset: "GMT-09:00",
-    value: "Pacific/Gambier",
-  },
-  {
-    name: "Pacific/Guadalcanal",
-    gmtOffset: "GMT+11:00",
-    value: "Pacific/Guadalcanal",
-  },
-  {
-    name: "Pacific/Guam",
-    gmtOffset: "GMT+10:00",
-    value: "Pacific/Guam",
-  },
-  {
-    name: "Pacific/Honolulu",
-    gmtOffset: "GMT-10:00",
-    value: "Pacific/Honolulu",
-  },
-  {
-    name: "Pacific/Johnston",
-    gmtOffset: "GMT-10:00",
-    value: "Pacific/Johnston",
-  },
-  {
-    name: "Pacific/Kanton",
-    gmtOffset: "GMT+13:00",
-    value: "Pacific/Kanton",
-  },
-  {
-    name: "Pacific/Kiritimati",
-    gmtOffset: "GMT+14:00",
-    value: "Pacific/Kiritimati",
-  },
-  {
-    name: "Pacific/Kosrae",
-    gmtOffset: "GMT+11:00",
-    value: "Pacific/Kosrae",
-  },
-  {
-    name: "Pacific/Kwajalein",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Kwajalein",
-  },
-  {
-    name: "Pacific/Majuro",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Majuro",
-  },
-  {
-    name: "Pacific/Marquesas",
-    gmtOffset: "GMT-09:30",
-    value: "Pacific/Marquesas",
-  },
-  {
-    name: "Pacific/Midway",
-    gmtOffset: "GMT-11:00",
-    value: "Pacific/Midway",
-  },
-  {
-    name: "Pacific/Nauru",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Nauru",
-  },
-  {
-    name: "Pacific/Niue",
-    gmtOffset: "GMT-11:00",
-    value: "Pacific/Niue",
-  },
-  {
-    name: "Pacific/Norfolk",
-    gmtOffset: "GMT+11:00",
-    value: "Pacific/Norfolk",
-  },
-  {
-    name: "Pacific/Noumea",
-    gmtOffset: "GMT+11:00",
-    value: "Pacific/Noumea",
-  },
-  {
-    name: "Pacific/Pago_Pago",
-    gmtOffset: "GMT-11:00",
-    value: "Pacific/Pago_Pago",
-  },
-  {
-    name: "Pacific/Palau",
-    gmtOffset: "GMT+09:00",
-    value: "Pacific/Palau",
-  },
-  {
-    name: "Pacific/Pitcairn",
-    gmtOffset: "GMT-08:00",
-    value: "Pacific/Pitcairn",
-  },
-  {
-    name: "Pacific/Pohnpei",
-    gmtOffset: "GMT+11:00",
-    value: "Pacific/Pohnpei",
-  },
-  {
-    name: "Pacific/Ponape",
-    gmtOffset: "GMT+11:00",
-    value: "Pacific/Ponape",
-  },
-  {
-    name: "Pacific/Port_Moresby",
-    gmtOffset: "GMT+10:00",
-    value: "Pacific/Port_Moresby",
-  },
-  {
-    name: "Pacific/Rarotonga",
-    gmtOffset: "GMT-10:00",
-    value: "Pacific/Rarotonga",
-  },
-  {
-    name: "Pacific/Saipan",
-    gmtOffset: "GMT+10:00",
-    value: "Pacific/Saipan",
-  },
-  {
-    name: "Pacific/Samoa",
-    gmtOffset: "GMT-11:00",
-    value: "Pacific/Samoa",
-  },
-  {
-    name: "Pacific/Tahiti",
-    gmtOffset: "GMT-10:00",
-    value: "Pacific/Tahiti",
-  },
-  {
-    name: "Pacific/Tarawa",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Tarawa",
-  },
-  {
-    name: "Pacific/Tongatapu",
-    gmtOffset: "GMT+13:00",
-    value: "Pacific/Tongatapu",
-  },
-  {
-    name: "Pacific/Truk",
-    gmtOffset: "GMT+10:00",
-    value: "Pacific/Truk",
-  },
-  {
-    name: "Pacific/Wake",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Wake",
-  },
-  {
-    name: "Pacific/Wallis",
-    gmtOffset: "GMT+12:00",
-    value: "Pacific/Wallis",
-  },
-  {
-    name: "Pacific/Yap",
-    gmtOffset: "GMT+10:00",
-    value: "Pacific/Yap",
-  },
-  {
-    name: "Poland",
-    gmtOffset: "GMT+02:00",
-    value: "Poland",
-  },
-  {
-    name: "Portugal",
-    gmtOffset: "GMT+01:00",
-    value: "Portugal",
-  },
-  {
-    name: "ROC",
-    gmtOffset: "GMT+08:00",
-    value: "ROC",
-  },
-  {
-    name: "ROK",
-    gmtOffset: "GMT+09:00",
-    value: "ROK",
-  },
-  {
-    name: "Singapore",
-    gmtOffset: "GMT+08:00",
-    value: "Singapore",
-  },
-  {
-    name: "Turkey",
-    gmtOffset: "GMT+03:00",
-    value: "Turkey",
-  },
-  {
-    name: "UCT",
-    gmtOffset: "GMT",
-    value: "UCT",
-  },
-  {
-    name: "US/Alaska",
-    gmtOffset: "GMT-08:00",
-    value: "US/Alaska",
-  },
-  {
-    name: "US/Aleutian",
-    gmtOffset: "GMT-09:00",
-    value: "US/Aleutian",
-  },
-  {
-    name: "US/Arizona",
-    gmtOffset: "GMT-07:00",
-    value: "US/Arizona",
-  },
-  {
-    name: "US/Central",
-    gmtOffset: "GMT-05:00",
-    value: "US/Central",
-  },
-  {
-    name: "US/East-Indiana",
-    gmtOffset: "GMT-04:00",
-    value: "US/East-Indiana",
-  },
-  {
-    name: "US/Eastern",
-    gmtOffset: "GMT-04:00",
-    value: "US/Eastern",
-  },
-  {
-    name: "US/Hawaii",
-    gmtOffset: "GMT-10:00",
-    value: "US/Hawaii",
-  },
-  {
-    name: "US/Indiana-Starke",
-    gmtOffset: "GMT-05:00",
-    value: "US/Indiana-Starke",
-  },
-  {
-    name: "US/Michigan",
-    gmtOffset: "GMT-04:00",
-    value: "US/Michigan",
-  },
-  {
-    name: "US/Mountain",
-    gmtOffset: "GMT-06:00",
-    value: "US/Mountain",
-  },
-  {
-    name: "US/Pacific",
-    gmtOffset: "GMT-07:00",
-    value: "US/Pacific",
-  },
-  {
-    name: "US/Samoa",
-    gmtOffset: "GMT-11:00",
-    value: "US/Samoa",
-  },
-  {
-    name: "UTC",
-    gmtOffset: "GMT",
-    value: "UTC",
-  },
-  {
-    name: "Universal",
-    gmtOffset: "GMT",
-    value: "Universal",
-  },
-  {
-    name: "W-SU",
-    gmtOffset: "GMT+03:00",
-    value: "W-SU",
-  },
-  {
-    name: "WET",
-    gmtOffset: "GMT+01:00",
-    value: "WET",
-  },
-  {
-    name: "Zulu",
-    gmtOffset: "GMT",
-    value: "Zulu",
-  },
-];
diff --git a/web/core/constants/views.ts b/web/core/constants/views.ts
deleted file mode 100644
index a8e501db4..000000000
--- a/web/core/constants/views.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Globe2, Lock, LucideIcon } from "lucide-react";
-import { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
-
-export enum EViewAccess {
-  PRIVATE,
-  PUBLIC,
-}
-
-export const VIEW_ACCESS_SPECIFIERS: {
-  key: EViewAccess;
-  label: string;
-  icon: LucideIcon;
-}[] = [
-  { key: EViewAccess.PUBLIC, label: "Public", icon: Globe2 },
-  { key: EViewAccess.PRIVATE, label: "Private", icon: Lock },
-];
-
-export const VIEW_SORTING_KEY_OPTIONS: {
-  key: TViewFiltersSortKey;
-  label: string;
-}[] = [
-  { key: "name", label: "Name" },
-  { key: "created_at", label: "Date created" },
-  { key: "updated_at", label: "Date modified" },
-];
-
-export const VIEW_SORT_BY_OPTIONS: {
-  key: TViewFiltersSortBy;
-  label: string;
-}[] = [
-  { key: "asc", label: "Ascending" },
-  { key: "desc", label: "Descending" },
-];
diff --git a/web/core/constants/workspace.ts b/web/core/constants/workspace.ts
deleted file mode 100644
index 3b523ffb4..000000000
--- a/web/core/constants/workspace.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-// types
-import { TStaticViewTypes } from "@plane/types";
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
-// services images
-import CSVLogo from "@/public/services/csv.svg";
-import ExcelLogo from "@/public/services/excel.svg";
-import GithubLogo from "@/public/services/github.png";
-import JiraLogo from "@/public/services/jira.svg";
-import JSONLogo from "@/public/services/json.svg";
-
-export const ROLE = {
-  [EUserPermissions.GUEST]: "Guest",
-  [EUserPermissions.MEMBER]: "Member",
-  [EUserPermissions.ADMIN]: "Admin",
-};
-
-export const ROLE_DETAILS = {
-  [EUserPermissions.GUEST]: {
-    title: "Guest",
-    description: "External members of organizations can be invited as guests.",
-  },
-  [EUserPermissions.MEMBER]: {
-    title: "Member",
-    description: "Ability to read, write, edit, and delete entities inside projects, cycles, and modules",
-  },
-  [EUserPermissions.ADMIN]: {
-    title: "Admin",
-    description: "All permissions set to true within the workspace.",
-  },
-};
-
-export const USER_ROLES = [
-  { value: "Product / Project Manager", label: "Product / Project Manager" },
-  { value: "Development / Engineering", label: "Development / Engineering" },
-  { value: "Founder / Executive", label: "Founder / Executive" },
-  { value: "Freelancer / Consultant", label: "Freelancer / Consultant" },
-  { value: "Marketing / Growth", label: "Marketing / Growth" },
-  { value: "Sales / Business Development", label: "Sales / Business Development" },
-  { value: "Support / Operations", label: "Support / Operations" },
-  { value: "Student / Professor", label: "Student / Professor" },
-  { value: "Human Resources", label: "Human Resources" },
-  { value: "Other", label: "Other" },
-];
-
-export const IMPORTERS_LIST = [
-  {
-    provider: "github",
-    type: "import",
-    title: "GitHub",
-    description: "Import issues from GitHub repositories and sync them.",
-    logo: GithubLogo,
-  },
-  {
-    provider: "jira",
-    type: "import",
-    title: "Jira",
-    description: "Import issues and epics from Jira projects and epics.",
-    logo: JiraLogo,
-  },
-];
-
-export const EXPORTERS_LIST = [
-  {
-    provider: "csv",
-    type: "export",
-    title: "CSV",
-    description: "Export issues to a CSV file.",
-    logo: CSVLogo,
-  },
-  {
-    provider: "xlsx",
-    type: "export",
-    title: "Excel",
-    description: "Export issues to a Excel file.",
-    logo: ExcelLogo,
-  },
-  {
-    provider: "json",
-    type: "export",
-    title: "JSON",
-    description: "Export issues to a JSON file.",
-    logo: JSONLogo,
-  },
-];
-
-export const DEFAULT_GLOBAL_VIEWS_LIST: {
-  key: TStaticViewTypes;
-  label: string;
-}[] = [
-  {
-    key: "all-issues",
-    label: "All issues",
-  },
-  {
-    key: "assigned",
-    label: "Assigned",
-  },
-  {
-    key: "created",
-    label: "Created",
-  },
-  {
-    key: "subscribed",
-    label: "Subscribed",
-  },
-];
diff --git a/web/core/hooks/editor/index.ts b/web/core/hooks/editor/index.ts
new file mode 100644
index 000000000..532916cd4
--- /dev/null
+++ b/web/core/hooks/editor/index.ts
@@ -0,0 +1,2 @@
+export * from "./use-editor-config";
+export * from "./use-editor-mention";
diff --git a/web/core/hooks/editor/use-editor-config.ts b/web/core/hooks/editor/use-editor-config.ts
new file mode 100644
index 000000000..166df1d5b
--- /dev/null
+++ b/web/core/hooks/editor/use-editor-config.ts
@@ -0,0 +1,96 @@
+import { useCallback } from "react";
+// plane editor
+import { TFileHandler, TReadOnlyFileHandler } from "@plane/editor";
+// helpers
+import { getEditorAssetSrc } from "@/helpers/editor.helper";
+// hooks
+import { useEditorAsset } from "@/hooks/store";
+// plane web hooks
+import { useFileSize } from "@/plane-web/hooks/use-file-size";
+// services
+import { FileService } from "@/services/file.service";
+const fileService = new FileService();
+
+type TArgs = {
+  projectId?: string;
+  uploadFile: TFileHandler["upload"];
+  workspaceId: string;
+  workspaceSlug: string;
+};
+
+export const useEditorConfig = () => {
+  // store hooks
+  const { assetsUploadPercentage } = useEditorAsset();
+  // file size
+  const { maxFileSize } = useFileSize();
+
+  const getReadOnlyEditorFileHandlers = useCallback(
+    (args: Pick<TArgs, "projectId" | "workspaceId" | "workspaceSlug">): TReadOnlyFileHandler => {
+      const { projectId, workspaceId, workspaceSlug } = args;
+
+      return {
+        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);
+          }
+        },
+      };
+    },
+    []
+  );
+
+  const getEditorFileHandlers = useCallback(
+    (args: TArgs): TFileHandler => {
+      const { projectId, uploadFile, workspaceId, workspaceSlug } = args;
+
+      return {
+        ...getReadOnlyEditorFileHandlers({
+          projectId,
+          workspaceId,
+          workspaceSlug,
+        }),
+        assetsUploadStatus: assetsUploadPercentage,
+        upload: uploadFile,
+        delete: async (src: string) => {
+          if (src?.startsWith("http")) {
+            await fileService.deleteOldWorkspaceAsset(workspaceId, src);
+          } else {
+            await fileService.deleteNewAsset(
+              getEditorAssetSrc({
+                assetId: src,
+                projectId,
+                workspaceSlug,
+              }) ?? ""
+            );
+          }
+        },
+        cancel: fileService.cancelUpload,
+        validation: {
+          maxFileSize,
+        },
+      };
+    },
+    [assetsUploadPercentage, getReadOnlyEditorFileHandlers, maxFileSize]
+  );
+
+  return {
+    getEditorFileHandlers,
+    getReadOnlyEditorFileHandlers,
+  };
+};
diff --git a/web/core/hooks/editor/use-editor-mention.tsx b/web/core/hooks/editor/use-editor-mention.tsx
new file mode 100644
index 000000000..183cc1ec9
--- /dev/null
+++ b/web/core/hooks/editor/use-editor-mention.tsx
@@ -0,0 +1,76 @@
+import { useCallback } from "react";
+// plane editor
+import { TMentionSection, TMentionSuggestion } from "@plane/editor";
+// plane types
+import { TSearchEntities, TSearchEntityRequestPayload, TSearchResponse, TUserSearchResponse } from "@plane/types";
+// plane ui
+import { Avatar } from "@plane/ui";
+// helpers
+import { getFileURL } from "@/helpers/file.helper";
+// plane web constants
+import { EDITOR_MENTION_TYPES } from "@/plane-web/constants/editor";
+// plane web hooks
+import { useAdditionalEditorMention } from "@/plane-web/hooks/use-additional-editor-mention";
+
+type TArgs = {
+  searchEntity: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
+};
+
+export const useEditorMention = (args: TArgs) => {
+  const { searchEntity } = args;
+  // additional mentions
+  const { updateAdditionalSections } = useAdditionalEditorMention();
+  // fetch mentions handler
+  const fetchMentions = useCallback(
+    async (query: string): Promise<TMentionSection[]> => {
+      try {
+        const res = await searchEntity({
+          count: 5,
+          query_type: EDITOR_MENTION_TYPES,
+          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
+                  className="flex-shrink-0"
+                  src={getFileURL(user.member__avatar_url)}
+                  name={user.member__display_name}
+                />
+              ),
+              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,
+            });
+          }
+        });
+        updateAdditionalSections({
+          response: res,
+          sections: suggestionSections,
+        });
+        return suggestionSections;
+      } catch (error) {
+        console.error("Error in fetching mentions for project pages:", error);
+        throw error;
+      }
+    },
+    [searchEntity, updateAdditionalSections]
+  );
+
+  return {
+    fetchMentions,
+  };
+};
diff --git a/web/core/hooks/store/index.ts b/web/core/hooks/store/index.ts
index dc7861724..7f2d3b89d 100644
--- a/web/core/hooks/store/index.ts
+++ b/web/core/hooks/store/index.ts
@@ -1,12 +1,12 @@
 export * from "./estimates";
 export * from "./notifications";
-export * from "./pages";
 export * from "./use-app-theme";
 export * from "./use-calendar-view";
 export * from "./use-command-palette";
 export * from "./use-cycle";
 export * from "./use-cycle-filter";
 export * from "./use-dashboard";
+export * from "./use-editor-asset";
 export * from "./use-event-tracker";
 export * from "./use-global-view";
 export * from "./use-inbox-issues";
@@ -16,7 +16,6 @@ export * from "./use-issues";
 export * from "./use-kanban-view";
 export * from "./use-label";
 export * from "./use-member";
-export * from "./use-mention";
 export * from "./use-module";
 export * from "./use-module-filter";
 export * from "./use-multiple-select-store";
diff --git a/web/core/hooks/store/pages/index.ts b/web/core/hooks/store/pages/index.ts
deleted file mode 100644
index 06f4ab447..000000000
--- a/web/core/hooks/store/pages/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./use-page";
-export * from "./use-project-page";
diff --git a/web/core/hooks/store/pages/use-page.ts b/web/core/hooks/store/pages/use-page.ts
deleted file mode 100644
index 97e0ef98a..000000000
--- a/web/core/hooks/store/pages/use-page.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useContext } from "react";
-// mobx store
-import { StoreContext } from "@/lib/store-context";
-// mobx store
-import { IPage } from "@/store/pages/page";
-
-export const usePage = (pageId: string | undefined): IPage => {
-  const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("usePage must be used within StoreProvider");
-
-  if (!pageId) return {} as IPage;
-
-  return context.projectPages.data?.[pageId] ?? {};
-};
diff --git a/web/core/hooks/store/pages/use-project-page.ts b/web/core/hooks/store/pages/use-project-page.ts
deleted file mode 100644
index c6fb088d1..000000000
--- a/web/core/hooks/store/pages/use-project-page.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useContext } from "react";
-// context
-import { StoreContext } from "@/lib/store-context";
-// mobx store
-import { IProjectPageStore } from "@/store/pages/project-page.store";
-
-export const useProjectPages = (): IProjectPageStore => {
-  const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useProjectPage must be used within StoreProvider");
-  return context.projectPages;
-};
diff --git a/web/core/hooks/store/use-command-palette.ts b/web/core/hooks/store/use-command-palette.ts
index 7b399387b..cdf6a09ec 100644
--- a/web/core/hooks/store/use-command-palette.ts
+++ b/web/core/hooks/store/use-command-palette.ts
@@ -2,7 +2,7 @@ import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
 // types
-import { ICommandPaletteStore } from "@/store/command-palette.store";
+import { ICommandPaletteStore } from "@/plane-web/store/command-palette.store";
 
 export const useCommandPalette = (): ICommandPaletteStore => {
   const context = useContext(StoreContext);
diff --git a/web/core/hooks/store/use-cycle.ts b/web/core/hooks/store/use-cycle.ts
index b77440bdd..08a6daa02 100644
--- a/web/core/hooks/store/use-cycle.ts
+++ b/web/core/hooks/store/use-cycle.ts
@@ -2,7 +2,7 @@ import { useContext } from "react";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
 // types
-import { ICycleStore } from "@/store/cycle.store";
+import { ICycleStore } from "@/plane-web/store/cycle";
 
 export const useCycle = (): ICycleStore => {
   const context = useContext(StoreContext);
diff --git a/web/core/hooks/store/use-editor-asset.ts b/web/core/hooks/store/use-editor-asset.ts
new file mode 100644
index 000000000..7c5af3696
--- /dev/null
+++ b/web/core/hooks/store/use-editor-asset.ts
@@ -0,0 +1,10 @@
+import { useContext } from "react";
+// store
+import { StoreContext } from "@/lib/store-context";
+import { 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/web/core/hooks/store/use-home.ts b/web/core/hooks/store/use-home.ts
new file mode 100644
index 000000000..9ada6ddbd
--- /dev/null
+++ b/web/core/hooks/store/use-home.ts
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import { 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/web/core/hooks/store/use-issue-detail.ts b/web/core/hooks/store/use-issue-detail.ts
index 52e18a905..309bfedba 100644
--- a/web/core/hooks/store/use-issue-detail.ts
+++ b/web/core/hooks/store/use-issue-detail.ts
@@ -1,11 +1,14 @@
 import { useContext } from "react";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueServiceType } from "@plane/types";
 // mobx store
 import { StoreContext } from "@/lib/store-context";
 // types
 import { IIssueDetail } from "@/store/issue/issue-details/root.store";
 
-export const useIssueDetail = (): IIssueDetail => {
+export const useIssueDetail = (serviceType: TIssueServiceType = EIssueServiceType.ISSUES): IIssueDetail => {
   const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useInbox must be used within StoreProvider");
-  return context.issue.issueDetail;
+  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/web/core/hooks/store/use-issues.ts b/web/core/hooks/store/use-issues.ts
index ca40dce9d..e5842cd1c 100644
--- a/web/core/hooks/store/use-issues.ts
+++ b/web/core/hooks/store/use-issues.ts
@@ -1,10 +1,14 @@
 import { useContext } from "react";
 import merge from "lodash/merge";
-// mobx store
+import { EIssuesStoreType } from "@plane/constants";
 import { TIssueMap } from "@plane/types";
-import { EIssuesStoreType } from "@/constants/issue";
+// mobx store
 import { StoreContext } from "@/lib/store-context";
+// plane web types
+import { IProjectEpics, IProjectEpicsFilter } from "@/plane-web/store/issue/epic";
 // types
+import { ITeamIssues, ITeamIssuesFilter } from "@/plane-web/store/issue/team";
+import { ITeamViewIssues, ITeamViewIssuesFilter } from "@/plane-web/store/issue/team-views";
 import { IArchivedIssues, IArchivedIssuesFilter } from "@/store/issue/archived";
 import { ICycleIssues, ICycleIssuesFilter } from "@/store/issue/cycle";
 import { IDraftIssues, IDraftIssuesFilter } from "@/store/issue/draft";
@@ -33,6 +37,10 @@ export type TStoreIssues = {
     issues: IProfileIssues;
     issuesFilter: IProfileIssuesFilter;
   };
+  [EIssuesStoreType.TEAM]: defaultIssueStore & {
+    issues: ITeamIssues;
+    issuesFilter: ITeamIssuesFilter;
+  };
   [EIssuesStoreType.PROJECT]: defaultIssueStore & {
     issues: IProjectIssues;
     issuesFilter: IProjectIssuesFilter;
@@ -45,6 +53,10 @@ export type TStoreIssues = {
     issues: IModuleIssues;
     issuesFilter: IModuleIssuesFilter;
   };
+  [EIssuesStoreType.TEAM_VIEW]: defaultIssueStore & {
+    issues: ITeamViewIssues;
+    issuesFilter: ITeamViewIssuesFilter;
+  };
   [EIssuesStoreType.PROJECT_VIEW]: defaultIssueStore & {
     issues: IProjectViewIssues;
     issuesFilter: IProjectViewIssuesFilter;
@@ -61,6 +73,10 @@ export type TStoreIssues = {
     issues: IProjectIssues;
     issuesFilter: IProjectIssuesFilter;
   };
+  [EIssuesStoreType.EPIC]: defaultIssueStore & {
+    issues: IProjectEpics;
+    issuesFilter: IProjectEpicsFilter;
+  };
 };
 
 export const useIssues = <T extends EIssuesStoreType>(storeType?: T): TStoreIssues[T] => {
@@ -82,16 +98,16 @@ export const useIssues = <T extends EIssuesStoreType>(storeType?: T): TStoreIssu
         issues: context.issue.workspaceDraftIssues,
         issuesFilter: context.issue.workspaceDraftIssuesFilter,
       }) 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,
@@ -107,6 +123,11 @@ export const useIssues = <T extends EIssuesStoreType>(storeType?: T): TStoreIssu
         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,
@@ -122,6 +143,11 @@ export const useIssues = <T extends EIssuesStoreType>(storeType?: T): TStoreIssu
         issues: context.issue.draftIssues,
         issuesFilter: context.issue.draftIssuesFilter,
       }) as TStoreIssues[T];
+    case EIssuesStoreType.EPIC:
+      return merge(defaultStore, {
+        issues: context.issue.projectEpics,
+        issuesFilter: context.issue.projectEpicsFilter,
+      }) as TStoreIssues[T];
     default:
       return merge(defaultStore, {
         issues: context.issue.projectIssues,
diff --git a/web/core/hooks/store/use-mention.ts b/web/core/hooks/store/use-mention.ts
deleted file mode 100644
index bcdcc2f8c..000000000
--- a/web/core/hooks/store/use-mention.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-
-import { useRef, useEffect } from "react";
-// plane editor
-import { IMentionSuggestion } from "@plane/editor";
-// plane types
-import { IUser, IUserLite } from "@plane/types";
-// helpers
-import { getFileURL } from "@/helpers/file.helper";
-// hooks
-import { useMember } from "@/hooks/store/use-member";
-
-type Props = {
-  workspaceSlug?: string;
-  projectId?: string;
-  members?: IUserLite[] | undefined;
-  user?: IUser | undefined;
-};
-
-export const useMention = ({ workspaceSlug, projectId, members, user }: Props) => {
-  const projectMembersRef = useRef<IUserLite[] | undefined>();
-  const userRef = useRef<IUser | undefined>();
-
-  const {
-    project: { fetchProjectMembers },
-  } = useMember();
-
-  useEffect(() => {
-    if (members) projectMembersRef.current = members;
-    else {
-      if (!workspaceSlug || !projectId) return;
-      fetchProjectMembers(workspaceSlug.toString(), projectId.toString());
-    }
-  }, [fetchProjectMembers, members, projectId, workspaceSlug]);
-
-  useEffect(() => {
-    if (userRef) userRef.current = user;
-  }, [user]);
-
-  const waitForUserData = async () =>
-    new Promise<IUser>((resolve) => {
-      const checkData = () => {
-        if (userRef.current) resolve(userRef.current);
-        else setTimeout(checkData, 100);
-      };
-      checkData();
-    });
-
-  const mentionHighlights = async () => {
-    if (user && userRef.current) {
-      return [userRef.current.id];
-    } else {
-      const userData = await waitForUserData();
-      return [userData.id];
-    }
-  };
-
-  // Polling function to wait for projectMembersRef.current to be populated
-  const waitForData = async () =>
-    new Promise<IUserLite[]>((resolve) => {
-      const checkData = () => {
-        if (projectMembersRef.current && projectMembersRef.current.length > 0) {
-          resolve(projectMembersRef.current);
-        } else {
-          setTimeout(checkData, 100); // Check every 100ms
-        }
-      };
-      checkData();
-    });
-
-  const mentionSuggestions = async (): Promise<IMentionSuggestion[]> => {
-    if (members && projectMembersRef.current && projectMembersRef.current.length > 0) {
-      // If data is already available, return it immediately
-      return projectMembersRef.current.map((memberDetails) => ({
-        entity_name: "user_mention",
-        entity_identifier: `${memberDetails?.id}`,
-        id: `${memberDetails?.id}`,
-        type: "User",
-        title: `${memberDetails?.display_name}`,
-        subtitle: memberDetails?.email ?? "",
-        avatar: getFileURL(memberDetails?.avatar_url) ?? "",
-        redirect_uri: `/${workspaceSlug}/profile/${memberDetails?.id}`,
-      }));
-    } else {
-      // Wait for data to be available
-      const membersList = await waitForData();
-      return membersList.map((memberDetails) => ({
-        entity_name: "user_mention",
-        entity_identifier: `${memberDetails?.id}`,
-        id: `${memberDetails?.id}`,
-        type: "User",
-        title: `${memberDetails?.display_name}`,
-        subtitle: memberDetails?.email ?? "",
-        avatar: getFileURL(memberDetails?.avatar_url) ?? "",
-        redirect_uri: `/${workspaceSlug}/profile/${memberDetails?.id}`,
-      }));
-    }
-  };
-
-  return {
-    mentionSuggestions,
-    mentionHighlights,
-  };
-};
diff --git a/web/core/hooks/use-collaborative-page-actions.tsx b/web/core/hooks/use-collaborative-page-actions.tsx
index 6ec9f7990..5ef1bfec9 100644
--- a/web/core/hooks/use-collaborative-page-actions.tsx
+++ b/web/core/hooks/use-collaborative-page-actions.tsx
@@ -1,8 +1,10 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
-import { EditorReadOnlyRefApi, EditorRefApi, TDocumentEventsServer } from "@plane/editor";
+import { EditorRefApi, TDocumentEventsServer } from "@plane/editor";
 import { DocumentCollaborativeEvents, TDocumentEventsClient, getServerEventName } from "@plane/editor/lib";
+// plane ui
 import { TOAST_TYPE, setToast } from "@plane/ui";
-import { IPage } from "@/store/pages/page";
+// store
+import { TPageInstance } from "@/store/pages/base-page";
 
 // Better type naming and structure
 type CollaborativeAction = {
@@ -14,7 +16,13 @@ type CollaborativeActionEvent =
   | { type: "sendMessageToServer"; message: TDocumentEventsServer }
   | { type: "receivedMessageFromServer"; message: TDocumentEventsClient };
 
-export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorReadOnlyRefApi | null, page: IPage) => {
+type Props = {
+  editorRef?: EditorRefApi | null;
+  page: TPageInstance;
+};
+
+export const useCollaborativePageActions = (props: Props) => {
+  const { editorRef, page } = props;
   // 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);
@@ -37,6 +45,14 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
         execute: (shouldSync) => page.restore(shouldSync),
         errorMessage: "Page could not be restored. Please try again later.",
       },
+      [DocumentCollaborativeEvents["make-public"].client]: {
+        execute: (shouldSync) => page.makePublic(shouldSync),
+        errorMessage: "Page could not be made public. Please try again later.",
+      },
+      [DocumentCollaborativeEvents["make-private"].client]: {
+        execute: (shouldSync) => page.makePrivate(shouldSync),
+        errorMessage: "Page could not be made private. Please try again later.",
+      },
     }),
     [page]
   );
@@ -50,6 +66,10 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
       try {
         await actionDetails.execute(isPerformedByCurrentUser);
         if (isPerformedByCurrentUser) {
+          const serverEventName = getServerEventName(clientAction);
+          if (serverEventName) {
+            editorRef?.emitRealTimeUpdate(serverEventName);
+          }
           setCurrentActionBeingProcessed(clientAction);
         }
       } catch {
@@ -60,21 +80,11 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
         });
       }
     },
-    [actionHandlerMap]
+    [actionHandlerMap, editorRef]
   );
 
-  useEffect(() => {
-    if (currentActionBeingProcessed) {
-      const serverEventName = getServerEventName(currentActionBeingProcessed);
-      if (serverEventName) {
-        editorRef?.emitRealTimeUpdate(serverEventName);
-      }
-    }
-  }, [currentActionBeingProcessed, editorRef]);
-
   useEffect(() => {
     const realTimeStatelessMessageListener = editorRef?.listenToRealTimeUpdate();
-
     const handleStatelessMessage = (message: { payload: TDocumentEventsClient }) => {
       if (currentActionBeingProcessed === message.payload) {
         setCurrentActionBeingProcessed(null);
@@ -95,6 +105,5 @@ export const useCollaborativePageActions = (editorRef: EditorRefApi | EditorRead
 
   return {
     executeCollaborativeAction,
-    EVENT_ACTION_DETAILS_MAP: actionHandlerMap,
   };
 };
diff --git a/web/core/hooks/use-comment-reaction.tsx b/web/core/hooks/use-comment-reaction.tsx
index 6c2677fef..848c9b426 100644
--- a/web/core/hooks/use-comment-reaction.tsx
+++ b/web/core/hooks/use-comment-reaction.tsx
@@ -10,7 +10,7 @@ import { IssueReactionService } from "@/services/issue";
 // services
 const issueReactionService = new IssueReactionService();
 
-const useCommentReaction = (
+const useCommentReaction: any = (
   workspaceSlug?: string | string[] | null,
   projectId?: string | string[] | null,
   commendId?: string | string[] | null
diff --git a/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx b/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx
new file mode 100644
index 000000000..7c3705251
--- /dev/null
+++ b/web/core/hooks/use-extended-sidebar-overview-outside-click.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect } from "react";
+
+const useExtendedSidebarOutsideClickDetector = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void,
+  targetId: string
+) => {
+  const handleClick = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      // check for the closest element with attribute name data-prevent-outside-click
+      const preventOutsideClickElement = (event.target 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;
+      }
+      // check if the click target is the current issue element or its children
+      let targetElement = event.target as HTMLElement | null;
+      while (targetElement) {
+        if (targetElement.id === targetId) {
+          // if the click target is the current issue element, return
+          return;
+        }
+        targetElement = targetElement.parentElement;
+      }
+      const delayOutsideClickElement = (event.target as HTMLElement | undefined)?.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();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, []);
+};
+
+export default useExtendedSidebarOutsideClickDetector;
diff --git a/web/core/hooks/use-favorite-item-details.tsx b/web/core/hooks/use-favorite-item-details.tsx
index 0d561b499..b873ad07b 100644
--- a/web/core/hooks/use-favorite-item-details.tsx
+++ b/web/core/hooks/use-favorite-item-details.tsx
@@ -8,10 +8,12 @@ import {
 // helpers
 import { getPageName } from "@/helpers/page.helper";
 // hooks
-import { useProject, usePage, useProjectView, useCycle, useModule } from "@/hooks/store";
+import { useProject, useProjectView, useCycle, useModule } from "@/hooks/store";
+// plane web hooks
+import { EPageStoreType, usePage } from "@/plane-web/hooks/store";
 
 export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorite) => {
-  const favoriteItemId = favorite?.entity_data?.id;
+  const favoriteItemId = favorite?.entity_identifier;
   const favoriteItemLogoProps = favorite?.entity_data?.logo_props;
   const favoriteItemName = favorite?.entity_data?.name || favorite?.name;
   const favoriteItemEntityType = favorite?.entity_type;
@@ -23,7 +25,10 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit
   const { getModuleById } = useModule();
 
   // derived values
-  const pageDetail = usePage(favoriteItemId ?? "");
+  const pageDetail = usePage({
+    pageId: favoriteItemId ?? "",
+    storeType: EPageStoreType.PROJECT,
+  });
   const viewDetails = getViewById(favoriteItemId ?? "");
   const cycleDetail = getCycleById(favoriteItemId ?? "");
   const moduleDetail = getModuleById(favoriteItemId ?? "");
@@ -40,7 +45,7 @@ export const useFavoriteItemDetails = (workspaceSlug: string, favorite: IFavorit
       itemIcon = getFavoriteItemIcon("project", currentProjectDetails?.logo_props || favoriteItemLogoProps);
       break;
     case "page":
-      itemTitle = getPageName(pageDetail.name || favoriteItemName);
+      itemTitle = getPageName(pageDetail?.name || favoriteItemName);
       itemIcon = getFavoriteItemIcon("page", pageDetail?.logo_props || favoriteItemLogoProps);
       break;
     case "view":
diff --git a/web/core/hooks/use-group-dragndrop.ts b/web/core/hooks/use-group-dragndrop.ts
index 08695d341..c98520c86 100644
--- a/web/core/hooks/use-group-dragndrop.ts
+++ b/web/core/hooks/use-group-dragndrop.ts
@@ -1,10 +1,10 @@
 "use client";
 
 import { useParams } from "next/navigation";
+import { EIssuesStoreType } from "@plane/constants";
 import { TIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "@plane/types";
 import { TOAST_TYPE, setToast } from "@plane/ui";
 import { GroupDropLocation, handleGroupDragDrop } from "@/components/issues/issue-layouts/utils";
-import { EIssuesStoreType } from "@/constants/issue";
 import { ISSUE_FILTER_DEFAULT_DATA } from "@/store/issue/helpers/base-issues.store";
 import { useIssueDetail, useIssues } from "./store";
 import { useIssuesActions } from "./use-issues-actions";
@@ -17,7 +17,10 @@ type DNDStoreType =
   | EIssuesStoreType.DRAFT
   | EIssuesStoreType.PROFILE
   | EIssuesStoreType.ARCHIVED
-  | EIssuesStoreType.WORKSPACE_DRAFT;
+  | EIssuesStoreType.WORKSPACE_DRAFT
+  | EIssuesStoreType.TEAM
+  | EIssuesStoreType.TEAM_VIEW
+  | EIssuesStoreType.EPIC;
 
 export const useGroupIssuesDragNDrop = (
   storeType: DNDStoreType,
@@ -56,7 +59,7 @@ export const useGroupIssuesDragNDrop = (
     const errorToastProps = {
       type: TOAST_TYPE.ERROR,
       title: "Error!",
-      message: "Error while updating issue",
+      message: "Error while updating work item",
     };
     const moduleKey = ISSUE_FILTER_DEFAULT_DATA["module"];
     const cycleKey = ISSUE_FILTER_DEFAULT_DATA["cycle"];
diff --git a/web/core/hooks/use-issue-layout-store.ts b/web/core/hooks/use-issue-layout-store.ts
index 17187d883..2f443d129 100644
--- a/web/core/hooks/use-issue-layout-store.ts
+++ b/web/core/hooks/use-issue-layout-store.ts
@@ -1,14 +1,13 @@
 import { createContext, useContext } from "react";
 import { useParams } from "next/navigation";
-import { EIssuesStoreType } from "@/constants/issue";
+import { EIssuesStoreType } from "@plane/constants";
 import { useIssues } from "./store";
 
 export const IssuesStoreContext = createContext<EIssuesStoreType | undefined>(undefined);
 
 export const useIssueStoreType = () => {
   const storeType = useContext(IssuesStoreContext);
-
-  const { globalViewId, viewId, projectId, cycleId, moduleId, userId } = useParams();
+  const { globalViewId, viewId, projectId, cycleId, moduleId, userId, epicId, teamspaceId } = useParams();
 
   // If store type exists in context, use that store type
   if (storeType) return storeType;
@@ -24,8 +23,14 @@ export const useIssueStoreType = () => {
 
   if (moduleId) return EIssuesStoreType.MODULE;
 
+  if (epicId) return EIssuesStoreType.EPIC;
+
   if (projectId) return EIssuesStoreType.PROJECT;
 
+  if (teamspaceId) return EIssuesStoreType.TEAM;
+
+  if (teamspaceId && viewId) return EIssuesStoreType.TEAM_VIEW;
+
   return EIssuesStoreType.PROJECT;
 };
 
diff --git a/web/core/hooks/use-issue-peek-overview-redirection.tsx b/web/core/hooks/use-issue-peek-overview-redirection.tsx
index 1433e6ffb..beb27b70b 100644
--- a/web/core/hooks/use-issue-peek-overview-redirection.tsx
+++ b/web/core/hooks/use-issue-peek-overview-redirection.tsx
@@ -1,14 +1,21 @@
 import { useRouter } from "next/navigation";
+// constants
+import { EIssueServiceType } from "@plane/constants";
 // types
 import { TIssue } from "@plane/types";
+// helpers
+import { generateWorkItemLink } from "@/helpers/issue.helper";
 // hooks
-import { useIssueDetail } from "./store";
+import { useIssueDetail, useProject } from "./store";
 
-const useIssuePeekOverviewRedirection = () => {
+const useIssuePeekOverviewRedirection = (isEpic: boolean = false) => {
   // router
   const router = useRouter();
   //   store hooks
-  const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
+  const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(
+    isEpic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES
+  );
+  const { getProjectIdentifierById } = useProject();
 
   const handleRedirection = (
     workspaceSlug: string | undefined,
@@ -18,12 +25,20 @@ const useIssuePeekOverviewRedirection = () => {
   ) => {
     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) {
-      const issuePath = `/${workspaceSlug}/projects/${project_id}/${archived_at ? "archives/" : ""}issues/${id}`;
-
       if (isMobile) {
-        router.push(issuePath);
+        router.push(workItemLink);
       } else {
         setPeekIssue({ workspaceSlug, projectId: project_id, issueId: id, nestingLevel, isArchived: !!archived_at });
       }
diff --git a/web/core/hooks/use-issues-actions.tsx b/web/core/hooks/use-issues-actions.tsx
index 8fb2ed228..660627d00 100644
--- a/web/core/hooks/use-issues-actions.tsx
+++ b/web/core/hooks/use-issues-actions.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useMemo } from "react";
 // types
 import { useParams } from "next/navigation";
+import { EIssueFilterType, EIssuesStoreType, EDraftIssuePaginationType } from "@plane/constants";
 import {
   IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
@@ -12,11 +13,10 @@ import {
   TLoader,
   TProfileViews,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
-import { EDraftIssuePaginationType } from "@/constants/workspace-drafts";
+import { useTeamIssueActions, useTeamViewIssueActions } from "@/plane-web/helpers/issue-action-helper";
 import { useIssues } from "./store";
 
-interface IssueActions {
+export interface IssueActions {
   fetchIssues: (
     loadType: TLoader,
     options: IssuePaginationOptions,
@@ -38,9 +38,12 @@ interface IssueActions {
 }
 
 export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => {
+  const teamIssueActions = useTeamIssueActions();
   const projectIssueActions = useProjectIssueActions();
+  const projectEpicsActions = useProjectEpicsActions();
   const cycleIssueActions = useCycleIssueActions();
   const moduleIssueActions = useModuleIssueActions();
+  const teamViewIssueActions = useTeamViewIssueActions();
   const projectViewIssueActions = useProjectViewIssueActions();
   const globalIssueActions = useGlobalIssueActions();
   const profileIssueActions = useProfileIssueActions();
@@ -49,10 +52,14 @@ export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => {
   const workspaceDraftIssueActions = useWorkspaceDraftIssueActions();
 
   switch (storeType) {
+    case EIssuesStoreType.TEAM_VIEW:
+      return teamViewIssueActions;
     case EIssuesStoreType.PROJECT_VIEW:
       return projectViewIssueActions;
     case EIssuesStoreType.PROFILE:
       return profileIssueActions;
+    case EIssuesStoreType.TEAM:
+      return teamIssueActions;
     case EIssuesStoreType.ARCHIVED:
       return archivedIssueActions;
     case EIssuesStoreType.DRAFT:
@@ -66,6 +73,8 @@ export const useIssuesActions = (storeType: EIssuesStoreType): IssueActions => {
     case EIssuesStoreType.WORKSPACE_DRAFT:
       //@ts-expect-error type mismatch
       return workspaceDraftIssueActions;
+    case EIssuesStoreType.EPIC:
+      return projectEpicsActions;
     case EIssuesStoreType.PROJECT:
     default:
       return projectIssueActions;
@@ -158,6 +167,92 @@ const useProjectIssueActions = () => {
   );
 };
 
+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: EIssueFilterType,
+      filters: IIssueFilterOptions | IIssueDisplayFilterOptions | IIssueDisplayProperties | TIssueKanbanFilters
+    ) => {
+      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();
diff --git a/web/core/hooks/use-local-storage.tsx b/web/core/hooks/use-local-storage.tsx
index 538b8a93b..6ba44662a 100644
--- a/web/core/hooks/use-local-storage.tsx
+++ b/web/core/hooks/use-local-storage.tsx
@@ -21,6 +21,7 @@ export const setValueIntoLocalStorage = (key: string, value: any) => {
   }
 };
 
+// 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));
 
diff --git a/web/core/hooks/use-page-fallback.ts b/web/core/hooks/use-page-fallback.ts
index 9f5ef3482..52b54fe50 100644
--- a/web/core/hooks/use-page-fallback.ts
+++ b/web/core/hooks/use-page-fallback.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 // plane editor
-import { EditorRefApi } from "@plane/editor";
+import { EditorRefApi, getBinaryDataFromDocumentEditorHTMLString } from "@plane/editor";
 // plane types
 import { TDocumentPayload } from "@plane/types";
 // hooks
@@ -8,7 +8,7 @@ import useAutoSave from "@/hooks/use-auto-save";
 
 type TArgs = {
   editorRef: React.RefObject<EditorRefApi>;
-  fetchPageDescription: () => Promise<any>;
+  fetchPageDescription: () => Promise<ArrayBuffer>;
   hasConnectionFailed: boolean;
   updatePageDescription: (data: TDocumentPayload) => Promise<void>;
 };
@@ -21,28 +21,35 @@ export const usePageFallback = (args: TArgs) => {
     const editor = editorRef.current;
     if (!editor) return;
 
-    const latestEncodedDescription = await fetchPageDescription();
-    const latestDecodedDescription = latestEncodedDescription
-      ? new Uint8Array(latestEncodedDescription)
-      : new Uint8Array();
+    try {
+      const latestEncodedDescription = await fetchPageDescription();
+      let latestDecodedDescription: Uint8Array;
+      if (latestEncodedDescription && latestEncodedDescription.byteLength > 0) {
+        latestDecodedDescription = new Uint8Array(latestEncodedDescription);
+      } else {
+        latestDecodedDescription = getBinaryDataFromDocumentEditorHTMLString("<p></p>");
+      }
 
-    editor.setProviderDocument(latestDecodedDescription);
-    const { binary, html, json } = editor.getDocument();
-    if (!binary || !json) return;
-    const encodedBinary = Buffer.from(binary).toString("base64");
+      editor.setProviderDocument(latestDecodedDescription);
+      const { binary, html, json } = editor.getDocument();
+      if (!binary || !json) return;
+      const encodedBinary = Buffer.from(binary).toString("base64");
 
-    await updatePageDescription({
-      description_binary: encodedBinary,
-      description_html: html,
-      description: json,
-    });
-  }, [hasConnectionFailed]);
+      await updatePageDescription({
+        description_binary: encodedBinary,
+        description_html: html,
+        description: json,
+      });
+    } catch (error) {
+      console.error("Error in updating description using fallback logic:", error);
+    }
+  }, [editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription]);
 
   useEffect(() => {
     if (hasConnectionFailed) {
       handleUpdateDescription();
     }
-  }, [hasConnectionFailed]);
+  }, [handleUpdateDescription, hasConnectionFailed]);
 
   useAutoSave(handleUpdateDescription);
 };
diff --git a/web/core/hooks/use-page-filters.ts b/web/core/hooks/use-page-filters.ts
index 309cb5f46..448c58977 100644
--- a/web/core/hooks/use-page-filters.ts
+++ b/web/core/hooks/use-page-filters.ts
@@ -1,3 +1,4 @@
+import { useCallback, useMemo } from "react";
 // plane editor
 import { TEditorFontSize, TEditorFontStyle } from "@plane/editor";
 // hooks
@@ -7,12 +8,14 @@ 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 = () => {
@@ -22,39 +25,83 @@ export const usePageFilters = () => {
     DEFAULT_PERSONALIZATION_VALUES
   );
   // stored values
-  const isFullWidth = !!pagesConfig?.full_width;
-  const fontSize = pagesConfig?.font_size ?? DEFAULT_PERSONALIZATION_VALUES.font_size;
-  const fontStyle = pagesConfig?.font_style ?? DEFAULT_PERSONALIZATION_VALUES.font_style;
+  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 = (payload: Partial<TPagesPersonalizationConfig>) =>
-    setPagesConfig({
-      ...(pagesConfig ?? DEFAULT_PERSONALIZATION_VALUES),
-      ...payload,
-    });
+  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 = (value: boolean) =>
-    handleUpdateConfig({
-      full_width: value,
-    });
+  const handleFullWidth = useCallback(
+    (value: boolean) => {
+      handleUpdateConfig({
+        full_width: value,
+      });
+    },
+    [handleUpdateConfig]
+  );
   /**
    * @description action to update font_size value
    * @param {TEditorFontSize} value
    */
-  const handleFontSize = (value: TEditorFontSize) =>
-    handleUpdateConfig({
-      font_size: value,
-    });
+  const handleFontSize = useCallback(
+    (value: TEditorFontSize) => {
+      handleUpdateConfig({
+        font_size: value,
+      });
+    },
+    [handleUpdateConfig]
+  );
   /**
    * @description action to update font_size value
    * @param {TEditorFontSize} value
    */
-  const handleFontStyle = (value: TEditorFontStyle) =>
-    handleUpdateConfig({
-      font_style: 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,
@@ -63,5 +110,7 @@ export const usePageFilters = () => {
     handleFontStyle,
     isFullWidth,
     handleFullWidth,
+    isStickyToolbarEnabled,
+    handleStickyToolbar,
   };
 };
diff --git a/web/core/hooks/use-page-operations.ts b/web/core/hooks/use-page-operations.ts
new file mode 100644
index 000000000..d16fd1c04
--- /dev/null
+++ b/web/core/hooks/use-page-operations.ts
@@ -0,0 +1,201 @@
+import { useMemo } from "react";
+// plane editor
+import { EditorRefApi } from "@plane/editor";
+// plane types
+import { EPageAccess } from "@plane/types/src/enums";
+// plane ui
+import { setToast, TOAST_TYPE } from "@plane/ui";
+// helpers
+import { copyUrlToClipboard } from "@/helpers/string.helper";
+// hooks
+import { useCollaborativePageActions } from "@/hooks/use-collaborative-page-actions";
+// store types
+import { TPageInstance } from "@/store/pages/base-page";
+
+export type TPageOperations = {
+  toggleLock: () => void;
+  toggleAccess: () => void;
+  toggleFavorite: () => void;
+  openInNewTab: () => void;
+  copyLink: () => void;
+  duplicate: () => void;
+  toggleArchive: () => void;
+};
+
+type Props = {
+  editorRef?: EditorRefApi | null;
+  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);
+  // page operations
+  const pageOperations: TPageOperations = useMemo(() => {
+    const pageLink = getRedirectionLink();
+
+    return {
+      copyLink: () => {
+        copyUrlToClipboard(pageLink).then(() => {
+          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 {
+          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 {
+          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 {
+            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 {
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: "Error!",
+              message: "Page could not be archived. Please try again later.",
+            });
+          }
+        }
+      },
+      toggleFavorite: () => {
+        if (is_favorite) {
+          removePageFromFavorites().then(() =>
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page removed from favorites.",
+            })
+          );
+        } else {
+          addToFavorites().then(() =>
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page added to favorites.",
+            })
+          );
+        }
+      },
+      toggleLock: async () => {
+        if (is_locked) {
+          try {
+            await executeCollaborativeAction({ type: "sendMessageToServer", message: "unlock" });
+            setToast({
+              type: TOAST_TYPE.SUCCESS,
+              title: "Success!",
+              message: "Page unlocked successfully.",
+            });
+          } catch {
+            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 {
+            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,
+    removePageFromFavorites,
+  ]);
+  return {
+    pageOperations,
+  };
+};
diff --git a/web/core/hooks/use-parse-editor-content.ts b/web/core/hooks/use-parse-editor-content.ts
new file mode 100644
index 000000000..86e13a73f
--- /dev/null
+++ b/web/core/hooks/use-parse-editor-content.ts
@@ -0,0 +1,215 @@
+import { useCallback } from "react";
+import { useParams } from "next/navigation";
+// plane types
+import { TSearchEntities } from "@plane/types";
+// helpers
+import { getBase64Image } from "@/helpers/file.helper";
+// hooks
+import { useMember } from "@/hooks/store";
+// plane web hooks
+import { useAdditionalEditorMention } from "@/plane-web/hooks/use-additional-editor-mention";
+
+export const useParseEditorContent = () => {
+  // params
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { getUserDetails } = useMember();
+  // parse additional content
+  const { parseAdditionalEditorContent } = useAdditionalEditorMention();
+
+  /**
+   * @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]
+  );
+
+  /**
+   * @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 start = performance.now();
+      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, "");
+      const end = performance.now();
+      console.log("Exec time:", end - start);
+      return parsedMarkdownContent;
+    },
+    [getUserDetails, workspaceSlug]
+  );
+
+  return {
+    replaceCustomComponentsFromHTMLContent,
+    replaceCustomComponentsFromMarkdownContent,
+  };
+};
diff --git a/web/core/hooks/use-resolved-asset-path.tsx b/web/core/hooks/use-resolved-asset-path.tsx
new file mode 100644
index 000000000..4233dc646
--- /dev/null
+++ b/web/core/hooks/use-resolved-asset-path.tsx
@@ -0,0 +1,26 @@
+import { useTheme } from "next-themes";
+
+type AssetPathConfig = {
+  basePath: string;
+  additionalPath?: string;
+  extension?: string;
+  includeThemeInPath?: boolean;
+};
+
+export const useResolvedAssetPath = ({
+  basePath,
+  additionalPath = "",
+  extension = "webp",
+  includeThemeInPath = true,
+}: AssetPathConfig) => {
+  // hooks
+  const { resolvedTheme } = useTheme();
+  // resolved theme
+  const theme = resolvedTheme === "light" ? "light" : "dark";
+
+  if (!includeThemeInPath) {
+    return `${additionalPath && additionalPath !== "" ? `${basePath}${additionalPath}` : basePath}.${extension}`;
+  }
+
+  return `${additionalPath && additionalPath !== "" ? `${basePath}${additionalPath}` : basePath}-${theme}.${extension}`;
+};
diff --git a/web/core/hooks/use-stickies.tsx b/web/core/hooks/use-stickies.tsx
new file mode 100644
index 000000000..614c865d1
--- /dev/null
+++ b/web/core/hooks/use-stickies.tsx
@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// context
+import { StoreContext } from "@/lib/store-context";
+import { 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/web/core/hooks/use-timezone.tsx b/web/core/hooks/use-timezone.tsx
new file mode 100644
index 000000000..983f99beb
--- /dev/null
+++ b/web/core/hooks/use-timezone.tsx
@@ -0,0 +1,80 @@
+import useSWR from "swr";
+import { 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-custom-text-400">{timezone.utc_offset}</span>
+        <span className="text-custom-text-200">{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",
+    },
+    {
+      value: "Universal",
+      query: "universal, coordinated universal time",
+      content: "Universal",
+    },
+  ];
+
+  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/web/core/hooks/use-workspace-invitation.tsx b/web/core/hooks/use-workspace-invitation.tsx
new file mode 100644
index 000000000..20d19e894
--- /dev/null
+++ b/web/core/hooks/use-workspace-invitation.tsx
@@ -0,0 +1,84 @@
+import { useEffect } from "react";
+import { Control, FieldArrayWithId, FormState, useFieldArray, useForm, UseFormWatch } 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/web/core/hooks/use-workspace-issue-properties.ts b/web/core/hooks/use-workspace-issue-properties.ts
index 4cad3a2df..821d7a911 100644
--- a/web/core/hooks/use-workspace-issue-properties.ts
+++ b/web/core/hooks/use-workspace-issue-properties.ts
@@ -1,11 +1,12 @@
 import useSWR from "swr";
-import { useCycle, useProjectEstimates, useLabel, useModule, useProjectState } from "./store";
+// plane web imports
+import { useWorkspaceIssuePropertiesExtended } from "@/plane-web/hooks/use-workspace-issue-properties-extended";
+// plane imports
+import { useCycle, useProjectEstimates, useLabel, useModule } from "./store";
 
 export const useWorkspaceIssueProperties = (workspaceSlug: string | string[] | undefined) => {
   const { fetchWorkspaceLabels } = useLabel();
 
-  const { fetchWorkspaceStates } = useProjectState();
-
   const { getWorkspaceEstimates } = useProjectEstimates();
 
   const { fetchWorkspaceModules } = useModule();
@@ -33,17 +34,13 @@ export const useWorkspaceIssueProperties = (workspaceSlug: string | string[] | u
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  // fetch workspace states
-  useSWR(
-    workspaceSlug ? `WORKSPACE_STATES_${workspaceSlug}` : null,
-    workspaceSlug ? () => fetchWorkspaceStates(workspaceSlug.toString()) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
-
   // fetch workspace estimates
   useSWR(
     workspaceSlug ? `WORKSPACE_ESTIMATES_${workspaceSlug}` : null,
     workspaceSlug ? () => getWorkspaceEstimates(workspaceSlug.toString()) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
+
+  // fetch extended issue properties
+  useWorkspaceIssuePropertiesExtended(workspaceSlug);
 };
diff --git a/web/core/layouts/auth-layout/project-wrapper.tsx b/web/core/layouts/auth-layout/project-wrapper.tsx
index 4cca05257..e79bdd189 100644
--- a/web/core/layouts/auth-layout/project-wrapper.tsx
+++ b/web/core/layouts/auth-layout/project-wrapper.tsx
@@ -2,16 +2,15 @@
 
 import { FC, ReactNode, useEffect } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import useSWR from "swr";
-
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
 // components
 import { JoinProject } from "@/components/auth-screens";
 import { LogoSpinner } from "@/components/common";
-import { EmptyState } from "@/components/empty-state";
+import { ComicBoxButton, DetailedEmptyState } from "@/components/empty-state";
 import { ETimeLineTypeType } from "@/components/gantt-chart/contexts";
-//constants
-import { EmptyStateType } from "@/constants/empty-state";
 // hooks
 import {
   useCommandPalette,
@@ -26,20 +25,24 @@ import {
   useProjectView,
   useUserPermissions,
 } from "@/hooks/store";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
 import { useTimeLineChart } from "@/hooks/use-timeline-chart";
 // local
 import { persistence } from "@/local-db/storage.sqlite";
 // plane web constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 
 interface IProjectAuthWrapper {
+  workspaceSlug: string;
+  projectId: string;
   children: ReactNode;
+  isLoading?: boolean;
 }
 
 export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
-  const { children } = props;
-  // store
-  // const { fetchInboxes } = useInbox();
+  const { workspaceSlug, projectId, children, isLoading: isParentLoading = false } = props;
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
   const { fetchUserProjectInfo, allowPermissions, projectUserInfo } = useUserPermissions();
@@ -51,17 +54,27 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   const {
     project: { fetchProjectMembers },
   } = useMember();
-  const { fetchProjectStates, fetchProjectStateTransitions } = useProjectState();
+  const { fetchProjectStates } = useProjectState();
   const { fetchProjectLabels } = useLabel();
   const { getProjectEstimates } = useProjectEstimates();
-  // router
-  const { workspaceSlug, projectId } = useParams();
 
+  // helper hooks
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/onboarding/projects" });
+
+  // derived values
+  const projectExists = projectId ? getProjectById(projectId.toString()) : null;
   const projectMemberInfo = projectUserInfo?.[workspaceSlug?.toString()]?.[projectId?.toString()];
+  const hasPermissionToCurrentProject = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    projectId?.toString()
+  );
 
   // Initialize module timeline chart
   useEffect(() => {
     initGantt();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useSWR(
@@ -105,12 +118,7 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   // fetching project states
   useSWR(
     workspaceSlug && projectId ? `PROJECT_STATES_${workspaceSlug}_${projectId}` : null,
-    workspaceSlug && projectId
-      ? () => {
-          fetchProjectStates(workspaceSlug.toString(), projectId.toString());
-          fetchProjectStateTransitions(workspaceSlug.toString(), projectId.toString());
-        }
-      : null,
+    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug.toString(), projectId.toString()) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project estimates
@@ -143,17 +151,14 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  // derived values
-  const projectExists = projectId ? getProjectById(projectId.toString()) : null;
-  const hasPermissionToCurrentProject = allowPermissions(
-    [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-    EUserPermissionsLevel.PROJECT,
-    workspaceSlug.toString(),
-    projectId?.toString()
+  // permissions
+  const canPerformEmptyStateActions = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.WORKSPACE
   );
 
   // check if the project member apis is loading
-  if (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null)
+  if (isParentLoading || (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null))
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
         <div className="flex flex-col items-center gap-3 text-center">
@@ -166,16 +171,25 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   if (projectExists && projectId && hasPermissionToCurrentProject === false) return <JoinProject />;
 
   // check if the project info is not found.
-  if (!loader && !projectExists && projectId && !!hasPermissionToCurrentProject === false)
+  if (loader === "loaded" && !projectExists && projectId && !!hasPermissionToCurrentProject === false)
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100">
-        <EmptyState
-          type={EmptyStateType.WORKSPACE_PROJECT_NOT_FOUND}
-          layout="screen-detailed"
-          primaryButtonOnClick={() => {
-            setTrackElement("Projects page empty state");
-            toggleCreateProjectModal(true);
-          }}
+        <DetailedEmptyState
+          title={t("workspace_projects.empty_state.general.title")}
+          description={t("workspace_projects.empty_state.general.description")}
+          assetPath={resolvedPath}
+          customPrimaryButton={
+            <ComicBoxButton
+              label={t("workspace_projects.empty_state.general.primary_button.text")}
+              title={t("workspace_projects.empty_state.general.primary_button.comic.title")}
+              description={t("workspace_projects.empty_state.general.primary_button.comic.description")}
+              onClick={() => {
+                setTrackElement("Project empty state");
+                toggleCreateProjectModal(true);
+              }}
+              disabled={!canPerformEmptyStateActions}
+            />
+          }
         />
       </div>
     );
diff --git a/web/core/layouts/auth-layout/workspace-wrapper.tsx b/web/core/layouts/auth-layout/workspace-wrapper.tsx
index 2dd658704..8ced177dd 100644
--- a/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -8,54 +8,57 @@ import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
 import useSWR from "swr";
 import useSWRImmutable from "swr/immutable";
-
+// ui
 import { LogOut } from "lucide-react";
-// hooks
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { Button, setToast, TOAST_TYPE, Tooltip } from "@plane/ui";
+// components
 import { LogoSpinner } from "@/components/common";
-import { useMember, useProject, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
+// hooks
+import { useMember, useProject, useProjectState, useUser, useUserPermissions, useWorkspace } from "@/hooks/store";
 import { useFavorite } from "@/hooks/store/use-favorite";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // local
 import { persistence } from "@/local-db/storage.sqlite";
 // constants
-import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";
 // images
 import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
 import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
 import WorkSpaceNotAvailable from "@/public/workspace/workspace-not-available.png";
 
-export interface IWorkspaceAuthWrapper {
+interface IWorkspaceAuthWrapper {
   children: ReactNode;
+  isLoading?: boolean;
 }
 
 export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
-  const { children } = props;
+  const { children, isLoading: isParentLoading = false } = props;
   // router params
   const { workspaceSlug } = useParams();
   // next themes
   const { resolvedTheme } = useTheme();
   // store hooks
   const { signOut, data: currentUser } = useUser();
-  const { fetchProjects } = useProject();
+  const { fetchPartialProjects } = useProject();
   const { fetchFavorite } = useFavorite();
   const {
     workspace: { fetchWorkspaceMembers },
   } = useMember();
-  const { workspaces } = useWorkspace();
+  const { workspaces, fetchSidebarNavigationPreferences } = 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 planeLogo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
   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(
@@ -71,8 +74,8 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
 
   // fetching workspace projects
   useSWR(
-    workspaceSlug && currentWorkspace ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
-    workspaceSlug && currentWorkspace ? () => fetchProjects(workspaceSlug.toString()) : null,
+    workspaceSlug && currentWorkspace ? `WORKSPACE_PARTIAL_PROJECTS_${workspaceSlug}` : null,
+    workspaceSlug && currentWorkspace ? () => fetchPartialProjects(workspaceSlug.toString()) : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetch workspace members
@@ -91,6 +94,19 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
       : null,
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
+  // fetch workspace states
+  useSWR(
+    workspaceSlug ? `WORKSPACE_STATES_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchWorkspaceStates(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
+
+  // fetch workspace sidebar preferences
+  useSWR(
+    workspaceSlug ? `WORKSPACE_SIDEBAR_PREFERENCES_${workspaceSlug}` : null,
+    workspaceSlug ? () => fetchSidebarNavigationPreferences(workspaceSlug.toString()) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
+  );
 
   // initialize the local database
   const { isLoading: isDBInitializing } = useSWRImmutable(
@@ -116,11 +132,8 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props)
     );
   };
 
-  // derived values
-  const currentWorkspaceInfo = workspaceSlug && workspaceInfoBySlug(workspaceSlug.toString());
-
   // if list of workspaces are not there then we have to render the spinner
-  if (allWorkspaces === undefined || loader || isDBInitializing) {
+  if (isParentLoading || allWorkspaces === undefined || loader || isDBInitializing) {
     return (
       <div className="grid h-screen place-items-center bg-custom-background-100 p-4">
         <div className="flex flex-col items-center gap-3 text-center">
diff --git a/web/core/lib/posthog-provider.tsx b/web/core/lib/posthog-provider.tsx
index 563cc2c8e..af67c22ea 100644
--- a/web/core/lib/posthog-provider.tsx
+++ b/web/core/lib/posthog-provider.tsx
@@ -7,7 +7,7 @@ import { useParams } from "next/navigation";
 import posthog from "posthog-js";
 import { PostHogProvider as PHProvider } from "posthog-js/react";
 // constants
-import { GROUP_WORKSPACE } from "@/constants/event-tracker";
+import { GROUP_WORKSPACE } from "@plane/constants";
 // helpers
 import { getUserRole } from "@/helpers/user.helper";
 // hooks
diff --git a/web/core/lib/wrappers/store-wrapper.tsx b/web/core/lib/wrappers/store-wrapper.tsx
index fa60c354e..0243c34f4 100644
--- a/web/core/lib/wrappers/store-wrapper.tsx
+++ b/web/core/lib/wrappers/store-wrapper.tsx
@@ -1,7 +1,8 @@
-import { ReactNode, useEffect, FC, useState } from "react";
+import { ReactNode, useEffect, FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useTheme } from "next-themes";
+import { useTranslation, TLanguage } from "@plane/i18n";
 // helpers
 import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
 // hooks
@@ -21,6 +22,7 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
   const { setQuery } = useRouterParams();
   const { sidebarCollapsed, toggleSidebar } = useAppTheme();
   const { data: userProfile } = useUserProfile();
+  const { changeLanguage } = useTranslation();
 
   /**
    * Sidebar collapsed fetching from local storage
@@ -28,7 +30,6 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
   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]);
 
@@ -37,7 +38,6 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
    */
   useEffect(() => {
     if (!userProfile?.theme?.theme) return;
-
     const currentTheme = userProfile?.theme?.theme || "system";
     const currentThemePalette = userProfile?.theme?.palette;
     if (currentTheme) {
@@ -51,6 +51,11 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
     }
   }, [userProfile?.theme?.theme, userProfile?.theme?.palette, setTheme]);
 
+  useEffect(() => {
+    if (!userProfile?.language) return;
+    changeLanguage(userProfile?.language as TLanguage);
+  }, [userProfile?.language, changeLanguage]);
+
   useEffect(() => {
     if (!params) return;
     setQuery(params);
diff --git a/web/core/local-db/storage.sqlite.ts b/web/core/local-db/storage.sqlite.ts
index ed0ceb880..fb351add6 100644
--- a/web/core/local-db/storage.sqlite.ts
+++ b/web/core/local-db/storage.sqlite.ts
@@ -1,4 +1,3 @@
-import { getActiveSpan, startSpan } from "@sentry/nextjs";
 import * as Comlink from "comlink";
 import set from "lodash/set";
 // plane
@@ -59,10 +58,10 @@ export class Storage {
     this.workspaceSlug = "";
   };
 
-  clearStorage = async () => {
+  clearStorage = async (force = false) => {
     try {
-      await this.db.close();
-      await clearOPFS();
+      await this.db?.close();
+      await clearOPFS(force);
       this.reset();
     } catch (e) {
       console.error("Error clearing sqlite sync storage", e);
@@ -77,7 +76,7 @@ export class Storage {
     }
 
     try {
-      await startSpan({ name: "INIT_DB" }, async () => await this._initialize(workspaceSlug));
+      await this._initialize(workspaceSlug);
       return true;
     } catch (err) {
       logError(err);
@@ -139,11 +138,9 @@ export class Storage {
       return;
     }
     try {
-      await startSpan({ name: "LOAD_WS", attributes: { slug: this.workspaceSlug } }, async () => {
-        this.setOption("sync_workspace", new Date().toUTCString());
-        await loadWorkSpaceData(this.workspaceSlug);
-        this.deleteOption("sync_workspace");
-      });
+      this.setOption("sync_workspace", new Date().toUTCString());
+      await loadWorkSpaceData(this.workspaceSlug);
+      this.deleteOption("sync_workspace");
     } catch (e) {
       logError(e);
       this.deleteOption("sync_workspace");
@@ -177,7 +174,7 @@ export class Storage {
       return false;
     }
     try {
-      const sync = startSpan({ name: `SYNC_ISSUES` }, () => this._syncIssues(projectId));
+      const sync = this._syncIssues(projectId);
       this.setSync(projectId, sync);
       await sync;
     } catch (e) {
@@ -187,8 +184,6 @@ export class Storage {
   };
 
   _syncIssues = async (projectId: string) => {
-    const activeSpan = getActiveSpan();
-
     log("### Sync started");
     let status = this.getStatus(projectId);
     if (status === "loading" || status === "syncing") {
@@ -240,7 +235,7 @@ export class Storage {
     if (syncedAt) {
       await syncDeletesToLocal(this.workspaceSlug, projectId, { updated_at__gt: syncedAt });
     }
-    log("### Time taken to add issues", performance.now() - start);
+    log("### Time taken to add work items", performance.now() - start);
 
     if (status === "loading") {
       await createIndexes();
@@ -248,11 +243,6 @@ export class Storage {
     this.setOption(projectId, "ready");
     this.setStatus(projectId, "ready");
     this.setSync(projectId, undefined);
-
-    activeSpan?.setAttributes({
-      projectId: projectId,
-      count: response?.total_results,
-    });
   };
 
   getIssueCount = async (projectId: string) => {
@@ -313,10 +303,7 @@ export class Storage {
     let issuesRaw: any[] = [];
     let count: any[];
     try {
-      [issuesRaw, count] = await startSpan(
-        { name: "GET_ISSUES" },
-        async () => await Promise.all([runQuery(query), runQuery(countQuery)])
-      );
+      [issuesRaw, count] = await Promise.all([runQuery(query), runQuery(countQuery)]);
     } catch (e) {
       logError(e);
       const issueService = new IssueService();
@@ -336,7 +323,7 @@ export class Storage {
     const parsingStart = performance.now();
     let issueResults = issuesRaw.map((issue: any) => formatLocalIssue(issue));
 
-    log("#### Issue Results", issueResults.length);
+    log("#### Work item Results", issueResults.length);
 
     const parsingEnd = performance.now();
 
@@ -372,18 +359,6 @@ export class Storage {
       next_page_results,
       total_pages,
     };
-
-    const activeSpan = getActiveSpan();
-    activeSpan?.setAttributes({
-      projectId,
-      count: total_count,
-      groupBy: group_by,
-      subGroupBy: sub_group_by,
-      queries: queries,
-      local: true,
-      groupCount,
-      // subGroupCount,
-    });
     return out;
   };
 
diff --git a/web/core/local-db/utils/load-workspace.ts b/web/core/local-db/utils/load-workspace.ts
index 42a79f9dd..0cd493118 100644
--- a/web/core/local-db/utils/load-workspace.ts
+++ b/web/core/local-db/utils/load-workspace.ts
@@ -109,7 +109,7 @@ const syncLabels = async (currentLabels: any) => {
   const currentIdList = currentLabels.map((label: any) => label.id);
   const existingLabels = await persistence.db.exec("SELECT id FROM labels;");
 
-  const existingIdList = existingLabels.map((label: any) => label.id);
+  const existingIdList = existingLabels ? existingLabels.map((label: any) => label.id) : [];
 
   const deletedIds = difference(existingIdList, currentIdList);
 
@@ -140,7 +140,7 @@ export const syncIssuesWithDeletedLabels = async (deletedLabelIds: string[]) =>
 const syncModules = async (currentModules: any) => {
   const currentIdList = currentModules.map((module: any) => module.id);
   const existingModules = await persistence.db.exec("SELECT id FROM modules;");
-  const existingIdList = existingModules.map((module: any) => module.id);
+  const existingIdList = existingModules ? existingModules.map((module: any) => module.id) : [];
   const deletedIds = difference(existingIdList, currentIdList);
   await syncIssuesWithDeletedModules(deletedIds as string[]);
 };
@@ -167,7 +167,7 @@ export const syncIssuesWithDeletedModules = async (deletedModuleIds: string[]) =
 const syncCycles = async (currentCycles: any) => {
   const currentIdList = currentCycles.map((cycle: any) => cycle.id);
   const existingCycles = await persistence.db.exec("SELECT id FROM cycles;");
-  const existingIdList = existingCycles.map((cycle: any) => cycle.id);
+  const existingIdList = existingCycles ? existingCycles.map((cycle: any) => cycle.id) : [];
   const deletedIds = difference(existingIdList, currentIdList);
   await syncIssuesWithDeletedCycles(deletedIds as string[]);
 };
@@ -194,7 +194,7 @@ export const syncIssuesWithDeletedCycles = async (deletedCycleIds: string[]) =>
 const syncStates = async (currentStates: any) => {
   const currentIdList = currentStates.map((state: any) => state.id);
   const existingStates = await persistence.db.exec("SELECT id FROM states;");
-  const existingIdList = existingStates.map((state: any) => state.id);
+  const existingIdList = existingStates ? existingStates.map((state: any) => state.id) : [];
   const deletedIds = difference(existingIdList, currentIdList);
   await syncIssuesWithDeletedStates(deletedIds as string[]);
 };
@@ -221,7 +221,7 @@ export const syncIssuesWithDeletedStates = async (deletedStateIds: string[]) =>
 const syncMembers = async (currentMembers: any) => {
   const currentIdList = currentMembers.map((member: any) => member.id);
   const existingMembers = await persistence.db.exec("SELECT id FROM members;");
-  const existingIdList = existingMembers.map((member: any) => member.id);
+  const existingIdList = existingMembers ? existingMembers.map((member: any) => member.id) : [];
   const deletedIds = difference(existingIdList, currentIdList);
   await syncIssuesWithDeletedMembers(deletedIds as string[]);
 };
diff --git a/web/core/local-db/utils/utils.ts b/web/core/local-db/utils/utils.ts
index 236d82872..2a89a7fb6 100644
--- a/web/core/local-db/utils/utils.ts
+++ b/web/core/local-db/utils/utils.ts
@@ -1,4 +1,3 @@
-import { captureException } from "@sentry/nextjs";
 import pick from "lodash/pick";
 import { TIssue } from "@plane/types";
 import { rootStore } from "@/lib/store-context";
@@ -15,7 +14,6 @@ export const logError = (e: any) => {
     e = parseSQLite3Error(e);
   }
   console.error(e);
-  captureException(e);
 };
 export const logInfo = console.info;
 
@@ -64,9 +62,10 @@ export const updatePersistentLayer = async (issueIds: string | string[]) => {
   issueIds.forEach(async (issueId) => {
     const dbIssue = await persistence.getIssue(issueId);
     const issue = rootStore.issue.issues.getIssueById(issueId);
+    const updatedIssue = dbIssue ? { ...dbIssue, ...issue } : issue;
 
-    if (issue) {
-      addIssueToPersistanceLayer(issue);
+    if (updatedIssue) {
+      addIssueToPersistanceLayer(updatedIssue);
     }
   });
 };
@@ -160,24 +159,48 @@ const parseSQLite3Error = (error: any) => {
   return error;
 };
 
-export const clearOPFS = async () => {
-  const storageManager = window.navigator.storage;
-  const fileSystemDirectoryHandle = await storageManager.getDirectory();
+export const isChrome = () => {
   const userAgent = navigator.userAgent;
-  const isChrome = userAgent.includes("Chrome") && !userAgent.includes("Edg") && !userAgent.includes("OPR");
+  return userAgent.includes("Chrome") && !userAgent.includes("Edg") && !userAgent.includes("OPR");
+};
 
-  if (isChrome) {
-    await (fileSystemDirectoryHandle as any).remove({ recursive: true });
+export const clearOPFS = async (force = false) => {
+  const storageManager = window.navigator.storage;
+  const root = await storageManager.getDirectory();
+
+  if (force && isChrome()) {
+    await (root as any).remove({ recursive: true });
     return;
   }
+  // ts-ignore
+  for await (const entry of (root as any)?.values()) {
+    if (entry.kind === "directory" && entry.name.startsWith(".ahp-")) {
+      // A lock with the same name as the directory protects it from
+      // being deleted.
 
-  const entries = await (fileSystemDirectoryHandle as any).entries();
-  for await (const entry of entries) {
-    const [name] = entry;
-    try {
-      await fileSystemDirectoryHandle.removeEntry(name);
-    } catch (e) {
-      console.log("Error", e);
+      if (force) {
+        // don't wait for the lock
+        try {
+          await root.removeEntry(entry.name, { recursive: true });
+        } catch (e) {
+          console.log(e);
+        }
+      } else {
+        await navigator.locks.request(entry.name, { ifAvailable: true }, async (lock) => {
+          if (lock) {
+            log?.(`Deleting temporary directory ${entry.name}`);
+            try {
+              await root.removeEntry(entry.name, { recursive: true });
+            } catch (e) {
+              console.log(e);
+            }
+          } else {
+            log?.(`Temporary directory ${entry.name} is in use`);
+          }
+        });
+      }
+    } else {
+      root.removeEntry(entry.name);
     }
   }
 };
diff --git a/web/core/services/file.service.ts b/web/core/services/file.service.ts
index d1f654ba7..dba3027c5 100644
--- a/web/core/services/file.service.ts
+++ b/web/core/services/file.service.ts
@@ -1,3 +1,4 @@
+import { AxiosRequestConfig } from "axios";
 // plane types
 import { TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
 // helpers
@@ -64,7 +65,8 @@ export class FileService extends APIService {
   async uploadWorkspaceAsset(
     workspaceSlug: string,
     data: TFileEntityInfo,
-    file: File
+    file: File,
+    uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
   ): Promise<TFileSignedURLResponse> {
     const fileMetaData = getFileMetaDataForUpload(file);
     return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/`, {
@@ -74,7 +76,11 @@ export class FileService extends APIService {
       .then(async (response) => {
         const signedURLResponse: TFileSignedURLResponse = response?.data;
         const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
-        await this.fileUploadService.uploadFile(signedURLResponse.upload_data.url, fileUploadPayload);
+        await this.fileUploadService.uploadFile(
+          signedURLResponse.upload_data.url,
+          fileUploadPayload,
+          uploadProgressHandler
+        );
         await this.updateWorkspaceAssetUploadStatus(workspaceSlug.toString(), signedURLResponse.asset_id);
         return signedURLResponse;
       })
@@ -122,7 +128,8 @@ export class FileService extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: TFileEntityInfo,
-    file: File
+    file: File,
+    uploadProgressHandler?: AxiosRequestConfig["onUploadProgress"]
   ): Promise<TFileSignedURLResponse> {
     const fileMetaData = getFileMetaDataForUpload(file);
     return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/`, {
@@ -132,7 +139,11 @@ export class FileService extends APIService {
       .then(async (response) => {
         const signedURLResponse: TFileSignedURLResponse = response?.data;
         const fileUploadPayload = generateFileUploadPayload(signedURLResponse, file);
-        await this.fileUploadService.uploadFile(signedURLResponse.upload_data.url, fileUploadPayload);
+        await this.fileUploadService.uploadFile(
+          signedURLResponse.upload_data.url,
+          fileUploadPayload,
+          uploadProgressHandler
+        );
         await this.updateProjectAssetUploadStatus(workspaceSlug, projectId, signedURLResponse.asset_id);
         return signedURLResponse;
       })
diff --git a/web/core/services/inbox/inbox-issue.service.ts b/web/core/services/inbox/inbox-issue.service.ts
index 8837b6e74..737065d70 100644
--- a/web/core/services/inbox/inbox-issue.service.ts
+++ b/web/core/services/inbox/inbox-issue.service.ts
@@ -1,5 +1,6 @@
 // types
-import type { TInboxIssue, TIssue, TInboxIssueWithPagination, TInboxForm } from "@plane/types";
+import { TInboxIssue } from "@plane/constants";
+import type { TIssue, TInboxIssueWithPagination, TInboxForm } from "@plane/types";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
 // helpers
diff --git a/web/core/services/issue/issue.service.ts b/web/core/services/issue/issue.service.ts
index d74ce0c88..203b319c7 100644
--- a/web/core/services/issue/issue.service.ts
+++ b/web/core/services/issue/issue.service.ts
@@ -1,12 +1,14 @@
+import { EIssueServiceType } from "@plane/constants";
 // types
-import type {
-  IIssueDisplayProperties,
-  TBulkOperationsPayload,
-  TIssue,
-  TIssueActivity,
-  TIssueLink,
-  TIssuesResponse,
-  TIssueSubIssues,
+import {
+  type IIssueDisplayProperties,
+  type TBulkOperationsPayload,
+  type TIssue,
+  type TIssueActivity,
+  type TIssueLink,
+  type TIssueServiceType,
+  type TIssuesResponse,
+  type TIssueSubIssues,
 } from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
@@ -18,12 +20,15 @@ import { addIssuesBulk, deleteIssueFromLocal, updateIssue } from "@/local-db/uti
 import { APIService } from "@/services/api.service";
 
 export class IssueService extends APIService {
-  constructor() {
+  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}/issues/`, data)
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -38,8 +43,8 @@ export class IssueService extends APIService {
   ): Promise<TIssuesResponse> {
     const path =
       (queries.expand as string)?.includes("issue_relation") && !queries.group_by
-        ? `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues-detail/`
-        : `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`;
+        ? `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}-detail/`
+        : `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/`;
     return this.get(
       path,
       {
@@ -59,7 +64,11 @@ export class IssueService extends APIService {
     queries?: any,
     config = {}
   ): Promise<TIssuesResponse> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/v2/issues/`, { params: queries }, config)
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/v2/${this.serviceType}/`,
+      { params: queries },
+      config
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -67,8 +76,9 @@ export class IssueService extends APIService {
   }
 
   async getIssues(workspaceSlug: string, projectId: string, queries?: any, config = {}): Promise<TIssuesResponse> {
-    if (getIssuesShouldFallbackToServer(queries))
+    if (getIssuesShouldFallbackToServer(queries) || this.serviceType !== EIssueServiceType.ISSUES) {
       return await this.getIssuesFromServer(workspaceSlug, projectId, queries, config);
+    }
 
     const response = await persistence.getIssues(workspaceSlug, projectId, queries, config);
     return response as TIssuesResponse;
@@ -89,7 +99,7 @@ export class IssueService extends APIService {
     projectId: string,
     queries?: any
   ): Promise<TIssue[] | { [key: string]: TIssue[] }> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/`, {
       params: queries,
     })
       .then((response) => response?.data)
@@ -99,13 +109,18 @@ export class IssueService extends APIService {
   }
 
   async retrieve(workspaceSlug: string, projectId: string, issueId: string, queries?: any): Promise<TIssue> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`, {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/`, {
       params: queries,
     })
       .then((response) => {
-        if (response.data) {
+        // skip issue update when the service type is epic
+        if (response.data && this.serviceType === EIssueServiceType.ISSUES) {
           updateIssue({ ...response.data, is_local_update: 1 });
         }
+        // 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) => {
@@ -114,11 +129,11 @@ export class IssueService extends APIService {
   }
 
   async retrieveIssues(workspaceSlug: string, projectId: string, issueIds: string[]): Promise<TIssue[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/list/`, {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/list/`, {
       params: { issues: issueIds.join(",") },
     })
       .then((response) => {
-        if (response?.data && Array.isArray(response?.data)) {
+        if (response?.data && Array.isArray(response?.data) && this.serviceType === EIssueServiceType.ISSUES) {
           addIssuesBulk(response.data);
         }
         return response?.data;
@@ -129,7 +144,7 @@ export class IssueService extends APIService {
   }
 
   async getIssueActivities(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueActivity[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/history/`)
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/history/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -173,7 +188,10 @@ export class IssueService extends APIService {
       relation?: "blocking" | null;
     }
   ) {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/`, data)
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/issue-relation/`,
+      data
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response;
@@ -182,7 +200,7 @@ export class IssueService extends APIService {
 
   async deleteIssueRelation(workspaceSlug: string, projectId: string, issueId: string, relationId: string) {
     return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/${relationId}/`
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/issue-relation/${relationId}/`
     )
       .then((response) => response?.data)
       .catch((error) => {
@@ -213,7 +231,7 @@ export class IssueService extends APIService {
   }
 
   async patchIssue(workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>): Promise<any> {
-    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`, data)
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -221,8 +239,10 @@ export class IssueService extends APIService {
   }
 
   async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
-    deleteIssueFromLocal(issuesId);
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issuesId}/`)
+    if (this.serviceType === EIssueServiceType.ISSUES) {
+      deleteIssueFromLocal(issuesId);
+    }
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issuesId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -242,7 +262,9 @@ export class IssueService extends APIService {
   }
 
   async subIssues(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueSubIssues> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`)
+    return this.get(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "issues" : "sub-issues"}/`
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -255,7 +277,10 @@ export class IssueService extends APIService {
     issueId: string,
     data: { sub_issue_ids: string[] }
   ): Promise<TIssueSubIssues> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`, data)
+    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;
@@ -263,7 +288,9 @@ export class IssueService extends APIService {
   }
 
   async fetchIssueLinks(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueLink[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/`)
+    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;
@@ -276,7 +303,10 @@ export class IssueService extends APIService {
     issueId: string,
     data: Partial<TIssueLink>
   ): Promise<TIssueLink> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/`, data)
+    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;
@@ -291,7 +321,7 @@ export class IssueService extends APIService {
     data: Partial<TIssueLink>
   ): Promise<TIssueLink> {
     return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`,
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "links" : "issue-links"}/${linkId}/`,
       data
     )
       .then((response) => response?.data)
@@ -302,7 +332,7 @@ export class IssueService extends APIService {
 
   async deleteIssueLink(workspaceSlug: string, projectId: string, issueId: string, linkId: string): Promise<any> {
     return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/${this.serviceType === EIssueServiceType.EPICS ? "links" : "issue-links"}/${linkId}/`
     )
       .then((response) => response?.data)
       .catch((error) => {
@@ -313,7 +343,9 @@ export class IssueService extends APIService {
   async bulkOperations(workspaceSlug: string, projectId: string, data: TBulkOperationsPayload): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-operation-issues/`, data)
       .then((response) => {
-        persistence.syncIssues(projectId);
+        if (this.serviceType === EIssueServiceType.ISSUES) {
+          persistence.syncIssues(projectId);
+        }
         return response?.data;
       })
       .catch((error) => {
@@ -330,7 +362,9 @@ export class IssueService extends APIService {
   ): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`, data)
       .then((response) => {
-        persistence.syncIssues(projectId);
+        if (this.serviceType === EIssueServiceType.ISSUES) {
+          persistence.syncIssues(projectId);
+        }
         return response?.data;
       })
       .catch((error) => {
@@ -349,7 +383,9 @@ export class IssueService extends APIService {
   }> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-archive-issues/`, data)
       .then((response) => {
-        persistence.syncIssues(projectId);
+        if (this.serviceType === EIssueServiceType.ISSUES) {
+          persistence.syncIssues(projectId);
+        }
         return response?.data;
       })
       .catch((error) => {
@@ -365,7 +401,7 @@ export class IssueService extends APIService {
   ): Promise<{
     subscribed: boolean;
   }> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/subscribe/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -373,7 +409,9 @@ export class IssueService extends APIService {
   }
 
   async unsubscribeFromIssueNotifications(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/subscribe/`
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -381,10 +419,64 @@ export class IssueService extends APIService {
   }
 
   async subscribeToIssueNotifications(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
+    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((response) => {
+        // skip issue update when the service type is epic
+        if (response.data && this.serviceType === EIssueServiceType.ISSUES) {
+          updateIssue({ ...response.data, is_local_update: 1 });
+        }
+        // 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/web/core/services/issue/issue_activity.service.ts b/web/core/services/issue/issue_activity.service.ts
index b99d07d88..103cf6e21 100644
--- a/web/core/services/issue/issue_activity.service.ts
+++ b/web/core/services/issue/issue_activity.service.ts
@@ -1,12 +1,16 @@
-import { TIssueActivity } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssueActivity, TIssueServiceType } from "@plane/types";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
 // types
 // helper
 
 export class IssueActivityService extends APIService {
-  constructor() {
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
     super(API_BASE_URL);
+    this.serviceType = serviceType;
   }
 
   async getIssueActivities(
@@ -19,9 +23,9 @@ export class IssueActivityService extends APIService {
         }
       | object = {}
   ): Promise<TIssueActivity[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/history/`, {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/history/`, {
       params: {
-        activity_type: "issue-property",
+        activity_type: `${this.serviceType === EIssueServiceType.EPICS ? "epic-property" : "issue-property"}`,
         ...params,
       },
     })
diff --git a/web/core/services/issue/issue_archive.service.ts b/web/core/services/issue/issue_archive.service.ts
index 9012fce5b..b86886ca9 100644
--- a/web/core/services/issue/issue_archive.service.ts
+++ b/web/core/services/issue/issue_archive.service.ts
@@ -1,12 +1,16 @@
-import { TIssue } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { TIssue, TIssueServiceType } from "@plane/types";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { APIService } from "@/services/api.service";
 // types
 // constants
 
 export class IssueArchiveService extends APIService {
-  constructor() {
+  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> {
@@ -30,7 +34,7 @@ export class IssueArchiveService extends APIService {
   ): Promise<{
     archived_at: string;
   }> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/archive/`)
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/archive/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -38,7 +42,7 @@ export class IssueArchiveService extends APIService {
   }
 
   async restoreIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/archive/`)
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/archive/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -51,7 +55,7 @@ export class IssueArchiveService extends APIService {
     issueId: string,
     queries?: any
   ): Promise<TIssue> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/archive/`, {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/archive/`, {
       params: queries,
     })
       .then((response) => response?.data)
diff --git a/web/core/services/issue/issue_attachment.service.ts b/web/core/services/issue/issue_attachment.service.ts
index b550217cf..322e8c2c6 100644
--- a/web/core/services/issue/issue_attachment.service.ts
+++ b/web/core/services/issue/issue_attachment.service.ts
@@ -1,6 +1,7 @@
 import { AxiosRequestConfig } from "axios";
+import { EIssueServiceType } from "@plane/constants";
 // plane types
-import { TIssueAttachment, TIssueAttachmentUploadResponse } from "@plane/types";
+import { TIssueAttachment, TIssueAttachmentUploadResponse, TIssueServiceType } from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { generateFileUploadPayload, getFileMetaDataForUpload } from "@/helpers/file.helper";
@@ -10,11 +11,13 @@ import { FileUploadService } from "@/services/file-upload.service";
 
 export class IssueAttachmentService extends APIService {
   private fileUploadService: FileUploadService;
+  private serviceType: TIssueServiceType;
 
-  constructor() {
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
     super(API_BASE_URL);
     // upload service
     this.fileUploadService = new FileUploadService();
+    this.serviceType = serviceType;
   }
 
   private async updateIssueAttachmentUploadStatus(
@@ -24,7 +27,7 @@ export class IssueAttachmentService extends APIService {
     attachmentId: string
   ): Promise<void> {
     return this.patch(
-      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/attachments/${attachmentId}/`
+      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/${attachmentId}/`
     )
       .then((response) => response?.data)
       .catch((error) => {
@@ -41,7 +44,7 @@ export class IssueAttachmentService extends APIService {
   ): Promise<TIssueAttachment> {
     const fileMetaData = getFileMetaDataForUpload(file);
     return this.post(
-      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/attachments/`,
+      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/`,
       fileMetaData
     )
       .then(async (response) => {
@@ -61,7 +64,9 @@ export class IssueAttachmentService extends APIService {
   }
 
   async getIssueAttachments(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueAttachment[]> {
-    return this.get(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/attachments/`)
+    return this.get(
+      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/`
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -75,7 +80,7 @@ export class IssueAttachmentService extends APIService {
     assetId: string
   ): Promise<TIssueAttachment> {
     return this.delete(
-      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/attachments/${assetId}/`
+      `/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/attachments/${assetId}/`
     )
       .then((response) => response?.data)
       .catch((error) => {
diff --git a/web/core/services/issue/issue_comment.service.ts b/web/core/services/issue/issue_comment.service.ts
index b0c9821a3..ccfce8a86 100644
--- a/web/core/services/issue/issue_comment.service.ts
+++ b/web/core/services/issue/issue_comment.service.ts
@@ -1,5 +1,6 @@
+import { EIssueServiceType } from "@plane/constants";
 // plane types
-import { TFileSignedURLResponse, TIssueComment } from "@plane/types";
+import { TFileSignedURLResponse, TIssueComment, TIssueServiceType } from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { generateFileUploadPayload, getFileMetaDataForUpload } from "@/helpers/file.helper";
@@ -9,11 +10,13 @@ import { FileUploadService } from "@/services/file-upload.service";
 
 export class IssueCommentService extends APIService {
   private fileUploadService: FileUploadService;
+  private serviceType: TIssueServiceType;
 
-  constructor() {
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
     super(API_BASE_URL);
     // upload service
     this.fileUploadService = new FileUploadService();
+    this.serviceType = serviceType;
   }
 
   async getIssueComments(
@@ -26,9 +29,9 @@ export class IssueCommentService extends APIService {
         }
       | object = {}
   ): Promise<TIssueComment[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/history/`, {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/history/`, {
       params: {
-        activity_type: "issue-comment",
+        activity_type: `${this.serviceType === EIssueServiceType.EPICS ? "epic-comment" : "issue-comment"}`,
         ...params,
       },
     })
@@ -44,7 +47,10 @@ export class IssueCommentService extends APIService {
     issueId: string,
     data: Partial<TIssueComment>
   ): Promise<TIssueComment> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`, data)
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/comments/`,
+      data
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -59,7 +65,7 @@ export class IssueCommentService extends APIService {
     data: Partial<TIssueComment>
   ): Promise<void> {
     return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`,
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/comments/${commentId}/`,
       data
     )
       .then((response) => response?.data)
@@ -75,7 +81,7 @@ export class IssueCommentService extends APIService {
     commentId: string
   ): Promise<void> {
     return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/comments/${commentId}/`
     )
       .then((response) => response?.data)
       .catch((error) => {
diff --git a/web/core/services/issue/issue_reaction.service.ts b/web/core/services/issue/issue_reaction.service.ts
index 9e2d355e1..39fc8406a 100644
--- a/web/core/services/issue/issue_reaction.service.ts
+++ b/web/core/services/issue/issue_reaction.service.ts
@@ -1,12 +1,16 @@
-import type { TIssueCommentReaction, TIssueReaction } from "@plane/types";
+import { EIssueServiceType } from "@plane/constants";
+import { type TIssueCommentReaction, type TIssueReaction, type TIssueServiceType } from "@plane/types";
 import { API_BASE_URL } from "@/helpers/common.helper";
 // services
 import { APIService } from "@/services/api.service";
 // types
 
 export class IssueReactionService extends APIService {
-  constructor() {
+  private serviceType: TIssueServiceType;
+
+  constructor(serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
     super(API_BASE_URL);
+    this.serviceType = serviceType;
   }
 
   async createIssueReaction(
@@ -15,7 +19,10 @@ export class IssueReactionService extends APIService {
     issueId: string,
     data: Partial<TIssueReaction>
   ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`, data)
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/reactions/`,
+      data
+    )
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -23,7 +30,7 @@ export class IssueReactionService extends APIService {
   }
 
   async listIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<TIssueReaction[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`)
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/reactions/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -32,7 +39,7 @@ export class IssueReactionService extends APIService {
 
   async deleteIssueReaction(workspaceSlug: string, projectId: string, issueId: string, reaction: string): Promise<any> {
     return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/${reaction}/`
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/${this.serviceType}/${issueId}/reactions/${reaction}/`
     )
       .then((response) => response?.data)
       .catch((error) => {
diff --git a/web/core/services/issue_filter.service.ts b/web/core/services/issue_filter.service.ts
index d051c685c..3e288bb1a 100644
--- a/web/core/services/issue_filter.service.ts
+++ b/web/core/services/issue_filter.service.ts
@@ -48,6 +48,26 @@ export class IssueFiltersService extends APIService {
       });
   }
 
+  // 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,
diff --git a/web/core/services/page/project-page.service.ts b/web/core/services/page/project-page.service.ts
index 00d9401a6..cafee7621 100644
--- a/web/core/services/page/project-page.service.ts
+++ b/web/core/services/page/project-page.service.ts
@@ -47,7 +47,12 @@ export class ProjectPageService extends APIService {
       });
   }
 
-  async updateAccess(workspaceSlug: string, projectId: string, pageId: string, data: Partial<TPage>): Promise<void> {
+  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) => {
@@ -146,7 +151,7 @@ export class ProjectPageService extends APIService {
       });
   }
 
-  async updateDescriptionYJS(
+  async updateDescription(
     workspaceSlug: string,
     projectId: string,
     pageId: string,
@@ -158,4 +163,22 @@ export class ProjectPageService extends APIService {
         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/web/core/services/project/project.service.ts b/web/core/services/project/project.service.ts
index dcc9d11b5..fc8ed9442 100644
--- a/web/core/services/project/project.service.ts
+++ b/web/core/services/project/project.service.ts
@@ -1,12 +1,14 @@
 import type {
   GithubRepositoriesResponse,
   ISearchIssueResponse,
+  TProjectAnalyticsCount,
+  TProjectAnalyticsCountParams,
   TProjectIssuesSearchParams,
 } from "@plane/types";
 // helpers
 import { API_BASE_URL } from "@/helpers/common.helper";
 // plane web types
-import { TProject } from "@/plane-web/types";
+import { TProject, TPartialProject } from "@/plane-web/types";
 // services
 import { APIService } from "@/services/api.service";
 
@@ -35,7 +37,7 @@ export class ProjectService extends APIService {
       });
   }
 
-  async getProjects(workspaceSlug: string): Promise<TProject[]> {
+  async getProjectsLite(workspaceSlug: string): Promise<TPartialProject[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -43,6 +45,14 @@ export class ProjectService extends APIService {
       });
   }
 
+  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)
@@ -51,6 +61,19 @@ export class ProjectService extends APIService {
       });
   }
 
+  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)
diff --git a/web/core/services/sticky.service.ts b/web/core/services/sticky.service.ts
new file mode 100644
index 000000000..7e31b311b
--- /dev/null
+++ b/web/core/services/sticky.service.ts
@@ -0,0 +1,63 @@
+// helpers
+import { STICKIES_PER_PAGE } from "@plane/constants";
+import { TSticky } from "@plane/types";
+import { API_BASE_URL } from "@/helpers/common.helper";
+// 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/web/core/services/timezone.service.ts b/web/core/services/timezone.service.ts
new file mode 100644
index 000000000..d19e7e964
--- /dev/null
+++ b/web/core/services/timezone.service.ts
@@ -0,0 +1,23 @@
+import { TTimezones } from "@plane/types";
+// helpers
+import { API_BASE_URL } from "@/helpers/common.helper";
+// 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/web/core/services/workspace.service.ts b/web/core/services/workspace.service.ts
index e1aa9b7cd..95ed2c976 100644
--- a/web/core/services/workspace.service.ts
+++ b/web/core/services/workspace.service.ts
@@ -12,7 +12,13 @@ import {
   IUserProjectsRole,
   IWorkspaceView,
   TIssuesResponse,
+  TLink,
+  TSearchResponse,
+  TSearchEntityRequestPayload,
+  TWidgetEntityData,
+  TActivityEntityData,
 } from "@plane/types";
+import { IWorkspaceSidebarNavigationItem, IWorkspaceSidebarNavigation } from "@plane/types/src/workspace";
 import { APIService } from "@/services/api.service";
 // helpers
 // types
@@ -277,4 +283,104 @@ export class WorkspaceService extends APIService {
         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;
+      });
+  }
 }
diff --git a/web/core/store/command-palette.store.ts b/web/core/store/base-command-palette.store.ts
similarity index 85%
rename from web/core/store/command-palette.store.ts
rename to web/core/store/base-command-palette.store.ts
index 4cede3434..aaf1170c0 100644
--- a/web/core/store/command-palette.store.ts
+++ b/web/core/store/base-command-palette.store.ts
@@ -1,17 +1,19 @@
-import { observable, action, makeObservable, computed } from "mobx";
-// services
-import { EIssuesStoreType, TCreateModalStoreTypes } from "@/constants/issue";
-// types / constants
-import { DEFAULT_CREATE_PAGE_MODAL_DATA, EPageAccess, TCreatePageModal } from "@/constants/page";
+import { observable, action, makeObservable } from "mobx";
+import {
+  EIssuesStoreType,
+  TCreateModalStoreTypes,
+  DEFAULT_CREATE_PAGE_MODAL_DATA,
+  EPageAccess,
+  TCreatePageModal,
+} from "@plane/constants";
 
 export interface ModalData {
   store: EIssuesStoreType;
   viewId: string;
 }
 
-export interface ICommandPaletteStore {
+export interface IBaseCommandPaletteStore {
   // observables
-
   isCommandPaletteOpen: boolean;
   isShortcutModalOpen: boolean;
   isCreateProjectModalOpen: boolean;
@@ -22,8 +24,8 @@ export interface ICommandPaletteStore {
   isCreateIssueModalOpen: boolean;
   isDeleteIssueModalOpen: boolean;
   isBulkDeleteIssueModalOpen: boolean;
-  // computed
-  isAnyModalOpen: boolean;
+  createIssueStoreType: TCreateModalStoreTypes;
+  allStickiesModal: boolean;
   // toggle actions
   toggleCommandPaletteModal: (value?: boolean) => void;
   toggleShortcutModal: (value?: boolean) => void;
@@ -35,11 +37,10 @@ export interface ICommandPaletteStore {
   toggleCreateModuleModal: (value?: boolean) => void;
   toggleDeleteIssueModal: (value?: boolean) => void;
   toggleBulkDeleteIssueModal: (value?: boolean) => void;
-
-  createIssueStoreType: TCreateModalStoreTypes;
+  toggleAllStickiesModal: (value?: boolean) => void;
 }
 
-export class CommandPaletteStore implements ICommandPaletteStore {
+export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStore {
   // observables
   isCommandPaletteOpen: boolean = false;
   isShortcutModalOpen: boolean = false;
@@ -51,8 +52,8 @@ export class CommandPaletteStore implements ICommandPaletteStore {
   isDeleteIssueModalOpen: boolean = false;
   isBulkDeleteIssueModalOpen: boolean = false;
   createPageModal: TCreatePageModal = DEFAULT_CREATE_PAGE_MODAL_DATA;
-
   createIssueStoreType: TCreateModalStoreTypes = EIssuesStoreType.PROJECT;
+  allStickiesModal: boolean = false;
 
   constructor() {
     makeObservable(this, {
@@ -67,8 +68,8 @@ export class CommandPaletteStore implements ICommandPaletteStore {
       isDeleteIssueModalOpen: observable.ref,
       isBulkDeleteIssueModalOpen: observable.ref,
       createPageModal: observable,
-      // computed
-      isAnyModalOpen: computed,
+      createIssueStoreType: observable,
+      allStickiesModal: observable,
       // projectPages: computed,
       // toggle actions
       toggleCommandPaletteModal: action,
@@ -81,14 +82,15 @@ export class CommandPaletteStore implements ICommandPaletteStore {
       toggleCreateModuleModal: action,
       toggleDeleteIssueModal: action,
       toggleBulkDeleteIssueModal: action,
+      toggleAllStickiesModal: action,
     });
   }
 
   /**
-   * Checks whether any modal is open or not.
-   * @returns boolean
+   * Returns whether any base modal is open
+   * @protected - allows access from child classes
    */
-  get isAnyModalOpen() {
+  protected getCoreModalsState(): boolean {
     return Boolean(
       this.isCreateIssueModalOpen ||
         this.isCreateCycleModalOpen ||
@@ -98,7 +100,8 @@ export class CommandPaletteStore implements ICommandPaletteStore {
         this.isShortcutModalOpen ||
         this.isBulkDeleteIssueModalOpen ||
         this.isDeleteIssueModalOpen ||
-        this.createPageModal.isOpen
+        this.createPageModal.isOpen ||
+        this.allStickiesModal
     );
   }
 
@@ -240,4 +243,17 @@ export class CommandPaletteStore implements ICommandPaletteStore {
       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;
+    }
+  };
 }
diff --git a/web/core/store/cycle.store.ts b/web/core/store/cycle.store.ts
index dd90cfe1d..4e56e56c1 100644
--- a/web/core/store/cycle.store.ts
+++ b/web/core/store/cycle.store.ts
@@ -1,4 +1,4 @@
-import { isFuture, isPast, isToday } from "date-fns";
+import { isPast, isToday } from "date-fns";
 import isEmpty from "lodash/isEmpty";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
@@ -7,16 +7,14 @@ import { computedFn } from "mobx-utils";
 // types
 import {
   ICycle,
-  CycleDateCheckData,
   TCyclePlotType,
   TProgressSnapshot,
   TCycleEstimateDistribution,
   TCycleDistribution,
   TCycleEstimateType,
-  TCycleProgress,
 } from "@plane/types";
 // helpers
-import { orderCycles, shouldFilterCycle, formatActiveCycle } from "@/helpers/cycle.helper";
+import { orderCycles, shouldFilterCycle } from "@/helpers/cycle.helper";
 import { getDate } from "@/helpers/date-time.helper";
 import { DistributionUpdates, updateDistribution } from "@/helpers/distribution-update.helper";
 // services
@@ -42,21 +40,18 @@ export interface ICycleStore {
   // computed
   currentProjectCycleIds: string[] | null;
   currentProjectCompletedCycleIds: string[] | null;
-  currentProjectUpcomingCycleIds: string[] | null;
   currentProjectIncompleteCycleIds: string[] | null;
-  currentProjectDraftCycleIds: string[] | null;
   currentProjectActiveCycleId: string | null;
   currentProjectArchivedCycleIds: string[] | null;
   currentProjectActiveCycle: ICycle | null;
 
   // computed actions
-  getActiveCycleProgress: (cycleId?: string) => { cycle: ICycle; isBurnDown: boolean; isTypeIssue: boolean } | null;
   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;
-  getActiveCycleById: (cycleId: string) => ICycle | null;
+  getProjectCycleDetails: (projectId: string) => ICycle[] | null;
   getProjectCycleIds: (projectId: string) => string[] | null;
   getPlotTypeByCycleId: (cycleId: string) => TCyclePlotType;
   getEstimateTypeByCycleId: (cycleId: string) => TCycleEstimateType;
@@ -64,7 +59,6 @@ export interface ICycleStore {
 
   // actions
   updateCycleDistribution: (distributionUpdates: DistributionUpdates, cycleId: string) => void;
-  validateDate: (workspaceSlug: string, projectId: string, payload: CycleDateCheckData) => Promise<any>;
   setPlotType: (cycleId: string, plotType: TCyclePlotType) => void;
   setEstimateType: (cycleId: string, estimateType: TCycleEstimateType) => void;
   // fetch
@@ -130,15 +124,12 @@ export class CycleStore implements ICycleStore {
       // computed
       currentProjectCycleIds: computed,
       currentProjectCompletedCycleIds: computed,
-      currentProjectUpcomingCycleIds: computed,
       currentProjectIncompleteCycleIds: computed,
-      currentProjectDraftCycleIds: computed,
       currentProjectActiveCycleId: computed,
       currentProjectArchivedCycleIds: computed,
       currentProjectActiveCycle: computed,
 
       // actions
-      setPlotType: action,
       setEstimateType: action,
       fetchWorkspaceCycles: action,
       fetchAllCycles: action,
@@ -195,22 +186,6 @@ export class CycleStore implements ICycleStore {
     return completedCycleIds;
   }
 
-  /**
-   * returns all upcoming cycle ids for a project
-   */
-  get currentProjectUpcomingCycleIds() {
-    const projectId = this.rootStore.router.projectId;
-    if (!projectId || !this.fetchedMap[projectId]) return null;
-    let upcomingCycles = Object.values(this.cycleMap ?? {}).filter((c) => {
-      const startDate = getDate(c.start_date);
-      const isStartDateUpcoming = startDate && isFuture(startDate);
-      return c.project_id === projectId && isStartDateUpcoming && !c?.archived_at;
-    });
-    upcomingCycles = sortBy(upcomingCycles, [(c) => c.sort_order]);
-    const upcomingCycleIds = upcomingCycles.map((c) => c.id);
-    return upcomingCycleIds;
-  }
-
   /**
    * returns all incomplete cycle ids for a project
    */
@@ -227,20 +202,6 @@ export class CycleStore implements ICycleStore {
     return incompleteCycleIds;
   }
 
-  /**
-   * returns all draft cycle ids for a project
-   */
-  get currentProjectDraftCycleIds() {
-    const projectId = this.rootStore.router.projectId;
-    if (!projectId || !this.fetchedMap[projectId]) return null;
-    let draftCycles = Object.values(this.cycleMap ?? {}).filter(
-      (c) => c.project_id === projectId && !c.start_date && !c.end_date && !c?.archived_at
-    );
-    draftCycles = sortBy(draftCycles, [(c) => c.sort_order]);
-    const draftCycleIds = draftCycles.map((c) => c.id);
-    return draftCycleIds;
-  }
-
   /**
    * returns active cycle id for a project
    */
@@ -285,19 +246,6 @@ export class CycleStore implements ICycleStore {
     } else return false;
   });
 
-  /**
-   * returns active cycle progress for a project
-   */
-  getActiveCycleProgress = computedFn((cycleId?: string) => {
-    const cycle = cycleId ? this.cycleMap[cycleId] : this.currentProjectActiveCycle;
-    if (!cycle) return null;
-
-    const isTypeIssue = this.getEstimateTypeByCycleId(cycle.id) === "issues";
-    const isBurnDown = this.getPlotTypeByCycleId(cycle.id) === "burndown";
-
-    return { cycle, isTypeIssue, isBurnDown };
-  });
-
   /**
    * @description returns filtered cycle ids based on display filters and filters
    * @param {TCycleDisplayFilters} displayFilters
@@ -379,37 +327,28 @@ export class CycleStore implements ICycleStore {
   getCycleNameById = computedFn((cycleId: string): string => this.cycleMap?.[cycleId]?.name);
 
   /**
-   * @description returns active cycle details by cycle id
-   * @param cycleId
-   * @returns
+   * @description returns list of cycle details of the project id passed as argument
+   * @param projectId
    */
-  getActiveCycleById = computedFn((cycleId: string): ICycle | null =>
-    this.activeCycleIdMap?.[cycleId] && this.cycleMap?.[cycleId] ? this.cycleMap?.[cycleId] : null
-  );
+  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 => {
-    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]);
+    const cycles = this.getProjectCycleDetails(projectId);
+    if (!cycles) return null;
     const cycleIds = cycles.map((c) => c.id);
     return cycleIds || null;
   });
 
-  /**
-   * @description validates cycle dates
-   * @param workspaceSlug
-   * @param projectId
-   * @param payload
-   * @returns
-   */
-  validateDate = async (workspaceSlug: string, projectId: string, payload: CycleDateCheckData) =>
-    await this.cycleService.cycleDateCheck(workspaceSlug, projectId, payload);
-
   /**
    * @description gets the plot type for the cycle store
    * @param {TCyclePlotType} plotType
@@ -473,14 +412,16 @@ export class CycleStore implements ICycleStore {
         runInAction(() => {
           response.forEach((cycle) => {
             set(this.cycleMap, [cycle.id], cycle);
-            cycle.status?.toLowerCase() === "current" && set(this.activeCycleIdMap, [cycle.id], true);
+            if (cycle.status?.toLowerCase() === "current") {
+              set(this.activeCycleIdMap, [cycle.id], true);
+            }
           });
           set(this.fetchedMap, projectId, true);
           this.loader = false;
         });
         return response;
       });
-    } catch (error) {
+    } catch {
       this.loader = false;
       return undefined;
     }
@@ -553,6 +494,7 @@ export class CycleStore implements ICycleStore {
    * @param cycleId
    *  @returns
    */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   fetchActiveCycleProgressPro = action(async (workspaceSlug: string, projectId: string, cycleId: string) => {});
 
   /**
diff --git a/web/core/store/editor/asset.store.ts b/web/core/store/editor/asset.store.ts
new file mode 100644
index 000000000..587acba02
--- /dev/null
+++ b/web/core/store/editor/asset.store.ts
@@ -0,0 +1,121 @@
+import debounce from "lodash/debounce";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+import { v4 as uuidv4 } from "uuid";
+// plane types
+import { TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
+// services
+import { FileService } from "@/services/file.service";
+import { 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>;
+}
+
+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];
+      });
+    }
+  };
+}
diff --git a/web/core/store/event-tracker.store.ts b/web/core/store/event-tracker.store.ts
index 075c79d66..c6f68a097 100644
--- a/web/core/store/event-tracker.store.ts
+++ b/web/core/store/event-tracker.store.ts
@@ -1,6 +1,6 @@
 import { action, computed, makeObservable, observable } from "mobx";
 import posthog from "posthog-js";
-// stores
+// store
 import {
   GROUP_WORKSPACE,
   WORKSPACE_CREATED,
@@ -13,8 +13,7 @@ import {
   getProjectStateEventPayload,
   getWorkspaceEventPayload,
   getPageEventPayload,
-} from "@/constants/event-tracker";
-// store
+} from "@plane/constants";
 import { CoreRootStore } from "./root.store";
 
 export interface IEventTrackerStore {
diff --git a/web/core/store/favorite.store.ts b/web/core/store/favorite.store.ts
index 3f4f636d3..a588f2af3 100644
--- a/web/core/store/favorite.store.ts
+++ b/web/core/store/favorite.store.ts
@@ -174,23 +174,14 @@ export class FavoriteStore implements IFavoriteStore {
    * @returns Promise<void>
    */
   moveFavoriteToFolder = async (workspaceSlug: string, favoriteId: string, data: Partial<IFavorite>) => {
-    const oldParent = this.favoriteMap[favoriteId].parent;
     try {
+      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, data);
       runInAction(() => {
         // add parent of the favorite
         set(this.favoriteMap, [favoriteId, "parent"], data.parent);
       });
-      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, data);
     } catch (error) {
-      console.error("Failed to move favorite from favorite store");
-
-      // revert the changes
-      runInAction(() => {
-        if (!data.parent) return;
-
-        // revert the parent
-        set(this.favoriteMap, [favoriteId, "parent"], oldParent);
-      });
+      console.error("Failed to move favorite to folder", error);
       throw error;
     }
   };
@@ -201,7 +192,6 @@ export class FavoriteStore implements IFavoriteStore {
     destinationId: string,
     edge: string | undefined
   ) => {
-    const initialSequence = this.favoriteMap[favoriteId].sequence;
     try {
       let resultSequence = 10000;
       if (edge) {
@@ -221,35 +211,27 @@ export class FavoriteStore implements IFavoriteStore {
           }
         }
       }
+
+      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { sequence: resultSequence });
+
       runInAction(() => {
         set(this.favoriteMap, [favoriteId, "sequence"], resultSequence);
       });
-
-      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { sequence: resultSequence });
     } catch (error) {
       console.error("Failed to move favorite folder");
-      runInAction(() => {
-        set(this.favoriteMap, [favoriteId, "sequence"], initialSequence);
-        throw error;
-      });
+      throw error;
     }
   };
 
   removeFromFavoriteFolder = async (workspaceSlug: string, favoriteId: string) => {
-    const parent = this.favoriteMap[favoriteId].parent;
     try {
+      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { parent: null });
       runInAction(() => {
         //remove parent
         set(this.favoriteMap, [favoriteId, "parent"], null);
       });
-      await this.favoriteService.updateFavorite(workspaceSlug, favoriteId, { parent: null });
     } catch (error) {
       console.error("Failed to move favorite");
-      runInAction(() => {
-        set(this.favoriteMap, [favoriteId, "parent"], parent);
-
-        throw error;
-      });
       throw error;
     }
   };
@@ -384,7 +366,7 @@ export class FavoriteStore implements IFavoriteStore {
           set(this.favoriteMap, [favorite.id], favorite);
           this.favoriteIds.push(favorite.id);
           this.favoriteIds = uniqBy(this.favoriteIds, (id) => id);
-          favorite.entity_identifier && set(this.entityMap, [favorite.entity_identifier], favorite);
+          if (favorite.entity_identifier) set(this.entityMap, [favorite.entity_identifier], favorite);
         });
       });
 
diff --git a/web/core/store/global-view.store.ts b/web/core/store/global-view.store.ts
index e0d0d7a7b..c9840b4c8 100644
--- a/web/core/store/global-view.store.ts
+++ b/web/core/store/global-view.store.ts
@@ -4,10 +4,9 @@ import isEqual from "lodash/isEqual";
 import set from "lodash/set";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 import { computedFn } from "mobx-utils";
+import { EIssueFilterType, EViewAccess } from "@plane/constants";
 import { IIssueFilterOptions, IWorkspaceView } from "@plane/types";
 // constants
-import { EIssueFilterType } from "@/constants/issue";
-import { EViewAccess } from "@/constants/views";
 // services
 import { WorkspaceService } from "@/plane-web/services";
 // store
diff --git a/web/core/store/inbox/inbox-issue.store.ts b/web/core/store/inbox/inbox-issue.store.ts
index 74e6534d6..2f72575b1 100644
--- a/web/core/store/inbox/inbox-issue.store.ts
+++ b/web/core/store/inbox/inbox-issue.store.ts
@@ -1,7 +1,8 @@
 import clone from "lodash/clone";
 import set from "lodash/set";
 import { makeObservable, observable, runInAction, action } from "mobx";
-import { TIssue, TInboxIssue, TInboxIssueStatus, TInboxDuplicateIssueDetails } from "@plane/types";
+import { TInboxIssue, TInboxIssueStatus } from "@plane/constants";
+import { TIssue, TInboxDuplicateIssueDetails } from "@plane/types";
 // helpers
 import { EInboxIssueStatus } from "@/helpers/inbox.helper";
 // local db
@@ -98,7 +99,9 @@ export class InboxIssueStore implements IInboxIssueStore {
 
       // If issue accepted sync issue to local db
       if (status === EInboxIssueStatus.ACCEPTED) {
-        addIssueToPersistanceLayer({ ...this.issue, ...inboxIssue.issue });
+        const updatedIssue = { ...this.issue, ...inboxIssue.issue };
+        this.store.issue.issues.addIssue([updatedIssue]);
+        await addIssueToPersistanceLayer(updatedIssue);
       }
     } catch {
       runInAction(() => set(this, "status", previousData.status));
diff --git a/web/core/store/inbox/project-inbox.store.ts b/web/core/store/inbox/project-inbox.store.ts
index 4dcb72977..55a48b690 100644
--- a/web/core/store/inbox/project-inbox.store.ts
+++ b/web/core/store/inbox/project-inbox.store.ts
@@ -5,9 +5,8 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
+import { TInboxIssue, TInboxIssueCurrentTab } from "@plane/constants";
 import {
-  TInboxIssue,
-  TInboxIssueCurrentTab,
   TInboxIssueFilter,
   TInboxIssueSorting,
   TInboxIssuePaginationInfo,
@@ -410,7 +409,7 @@ export class ProjectInboxStore implements IProjectInboxStore {
       console.error("Error fetching the intake issues", error);
       this.loader = undefined;
       this.error = {
-        message: "Error fetching the intake issues please try again later.",
+        message: "Error fetching the intake work items please try again later.",
         status: "init-error",
       };
       throw error;
@@ -450,7 +449,7 @@ export class ProjectInboxStore implements IProjectInboxStore {
     } catch (error) {
       console.error("Error fetching the intake issues", error);
       this.error = {
-        message: "Error fetching the paginated intake issues please try again later.",
+        message: "Error fetching the paginated intake work items please try again later.",
         status: "pagination-error",
       };
       throw error;
diff --git a/web/core/store/issue/archived/filter.store.ts b/web/core/store/issue/archived/filter.store.ts
index ad673c8cf..d9cbb9ab1 100644
--- a/web/core/store/issue/archived/filter.store.ts
+++ b/web/core/store/issue/archived/filter.store.ts
@@ -5,6 +5,7 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
 import { computedFn } from "mobx-utils";
+import { EIssuesStoreType, EIssueFilterType } from "@plane/constants";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -14,7 +15,6 @@ import {
   TIssueParams,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 import { IssueFiltersService } from "@/services/issue_filter.service";
 import { IBaseIssueFilterStore, IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
diff --git a/web/core/store/issue/cycle/filter.store.ts b/web/core/store/issue/cycle/filter.store.ts
index 5e62061f0..c8a0bc0fb 100644
--- a/web/core/store/issue/cycle/filter.store.ts
+++ b/web/core/store/issue/cycle/filter.store.ts
@@ -3,6 +3,7 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
 import { computedFn } from "mobx-utils";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -12,7 +13,6 @@ import {
   TIssueParams,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 import { IssueFiltersService } from "@/services/issue_filter.service";
 import { IBaseIssueFilterStore, IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
diff --git a/web/core/store/issue/cycle/issue.store.ts b/web/core/store/issue/cycle/issue.store.ts
index ded0867e6..87f5a9212 100644
--- a/web/core/store/issue/cycle/issue.store.ts
+++ b/web/core/store/issue/cycle/issue.store.ts
@@ -20,6 +20,8 @@ import {
 } from "@plane/types";
 // helpers
 import { getDistributionPathsPostUpdate } from "@/helpers/distribution-update.helper";
+//local
+import { persistence } from "@/local-db/storage.sqlite";
 import { BaseIssuesStore, IBaseIssuesStore } from "../helpers/base-issues.store";
 //
 import { IIssueRootStore } from "../root.store";
@@ -307,8 +309,11 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
       payload
     );
     // call fetch issues
-    this.paginationOptions &&
-      (await this.fetchIssues(workspaceSlug, projectId, "mutation", this.paginationOptions, cycleId));
+    if (this.paginationOptions) {
+      await persistence.syncIssues(projectId.toString());
+      await this.fetchIssues(workspaceSlug, projectId, "mutation", this.paginationOptions, cycleId);
+    }
+
     return response;
   };
 
diff --git a/web/core/store/issue/draft/filter.store.ts b/web/core/store/issue/draft/filter.store.ts
index bbada1199..7b06262c9 100644
--- a/web/core/store/issue/draft/filter.store.ts
+++ b/web/core/store/issue/draft/filter.store.ts
@@ -5,6 +5,7 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
 import { computedFn } from "mobx-utils";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -14,7 +15,6 @@ import {
   TIssueParams,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 import { IssueFiltersService } from "@/services/issue_filter.service";
 import { IBaseIssueFilterStore, IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
diff --git a/web/core/store/issue/helpers/base-issues.store.ts b/web/core/store/issue/helpers/base-issues.store.ts
index d5545db44..be120781d 100644
--- a/web/core/store/issue/helpers/base-issues.store.ts
+++ b/web/core/store/issue/helpers/base-issues.store.ts
@@ -12,8 +12,9 @@ import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
+// plane constants
+import { EIssueLayoutTypes, ALL_ISSUES, EIssueServiceType, ISSUE_PRIORITIES } from "@plane/constants";
 // types
-import { ALL_ISSUES } from "@plane/constants";
 import {
   TIssue,
   TIssueGroupByOptions,
@@ -31,8 +32,6 @@ import {
 } from "@plane/types";
 // components
 import { IBlockUpdateDependencyData } from "@/components/gantt-chart";
-// constants
-import { EIssueLayoutTypes, ISSUE_PRIORITIES } from "@/constants/issue";
 // helpers
 import { convertToISODateString } from "@/helpers/date-time.helper";
 // local-db
@@ -129,6 +128,7 @@ const ISSUE_GROUP_BY_KEY: Record<TIssueDisplayFilterOptions, keyof TIssue> = {
   target_date: "target_date",
   cycle: "cycle_id",
   module: "module_ids",
+  team_project: "project_id",
 };
 
 export const ISSUE_FILTER_DEFAULT_DATA: Record<TIssueDisplayFilterOptions, keyof TIssue> = {
@@ -142,6 +142,7 @@ export const ISSUE_FILTER_DEFAULT_DATA: Record<TIssueDisplayFilterOptions, keyof
   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
@@ -200,7 +201,12 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
   // API Abort controller
   controller: AbortController;
 
-  constructor(_rootStore: IIssueRootStore, issueFilterStore: IBaseIssueFilterStore, isArchived = false) {
+  constructor(
+    _rootStore: IIssueRootStore,
+    issueFilterStore: IBaseIssueFilterStore,
+    isArchived = false,
+    serviceType = EIssueServiceType.ISSUES
+  ) {
     makeObservable(this, {
       // observable
       loader: observable,
@@ -254,7 +260,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
 
     this.isArchived = isArchived;
 
-    this.issueService = new IssueService();
+    this.issueService = new IssueService(serviceType);
     this.issueArchiveService = new IssueArchiveService();
     this.issueDraftService = new IssueDraftService();
     this.moduleService = new ModuleService();
@@ -289,6 +295,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
     // Temporary code to fix no load order by
     if (
       this.rootIssueStore.rootStore.user.localDBEnabled &&
+      this.rootIssueStore.rootStore.router.projectId &&
       layout !== EIssueLayoutTypes.SPREADSHEET &&
       orderBy &&
       Object.keys(SPECIAL_ORDER_BY).includes(orderBy)
@@ -663,6 +670,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
     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
@@ -790,7 +798,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
     runInAction(() => {
       issueIds.forEach((issueId) => {
         const issueBeforeUpdate = clone(this.rootIssueStore.issues.getIssueById(issueId));
-        if (!issueBeforeUpdate) throw new Error("Issue not found");
+        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];
diff --git a/web/core/store/issue/helpers/issue-filter-helper.store.ts b/web/core/store/issue/helpers/issue-filter-helper.store.ts
index 3db6dcbb3..c0c31d160 100644
--- a/web/core/store/issue/helpers/issue-filter-helper.store.ts
+++ b/web/core/store/issue/helpers/issue-filter-helper.store.ts
@@ -1,6 +1,13 @@
 import isEmpty from "lodash/isEmpty";
-import { EIssueGroupByToServerOptions, EServerGroupByToFilterOptions } from "@plane/constants";
-// types
+// plane constants
+import {
+  EIssueGroupByToServerOptions,
+  EServerGroupByToFilterOptions,
+  EIssueLayoutTypes,
+  EIssuesStoreType,
+  EIssueFilterType,
+  ENABLE_ISSUE_DEPENDENCIES,
+} from "@plane/constants";
 import {
   IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
@@ -12,14 +19,10 @@ import {
   TIssueParams,
   TStaticViewTypes,
 } from "@plane/types";
-// constants
-import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 // helpers
 import { getComputedDisplayFilters, getComputedDisplayProperties } from "@/helpers/issue.helper";
 // lib
 import { storage } from "@/lib/local-storage";
-// plane-web
-import { ENABLE_ISSUE_DEPENDENCIES } from "@/plane-web/constants";
 
 interface ILocalStoreIssueFilters {
   key: EIssuesStoreType;
@@ -93,6 +96,7 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
       start_date: filters?.start_date || undefined,
       target_date: filters?.target_date || undefined,
       project: filters?.project || undefined,
+      team_project: filters?.team_project || undefined,
       subscriber: filters?.subscriber || undefined,
       issue_type: filters?.issue_type || undefined,
       // display filters
@@ -142,6 +146,7 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
     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,
   });
diff --git a/web/core/store/issue/issue-details/attachment.store.ts b/web/core/store/issue/issue-details/attachment.store.ts
index ef2a356fc..73474a3e8 100644
--- a/web/core/store/issue/issue-details/attachment.store.ts
+++ b/web/core/store/issue/issue-details/attachment.store.ts
@@ -8,7 +8,7 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
 import { computedFn } from "mobx-utils";
 import { v4 as uuidv4 } from "uuid";
 // types
-import { TIssueAttachment, TIssueAttachmentMap, TIssueAttachmentIdMap } from "@plane/types";
+import { TIssueAttachment, TIssueAttachmentMap, TIssueAttachmentIdMap, TIssueServiceType } from "@plane/types";
 // services
 import { IssueAttachmentService } from "@/services/issue";
 import { IIssueRootStore } from "../root.store";
@@ -64,7 +64,7 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
   // services
   issueAttachmentService;
 
-  constructor(rootStore: IIssueRootStore) {
+  constructor(rootStore: IIssueRootStore, serviceType: TIssueServiceType) {
     makeObservable(this, {
       // observables
       attachments: observable,
@@ -82,7 +82,7 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
     this.rootIssueStore = rootStore;
     this.rootIssueDetailStore = rootStore.issueDetail;
     // services
-    this.issueAttachmentService = new IssueAttachmentService();
+    this.issueAttachmentService = new IssueAttachmentService(serviceType);
   }
 
   // computed
@@ -126,7 +126,7 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
     return response;
   };
 
-  debouncedUpdateProgress = debounce((issueId: string, tempId: string, progress: number) => {
+  private debouncedUpdateProgress = debounce((issueId: string, tempId: string, progress: number) => {
     runInAction(() => {
       set(this.attachmentsUploadStatusMap, [issueId, tempId, "progress"], progress);
     });
@@ -161,9 +161,6 @@ export class IssueAttachmentStore implements IIssueAttachmentStore {
         runInAction(() => {
           update(this.attachments, [issueId], (attachmentIds = []) => uniq(concat(attachmentIds, [response.id])));
           set(this.attachmentMap, response.id, response);
-          this.rootIssueStore.issues.updateIssue(issueId, {
-            attachment_count: issueAttachmentsCount + 1, // increment attachment count
-          });
         });
       }
 
diff --git a/web/core/store/issue/issue-details/comment.store.ts b/web/core/store/issue/issue-details/comment.store.ts
index 211a71f48..b0fba6d3c 100644
--- a/web/core/store/issue/issue-details/comment.store.ts
+++ b/web/core/store/issue/issue-details/comment.store.ts
@@ -5,7 +5,7 @@ import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
 // services
-import { TIssueComment, TIssueCommentMap, TIssueCommentIdMap } from "@plane/types";
+import { TIssueComment, TIssueCommentMap, TIssueCommentIdMap, TIssueServiceType } from "@plane/types";
 import { IssueCommentService } from "@/services/issue";
 // types
 import { IIssueDetail } from "./root.store";
@@ -50,12 +50,13 @@ export class IssueCommentStore implements IIssueCommentStore {
   loader: TCommentLoader = "fetch";
   comments: TIssueCommentIdMap = {};
   commentMap: TIssueCommentMap = {};
+  serviceType;
   // root store
   rootIssueDetail: IIssueDetail;
   // services
   issueCommentService;
 
-  constructor(rootStore: IIssueDetail) {
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
     makeObservable(this, {
       // observables
       loader: observable.ref,
@@ -68,9 +69,10 @@ export class IssueCommentStore implements IIssueCommentStore {
       removeComment: action,
     });
     // root store
+    this.serviceType = serviceType;
     this.rootIssueDetail = rootStore;
     // services
-    this.issueCommentService = new IssueCommentService();
+    this.issueCommentService = new IssueCommentService(serviceType);
   }
 
   // helper methods
diff --git a/web/core/store/issue/issue-details/issue.store.ts b/web/core/store/issue/issue-details/issue.store.ts
index a7c439bee..fd3dcedf6 100644
--- a/web/core/store/issue/issue-details/issue.store.ts
+++ b/web/core/store/issue/issue-details/issue.store.ts
@@ -1,7 +1,8 @@
 import { makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
+import { EIssueServiceType } from "@plane/constants";
 // types
-import { TIssue } from "@plane/types";
+import { TIssue, TIssueServiceType } from "@plane/types";
 // local
 import { persistence } from "@/local-db/storage.sqlite";
 // services
@@ -31,6 +32,7 @@ export interface IIssueStoreActions {
     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 {
@@ -38,6 +40,7 @@ export interface IIssueStore extends IIssueStoreActions {
   getIsLocalDBIssueDescription: (issueId: string | undefined) => boolean;
   // helper methods
   getIssueById: (issueId: string) => TIssue | undefined;
+  getIssueIdByIdentifier: (issueIdentifier: string) => string | undefined;
 }
 
 export class IssueStore implements IIssueStore {
@@ -46,11 +49,13 @@ export class IssueStore implements IIssueStore {
   // root store
   rootIssueDetailStore: IIssueDetail;
   // services
+  serviceType;
   issueService;
+  epicService;
   issueArchiveService;
   issueDraftService;
 
-  constructor(rootStore: IIssueDetail) {
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
     makeObservable(this, {
       fetchingIssueDetails: observable.ref,
       localDBIssueDescription: observable.ref,
@@ -58,8 +63,10 @@ export class IssueStore implements IIssueStore {
     // root store
     this.rootIssueDetailStore = rootStore;
     // services
-    this.issueService = new IssueService();
-    this.issueArchiveService = new IssueArchiveService();
+    this.serviceType = serviceType;
+    this.issueService = new IssueService(serviceType);
+    this.epicService = new IssueService(EIssueServiceType.EPICS);
+    this.issueArchiveService = new IssueArchiveService(serviceType);
     this.issueDraftService = new IssueDraftService();
   }
 
@@ -81,6 +88,11 @@ export class IssueStore implements IIssueStore {
     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, issueStatus = "DEFAULT") => {
     const query = {
@@ -90,7 +102,9 @@ export class IssueStore implements IIssueStore {
     let issue: TIssue | undefined;
 
     // fetch issue from local db
-    issue = await persistence.getIssue(issueId);
+    if (this.serviceType === EIssueServiceType.ISSUES) {
+      issue = await persistence.getIssue(issueId);
+    }
 
     this.fetchingIssueDetails = issueId;
 
@@ -103,7 +117,7 @@ export class IssueStore implements IIssueStore {
       issue = await this.issueDraftService.getDraftIssueById(workspaceSlug, projectId, issueId, query);
     else issue = await this.issueService.retrieve(workspaceSlug, projectId, issueId, query);
 
-    if (!issue) throw new Error("Issue not found");
+    if (!issue) throw new Error("Work item not found");
 
     const issuePayload = this.addIssueToStore(issue);
     this.localDBIssueDescription = undefined;
@@ -181,6 +195,7 @@ export class IssueStore implements IIssueStore {
       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]);
@@ -190,15 +205,32 @@ export class IssueStore implements IIssueStore {
   };
 
   updateIssue = async (workspaceSlug: string, projectId: string, issueId: string, data: Partial<TIssue>) => {
-    await this.rootIssueDetailStore.rootIssueStore.projectIssues.updateIssue(workspaceSlug, projectId, issueId, data);
-    await this.rootIssueDetailStore.activity.fetchActivities(workspaceSlug, projectId, issueId);
+    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) =>
-    this.rootIssueDetailStore.rootIssueStore.projectIssues.removeIssue(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) =>
-    this.rootIssueDetailStore.rootIssueStore.projectIssues.archiveIssue(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(
@@ -260,4 +292,65 @@ export class IssueStore implements IIssueStore {
     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;
+
+    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
+    this.rootIssueDetailStore.rootIssueStore.issues.addIssueIdentifier(issueIdentifier, issueId);
+
+    // add related data
+    if (issue.issue_reactions) this.rootIssueDetailStore.addReactions(issue.id, issue.issue_reactions);
+    if (issue.issue_link) this.rootIssueDetailStore.addLinks(issue.id, issue.issue_link);
+    if (issue.issue_attachments) this.rootIssueDetailStore.addAttachments(issue.id, issue.issue_attachments);
+    this.rootIssueDetailStore.addSubscription(issue.id, issue.is_subscribed);
+
+    // fetch related data
+    // 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;
+  };
 }
diff --git a/web/core/store/issue/issue-details/link.store.ts b/web/core/store/issue/issue-details/link.store.ts
index de33706a0..85c6fa5b8 100644
--- a/web/core/store/issue/issue-details/link.store.ts
+++ b/web/core/store/issue/issue-details/link.store.ts
@@ -1,7 +1,7 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // services
-import { TIssueLink, TIssueLinkMap, TIssueLinkIdMap } from "@plane/types";
+import { TIssueLink, TIssueLinkMap, TIssueLinkIdMap, TIssueServiceType } from "@plane/types";
 import { IssueService } from "@/services/issue";
 // types
 import { IIssueDetail } from "./root.store";
@@ -44,8 +44,9 @@ export class IssueLinkStore implements IIssueLinkStore {
   rootIssueDetailStore: IIssueDetail;
   // services
   issueService;
+  serviceType;
 
-  constructor(rootStore: IIssueDetail) {
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
     makeObservable(this, {
       // observables
       links: observable,
@@ -59,10 +60,11 @@ export class IssueLinkStore implements IIssueLinkStore {
       updateLink: action,
       removeLink: action,
     });
+    this.serviceType = serviceType;
     // root store
     this.rootIssueDetailStore = rootStore;
     // services
-    this.issueService = new IssueService();
+    this.issueService = new IssueService(serviceType);
   }
 
   // computed
diff --git a/web/core/store/issue/issue-details/reaction.store.ts b/web/core/store/issue/issue-details/reaction.store.ts
index f3ae77fa3..5fd0e2245 100644
--- a/web/core/store/issue/issue-details/reaction.store.ts
+++ b/web/core/store/issue/issue-details/reaction.store.ts
@@ -7,7 +7,7 @@ import { action, makeObservable, observable, runInAction } from "mobx";
 // services
 // types
 // helpers
-import { TIssueReaction, TIssueReactionMap, TIssueReactionIdMap } from "@plane/types";
+import { TIssueReaction, TIssueReactionMap, TIssueReactionIdMap, TIssue, TIssueServiceType } from "@plane/types";
 import { groupReactions } from "@/helpers/emoji.helper";
 import { IssueReactionService } from "@/services/issue";
 import { IIssueDetail } from "./root.store";
@@ -44,8 +44,9 @@ export class IssueReactionStore implements IIssueReactionStore {
   rootIssueDetailStore: IIssueDetail;
   // services
   issueReactionService;
+  serviceType;
 
-  constructor(rootStore: IIssueDetail) {
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
     makeObservable(this, {
       // observables
       reactions: observable,
@@ -56,10 +57,11 @@ export class IssueReactionStore implements IIssueReactionStore {
       createReaction: action,
       removeReaction: action,
     });
+    this.serviceType = serviceType;
     // root store
     this.rootIssueDetailStore = rootStore;
     // services
-    this.issueReactionService = new IssueReactionService();
+    this.issueReactionService = new IssueReactionService(serviceType);
   }
 
   // helper methods
diff --git a/web/core/store/issue/issue-details/root.store.ts b/web/core/store/issue/issue-details/root.store.ts
index e6e0ca8d0..63faf0571 100644
--- a/web/core/store/issue/issue-details/root.store.ts
+++ b/web/core/store/issue/issue-details/root.store.ts
@@ -8,6 +8,7 @@ import {
   TIssueLink,
   TIssueReaction,
   TIssueDetailWidget,
+  TIssueServiceType,
 } from "@plane/types";
 // plane web store
 import {
@@ -140,6 +141,8 @@ export class IssueDetail implements IIssueDetail {
   isRelationModalOpen: TIssueRelationModal | null = null;
   isSubIssuesModalOpen: string | null = null;
   attachmentDeleteModalId: string | null = null;
+  // service type
+  serviceType: TIssueServiceType;
   // store
   rootIssueStore: IIssueRootStore;
   issue: IIssueStore;
@@ -153,7 +156,7 @@ export class IssueDetail implements IIssueDetail {
   comment: IIssueCommentStore;
   commentReaction: IIssueCommentReactionStore;
 
-  constructor(rootStore: IIssueRootStore) {
+  constructor(rootStore: IIssueRootStore, serviceType: TIssueServiceType) {
     makeObservable(this, {
       // observables
       peekIssue: observable,
@@ -191,15 +194,16 @@ export class IssueDetail implements IIssueDetail {
     });
 
     // store
+    this.serviceType = serviceType;
     this.rootIssueStore = rootStore;
-    this.issue = new IssueStore(this);
-    this.reaction = new IssueReactionStore(this);
-    this.attachment = new IssueAttachmentStore(rootStore);
-    this.activity = new IssueActivityStore(rootStore.rootStore as RootStore);
-    this.comment = new IssueCommentStore(this);
+    this.issue = new IssueStore(this, serviceType);
+    this.reaction = new IssueReactionStore(this, serviceType);
+    this.attachment = new IssueAttachmentStore(rootStore, serviceType);
+    this.activity = new IssueActivityStore(rootStore.rootStore as RootStore, serviceType);
+    this.comment = new IssueCommentStore(this, serviceType);
     this.commentReaction = new IssueCommentReactionStore(this);
-    this.subIssues = new IssueSubIssuesStore(this);
-    this.link = new IssueLinkStore(this);
+    this.subIssues = new IssueSubIssuesStore(this, serviceType);
+    this.link = new IssueLinkStore(this, serviceType);
     this.subscription = new IssueSubscriptionStore(this);
     this.relation = new IssueRelationStore(this);
   }
@@ -255,6 +259,8 @@ export class IssueDetail implements IIssueDetail {
     issueId: string,
     issueStatus: "DEFAULT" | "DRAFT" = "DEFAULT"
   ) => this.issue.fetchIssue(workspaceSlug, projectId, issueId, issueStatus);
+  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) =>
diff --git a/web/core/store/issue/issue-details/sub_issues.store.ts b/web/core/store/issue/issue-details/sub_issues.store.ts
index 9d5fd25c4..c2c160c39 100644
--- a/web/core/store/issue/issue-details/sub_issues.store.ts
+++ b/web/core/store/issue/issue-details/sub_issues.store.ts
@@ -4,6 +4,7 @@ import set from "lodash/set";
 import uniq from "lodash/uniq";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
+import { EIssueServiceType } from "@plane/constants";
 // types
 import {
   TIssue,
@@ -11,6 +12,7 @@ import {
   TIssueSubIssuesStateDistributionMap,
   TIssueSubIssuesIdMap,
   TSubIssuesStateDistribution,
+  TIssueServiceType,
 } from "@plane/types";
 // services
 import { updatePersistentLayer } from "@/local-db/utils/utils";
@@ -63,9 +65,10 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
   // root store
   rootIssueDetailStore: IIssueDetail;
   // services
+  serviceType;
   issueService;
 
-  constructor(rootStore: IIssueDetail) {
+  constructor(rootStore: IIssueDetail, serviceType: TIssueServiceType) {
     makeObservable(this, {
       // observables
       subIssuesStateDistribution: observable,
@@ -83,7 +86,8 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
     // root store
     this.rootIssueDetailStore = rootStore;
     // services
-    this.issueService = new IssueService();
+    this.serviceType = serviceType;
+    this.issueService = new IssueService(serviceType);
   }
 
   // helper methods
@@ -181,7 +185,10 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
       [parentIssueId, "sub_issues_count"],
       this.subIssues[parentIssueId].length
     );
-    updatePersistentLayer([parentIssueId, ...issueIds]);
+
+    if (this.serviceType === EIssueServiceType.ISSUES) {
+      updatePersistentLayer([parentIssueId, ...issueIds]);
+    }
 
     return;
   };
@@ -279,7 +286,9 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
       );
     });
 
-    updatePersistentLayer([parentIssueId]);
+    if (this.serviceType === EIssueServiceType.ISSUES) {
+      updatePersistentLayer([parentIssueId]);
+    }
 
     return;
   };
@@ -314,7 +323,9 @@ export class IssueSubIssuesStore implements IIssueSubIssuesStore {
       );
     });
 
-    updatePersistentLayer([parentIssueId]);
+    if (this.serviceType === EIssueServiceType.ISSUES) {
+      updatePersistentLayer([parentIssueId]);
+    }
 
     return;
   };
diff --git a/web/core/store/issue/issue.store.ts b/web/core/store/issue/issue.store.ts
index 7fcb0eef4..6efd1dccd 100644
--- a/web/core/store/issue/issue.store.ts
+++ b/web/core/store/issue/issue.store.ts
@@ -1,3 +1,4 @@
+import clone from "lodash/clone";
 import set from "lodash/set";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
@@ -14,19 +15,23 @@ 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;
 
@@ -34,12 +39,13 @@ export class IssueStore implements IIssueStore {
     makeObservable(this, {
       // observable
       issuesMap: observable,
+      issuesIdentifierMap: observable,
       // actions
       addIssue: action,
+      addIssueIdentifier: action,
       updateIssue: action,
       removeIssue: action,
     });
-
     this.issueService = new IssueService();
   }
 
@@ -59,6 +65,19 @@ export class IssueStore implements IIssueStore {
     });
   };
 
+  /**
+   * @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);
 
@@ -79,13 +98,17 @@ export class IssueStore implements IIssueStore {
    */
   updateIssue = (issueId: string, issue: Partial<TIssue>) => {
     if (!issue || !issueId || !this.issuesMap[issueId]) return;
+    const issueBeforeUpdate = clone(this.issuesMap[issueId]);
     runInAction(() => {
       set(this.issuesMap, [issueId, "updated_at"], getCurrentDateTimeInISO());
       Object.keys(issue).forEach((key) => {
         set(this.issuesMap, [issueId, key], issue[key as keyof TIssue]);
       });
     });
-    updatePersistentLayer(issueId);
+
+    if (!issueBeforeUpdate.is_epic) {
+      updatePersistentLayer(issueId);
+    }
   };
 
   /**
@@ -112,6 +135,16 @@ export class IssueStore implements IIssueStore {
     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
diff --git a/web/core/store/issue/issue_kanban_view.store.ts b/web/core/store/issue/issue_kanban_view.store.ts
index 79f88f817..d0ba865a3 100644
--- a/web/core/store/issue/issue_kanban_view.store.ts
+++ b/web/core/store/issue/issue_kanban_view.store.ts
@@ -1,9 +1,9 @@
 import { action, computed, makeObservable, observable } from "mobx";
 import { computedFn } from "mobx-utils";
+import { DRAG_ALLOWED_GROUPS } from "@plane/constants";
 // types
 import { TIssueGroupByOptions } from "@plane/types";
 // constants
-import { DRAG_ALLOWED_GROUPS } from "@/constants/issue";
 // store
 import { IssueRootStore } from "./root.store";
 
diff --git a/web/core/store/issue/module/filter.store.ts b/web/core/store/issue/module/filter.store.ts
index 9c22963b9..e1bd1b070 100644
--- a/web/core/store/issue/module/filter.store.ts
+++ b/web/core/store/issue/module/filter.store.ts
@@ -3,6 +3,7 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
 import { computedFn } from "mobx-utils";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -12,7 +13,6 @@ import {
   TIssueParams,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 import { IssueFiltersService } from "@/services/issue_filter.service";
 import { IBaseIssueFilterStore, IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
diff --git a/web/core/store/issue/profile/filter.store.ts b/web/core/store/issue/profile/filter.store.ts
index edd5073d3..5ba808328 100644
--- a/web/core/store/issue/profile/filter.store.ts
+++ b/web/core/store/issue/profile/filter.store.ts
@@ -3,6 +3,7 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
 import { computedFn } from "mobx-utils";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -12,7 +13,6 @@ import {
   TIssueParams,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 import { IssueFiltersService } from "@/services/issue_filter.service";
 import { IBaseIssueFilterStore, IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
diff --git a/web/core/store/issue/project-views/filter.store.ts b/web/core/store/issue/project-views/filter.store.ts
index b49633c36..a25a53cff 100644
--- a/web/core/store/issue/project-views/filter.store.ts
+++ b/web/core/store/issue/project-views/filter.store.ts
@@ -3,6 +3,7 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
 import { computedFn } from "mobx-utils";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -12,7 +13,6 @@ import {
   TIssueParams,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 // services
 import { ViewService } from "@/plane-web/services";
diff --git a/web/core/store/issue/project/filter.store.ts b/web/core/store/issue/project/filter.store.ts
index 069f2ed89..4d194e2f1 100644
--- a/web/core/store/issue/project/filter.store.ts
+++ b/web/core/store/issue/project/filter.store.ts
@@ -3,6 +3,7 @@ import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
 import { computedFn } from "mobx-utils";
+import { EIssueFilterType, EIssuesStoreType } from "@plane/constants";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -12,7 +13,6 @@ import {
   TIssueParams,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 import { IssueFiltersService } from "@/services/issue_filter.service";
 import { IBaseIssueFilterStore, IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
diff --git a/web/core/store/issue/root.store.ts b/web/core/store/issue/root.store.ts
index ae67bbe9a..3c9cb656d 100644
--- a/web/core/store/issue/root.store.ts
+++ b/web/core/store/issue/root.store.ts
@@ -1,10 +1,20 @@
 import isEmpty from "lodash/isEmpty";
 import { autorun, makeObservable, observable } from "mobx";
-import { ICycle, IIssueLabel, IModule, IProject, IState, IUserLite } from "@plane/types";
+// types
+import { EIssueServiceType } from "@plane/constants";
+import { ICycle, IIssueLabel, IModule, IProject, IState, IUserLite, TIssueServiceType } from "@plane/types";
+// plane web store
+import { IProjectEpics, IProjectEpicsFilter, ProjectEpics, ProjectEpicsFilter } from "@/plane-web/store/issue/epic";
+import { ITeamIssuesFilter, ITeamIssues, TeamIssues, TeamIssuesFilter } from "@/plane-web/store/issue/team";
+import {
+  ITeamViewIssues,
+  ITeamViewIssuesFilter,
+  TeamViewIssues,
+  TeamViewIssuesFilter,
+} from "@/plane-web/store/issue/team-views";
 // root store
+import { RootStore } from "@/plane-web/store/root.store";
 import { IWorkspaceMembership } from "@/store/member/workspace-member.store";
-import { CoreRootStore } from "../root.store";
-import { IStateStore, StateStore } from "../state.store";
 // issues data store
 import { IArchivedIssuesFilter, ArchivedIssuesFilter, IArchivedIssues, ArchivedIssues } from "./archived";
 import { ICycleIssuesFilter, CycleIssuesFilter, ICycleIssues, CycleIssues } from "./cycle";
@@ -33,6 +43,7 @@ import {
 export interface IIssueRootStore {
   currentUserId: string | undefined;
   workspaceSlug: string | undefined;
+  teamspaceId: string | undefined;
   projectId: string | undefined;
   cycleId: string | undefined;
   moduleId: string | undefined;
@@ -49,11 +60,13 @@ export interface IIssueRootStore {
   moduleMap: Record<string, IModule> | undefined;
   cycleMap: Record<string, ICycle> | undefined;
 
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
+  serviceType: TIssueServiceType;
 
   issues: IIssueStore;
 
   issueDetail: IIssueDetail;
+  epicDetail: IIssueDetail;
 
   workspaceIssuesFilter: IWorkspaceIssuesFilter;
   workspaceIssues: IWorkspaceIssues;
@@ -64,6 +77,9 @@ export interface IIssueRootStore {
   profileIssuesFilter: IProfileIssuesFilter;
   profileIssues: IProfileIssues;
 
+  teamIssuesFilter: ITeamIssuesFilter;
+  teamIssues: ITeamIssues;
+
   projectIssuesFilter: IProjectIssuesFilter;
   projectIssues: IProjectIssues;
 
@@ -73,6 +89,9 @@ export interface IIssueRootStore {
   moduleIssuesFilter: IModuleIssuesFilter;
   moduleIssues: IModuleIssues;
 
+  teamViewIssuesFilter: ITeamViewIssuesFilter;
+  teamViewIssues: ITeamViewIssues;
+
   projectViewIssuesFilter: IProjectViewIssuesFilter;
   projectViewIssues: IProjectViewIssues;
 
@@ -84,11 +103,15 @@ export interface IIssueRootStore {
 
   issueKanBanView: IIssueKanBanViewStore;
   issueCalendarView: ICalendarStore;
+
+  projectEpicsFilter: IProjectEpicsFilter;
+  projectEpics: IProjectEpics;
 }
 
 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;
@@ -105,11 +128,13 @@ export class IssueRootStore implements IIssueRootStore {
   moduleMap: Record<string, IModule> | undefined = undefined;
   cycleMap: Record<string, ICycle> | undefined = undefined;
 
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
+  serviceType: TIssueServiceType;
 
   issues: IIssueStore;
 
   issueDetail: IIssueDetail;
+  epicDetail: IIssueDetail;
 
   workspaceIssuesFilter: IWorkspaceIssuesFilter;
   workspaceIssues: IWorkspaceIssues;
@@ -120,6 +145,9 @@ export class IssueRootStore implements IIssueRootStore {
   profileIssuesFilter: IProfileIssuesFilter;
   profileIssues: IProfileIssues;
 
+  teamIssuesFilter: ITeamIssuesFilter;
+  teamIssues: ITeamIssues;
+
   projectIssuesFilter: IProjectIssuesFilter;
   projectIssues: IProjectIssues;
 
@@ -129,6 +157,9 @@ export class IssueRootStore implements IIssueRootStore {
   moduleIssuesFilter: IModuleIssuesFilter;
   moduleIssues: IModuleIssues;
 
+  teamViewIssuesFilter: ITeamViewIssuesFilter;
+  teamViewIssues: ITeamViewIssues;
+
   projectViewIssuesFilter: IProjectViewIssuesFilter;
   projectViewIssues: IProjectViewIssues;
 
@@ -141,9 +172,13 @@ export class IssueRootStore implements IIssueRootStore {
   issueKanBanView: IIssueKanBanViewStore;
   issueCalendarView: ICalendarStore;
 
-  constructor(rootStore: CoreRootStore) {
+  projectEpicsFilter: IProjectEpicsFilter;
+  projectEpics: IProjectEpics;
+
+  constructor(rootStore: RootStore, serviceType: TIssueServiceType = EIssueServiceType.ISSUES) {
     makeObservable(this, {
       workspaceSlug: observable.ref,
+      teamspaceId: observable.ref,
       projectId: observable.ref,
       cycleId: observable.ref,
       moduleId: observable.ref,
@@ -161,11 +196,13 @@ export class IssueRootStore implements IIssueRootStore {
       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;
@@ -187,7 +224,8 @@ export class IssueRootStore implements IIssueRootStore {
 
     this.issues = new IssueStore();
 
-    this.issueDetail = new IssueDetail(this);
+    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);
@@ -201,12 +239,18 @@ export class IssueRootStore implements IIssueRootStore {
     this.projectIssuesFilter = new ProjectIssuesFilter(this);
     this.projectIssues = new ProjectIssues(this, this.projectIssuesFilter);
 
+    this.teamIssuesFilter = new TeamIssuesFilter(this);
+    this.teamIssues = new TeamIssues(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 TeamViewIssuesFilter(this);
+    this.teamViewIssues = new TeamViewIssues(this, this.teamViewIssuesFilter);
+
     this.projectViewIssuesFilter = new ProjectViewIssuesFilter(this);
     this.projectViewIssues = new ProjectViewIssues(this, this.projectViewIssuesFilter);
 
@@ -218,5 +262,8 @@ export class IssueRootStore implements IIssueRootStore {
 
     this.issueKanBanView = new IssueKanBanViewStore(this);
     this.issueCalendarView = new CalendarStore();
+
+    this.projectEpicsFilter = new ProjectEpicsFilter(this);
+    this.projectEpics = new ProjectEpics(this, this.projectEpicsFilter);
   }
 }
diff --git a/web/core/store/issue/workspace-draft/filter.store.ts b/web/core/store/issue/workspace-draft/filter.store.ts
index f43d0a068..7d504596f 100644
--- a/web/core/store/issue/workspace-draft/filter.store.ts
+++ b/web/core/store/issue/workspace-draft/filter.store.ts
@@ -1,8 +1,10 @@
-import isEmpty from "lodash/isEmpty";
+import
+isEmpty from "lodash/isEmpty";
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 // base class
 import { computedFn } from "mobx-utils";
+import { EIssuesStoreType, EIssueFilterType } from "@plane/constants";
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -12,7 +14,6 @@ import {
   TIssueParams,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue";
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 import { IssueFiltersService } from "@/services/issue_filter.service";
 import { IBaseIssueFilterStore, IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
diff --git a/web/core/store/issue/workspace-draft/issue.store.ts b/web/core/store/issue/workspace-draft/issue.store.ts
index e6b0730db..6783b89b1 100644
--- a/web/core/store/issue/workspace-draft/issue.store.ts
+++ b/web/core/store/issue/workspace-draft/issue.store.ts
@@ -5,6 +5,8 @@ import unset from "lodash/unset";
 import update from "lodash/update";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
+// plane imports
+import { EDraftIssuePaginationType } from "@plane/constants";
 import {
   TWorkspaceDraftIssue,
   TWorkspaceDraftPaginationInfo,
@@ -19,7 +21,6 @@ import {
   TBulkOperationsPayload,
 } from "@plane/types";
 // constants
-import { EDraftIssuePaginationType } from "@/constants/workspace-drafts";
 // helpers
 import { getCurrentDateTimeInISO, convertToISODateString } from "@/helpers/date-time.helper";
 // local-db
@@ -233,8 +234,12 @@ export class WorkspaceDraftIssues implements IWorkspaceDraftIssues {
         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);
-          update(this.issueMapIds, [workspaceSlug], (existingIssueIds = []) => [...issueIds, ...existingIssueIds]);
+          // issue map update
+          update(this.issueMapIds, [workspaceSlug], (existingIssueIds = []) => [...newIssueIds, ...existingIssueIds]);
           this.loader = undefined;
         } else {
           this.loader = "empty-state";
diff --git a/web/core/store/issue/workspace/filter.store.ts b/web/core/store/issue/workspace/filter.store.ts
index e062147c6..ffc36e650 100644
--- a/web/core/store/issue/workspace/filter.store.ts
+++ b/web/core/store/issue/workspace/filter.store.ts
@@ -3,8 +3,10 @@ import isEmpty from "lodash/isEmpty";
 import pickBy from "lodash/pickBy";
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
-// base class
+// plane constants
 import { computedFn } from "mobx-utils";
+import { EIssueLayoutTypes, EIssueFilterType, EIssuesStoreType } from "@plane/constants";
+// base class
 import {
   IIssueFilterOptions,
   IIssueDisplayFilterOptions,
@@ -15,7 +17,6 @@ import {
   TStaticViewTypes,
   IssuePaginationOptions,
 } from "@plane/types";
-import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue";
 // services
 import { handleIssueQueryParamsByLayout } from "@/helpers/issue.helper";
 import { WorkspaceService } from "@/plane-web/services";
diff --git a/web/core/store/member/project-member.store.ts b/web/core/store/member/project-member.store.ts
index af6f74df0..2e5bbe863 100644
--- a/web/core/store/member/project-member.store.ts
+++ b/web/core/store/member/project-member.store.ts
@@ -1,17 +1,13 @@
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
+import uniq from "lodash/uniq";
+import update from "lodash/update";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
-import {
-  IProjectBulkAddFormData,
-  IProjectMember,
-  IProjectMemberLite,
-  IProjectMembership,
-  IUserLite,
-} from "@plane/types";
+import { EUserPermissions } from "@plane/constants";
+import { IProjectBulkAddFormData, IProjectMember, IProjectMembership, IUserLite } from "@plane/types";
 // plane-web constants
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // services
 import { ProjectMemberService } from "@/services/project";
 // store
@@ -36,7 +32,7 @@ export interface IProjectMemberStore {
   // computed
   projectMemberIds: string[] | null;
   // computed actions
-  getProjectMemberDetails: (userId: string) => IProjectMemberDetails | null;
+  getProjectMemberDetails: (userId: string, projectId: string) => IProjectMemberDetails | null;
   getProjectMemberIds: (projectId: string) => string[] | null;
   // fetch actions
   fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<IProjectMembership[]>;
@@ -110,12 +106,10 @@ export class ProjectMemberStore implements IProjectMemberStore {
    * @description get the details of a project member
    * @param userId
    */
-  getProjectMemberDetails = computedFn((userId: string) => {
-    const projectId = this.routerStore.projectId;
-    if (!projectId) return null;
+  getProjectMemberDetails = computedFn((userId: string, projectId: string) => {
     const projectMember = this.projectMemberMap?.[projectId]?.[userId];
     if (!projectMember) return null;
-
+    console.log({ projectMember });
     const memberDetails: IProjectMemberDetails = {
       id: projectMember.id,
       role: projectMember.role,
@@ -168,8 +162,11 @@ export class ProjectMemberStore implements IProjectMemberStore {
           set(this.projectMemberMap, [projectId, member.member], member);
         });
       });
-      this.projectRoot.projectMap[projectId].members = this.projectRoot.projectMap?.[projectId]?.members.concat(
-        data.members as unknown as IProjectMemberLite[]
+      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;
@@ -183,7 +180,7 @@ export class ProjectMemberStore implements IProjectMemberStore {
    * @param data
    */
   updateMember = async (workspaceSlug: string, projectId: string, userId: string, data: { role: EUserPermissions }) => {
-    const memberDetails = this.getProjectMemberDetails(userId);
+    const memberDetails = this.getProjectMemberDetails(userId, projectId);
     if (!memberDetails) throw new Error("Member not found");
     // original data to revert back in case of error
     const originalProjectMemberData = this.projectMemberMap?.[projectId]?.[userId];
@@ -214,14 +211,14 @@ export class ProjectMemberStore implements IProjectMemberStore {
    * @param userId
    */
   removeMemberFromProject = async (workspaceSlug: string, projectId: string, userId: string) => {
-    const memberDetails = this.getProjectMemberDetails(userId);
+    const memberDetails = this.getProjectMemberDetails(userId, projectId);
     if (!memberDetails) throw new Error("Member not found");
     await this.projectMemberService.deleteProjectMember(workspaceSlug, projectId, memberDetails?.id).then(() => {
       runInAction(() => {
         delete this.projectMemberMap?.[projectId]?.[userId];
       });
-      this.projectRoot.projectMap[projectId].members = this.projectRoot.projectMap?.[projectId]?.members.filter(
-        (member) => member.id !== userId
+      this.projectRoot.projectMap[projectId].members = this.projectRoot.projectMap?.[projectId]?.members?.filter(
+        (memberId) => memberId !== userId
       );
     });
   };
diff --git a/web/core/store/member/workspace-member.store.ts b/web/core/store/member/workspace-member.store.ts
index 2b8a8ede7..e45c2d5c2 100644
--- a/web/core/store/member/workspace-member.store.ts
+++ b/web/core/store/member/workspace-member.store.ts
@@ -3,9 +3,9 @@ import sortBy from "lodash/sortBy";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
+import { EUserPermissions } from "@plane/constants";
 import { IWorkspaceBulkInviteFormData, IWorkspaceMember, IWorkspaceMemberInvitation } from "@plane/types";
 // plane-web constants
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // services
 import { WorkspaceService } from "@/plane-web/services";
 // types
diff --git a/web/core/store/module.store.ts b/web/core/store/module.store.ts
index 787b8b091..06a08b92c 100644
--- a/web/core/store/module.store.ts
+++ b/web/core/store/module.store.ts
@@ -32,6 +32,7 @@ export interface IModuleStore {
   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
@@ -210,15 +211,24 @@ export class ModulesStore implements IModuleStore {
    */
   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) => {
-    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]);
+    const projectModules = this.getProjectModuleDetails(projectId);
+    if (!projectModules) return null;
     const projectModuleIds = projectModules.map((m) => m.id);
     return projectModuleIds;
   });
@@ -282,7 +292,7 @@ export class ModulesStore implements IModuleStore {
         });
         return response;
       });
-    } catch (error) {
+    } catch {
       this.loader = false;
       return undefined;
     }
@@ -308,7 +318,7 @@ export class ModulesStore implements IModuleStore {
         });
         return projectModules;
       });
-    } catch (error) {
+    } catch {
       this.loader = false;
       return undefined;
     }
diff --git a/web/core/store/notifications/notification.ts b/web/core/store/notifications/notification.ts
index dff2755fd..74c0bf38c 100644
--- a/web/core/store/notifications/notification.ts
+++ b/web/core/store/notifications/notification.ts
@@ -26,7 +26,7 @@ export interface INotification extends TNotification {
 
 export class Notification implements INotification {
   // observables
-  id: string | undefined = undefined;
+  id: string;
   title: string | undefined = undefined;
   data: TNotificationData | undefined = undefined;
   entity_identifier: string | undefined = undefined;
@@ -54,6 +54,7 @@ export class Notification implements INotification {
     private store: CoreRootStore,
     private notification: TNotification
   ) {
+    this.id = this.notification.id;
     makeObservable(this, {
       // observables
       id: observable.ref,
@@ -90,7 +91,6 @@ export class Notification implements INotification {
       snoozeNotification: action,
       unSnoozeNotification: action,
     });
-    this.id = this.notification.id;
     this.title = this.notification.title;
     this.data = this.notification.data;
     this.entity_identifier = this.notification.entity_identifier;
@@ -169,8 +169,6 @@ export class Notification implements INotification {
     workspaceSlug: string,
     payload: Partial<TNotification>
   ): Promise<TNotification | undefined> => {
-    if (!this.id) return undefined;
-
     try {
       const notification = await workspaceNotificationService.updateNotificationById(workspaceSlug, this.id, payload);
       if (notification) {
@@ -188,8 +186,6 @@ export class Notification implements INotification {
    * @returns { TNotification | undefined }
    */
   markNotificationAsRead = async (workspaceSlug: string): Promise<TNotification | undefined> => {
-    if (!this.id) return undefined;
-
     const currentNotificationReadAt = this.read_at;
     try {
       const payload: Partial<TNotification> = {
@@ -215,8 +211,6 @@ export class Notification implements INotification {
    * @returns { TNotification | undefined }
    */
   markNotificationAsUnRead = async (workspaceSlug: string): Promise<TNotification | undefined> => {
-    if (!this.id) return undefined;
-
     const currentNotificationReadAt = this.read_at;
     try {
       const payload: Partial<TNotification> = {
@@ -242,8 +236,6 @@ export class Notification implements INotification {
    * @returns { TNotification | undefined }
    */
   archiveNotification = async (workspaceSlug: string): Promise<TNotification | undefined> => {
-    if (!this.id) return undefined;
-
     const currentNotificationArchivedAt = this.archived_at;
     try {
       const payload: Partial<TNotification> = {
@@ -267,8 +259,6 @@ export class Notification implements INotification {
    * @returns { TNotification | undefined }
    */
   unArchiveNotification = async (workspaceSlug: string): Promise<TNotification | undefined> => {
-    if (!this.id) return undefined;
-
     const currentNotificationArchivedAt = this.archived_at;
     try {
       const payload: Partial<TNotification> = {
@@ -293,8 +283,6 @@ export class Notification implements INotification {
    * @returns { TNotification | undefined }
    */
   snoozeNotification = async (workspaceSlug: string, snoozeTill: Date): Promise<TNotification | undefined> => {
-    if (!this.id) return undefined;
-
     const currentNotificationSnoozeTill = this.snoozed_till;
     try {
       const payload: Partial<TNotification> = {
@@ -315,8 +303,6 @@ export class Notification implements INotification {
    * @returns { TNotification | undefined }
    */
   unSnoozeNotification = async (workspaceSlug: string): Promise<TNotification | undefined> => {
-    if (!this.id) return undefined;
-
     const currentNotificationSnoozeTill = this.snoozed_till;
     try {
       const payload: Partial<TNotification> = {
diff --git a/web/core/store/notifications/workspace-notifications.store.ts b/web/core/store/notifications/workspace-notifications.store.ts
index a0de7bc0f..5e0edd816 100644
--- a/web/core/store/notifications/workspace-notifications.store.ts
+++ b/web/core/store/notifications/workspace-notifications.store.ts
@@ -4,6 +4,8 @@ import set from "lodash/set";
 import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
+// plane imports
+import { ENotificationTab, ENotificationLoader, ENotificationQueryParamType, TNotificationTab } from "@plane/constants";
 import {
   TNotification,
   TNotificationFilter,
@@ -12,13 +14,6 @@ import {
   TNotificationPaginatedInfoQueryParams,
   TUnreadNotificationsCount,
 } from "@plane/types";
-// constants
-import {
-  ENotificationLoader,
-  ENotificationQueryParamType,
-  ENotificationTab,
-  TNotificationTab,
-} from "@/constants/notification";
 // helpers
 import { convertToEpoch } from "@/helpers/date-time.helper";
 // services
diff --git a/web/core/store/pages/page.ts b/web/core/store/pages/base-page.ts
similarity index 53%
rename from web/core/store/pages/page.ts
rename to web/core/store/pages/base-page.ts
index edf136455..8b828a559 100644
--- a/web/core/store/pages/page.ts
+++ b/web/core/store/pages/base-page.ts
@@ -1,41 +1,28 @@
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, reaction, runInAction } from "mobx";
-// types
-import { TDocumentPayload, TLogoProps, TPage } from "@plane/types";
 // constants
-import { EPageAccess } from "@/constants/page";
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
-// services
-import { ProjectPageService } from "@/services/page";
-// store
-import { CoreRootStore } from "../root.store";
+import { EPageAccess } from "@plane/constants";
+// types
+import { TDocumentPayload, TLogoProps, TNameDescriptionLoader, TPage } from "@plane/types";
+// plane web store
+import { RootStore } from "@/plane-web/store/root.store";
 
-export type TLoader = "submitting" | "submitted" | "saved";
-
-export interface IPage extends TPage {
+export type TBasePage = TPage & {
   // observables
-  isSubmitting: TLoader;
+  isSubmitting: TNameDescriptionLoader;
   // computed
   asJSON: TPage | undefined;
-  isCurrentUserOwner: boolean; // it will give the user is the owner of the page or not
-  canCurrentUserEditPage: boolean; // it will give the user permission to read the page or write the page
-  canCurrentUserDuplicatePage: boolean;
-  canCurrentUserLockPage: boolean;
-  canCurrentUserChangeAccess: boolean;
-  canCurrentUserArchivePage: boolean;
-  canCurrentUserDeletePage: boolean;
-  canCurrentUserFavoritePage: boolean;
-  isContentEditable: boolean;
+  isCurrentUserOwner: boolean;
   // helpers
   oldName: string;
-  setIsSubmitting: (value: TLoader) => void;
+  setIsSubmitting: (value: TNameDescriptionLoader) => void;
   cleanup: () => void;
   // actions
-  update: (pageData: Partial<TPage>) => Promise<TPage | undefined>;
+  update: (pageData: Partial<TPage>) => Promise<Partial<TPage> | undefined>;
   updateTitle: (title: string) => void;
   updateDescription: (document: TDocumentPayload) => Promise<void>;
-  makePublic: () => Promise<void>;
-  makePrivate: () => Promise<void>;
+  makePublic: (shouldSync?: boolean) => Promise<void>;
+  makePrivate: (shouldSync?: boolean) => Promise<void>;
   lock: (shouldSync?: boolean) => Promise<void>;
   unlock: (shouldSync?: boolean) => Promise<void>;
   archive: (shouldSync?: boolean) => Promise<void>;
@@ -43,11 +30,43 @@ export interface IPage extends TPage {
   updatePageLogo: (logo_props: TLogoProps) => Promise<void>;
   addToFavorites: () => Promise<void>;
   removePageFromFavorites: () => Promise<void>;
-}
+  duplicate: () => Promise<TPage | undefined>;
+};
 
-export class Page implements IPage {
+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 implements TBasePage {
   // loaders
-  isSubmitting: TLoader = "saved";
+  isSubmitting: TNameDescriptionLoader = "saved";
   // page properties
   id: string | undefined;
   name: string | undefined;
@@ -62,22 +81,24 @@ export class Page implements IPage {
   is_locked: boolean;
   archived_at: string | null | undefined;
   workspace: string | undefined;
-  project_ids: string[] | undefined;
+  project_ids?: string[] | undefined;
+  team: string | null | undefined;
   created_by: string | undefined;
   updated_by: string | undefined;
   created_at: Date | undefined;
   updated_at: Date | undefined;
   // helpers
   oldName: string = "";
+  // services
+  services: TBasePageServices;
   // reactions
   disposers: Array<() => void> = [];
-  // services
-  pageService: ProjectPageService;
   // root store
-  rootStore: CoreRootStore;
+  rootStore: RootStore;
   constructor(
-    private store: CoreRootStore,
-    page: TPage
+    private store: RootStore,
+    page: TPage,
+    services: TBasePageServices
   ) {
     this.id = page?.id || undefined;
     this.name = page?.name;
@@ -93,6 +114,7 @@ export class Page implements IPage {
     this.archived_at = page?.archived_at || undefined;
     this.workspace = page?.workspace || undefined;
     this.project_ids = page?.project_ids || undefined;
+    this.team = page?.team || undefined;
     this.created_by = page?.created_by || undefined;
     this.updated_by = page?.updated_by || undefined;
     this.created_at = page?.created_at || undefined;
@@ -128,14 +150,6 @@ export class Page implements IPage {
       // computed
       asJSON: computed,
       isCurrentUserOwner: computed,
-      canCurrentUserEditPage: computed,
-      canCurrentUserDuplicatePage: computed,
-      canCurrentUserLockPage: computed,
-      canCurrentUserChangeAccess: computed,
-      canCurrentUserArchivePage: computed,
-      canCurrentUserDeletePage: computed,
-      canCurrentUserFavoritePage: computed,
-      isContentEditable: computed,
       // actions
       update: action,
       updateTitle: action,
@@ -149,18 +163,18 @@ export class Page implements IPage {
       updatePageLogo: action,
       addToFavorites: action,
       removePageFromFavorites: action,
+      duplicate: action,
     });
 
-    this.pageService = new ProjectPageService();
     this.rootStore = store;
+    this.services = services;
+
     const titleDisposer = reaction(
       () => this.name,
       (name) => {
-        const { workspaceSlug, projectId } = this.store.router;
-        if (!workspaceSlug || !projectId || !this.id) return;
         this.isSubmitting = "submitting";
-        this.pageService
-          .update(workspaceSlug, projectId, this.id, {
+        this.services
+          .update({
             name,
           })
           .catch(() =>
@@ -176,7 +190,6 @@ export class Page implements IPage {
       },
       { delay: 2000 }
     );
-
     this.disposers.push(titleDisposer);
   }
 
@@ -197,6 +210,7 @@ export class Page implements IPage {
       archived_at: this.archived_at,
       workspace: this.workspace,
       project_ids: this.project_ids,
+      team: this.team,
       created_by: this.created_by,
       updated_by: this.updated_by,
       created_at: this.created_at,
@@ -210,121 +224,11 @@ export class Page implements IPage {
     return this.owned_by === currentUserId;
   }
 
-  /**
-   * @description returns true if the current logged in user can edit the page
-   */
-  get canCurrentUserEditPage() {
-    const { workspaceSlug, projectId } = this.store.router;
-    const currentUserProjectRole = this.store.user.permission.projectPermissionsByWorkspaceSlugAndProjectId(
-      workspaceSlug?.toString() || "",
-      projectId?.toString() || ""
-    );
-    const isPagePublic = this.access === EPageAccess.PUBLIC;
-    return (
-      (isPagePublic && !!currentUserProjectRole && currentUserProjectRole >= EUserPermissions.MEMBER) ||
-      (!isPagePublic && this.isCurrentUserOwner)
-    );
-  }
-
-  /**
-   * @description returns true if the current logged in user can create a duplicate the page
-   */
-  get canCurrentUserDuplicatePage() {
-    const { workspaceSlug, projectId } = this.store.router;
-    const currentUserProjectRole = this.store.user.permission.projectPermissionsByWorkspaceSlugAndProjectId(
-      workspaceSlug?.toString() || "",
-      projectId?.toString() || ""
-    );
-    return !!currentUserProjectRole && currentUserProjectRole >= EUserPermissions.MEMBER;
-  }
-
-  /**
-   * @description returns true if the current logged in user can lock the page
-   */
-  get canCurrentUserLockPage() {
-    const { workspaceSlug, projectId } = this.store.router;
-    const currentUserProjectRole = this.store.user.permission.projectPermissionsByWorkspaceSlugAndProjectId(
-      workspaceSlug?.toString() || "",
-      projectId?.toString() || ""
-    );
-    return this.isCurrentUserOwner || currentUserProjectRole === EUserPermissions.ADMIN;
-  }
-
-  /**
-   * @description returns true if the current logged in user can change the access of the page
-   */
-  get canCurrentUserChangeAccess() {
-    const { workspaceSlug, projectId } = this.store.router;
-    const currentUserProjectRole = this.store.user.permission.projectPermissionsByWorkspaceSlugAndProjectId(
-      workspaceSlug?.toString() || "",
-      projectId?.toString() || ""
-    );
-    return this.isCurrentUserOwner || currentUserProjectRole === EUserPermissions.ADMIN;
-  }
-
-  /**
-   * @description returns true if the current logged in user can archive the page
-   */
-  get canCurrentUserArchivePage() {
-    const { workspaceSlug, projectId } = this.store.router;
-    const currentUserProjectRole = this.store.user.permission.projectPermissionsByWorkspaceSlugAndProjectId(
-      workspaceSlug?.toString() || "",
-      projectId?.toString() || ""
-    );
-    return this.isCurrentUserOwner || currentUserProjectRole === EUserPermissions.ADMIN;
-  }
-
-  /**
-   * @description returns true if the current logged in user can delete the page
-   */
-  get canCurrentUserDeletePage() {
-    const { workspaceSlug, projectId } = this.store.router;
-    const currentUserProjectRole = this.store.user.permission.projectPermissionsByWorkspaceSlugAndProjectId(
-      workspaceSlug?.toString() || "",
-      projectId?.toString() || ""
-    );
-    return this.isCurrentUserOwner || currentUserProjectRole === EUserPermissions.ADMIN;
-  }
-
-  /**
-   * @description returns true if the current logged in user can favorite the page
-   */
-  get canCurrentUserFavoritePage() {
-    const { workspaceSlug, projectId } = this.store.router;
-    const currentUserProjectRole = this.store.user.permission.projectPermissionsByWorkspaceSlugAndProjectId(
-      workspaceSlug?.toString() || "",
-      projectId?.toString() || ""
-    );
-    return !!currentUserProjectRole && currentUserProjectRole >= EUserPermissions.MEMBER;
-  }
-
-  /**
-   * @description returns true if the page can be edited
-   */
-  get isContentEditable() {
-    const { workspaceSlug, projectId } = this.store.router;
-
-    const isOwner = this.isCurrentUserOwner;
-    const currentUserRole = this.store.user.permission.projectPermissionsByWorkspaceSlugAndProjectId(
-      workspaceSlug?.toString() || "",
-      projectId?.toString() || ""
-    );
-    const isPublic = this.access === EPageAccess.PUBLIC;
-    const isArchived = this.archived_at;
-    const isLocked = this.is_locked;
-
-    return (
-      !isArchived &&
-      !isLocked &&
-      (isOwner || (isPublic && !!currentUserRole && currentUserRole >= EUserPermissions.MEMBER))
-    );
-  }
-
   /**
    * @description update the submitting state
    * @param value
    */
-  setIsSubmitting = (value: TLoader) => {
+  setIsSubmitting = (value: TNameDescriptionLoader) => {
     runInAction(() => {
       this.isSubmitting = value;
     });
@@ -341,9 +245,6 @@ export class Page implements IPage {
    * @param {Partial<TPage>} pageData
    */
   update = async (pageData: Partial<TPage>) => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
     const currentPage = this.asJSON;
     try {
       runInAction(() => {
@@ -353,7 +254,7 @@ export class Page implements IPage {
         });
       });
 
-      await this.pageService.update(workspaceSlug, projectId, this.id, currentPage);
+      return await this.services.update(currentPage);
     } catch (error) {
       runInAction(() => {
         Object.keys(pageData).forEach((key) => {
@@ -379,16 +280,13 @@ export class Page implements IPage {
    * @param {TDocumentPayload} document
    */
   updateDescription = async (document: TDocumentPayload) => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
     const currentDescription = this.description_html;
     runInAction(() => {
       this.description_html = document.description_html;
     });
 
     try {
-      await this.pageService.updateDescriptionYJS(workspaceSlug, projectId, this.id, document);
+      await this.services.updateDescription(document);
     } catch (error) {
       runInAction(() => {
         this.description_html = currentDescription;
@@ -400,44 +298,46 @@ export class Page implements IPage {
   /**
    * @description make the page public
    */
-  makePublic = async () => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
+  makePublic = async (shouldSync: boolean = true) => {
     const pageAccess = this.access;
-    runInAction(() => (this.access = EPageAccess.PUBLIC));
+    runInAction(() => {
+      this.access = EPageAccess.PUBLIC;
+    });
 
-    try {
-      await this.pageService.updateAccess(workspaceSlug, projectId, this.id, {
-        access: EPageAccess.PUBLIC,
-      });
-    } catch (error) {
-      runInAction(() => {
-        this.access = pageAccess;
-      });
-      throw error;
+    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 () => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
+  makePrivate = async (shouldSync: boolean = true) => {
     const pageAccess = this.access;
-    runInAction(() => (this.access = EPageAccess.PRIVATE));
+    runInAction(() => {
+      this.access = EPageAccess.PRIVATE;
+    });
 
-    try {
-      await this.pageService.updateAccess(workspaceSlug, projectId, this.id, {
-        access: EPageAccess.PRIVATE,
-      });
-    } catch (error) {
-      runInAction(() => {
-        this.access = pageAccess;
-      });
-      throw error;
+    if (shouldSync) {
+      try {
+        await this.services.updateAccess({
+          access: EPageAccess.PRIVATE,
+        });
+      } catch (error) {
+        runInAction(() => {
+          this.access = pageAccess;
+        });
+        throw error;
+      }
     }
   };
 
@@ -445,14 +345,11 @@ export class Page implements IPage {
    * @description lock the page
    */
   lock = async (shouldSync: boolean = true) => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
     const pageIsLocked = this.is_locked;
     runInAction(() => (this.is_locked = true));
 
     if (shouldSync) {
-      await this.pageService.lock(workspaceSlug, projectId, this.id).catch((error) => {
+      await this.services.lock().catch((error) => {
         runInAction(() => {
           this.is_locked = pageIsLocked;
         });
@@ -465,14 +362,11 @@ export class Page implements IPage {
    * @description unlock the page
    */
   unlock = async (shouldSync: boolean = true) => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
     const pageIsLocked = this.is_locked;
     runInAction(() => (this.is_locked = false));
 
     if (shouldSync) {
-      await this.pageService.unlock(workspaceSlug, projectId, this.id).catch((error) => {
+      await this.services.unlock().catch((error) => {
         runInAction(() => {
           this.is_locked = pageIsLocked;
         });
@@ -485,8 +379,7 @@ export class Page implements IPage {
    * @description archive the page
    */
   archive = async (shouldSync: boolean = true) => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
+    if (!this.id) return undefined;
 
     try {
       runInAction(() => {
@@ -496,7 +389,7 @@ export class Page implements IPage {
       if (this.rootStore.favorite.entityMap[this.id]) this.rootStore.favorite.removeFavoriteFromStore(this.id);
 
       if (shouldSync) {
-        const response = await this.pageService.archive(workspaceSlug, projectId, this.id);
+        const response = await this.services.archive();
         runInAction(() => {
           this.archived_at = response.archived_at;
         });
@@ -513,9 +406,6 @@ export class Page implements IPage {
    * @description restore the page
    */
   restore = async (shouldSync: boolean = true) => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-
     const archivedAtBeforeRestore = this.archived_at;
 
     try {
@@ -524,7 +414,7 @@ export class Page implements IPage {
       });
 
       if (shouldSync) {
-        await this.pageService.restore(workspaceSlug, projectId, this.id);
+        await this.services.restore();
       }
     } catch (error) {
       console.error(error);
@@ -535,9 +425,7 @@ export class Page implements IPage {
   };
 
   updatePageLogo = async (logo_props: TLogoProps) => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
-    await this.pageService.update(workspaceSlug, projectId, this.id, {
+    await this.services.update({
       logo_props,
     });
     runInAction(() => {
@@ -549,8 +437,9 @@ export class Page implements IPage {
    * @description add the page to favorites
    */
   addToFavorites = async () => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
+    const { workspaceSlug } = this.store.router;
+    const projectId = this.project_ids?.[0] ?? null;
+    if (!workspaceSlug || !this.id) return undefined;
 
     const pageIsFavorite = this.is_favorite;
     runInAction(() => {
@@ -575,8 +464,8 @@ export class Page implements IPage {
    * @description remove the page from favorites
    */
   removePageFromFavorites = async () => {
-    const { workspaceSlug, projectId } = this.store.router;
-    if (!workspaceSlug || !projectId || !this.id) return undefined;
+    const { workspaceSlug } = this.store.router;
+    if (!workspaceSlug || !this.id) return undefined;
 
     const pageIsFavorite = this.is_favorite;
     runInAction(() => {
@@ -590,4 +479,9 @@ export class Page implements IPage {
       throw error;
     });
   };
+
+  /**
+   * @description duplicate the page
+   */
+  duplicate = async () => await this.services.duplicate();
 }
diff --git a/web/core/store/pages/project-page.store.ts b/web/core/store/pages/project-page.store.ts
index 7cb8f0014..d5773b126 100644
--- a/web/core/store/pages/project-page.store.ts
+++ b/web/core/store/pages/project-page.store.ts
@@ -3,25 +3,34 @@ import unset from "lodash/unset";
 import { makeObservable, observable, runInAction, action, reaction, computed } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
+import { EUserPermissions, EUserProjectRoles } from "@plane/constants";
 import { TPage, TPageFilters, TPageNavigationTabs } from "@plane/types";
 // helpers
 import { filterPagesByPageType, getPageName, orderPages, shouldFilterPage } from "@/helpers/page.helper";
 // plane web constants
-import { EUserPermissions } from "@/plane-web/constants";
+// plane web store
+import { RootStore } from "@/plane-web/store/root.store";
 // services
 import { ProjectPageService } from "@/services/page";
 // store
-import { IPage, Page } from "@/store/pages/page";
 import { CoreRootStore } from "../root.store";
+import { ProjectPage, TProjectPage } 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, IPage>; // pageId => Page
+  data: Record<string, TProjectPage>; // pageId => Page
   error: TError | undefined;
   filters: TPageFilters;
   // computed
@@ -30,24 +39,25 @@ export interface IProjectPageStore {
   // helper actions
   getCurrentProjectPageIds: (pageType: TPageNavigationTabs) => string[] | undefined;
   getCurrentProjectFilteredPageIds: (pageType: TPageNavigationTabs) => string[] | undefined;
-  pageById: (pageId: string) => IPage | undefined;
+  getPageById: (pageId: string) => TProjectPage | undefined;
   updateFilters: <T extends keyof TPageFilters>(filterKey: T, filterValue: TPageFilters[T]) => void;
   clearAllFilters: () => void;
   // actions
-  getAllPages: (
+  fetchPagesList: (
     workspaceSlug: string,
     projectId: string,
     pageType: TPageNavigationTabs
   ) => Promise<TPage[] | undefined>;
-  getPageById: (workspaceSlug: string, projectId: string, pageId: string) => Promise<TPage | undefined>;
+  fetchPageDetails: (workspaceSlug: string, projectId: string, pageId: string) => Promise<TPage | undefined>;
   createPage: (pageData: Partial<TPage>) => Promise<TPage | undefined>;
   removePage: (pageId: string) => 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, IPage> = {}; // pageId => Page
+  data: Record<string, TProjectPage> = {}; // pageId => Page
   error: TError | undefined = undefined;
   filters: TPageFilters = {
     searchQuery: "",
@@ -58,7 +68,7 @@ export class ProjectPageStore implements IProjectPageStore {
   service: ProjectPageService;
   rootStore: CoreRootStore;
 
-  constructor(private store: CoreRootStore) {
+  constructor(private store: RootStore) {
     makeObservable(this, {
       // observables
       loader: observable.ref,
@@ -72,10 +82,11 @@ export class ProjectPageStore implements IProjectPageStore {
       updateFilters: action,
       clearAllFilters: action,
       // actions
-      getAllPages: action,
-      getPageById: action,
+      fetchPagesList: action,
+      fetchPageDetails: action,
       createPage: action,
       removePage: action,
+      movePage: action,
     });
     this.rootStore = store;
     // service
@@ -107,7 +118,7 @@ export class ProjectPageStore implements IProjectPageStore {
       workspaceSlug?.toString() || "",
       projectId?.toString() || ""
     );
-    return !!currentUserProjectRole && currentUserProjectRole >= EUserPermissions.MEMBER;
+    return !!currentUserProjectRole && ROLE_PERMISSIONS_TO_CREATE_PAGE.includes(currentUserProjectRole);
   }
 
   /**
@@ -153,7 +164,7 @@ export class ProjectPageStore implements IProjectPageStore {
    * @description get the page store by id
    * @param {string} pageId
    */
-  pageById = computedFn((pageId: string) => this.data?.[pageId] || undefined);
+  getPageById = computedFn((pageId: string) => this.data?.[pageId] || undefined);
 
   updateFilters = <T extends keyof TPageFilters>(filterKey: T, filterValue: TPageFilters[T]) => {
     runInAction(() => {
@@ -172,7 +183,7 @@ export class ProjectPageStore implements IProjectPageStore {
   /**
    * @description fetch all the pages
    */
-  getAllPages = async (workspaceSlug: string, projectId: string, pageType: TPageNavigationTabs) => {
+  fetchPagesList = async (workspaceSlug: string, projectId: string, pageType: TPageNavigationTabs) => {
     try {
       if (!workspaceSlug || !projectId) return undefined;
 
@@ -184,7 +195,7 @@ export class ProjectPageStore implements IProjectPageStore {
 
       const pages = await this.service.fetchAll(workspaceSlug, projectId);
       runInAction(() => {
-        for (const page of pages) if (page?.id) set(this.data, [page.id], new Page(this.store, page));
+        for (const page of pages) if (page?.id) set(this.data, [page.id], new ProjectPage(this.store, page));
         this.loader = undefined;
       });
 
@@ -205,11 +216,11 @@ export class ProjectPageStore implements IProjectPageStore {
    * @description fetch the details of a page
    * @param {string} pageId
    */
-  getPageById = async (workspaceSlug: string, projectId: string, pageId: string) => {
+  fetchPageDetails = async (workspaceSlug: string, projectId: string, pageId: string) => {
     try {
       if (!workspaceSlug || !projectId || !pageId) return undefined;
 
-      const currentPageId = this.pageById(pageId);
+      const currentPageId = this.getPageById(pageId);
       runInAction(() => {
         this.loader = currentPageId ? `mutation-loader` : `init-loader`;
         this.error = undefined;
@@ -217,7 +228,7 @@ export class ProjectPageStore implements IProjectPageStore {
 
       const page = await this.service.fetchById(workspaceSlug, projectId, pageId);
       runInAction(() => {
-        if (page?.id) set(this.data, [page.id], new Page(this.store, page));
+        if (page?.id) set(this.data, [page.id], new ProjectPage(this.store, page));
         this.loader = undefined;
       });
 
@@ -250,7 +261,7 @@ export class ProjectPageStore implements IProjectPageStore {
 
       const page = await this.service.create(workspaceSlug, projectId, pageData);
       runInAction(() => {
-        if (page?.id) set(this.data, [page.id], new Page(this.store, page));
+        if (page?.id) set(this.data, [page.id], new ProjectPage(this.store, page));
         this.loader = undefined;
       });
 
@@ -292,4 +303,23 @@ export class ProjectPageStore implements IProjectPageStore {
       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/web/core/store/pages/project-page.ts b/web/core/store/pages/project-page.ts
new file mode 100644
index 000000000..71f33926a
--- /dev/null
+++ b/web/core/store/pages/project-page.ts
@@ -0,0 +1,183 @@
+import { computed, makeObservable } from "mobx";
+import { computedFn } from "mobx-utils";
+// constants
+import { EPageAccess, EUserPermissions } from "@plane/constants";
+import { TPage } from "@plane/types";
+// plane web store
+import { RootStore } from "@/plane-web/store/root.store";
+// services
+import { ProjectPageService } from "@/services/page";
+const projectPageService = new ProjectPageService();
+// store
+import { BasePage, 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.projectPermissionsByWorkspaceSlugAndProjectId(
+        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/web/core/store/project-view.store.ts b/web/core/store/project-view.store.ts
index b9f4e8656..d2e911aa6 100644
--- a/web/core/store/project-view.store.ts
+++ b/web/core/store/project-view.store.ts
@@ -2,9 +2,9 @@ import { set } from "lodash";
 import { observable, action, makeObservable, runInAction, computed } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
+import { EViewAccess } from "@plane/constants";
 import { IProjectView, TPublishViewDetails, TPublishViewSettings, TViewFilters } from "@plane/types";
 // constants
-import { EViewAccess } from "@/constants/views";
 // helpers
 import { getValidatedViewFilters, getViewName, orderViews, shouldFilterView } from "@/helpers/project-views.helpers";
 // services
diff --git a/web/core/store/project/project.store.ts b/web/core/store/project/project.store.ts
index d8b5f02b7..2db96aee0 100644
--- a/web/core/store/project/project.store.ts
+++ b/web/core/store/project/project.store.ts
@@ -1,23 +1,29 @@
+import cloneDeep from "lodash/cloneDeep";
 import set from "lodash/set";
 import sortBy from "lodash/sortBy";
+import update from "lodash/update";
 import { observable, action, computed, makeObservable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
+// plane imports
+import { TFetchStatus, TLoader, TProjectAnalyticsCount, TProjectAnalyticsCountParams } from "@plane/types";
 // helpers
 import { orderProjects, shouldFilterProject } from "@/helpers/project.helper";
 // services
-import { TProject } from "@/plane-web/types/projects";
+import { TProject, TPartialProject } from "@/plane-web/types/projects";
 import { IssueLabelService, IssueService } from "@/services/issue";
 import { ProjectService, ProjectStateService, ProjectArchiveService } from "@/services/project";
 // store
 import { CoreRootStore } from "../root.store";
 
+type ProjectOverviewCollapsible = "links" | "attachments";
+
 export interface IProjectStore {
   // observables
   isUpdatingProject: boolean;
-  loader: boolean;
-  projectMap: {
-    [projectId: string]: TProject; // projectId: project Info
-  };
+  loader: TLoader;
+  fetchStatus: TFetchStatus;
+  projectMap: Record<string, TProject>; // projectId: project info
+  projectAnalyticsCountMap: Record<string, TProjectAnalyticsCount>; // projectId: project analytics count
   // computed
   filteredProjectIds: string[] | undefined;
   workspaceProjectIds: string[] | undefined;
@@ -28,10 +34,25 @@ export interface IProjectStore {
   currentProjectDetails: TProject | 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;
+  // collapsible
+  openCollapsibleSection: ProjectOverviewCollapsible[];
+  lastCollapsibleAction: ProjectOverviewCollapsible | null;
+
+  setOpenCollapsibleSection: (section: ProjectOverviewCollapsible[]) => void;
+  setLastCollapsibleAction: (section: ProjectOverviewCollapsible) => void;
+  toggleOpenCollapsibleSection: (section: ProjectOverviewCollapsible) => 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>;
@@ -49,10 +70,13 @@ export interface IProjectStore {
 export class ProjectStore implements IProjectStore {
   // observables
   isUpdatingProject: boolean = false;
-  loader: boolean = false;
-  projectMap: {
-    [projectId: string]: TProject; // projectId: project Info
-  } = {};
+  loader: TLoader = "init-loader";
+  fetchStatus: TFetchStatus = undefined;
+  projectMap: Record<string, TProject> = {};
+  projectAnalyticsCountMap: Record<string, TProjectAnalyticsCount> = {};
+  openCollapsibleSection: ProjectOverviewCollapsible[] = [];
+  lastCollapsibleAction: ProjectOverviewCollapsible | null = null;
+
   // root store
   rootStore: CoreRootStore;
   // service
@@ -67,7 +91,11 @@ export class ProjectStore implements IProjectStore {
       // observables
       isUpdatingProject: observable,
       loader: observable.ref,
+      fetchStatus: observable.ref,
       projectMap: observable,
+      projectAnalyticsCountMap: observable,
+      openCollapsibleSection: observable.ref,
+      lastCollapsibleAction: observable.ref,
       // computed
       filteredProjectIds: computed,
       workspaceProjectIds: computed,
@@ -77,8 +105,10 @@ export class ProjectStore implements IProjectStore {
       joinedProjectIds: computed,
       favoriteProjectIds: computed,
       // fetch actions
+      fetchPartialProjects: action,
       fetchProjects: action,
       fetchProjectDetails: action,
+      fetchProjectAnalyticsCount: action,
       // favorites actions
       addProjectToFavorites: action,
       removeProjectFromFavorites: action,
@@ -87,6 +117,10 @@ export class ProjectStore implements IProjectStore {
       // CRUD actions
       createProject: action,
       updateProject: action,
+      // collapsible actions
+      setOpenCollapsibleSection: action,
+      setLastCollapsibleAction: action,
+      toggleOpenCollapsibleSection: action,
     });
     // root store
     this.rootStore = _rootStore;
@@ -181,7 +215,7 @@ export class ProjectStore implements IProjectStore {
     projects = sortBy(projects, "sort_order");
 
     const projectIds = projects
-      .filter((project) => project.workspace === currentWorkspace.id && project.is_member && !project.archived_at)
+      .filter((project) => project.workspace === currentWorkspace.id && !!project.member_role && !project.archived_at)
       .map((project) => project.id);
     return projectIds;
   }
@@ -199,12 +233,54 @@ export class ProjectStore implements IProjectStore {
     const projectIds = projects
       .filter(
         (project) =>
-          project.workspace === currentWorkspace.id && project.is_member && project.is_favorite && !project.archived_at
+          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];
+    }
+  };
+
+  /**
+   * 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";
+        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
@@ -213,18 +289,23 @@ export class ProjectStore implements IProjectStore {
    */
   fetchProjects = async (workspaceSlug: string) => {
     try {
-      this.loader = true;
+      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) => {
-          set(this.projectMap, [project.id], project);
+          update(this.projectMap, [project.id], (p) => ({ ...p, ...project }));
         });
-        this.loader = false;
+        this.loader = "loaded";
+        this.fetchStatus = "complete";
       });
       return projectsResponse;
     } catch (error) {
       console.log("Failed to fetch project from workspace store");
-      this.loader = false;
+      this.loader = "loaded";
       throw error;
     }
   };
@@ -239,7 +320,7 @@ export class ProjectStore implements IProjectStore {
     try {
       const response = await this.projectService.getProject(workspaceSlug, projectId);
       runInAction(() => {
-        set(this.projectMap, [projectId], response);
+        update(this.projectMap, [projectId], (p) => ({ ...p, ...response }));
       });
       return response;
     } catch (error) {
@@ -248,6 +329,30 @@ export class ProjectStore implements IProjectStore {
     }
   };
 
+  /**
+   * 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
@@ -258,6 +363,17 @@ export class ProjectStore implements IProjectStore {
     return projectInfo;
   });
 
+  /**
+   * 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
@@ -268,6 +384,16 @@ export class ProjectStore implements IProjectStore {
     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
@@ -379,8 +505,8 @@ export class ProjectStore implements IProjectStore {
    * @returns Promise<TProject>
    */
   updateProject = async (workspaceSlug: string, projectId: string, data: Partial<TProject>) => {
+    const projectDetails = cloneDeep(this.getProjectById(projectId));
     try {
-      const projectDetails = this.getProjectById(projectId);
       runInAction(() => {
         set(this.projectMap, [projectId], { ...projectDetails, ...data });
         this.isUpdatingProject = true;
@@ -392,9 +518,8 @@ export class ProjectStore implements IProjectStore {
       return response;
     } catch (error) {
       console.log("Failed to create project from project store");
-      this.fetchProjects(workspaceSlug);
-      this.fetchProjectDetails(workspaceSlug, projectId);
       runInAction(() => {
+        set(this.projectMap, [projectId], projectDetails);
         this.isUpdatingProject = false;
       });
       throw error;
@@ -418,7 +543,6 @@ export class ProjectStore implements IProjectStore {
       });
     } catch (error) {
       console.log("Failed to delete project from project store");
-      this.fetchProjects(workspaceSlug);
       throw error;
     }
   };
@@ -440,8 +564,6 @@ export class ProjectStore implements IProjectStore {
       })
       .catch((error) => {
         console.log("Failed to archive project from project store");
-        this.fetchProjects(workspaceSlug);
-        this.fetchProjectDetails(workspaceSlug, projectId);
         throw error;
       });
   };
@@ -462,8 +584,6 @@ export class ProjectStore implements IProjectStore {
       })
       .catch((error) => {
         console.log("Failed to restore project from project store");
-        this.fetchProjects(workspaceSlug);
-        this.fetchProjectDetails(workspaceSlug, projectId);
         throw error;
       });
   };
diff --git a/web/core/store/root.store.ts b/web/core/store/root.store.ts
index 33e4e7e92..5a10df45b 100644
--- a/web/core/store/root.store.ts
+++ b/web/core/store/root.store.ts
@@ -1,12 +1,13 @@
 import { enableStaticRendering } from "mobx-react";
 // plane web store
+import { CommandPaletteStore, ICommandPaletteStore } from "@/plane-web/store/command-palette.store";
 import { RootStore } from "@/plane-web/store/root.store";
 import { IStateStore, StateStore } from "@/plane-web/store/state.store";
 // stores
-import { CommandPaletteStore, ICommandPaletteStore } from "./command-palette.store";
 import { CycleStore, ICycleStore } from "./cycle.store";
 import { CycleFilterStore, ICycleFilterStore } from "./cycle_filter.store";
 import { DashboardStore, IDashboardStore } from "./dashboard.store";
+import { EditorAssetStore, IEditorAssetStore } from "./editor/asset.store";
 import { IProjectEstimateStore, ProjectEstimateStore } from "./estimates/project-estimate.store";
 import { EventTrackerStore, IEventTrackerStore } from "./event-tracker.store";
 import { FavoriteStore, IFavoriteStore } from "./favorite.store";
@@ -24,6 +25,7 @@ import { IProjectPageStore, ProjectPageStore } from "./pages/project-page.store"
 import { IProjectRootStore, ProjectRootStore } from "./project";
 import { IProjectViewStore, ProjectViewStore } from "./project-view.store";
 import { RouterStore, IRouterStore } from "./router.store";
+import { IStickyStore, StickyStore } from "./sticky/sticky.store";
 import { ThemeStore, IThemeStore } from "./theme.store";
 import { ITransientStore, TransientStore } from "./transient.store";
 import { IUserStore, UserStore } from "./user";
@@ -58,6 +60,8 @@ export class CoreRootStore {
   workspaceNotification: IWorkspaceNotificationStore;
   favorite: IFavoriteStore;
   transient: ITransientStore;
+  stickyStore: IStickyStore;
+  editorAssetStore: IEditorAssetStore;
 
   constructor() {
     this.router = new RouterStore();
@@ -81,11 +85,13 @@ export class CoreRootStore {
     this.eventTracker = new EventTrackerStore(this);
     this.multipleSelect = new MultipleSelectStore();
     this.projectInbox = new ProjectInboxStore(this);
-    this.projectPages = new ProjectPageStore(this);
+    this.projectPages = new ProjectPageStore(this as unknown as RootStore);
     this.projectEstimate = new ProjectEstimateStore(this);
     this.workspaceNotification = new WorkspaceNotificationStore(this);
     this.favorite = new FavoriteStore(this);
     this.transient = new TransientStore();
+    this.stickyStore = new StickyStore();
+    this.editorAssetStore = new EditorAssetStore();
   }
 
   resetOnSignOut() {
@@ -111,11 +117,13 @@ export class CoreRootStore {
     this.dashboard = new DashboardStore(this);
     this.eventTracker = new EventTrackerStore(this);
     this.projectInbox = new ProjectInboxStore(this);
-    this.projectPages = new ProjectPageStore(this);
+    this.projectPages = new ProjectPageStore(this as unknown as RootStore);
     this.multipleSelect = new MultipleSelectStore();
     this.projectEstimate = new ProjectEstimateStore(this);
     this.workspaceNotification = new WorkspaceNotificationStore(this);
     this.favorite = new FavoriteStore(this);
     this.transient = new TransientStore();
+    this.stickyStore = new StickyStore();
+    this.editorAssetStore = new EditorAssetStore();
   }
 }
diff --git a/web/core/store/router.store.ts b/web/core/store/router.store.ts
index ae5013836..5c5774f3b 100644
--- a/web/core/store/router.store.ts
+++ b/web/core/store/router.store.ts
@@ -9,6 +9,7 @@ export interface IRouterStore {
   setQuery: (query: ParsedUrlQuery) => void;
   // computed
   workspaceSlug: string | undefined;
+  teamspaceId: string | undefined;
   projectId: string | undefined;
   cycleId: string | undefined;
   moduleId: string | undefined;
@@ -20,6 +21,7 @@ export interface IRouterStore {
   issueId: string | undefined;
   inboxId: string | undefined;
   webhookId: string | undefined;
+  epicId: string | undefined;
 }
 
 export class RouterStore implements IRouterStore {
@@ -34,6 +36,7 @@ export class RouterStore implements IRouterStore {
       setQuery: action.bound,
       //computed
       workspaceSlug: computed,
+      teamspaceId: computed,
       projectId: computed,
       cycleId: computed,
       moduleId: computed,
@@ -45,6 +48,7 @@ export class RouterStore implements IRouterStore {
       issueId: computed,
       inboxId: computed,
       webhookId: computed,
+      epicId: computed,
     });
   }
 
@@ -66,6 +70,14 @@ export class RouterStore implements IRouterStore {
     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
@@ -153,4 +165,12 @@ export class RouterStore implements IRouterStore {
   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/web/core/store/state.store.ts b/web/core/store/state.store.ts
index e1fa0287e..18c7c0df3 100644
--- a/web/core/store/state.store.ts
+++ b/web/core/store/state.store.ts
@@ -2,10 +2,10 @@ import groupBy from "lodash/groupBy";
 import set from "lodash/set";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
-// types
+// plane imports
+import { STATE_GROUPS } from "@plane/constants";
 import { IState } from "@plane/types";
 // helpers
-import { convertStringArrayToBooleanObject } from "@/helpers/array.helper";
 import { sortStates } from "@/helpers/state.helper";
 // plane web
 import { syncIssuesWithDeletedStates } from "@/local-db/utils/load-workspace";
@@ -24,10 +24,6 @@ export interface IStateStore {
   // computed actions
   getStateById: (stateId: string | null | undefined) => IState | undefined;
   getProjectStates: (projectId: string | null | undefined) => IState[] | undefined;
-  getAvailableProjectStateIdMap: (
-    projectId: string | null | undefined,
-    currStateId: string | null | undefined
-  ) => { [key: string]: boolean };
   // fetch actions
   fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<IState[]>;
   fetchWorkspaceStates: (workspaceSlug: string) => Promise<IState[]>;
@@ -47,8 +43,6 @@ export interface IStateStore {
     stateId: string,
     payload: Partial<IState>
   ) => Promise<void>;
-  //Dummy method
-  fetchProjectStateTransitions: (workspaceSlug: string, projectId: string) => void;
 }
 
 export class StateStore implements IStateStore {
@@ -106,7 +100,20 @@ export class StateStore implements IStateStore {
    */
   get groupedProjectStates() {
     if (!this.router.projectId) return;
-    return groupBy(this.projectStates, "group") as Record<string, IState[]>;
+
+    // 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) => ({
+        ...acc,
+        [group]: groupedStates[group] || [],
+      }),
+      {} as Record<string, IState[]>
+    );
+
+    return allGroups;
   }
 
   /**
@@ -129,20 +136,6 @@ export class StateStore implements IStateStore {
     return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
   });
 
-  /**
-   * Returns an object linking state permissions as boolean values
-   * @param projectId
-   */
-  getAvailableProjectStateIdMap = computedFn(
-    (projectId: string | null | undefined, currStateId: string | null | undefined) => {
-      const projectStates = this.getProjectStates(projectId);
-
-      if (!projectStates) return {};
-
-      return convertStringArrayToBooleanObject(projectStates.map((projectState) => projectState.id));
-    }
-  );
-
   /**
    * fetches the stateMap of a project
    * @param workspaceSlug
@@ -278,14 +271,11 @@ export class StateStore implements IStateStore {
       });
       // updating using api
       await this.stateService.patchState(workspaceSlug, projectId, stateId, payload);
-    } catch (err) {
+    } catch {
       // reverting back to old state group if api fails
       runInAction(() => {
         this.stateMap = originalStates;
       });
     }
   };
-
-  // Dummy method
-  fetchProjectStateTransitions = (workspaceSlug: string, projectId: string) => {};
 }
diff --git a/web/core/store/sticky/sticky.store.ts b/web/core/store/sticky/sticky.store.ts
new file mode 100644
index 000000000..087255175
--- /dev/null
+++ b/web/core/store/sticky/sticky.store.ts
@@ -0,0 +1,271 @@
+import { orderBy, set } from "lodash";
+import { observable, action, makeObservable, runInAction } from "mobx";
+import { computedFn } from "mobx-utils";
+import { STICKIES_PER_PAGE } from "@plane/constants";
+import { 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/web/core/store/theme.store.ts b/web/core/store/theme.store.ts
index 185f47f17..a5d961e2d 100644
--- a/web/core/store/theme.store.ts
+++ b/web/core/store/theme.store.ts
@@ -3,35 +3,60 @@ import { action, observable, makeObservable } from "mobx";
 export interface IThemeStore {
   // observables
   sidebarCollapsed: boolean | undefined;
+  extendedSidebarCollapsed: boolean | undefined;
+  extendedProjectSidebarCollapsed: boolean | undefined;
   profileSidebarCollapsed: boolean | undefined;
   workspaceAnalyticsSidebarCollapsed: boolean | undefined;
   issueDetailSidebarCollapsed: boolean | undefined;
+  epicDetailSidebarCollapsed: boolean | undefined;
+  initiativesSidebarCollapsed: boolean | undefined;
+  projectOverviewSidebarCollapsed: boolean | undefined;
   // actions
   toggleSidebar: (collapsed?: 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
   sidebarCollapsed: boolean | undefined = undefined;
+  extendedSidebarCollapsed: boolean | undefined = undefined;
+  extendedProjectSidebarCollapsed: 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
       sidebarCollapsed: observable.ref,
+      extendedSidebarCollapsed: observable.ref,
+      extendedProjectSidebarCollapsed: observable.ref,
       profileSidebarCollapsed: observable.ref,
       workspaceAnalyticsSidebarCollapsed: observable.ref,
       issueDetailSidebarCollapsed: observable.ref,
+      epicDetailSidebarCollapsed: observable.ref,
+      initiativesSidebarCollapsed: observable.ref,
+      projectOverviewSidebarCollapsed: observable.ref,
       // action
       toggleSidebar: action,
+      toggleExtendedSidebar: action,
+      toggleExtendedProjectSidebar: action,
       toggleProfileSidebar: action,
       toggleWorkspaceAnalyticsSidebar: action,
       toggleIssueDetailSidebar: action,
+      toggleEpicDetailSidebar: action,
+      toggleInitiativesSidebar: action,
+      toggleProjectOverviewSidebar: action,
     });
   }
 
@@ -48,6 +73,32 @@ export class ThemeStore implements IThemeStore {
     localStorage.setItem("app_sidebar_collapsed", this.sidebarCollapsed.toString());
   };
 
+  /**
+   * Toggle the extended sidebar collapsed state
+   * @param collapsed
+   */
+  toggleExtendedSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.extendedSidebarCollapsed = !this.extendedSidebarCollapsed;
+    } else {
+      this.extendedSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("extended_sidebar_collapsed", this.extendedSidebarCollapsed.toString());
+  };
+
+  /**
+   * Toggle the extended project sidebar collapsed state
+   * @param collapsed
+   */
+  toggleExtendedProjectSidebar = (collapsed?: boolean) => {
+    if (collapsed === undefined) {
+      this.extendedProjectSidebarCollapsed = !this.extendedProjectSidebarCollapsed;
+    } else {
+      this.extendedProjectSidebarCollapsed = collapsed;
+    }
+    localStorage.setItem("extended_project_sidebar_collapsed", this.extendedProjectSidebarCollapsed.toString());
+  };
+
   /**
    * Toggle the profile sidebar collapsed state
    * @param collapsed
@@ -82,4 +133,31 @@ export class ThemeStore implements IThemeStore {
     }
     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/web/core/store/user/index.ts b/web/core/store/user/index.ts
index eac764a3d..5e60dabcf 100644
--- a/web/core/store/user/index.ts
+++ b/web/core/store/user/index.ts
@@ -2,6 +2,7 @@ import cloneDeep from "lodash/cloneDeep";
 import set from "lodash/set";
 import { action, makeObservable, observable, runInAction, computed } from "mobx";
 // types
+import { EUserPermissions } from "@plane/constants";
 import { IUser } from "@plane/types";
 import { TUserPermissions } from "@plane/types/src/enums";
 // constants
@@ -9,7 +10,6 @@ import { TUserPermissions } from "@plane/types/src/enums";
 import { API_BASE_URL } from "@/helpers/common.helper";
 // local
 import { persistence } from "@/local-db/storage.sqlite";
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // services
 import { AuthService } from "@/services/auth.service";
 import { UserService } from "@/services/user.service";
@@ -231,7 +231,7 @@ export class UserStore implements IUserStore {
    */
   signOut = async (): Promise<void> => {
     await this.authService.signOut(API_BASE_URL);
-    await persistence.clearStorage();
+    await persistence.clearStorage(true);
     this.store.resetOnSignOut();
   };
 
diff --git a/web/core/store/user/permissions.store.ts b/web/core/store/user/permissions.store.ts
index ba1211b0f..e636d3993 100644
--- a/web/core/store/user/permissions.store.ts
+++ b/web/core/store/user/permissions.store.ts
@@ -3,14 +3,16 @@ import unset from "lodash/unset";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types
-import { IProjectMember, IUserProjectsRole, IWorkspaceMemberMe } from "@plane/types";
-// plane web types
 import {
+  EUserProjectRoles,
+  EUserWorkspaceRoles,
   EUserPermissions,
   EUserPermissionsLevel,
   TUserPermissions,
   TUserPermissionsLevel,
-} from "@/plane-web/constants/user-permissions";
+} from "@plane/constants";
+import { IProjectMember, IUserProjectsRole, IWorkspaceMemberMe } from "@plane/types";
+// plane web types
 // plane web services
 import { WorkspaceService } from "@/plane-web/services/workspace.service";
 // services
@@ -22,6 +24,8 @@ import { CoreRootStore } from "@/store/root.store";
 // 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 IUserPermissionStore {
   loader: boolean;
   // observables
@@ -36,7 +40,7 @@ export interface IUserPermissionStore {
     projectId: string
   ) => TUserPermissions | undefined;
   allowPermissions: (
-    allowPermissions: TUserPermissions[],
+    allowPermissions: ETempUserRole[],
     level: TUserPermissionsLevel,
     workspaceSlug?: string,
     projectId?: string,
@@ -115,7 +119,7 @@ export class UserPermissionStore implements IUserPermissionStore {
    * @returns { boolean }
    */
   allowPermissions = (
-    allowPermissions: TUserPermissions[],
+    allowPermissions: ETempUserRole[],
     level: TUserPermissionsLevel,
     workspaceSlug?: string,
     projectId?: string,
@@ -140,7 +144,7 @@ export class UserPermissionStore implements IUserPermissionStore {
         this.projectPermissionsByWorkspaceSlugAndProjectId(workspaceSlug, projectId)) as EUserPermissions | undefined;
     }
 
-    if (currentUserRole && allowPermissions.includes(currentUserRole)) {
+    if (currentUserRole && allowPermissions.includes(currentUserRole as TUserPermissions)) {
       if (onPermissionAllowed) {
         return onPermissionAllowed();
       } else {
diff --git a/web/core/store/user/profile.store.ts b/web/core/store/user/profile.store.ts
index 9537da7da..08cbe1fc7 100644
--- a/web/core/store/user/profile.store.ts
+++ b/web/core/store/user/profile.store.ts
@@ -58,6 +58,7 @@ export class ProfileStore implements IUserProfileStore {
     has_billing_address: false,
     created_at: "",
     updated_at: "",
+    language: ""
   };
 
   // services
diff --git a/web/core/store/workspace/home.ts b/web/core/store/workspace/home.ts
new file mode 100644
index 000000000..023767ef3
--- /dev/null
+++ b/web/core/store/workspace/home.ts
@@ -0,0 +1,135 @@
+import orderBy from "lodash/orderBy";
+import set from "lodash/set";
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+import { THomeWidgetKeys, TWidgetEntityData } from "@plane/types";
+import { WorkspaceService } from "@/plane-web/services";
+import { IWorkspaceLinkStore, 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) => 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) => {
+    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;
+          }
+        }
+      }
+      await this.workspaceService.updateWorkspaceWidget(workspaceSlug, widgetKey, {
+        sort_order: resultSequence,
+      });
+      runInAction(() => {
+        set(this.widgetsMap, [widgetKey, "sort_order"], resultSequence);
+      });
+    } catch (error) {
+      console.error("Failed to move widget");
+      throw error;
+    }
+  };
+}
diff --git a/web/core/store/workspace/index.ts b/web/core/store/workspace/index.ts
index 950fc8ddb..f46ecc273 100644
--- a/web/core/store/workspace/index.ts
+++ b/web/core/store/workspace/index.ts
@@ -1,13 +1,15 @@
 import set from "lodash/set";
 import { action, computed, observable, makeObservable, runInAction } from "mobx";
 // types
-import { IWorkspace } from "@plane/types";
+import { computedFn } from "mobx-utils";
+import { IWorkspaceSidebarNavigationItem, IWorkspace, IWorkspaceSidebarNavigation } from "@plane/types";
 // services
 import { WorkspaceService } from "@/plane-web/services";
 // store
 import { CoreRootStore } from "@/store/root.store";
 // sub-stores
 import { ApiTokenStore, IApiTokenStore } from "./api-token.store";
+import { HomeStore, IHomeStore } from "./home";
 import { IWebhookStore, WebhookStore } from "./webhook.store";
 
 export interface IWorkspaceRootStore {
@@ -17,6 +19,7 @@ export interface IWorkspaceRootStore {
   // computed
   currentWorkspace: IWorkspace | null;
   workspacesCreatedByCurrentUser: IWorkspace[] | null;
+  navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation>;
   // computed actions
   getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
   getWorkspaceById: (workspaceId: string) => IWorkspace | null;
@@ -27,20 +30,30 @@ export interface IWorkspaceRootStore {
   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>;
+  getNavigationPreferences: (workspaceSlug: string) => IWorkspaceSidebarNavigation | undefined;
   // sub-stores
   webhook: IWebhookStore;
   apiToken: IApiTokenStore;
+  home: IHomeStore;
 }
 
 export class WorkspaceRootStore implements IWorkspaceRootStore {
   loader: boolean = false;
   // observables
   workspaces: Record<string, IWorkspace> = {};
+  navigationPreferencesMap: Record<string, IWorkspaceSidebarNavigation> = {};
   // services
   workspaceService;
   // root store
   router;
   user;
+  home;
   // sub-stores
   webhook: IWebhookStore;
   apiToken: IApiTokenStore;
@@ -50,6 +63,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       loader: observable.ref,
       // observables
       workspaces: observable,
+      navigationPreferencesMap: observable,
       // computed
       currentWorkspace: computed,
       workspacesCreatedByCurrentUser: computed,
@@ -62,6 +76,8 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       updateWorkspace: action,
       updateWorkspaceLogo: action,
       deleteWorkspace: action,
+      fetchSidebarNavigationPreferences: action,
+      updateSidebarPreference: action,
     });
 
     // services
@@ -69,6 +85,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
     // 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);
@@ -179,4 +196,41 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
         this.workspaces = updatedWorkspacesList;
       });
     });
+
+  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>
+  ) => {
+    try {
+      const response = await this.workspaceService.updateSidebarPreference(workspaceSlug, key, data);
+
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = {
+          ...this.navigationPreferencesMap[workspaceSlug],
+          [key]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to update sidebar preference:", error);
+    }
+  };
+
+  getNavigationPreferences = computedFn(
+    (workspaceSlug: string): IWorkspaceSidebarNavigation | undefined => this.navigationPreferencesMap[workspaceSlug]
+  );
 }
diff --git a/web/core/store/workspace/link.store.ts b/web/core/store/workspace/link.store.ts
new file mode 100644
index 000000000..4a19f92c0
--- /dev/null
+++ b/web/core/store/workspace/link.store.ts
@@ -0,0 +1,127 @@
+import set from "lodash/set";
+import { action, makeObservable, observable, runInAction } from "mobx";
+// types
+import { TLink, TLinkIdMap, TLinkMap } from "@plane/types";
+// services
+import { WorkspaceService } from "@/plane-web/services";
+
+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/web/ee/components/breadcrumbs/index.ts b/web/ee/components/breadcrumbs/index.ts
new file mode 100644
index 000000000..ae95faf6b
--- /dev/null
+++ b/web/ee/components/breadcrumbs/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/breadcrumbs";
\ No newline at end of file
diff --git a/web/ee/components/command-palette/modals/index.ts b/web/ee/components/command-palette/modals/index.ts
new file mode 100644
index 000000000..fabf334b9
--- /dev/null
+++ b/web/ee/components/command-palette/modals/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/command-palette/modals";
diff --git a/web/ee/components/cycles/end-cycle/index.ts b/web/ee/components/cycles/end-cycle/index.ts
new file mode 100644
index 000000000..3d772e91c
--- /dev/null
+++ b/web/ee/components/cycles/end-cycle/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/cycles/end-cycle";
diff --git a/web/ee/components/cycles/index.ts b/web/ee/components/cycles/index.ts
index 899346875..30d8e85dd 100644
--- a/web/ee/components/cycles/index.ts
+++ b/web/ee/components/cycles/index.ts
@@ -1,2 +1,4 @@
 export * from "./active-cycle";
 export * from "./analytics-sidebar";
+export * from "./end-cycle";
+export * from "ce/components/cycles/additional-actions";
diff --git a/web/ee/components/editor/index.ts b/web/ee/components/editor/index.ts
new file mode 100644
index 000000000..f8506c1d6
--- /dev/null
+++ b/web/ee/components/editor/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/editor";
diff --git a/web/ee/components/epics/index.ts b/web/ee/components/epics/index.ts
new file mode 100644
index 000000000..6cef4035f
--- /dev/null
+++ b/web/ee/components/epics/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/epics";
diff --git a/web/ee/components/home/header.tsx b/web/ee/components/home/header.tsx
new file mode 100644
index 000000000..c95736c9e
--- /dev/null
+++ b/web/ee/components/home/header.tsx
@@ -0,0 +1 @@
+export const HomePageHeader = () => <></>;
diff --git a/web/ee/components/issues/filters/index.ts b/web/ee/components/issues/filters/index.ts
index 2cd80e3a7..f0f36b6c9 100644
--- a/web/ee/components/issues/filters/index.ts
+++ b/web/ee/components/issues/filters/index.ts
@@ -1,2 +1,3 @@
 export * from "./applied-filters";
 export * from "./issue-types";
+export * from "./team-project";
diff --git a/web/ee/components/issues/filters/team-project.tsx b/web/ee/components/issues/filters/team-project.tsx
new file mode 100644
index 000000000..0f5683af1
--- /dev/null
+++ b/web/ee/components/issues/filters/team-project.tsx
@@ -0,0 +1 @@
+export * from "ce/components/issues/filters/team-project";
diff --git a/web/ee/components/issues/header.tsx b/web/ee/components/issues/header.tsx
new file mode 100644
index 000000000..8049127f4
--- /dev/null
+++ b/web/ee/components/issues/header.tsx
@@ -0,0 +1 @@
+export * from "ce/components/issues/header";
diff --git a/web/ee/components/issues/index.ts b/web/ee/components/issues/index.ts
index 97b57af4b..01fc1d9ac 100644
--- a/web/ee/components/issues/index.ts
+++ b/web/ee/components/issues/index.ts
@@ -4,3 +4,4 @@ export * from "./issue-modal";
 export * from "./issue-details";
 export * from "./quick-add";
 export * from "./filters";
+export * from "./header";
diff --git a/web/ee/components/issues/issue-details/index.ts b/web/ee/components/issues/issue-details/index.ts
index 3979faf94..e23fbe531 100644
--- a/web/ee/components/issues/issue-details/index.ts
+++ b/web/ee/components/issues/issue-details/index.ts
@@ -2,3 +2,4 @@ export * from "./issue-identifier";
 export * from "./issue-properties-activity";
 export * from "./issue-type-switcher";
 export * from "./issue-type-activity";
+export * from "./parent-select-root";
diff --git a/web/ee/components/issues/issue-details/parent-select-root.tsx b/web/ee/components/issues/issue-details/parent-select-root.tsx
new file mode 100644
index 000000000..0b668ecb1
--- /dev/null
+++ b/web/ee/components/issues/issue-details/parent-select-root.tsx
@@ -0,0 +1 @@
+export * from "ce/components/issues/issue-details/parent-select-root";
diff --git a/web/ee/components/issues/issue-layouts/empty-states/index.ts b/web/ee/components/issues/issue-layouts/empty-states/index.ts
new file mode 100644
index 000000000..a0739e26a
--- /dev/null
+++ b/web/ee/components/issues/issue-layouts/empty-states/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/issues/issue-layouts/empty-states";
diff --git a/web/ee/components/issues/issue-layouts/utils.tsx b/web/ee/components/issues/issue-layouts/utils.tsx
new file mode 100644
index 000000000..1716a8950
--- /dev/null
+++ b/web/ee/components/issues/issue-layouts/utils.tsx
@@ -0,0 +1 @@
+export * from "ce/components/issues/issue-layouts/utils";
diff --git a/web/ee/components/workspace/delete-workspace-modal.tsx b/web/ee/components/workspace/delete-workspace-modal.tsx
new file mode 100644
index 000000000..ce6b9cccf
--- /dev/null
+++ b/web/ee/components/workspace/delete-workspace-modal.tsx
@@ -0,0 +1 @@
+export * from "ce/components/workspace/delete-workspace-modal";
diff --git a/web/ee/components/workspace/index.ts b/web/ee/components/workspace/index.ts
index 94a166947..b0b8ffd3a 100644
--- a/web/ee/components/workspace/index.ts
+++ b/web/ee/components/workspace/index.ts
@@ -2,3 +2,4 @@ export * from "./edition-badge";
 export * from "./upgrade-badge";
 export * from "./billing";
 export * from "./delete-workspace-section";
+export * from "./sidebar";
diff --git a/web/ee/components/workspace/sidebar/index.ts b/web/ee/components/workspace/sidebar/index.ts
new file mode 100644
index 000000000..eb17e4018
--- /dev/null
+++ b/web/ee/components/workspace/sidebar/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/workspace/sidebar";
diff --git a/web/ee/components/workspace/sidebar/teams-sidebar-list.tsx b/web/ee/components/workspace/sidebar/teams-sidebar-list.tsx
new file mode 100644
index 000000000..2cd5f20dc
--- /dev/null
+++ b/web/ee/components/workspace/sidebar/teams-sidebar-list.tsx
@@ -0,0 +1 @@
+export * from "ce/components/workspace/sidebar/teams-sidebar-list";
diff --git a/web/ee/constants/editor.ts b/web/ee/constants/editor.ts
new file mode 100644
index 000000000..c59cd0b61
--- /dev/null
+++ b/web/ee/constants/editor.ts
@@ -0,0 +1 @@
+export * from "ce/constants/editor";
diff --git a/web/ee/constants/issues.ts b/web/ee/constants/issues.ts
deleted file mode 100644
index 7be9f72e7..000000000
--- a/web/ee/constants/issues.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/constants/issues";
diff --git a/web/ee/constants/user-permissions/index.ts b/web/ee/constants/user-permissions/index.ts
deleted file mode 100644
index 3647e0351..000000000
--- a/web/ee/constants/user-permissions/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/constants/user-permissions";
diff --git a/web/ee/constants/workspace.ts b/web/ee/constants/workspace.ts
deleted file mode 100644
index b295d6e02..000000000
--- a/web/ee/constants/workspace.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/constants/workspace";
diff --git a/web/ee/helpers/command-palette.ts b/web/ee/helpers/command-palette.ts
new file mode 100644
index 000000000..7a4518321
--- /dev/null
+++ b/web/ee/helpers/command-palette.ts
@@ -0,0 +1 @@
+export * from "ce/helpers/command-palette";
diff --git a/web/ee/helpers/dashboard.helper.ts b/web/ee/helpers/dashboard.helper.ts
deleted file mode 100644
index 7f853699f..000000000
--- a/web/ee/helpers/dashboard.helper.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/helpers/dashboard.helper";
diff --git a/web/ee/helpers/epic-analytics.ts b/web/ee/helpers/epic-analytics.ts
new file mode 100644
index 000000000..48884d4c1
--- /dev/null
+++ b/web/ee/helpers/epic-analytics.ts
@@ -0,0 +1 @@
+export * from "ce/helpers/epic-analytics";
diff --git a/web/ee/helpers/issue-action-helper.ts b/web/ee/helpers/issue-action-helper.ts
new file mode 100644
index 000000000..1e1ed08f0
--- /dev/null
+++ b/web/ee/helpers/issue-action-helper.ts
@@ -0,0 +1 @@
+export * from "ce/helpers/issue-action-helper";
diff --git a/web/ee/hooks/store/index.ts b/web/ee/hooks/store/index.ts
new file mode 100644
index 000000000..6ce80b4fb
--- /dev/null
+++ b/web/ee/hooks/store/index.ts
@@ -0,0 +1 @@
+export * from "ce/hooks/store";
diff --git a/web/ee/hooks/use-additional-editor-mention.tsx b/web/ee/hooks/use-additional-editor-mention.tsx
new file mode 100644
index 000000000..5e9372d08
--- /dev/null
+++ b/web/ee/hooks/use-additional-editor-mention.tsx
@@ -0,0 +1 @@
+export * from "@/plane-web/hooks/use-additional-editor-mention";
diff --git a/web/ee/hooks/use-page-flag.ts b/web/ee/hooks/use-page-flag.ts
new file mode 100644
index 000000000..5dbd3aef2
--- /dev/null
+++ b/web/ee/hooks/use-page-flag.ts
@@ -0,0 +1 @@
+export * from "ce/hooks/use-page-flag";
diff --git a/web/ee/layouts/project-wrapper.tsx b/web/ee/layouts/project-wrapper.tsx
new file mode 100644
index 000000000..911665c97
--- /dev/null
+++ b/web/ee/layouts/project-wrapper.tsx
@@ -0,0 +1 @@
+export * from "ce/layouts/project-wrapper";
diff --git a/web/ee/layouts/workspace-wrapper.tsx b/web/ee/layouts/workspace-wrapper.tsx
new file mode 100644
index 000000000..186266fc1
--- /dev/null
+++ b/web/ee/layouts/workspace-wrapper.tsx
@@ -0,0 +1 @@
+export * from "ce/layouts/workspace-wrapper";
diff --git a/web/ee/store/command-palette.store.ts b/web/ee/store/command-palette.store.ts
new file mode 100644
index 000000000..b191f9f2d
--- /dev/null
+++ b/web/ee/store/command-palette.store.ts
@@ -0,0 +1 @@
+export * from "ce/store/command-palette.store";
diff --git a/web/ee/store/cycle/index.ts b/web/ee/store/cycle/index.ts
new file mode 100644
index 000000000..3614d60c0
--- /dev/null
+++ b/web/ee/store/cycle/index.ts
@@ -0,0 +1 @@
+export * from "@/store/cycle.store";
diff --git a/web/ee/store/issue/team-views/index.ts b/web/ee/store/issue/team-views/index.ts
new file mode 100644
index 000000000..c02c38b4f
--- /dev/null
+++ b/web/ee/store/issue/team-views/index.ts
@@ -0,0 +1 @@
+export * from "ce/store/issue/team-views";
diff --git a/web/ee/store/issue/team/index.ts b/web/ee/store/issue/team/index.ts
new file mode 100644
index 000000000..2e02634a9
--- /dev/null
+++ b/web/ee/store/issue/team/index.ts
@@ -0,0 +1 @@
+export * from "ce/store/issue/team";
diff --git a/web/ee/types/dashboard.ts b/web/ee/types/dashboard.ts
deleted file mode 100644
index 359c46578..000000000
--- a/web/ee/types/dashboard.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/types/dashboard";
diff --git a/web/ee/types/index.ts b/web/ee/types/index.ts
index 4e4c63feb..0d4b66523 100644
--- a/web/ee/types/index.ts
+++ b/web/ee/types/index.ts
@@ -1,3 +1,2 @@
 export * from "./projects";
 export * from "./issue-types";
-export * from "ce/types/state.d";
diff --git a/web/helpers/analytics.helper.ts b/web/helpers/analytics.helper.ts
index 5576dadad..cee4b40f3 100644
--- a/web/helpers/analytics.helper.ts
+++ b/web/helpers/analytics.helper.ts
@@ -1,13 +1,12 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
+// plane imports
+import { ANALYTICS_DATE_KEYS, STATE_GROUPS } from "@plane/constants";
 import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse, TStateGroups } from "@plane/types";
-// helpers
-import { DATE_KEYS } from "@/constants/analytics";
-import { MONTHS_LIST } from "@/constants/calendar";
-import { STATE_GROUPS } from "@/constants/state";
-import { addSpaceIfCamelCase, capitalizeFirstLetter, generateRandomColor } from "@/helpers/string.helper";
-// types
 // constants
+import { MONTHS_LIST } from "@/constants/calendar";
+// helpers
+import { addSpaceIfCamelCase, capitalizeFirstLetter, generateRandomColor } from "@/helpers/string.helper";
 
 export const convertResponseToBarGraphData = (
   response: IAnalyticsData | undefined,
@@ -33,7 +32,7 @@ export const convertResponseToBarGraphData = (
       });
 
       data.push({
-        name: DATE_KEYS.includes(params.x_axis)
+        name: ANALYTICS_DATE_KEYS.includes(params.x_axis)
           ? renderMonthAndYear(key)
           : params.x_axis === "priority" || params.x_axis === "state__group"
             ? capitalizeFirstLetter(key)
@@ -46,7 +45,7 @@ export const convertResponseToBarGraphData = (
       const item = response[key][0];
 
       data.push({
-        name: DATE_KEYS.includes(params.x_axis)
+        name: ANALYTICS_DATE_KEYS.includes(params.x_axis)
           ? renderMonthAndYear(item.dimension)
           : params.x_axis === "priority" || params.x_axis === "state__group"
             ? capitalizeFirstLetter(item.dimension ?? "None")
@@ -126,7 +125,7 @@ export const generateDisplayName = (
   if (params[type] === "state_id")
     displayName = analytics?.extras.state_details.find((s) => s.state_id === value)?.state__name ?? "None";
 
-  if (DATE_KEYS.includes(params.segment ?? "")) displayName = renderMonthAndYear(value);
+  if (ANALYTICS_DATE_KEYS.includes(params.segment ?? "")) displayName = renderMonthAndYear(value);
 
   return displayName;
 };
diff --git a/web/helpers/command-palette.ts b/web/helpers/command-palette.ts
new file mode 100644
index 000000000..7a4518321
--- /dev/null
+++ b/web/helpers/command-palette.ts
@@ -0,0 +1 @@
+export * from "ce/helpers/command-palette";
diff --git a/web/helpers/common.helper.ts b/web/helpers/common.helper.ts
index fdb0cd6d0..a17d28563 100644
--- a/web/helpers/common.helper.ts
+++ b/web/helpers/common.helper.ts
@@ -39,3 +39,6 @@ export const debounce = (func: any, wait: number, immediate: boolean = false) =>
 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
 
 export const convertRemToPixel = (rem: number): number => rem * 0.9 * 16;
+
+export const getProgress = (completed: number | undefined, total: number | undefined) =>
+  total && total > 0 ? Math.round(((completed ?? 0) / total) * 100) : 0;
diff --git a/web/helpers/dashboard.helper.ts b/web/helpers/dashboard.helper.ts
index a2d6a8c28..239c259e7 100644
--- a/web/helpers/dashboard.helper.ts
+++ b/web/helpers/dashboard.helper.ts
@@ -1,9 +1,9 @@
 import { endOfMonth, endOfWeek, endOfYear, startOfMonth, startOfWeek, startOfYear } from "date-fns";
 // helpers
 // types
+import { DURATION_FILTER_OPTIONS, EDurationFilters } from "@plane/constants";
 import { TIssuesListTypes } from "@plane/types";
 // constants
-import { DURATION_FILTER_OPTIONS, EDurationFilters } from "@/constants/dashboard";
 import { renderFormattedDate, renderFormattedPayloadDate } from "./date-time.helper";
 
 /**
diff --git a/web/helpers/distribution-update.helper.ts b/web/helpers/distribution-update.helper.ts
index c55543fee..b640bf33c 100644
--- a/web/helpers/distribution-update.helper.ts
+++ b/web/helpers/distribution-update.helper.ts
@@ -1,10 +1,10 @@
 import { format } from "date-fns";
 import get from "lodash/get";
 import set from "lodash/set";
+// plane imports
+import { STATE_GROUPS, COMPLETED_STATE_GROUPS } from "@plane/constants";
 // types
 import { ICycle, IEstimatePoint, IModule, IState, TIssue } from "@plane/types";
-// constants
-import { STATE_GROUPS, COMPLETED_STATE_GROUPS } from "@/constants/state";
 // helper
 import { getDate } from "./date-time.helper";
 
diff --git a/web/helpers/editor.helper.ts b/web/helpers/editor.helper.ts
index e0cbef2e1..90a431190 100644
--- a/web/helpers/editor.helper.ts
+++ b/web/helpers/editor.helper.ts
@@ -1,10 +1,5 @@
-// plane editor
-import { TFileHandler } from "@plane/editor";
 // helpers
-import { getBase64Image, getFileURL } from "@/helpers/file.helper";
-// services
-import { FileService } from "@/services/file.service";
-const fileService = new FileService();
+import { getFileURL } from "@/helpers/file.helper";
 
 type TEditorSrcArgs = {
   assetId: string;
@@ -27,245 +22,6 @@ export const getEditorAssetSrc = (args: TEditorSrcArgs): string | undefined => {
   return url;
 };
 
-type TArgs = {
-  maxFileSize: number;
-  projectId?: string;
-  uploadFile: (file: File) => Promise<string>;
-  workspaceId: string;
-  workspaceSlug: string;
-};
-
-/**
- * @description this function returns the file handler required by the editors
- * @param {TArgs} args
- */
-export const getEditorFileHandlers = (args: TArgs): TFileHandler => {
-  const { maxFileSize, projectId, uploadFile, workspaceId, workspaceSlug } = args;
-
-  return {
-    getAssetSrc: async (path) => {
-      if (!path) return "";
-      if (path?.startsWith("http")) {
-        return path;
-      } else {
-        return (
-          getEditorAssetSrc({
-            assetId: path,
-            projectId,
-            workspaceSlug,
-          }) ?? ""
-        );
-      }
-    },
-    upload: uploadFile,
-    delete: async (src: string) => {
-      if (src?.startsWith("http")) {
-        await fileService.deleteOldWorkspaceAsset(workspaceId, src);
-      } else {
-        await fileService.deleteNewAsset(
-          getEditorAssetSrc({
-            assetId: src,
-            projectId,
-            workspaceSlug,
-          }) ?? ""
-        );
-      }
-    },
-    restore: async (src: string) => {
-      if (src?.startsWith("http")) {
-        await fileService.restoreOldEditorAsset(workspaceId, src);
-      } else {
-        await fileService.restoreNewAsset(workspaceSlug, src);
-      }
-    },
-    cancel: fileService.cancelUpload,
-    validation: {
-      maxFileSize,
-    },
-  };
-};
-
-/**
- * @description this function returns the file handler required by the read-only editors
- */
-export const getReadOnlyEditorFileHandlers = (
-  args: Pick<TArgs, "projectId" | "workspaceSlug">
-): { getAssetSrc: TFileHandler["getAssetSrc"] } => {
-  const { projectId, workspaceSlug } = args;
-
-  return {
-    getAssetSrc: async (path) => {
-      if (!path) return "";
-      if (path?.startsWith("http")) {
-        return path;
-      } else {
-        return (
-          getEditorAssetSrc({
-            assetId: path,
-            projectId,
-            workspaceSlug,
-          }) ?? ""
-        );
-      }
-    },
-  };
-};
-
-/**
- * @description function to replace all the custom components from the html component to make it pdf compatible
- * @param props
- * @returns {Promise<string>}
- */
-export const replaceCustomComponentsFromHTMLContent = 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) => {
-    // get the user label from the component (or use any other attribute)
-    const label = component.getAttribute("label") || "user";
-    // create a span element to replace the mention-component
-    const span = doc.createElement("span");
-    span.setAttribute("data-node-type", "mention-block");
-    span.textContent = `@${label}`;
-    // replace the mention-component with the anchor 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;
-};
-
-/**
- * @description function to replace all the custom components from the markdown content
- * @param props
- * @returns {string}
- */
-export const replaceCustomComponentsFromMarkdownContent = (props: {
-  markdownContent: string;
-  noAssets?: boolean;
-}): string => {
-  const { markdownContent, noAssets = false } = props;
-  let parsedMarkdownContent = markdownContent;
-  // replace the matched mention components with [label](redirect_uri)
-  const mentionRegex = /<mention-component[^>]*label="([^"]+)"[^>]*redirect_uri="([^"]+)"[^>]*><\/mention-component>/g;
-  const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-  parsedMarkdownContent = parsedMarkdownContent.replace(
-    mentionRegex,
-    (_match, label, redirectUri) => `[${label}](${originUrl}/${redirectUri})`
-  );
-  // 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;
-};
-
 export const getTextContent = (jsx: JSX.Element | React.ReactNode | null | undefined): string => {
   if (!jsx) return "";
 
diff --git a/web/helpers/emoji.helper.tsx b/web/helpers/emoji.helper.tsx
index 4d76529ca..9b7aa5373 100644
--- a/web/helpers/emoji.helper.tsx
+++ b/web/helpers/emoji.helper.tsx
@@ -8,7 +8,6 @@ export const getRandomEmoji = () => {
     "128204",
     "127773",
     "127891",
-    "127947",
     "128076",
     "128077",
     "128187",
diff --git a/web/helpers/filter.helper.ts b/web/helpers/filter.helper.ts
index 85aade101..403aea4bf 100644
--- a/web/helpers/filter.helper.ts
+++ b/web/helpers/filter.helper.ts
@@ -1,4 +1,4 @@
-import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 // helpers
 import { IIssueFilters } from "@plane/types";
 import { getDate } from "./date-time.helper";
diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts
index 695d124d0..f7e6334dd 100644
--- a/web/helpers/issue.helper.ts
+++ b/web/helpers/issue.helper.ts
@@ -1,7 +1,9 @@
-import differenceInCalendarDays from "date-fns/differenceInCalendarDays";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 import isEmpty from "lodash/isEmpty";
 import set from "lodash/set";
 import { v4 as uuidv4 } from "uuid";
+// plane constants
+import { EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_PAGE, STATE_GROUPS } from "@plane/constants";
 // types
 import {
   IIssueDisplayFilterOptions,
@@ -16,9 +18,6 @@ import {
   TUnGroupedIssues,
 } from "@plane/types";
 import { IGanttBlock } from "@/components/gantt-chart";
-// constants
-import { EIssueLayoutTypes, ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
-import { STATE_GROUPS } from "@/constants/state";
 // helpers
 import { orderArrayBy } from "@/helpers/array.helper";
 import { getDate } from "@/helpers/date-time.helper";
@@ -97,13 +96,13 @@ export const handleIssuesMutation: THandleIssuesMutation = (
 
 export const handleIssueQueryParamsByLayout = (
   layout: EIssueLayoutTypes | undefined,
-  viewType: "my_issues" | "issues" | "profile_issues" | "archived_issues" | "draft_issues"
+  viewType: "my_issues" | "issues" | "profile_issues" | "archived_issues" | "draft_issues" | "team_issues"
 ): TIssueParams[] | null => {
   const queryParams: TIssueParams[] = [];
 
   if (!layout) return null;
 
-  const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
+  const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_PAGE[viewType][layout];
 
   // add filters query params
   layoutOptions.filters.forEach((option) => {
@@ -212,10 +211,10 @@ export const formatTextList = (TextArray: string[]): string => {
   }
 };
 
-export const getDescriptionPlaceholder = (isFocused: boolean, description: string | undefined): string => {
+export const getDescriptionPlaceholderI18n = (isFocused: boolean, description: string | undefined): string => {
   const isDescriptionEmpty = !description || description === "<p></p>" || description.trim() === "";
-  if (!isDescriptionEmpty || isFocused) return "Press '/' for commands...";
-  else return "Click to add description";
+  if (!isDescriptionEmpty || isFocused) return "common.press_for_commands";
+  else return "common.click_to_add_description";
 };
 
 export const issueCountBasedOnFilters = (
@@ -323,3 +322,27 @@ export const getIssuesShouldFallbackToServer = (queries: any) => {
 
   return false;
 };
+
+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 epicLink = `/${workspaceSlug}/projects/${projectId}/epics/${issueId}`;
+  const workItemLink = `/${workspaceSlug}/browse/${projectIdentifier}-${sequenceId}/`;
+
+  return isArchived ? archiveIssueLink : isEpic ? epicLink : workItemLink;
+};
diff --git a/web/helpers/project.helper.ts b/web/helpers/project.helper.ts
index 9b370a217..e8bdb5514 100644
--- a/web/helpers/project.helper.ts
+++ b/web/helpers/project.helper.ts
@@ -1,11 +1,11 @@
 import sortBy from "lodash/sortBy";
 // types
+import { EUserPermissions } from "@plane/constants";
 import { TProjectDisplayFilters, TProjectFilters, TProjectOrderByOptions } from "@plane/types";
 // helpers
 import { getDate } from "@/helpers/date-time.helper";
 import { satisfiesDateFilter } from "@/helpers/filter.helper";
 // plane web constants
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
 // types
 import { TProject } from "@/plane-web/types";
 
@@ -77,8 +77,8 @@ export const shouldFilterProject = (
     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.map((member) => member.member_id);
-      fallsInFilters = fallsInFilters && filters.members.some((memberId) => memberIds.includes(memberId));
+      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);
@@ -87,7 +87,7 @@ export const shouldFilterProject = (
       });
     }
   });
-  if (displayFilters.my_projects && !project.is_member) fallsInFilters = false;
+  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;
 
@@ -109,8 +109,8 @@ export const orderProjects = (projects: TProject[], orderByKey: TProjectOrderByO
   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();
+  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/web/helpers/state.helper.ts b/web/helpers/state.helper.ts
index 4e6c633ba..7d0b9de38 100644
--- a/web/helpers/state.helper.ts
+++ b/web/helpers/state.helper.ts
@@ -1,6 +1,7 @@
+// plane imports
+import { STATE_GROUPS, TDraggableData } from "@plane/constants";
 // types
 import { IState, IStateResponse } from "@plane/types";
-import { STATE_GROUPS, TDraggableData } from "@/constants/state";
 
 export const orderStateGroups = (unorderedStateGroups: IStateResponse | undefined): IStateResponse | undefined => {
   if (!unorderedStateGroups) return undefined;
diff --git a/web/helpers/string.helper.ts b/web/helpers/string.helper.ts
index 85cc872bf..3f31d73ac 100644
--- a/web/helpers/string.helper.ts
+++ b/web/helpers/string.helper.ts
@@ -68,14 +68,15 @@ export const copyTextToClipboard = async (text: string) => {
 /**
  * @description: This function copies the url to clipboard after prepending the origin URL to it
  * @param {string} path
+ * @param {boolean} addSlash
  * @example:
  * const text = copyUrlToClipboard("path");
  * copied URL: origin_url/path
  */
-export const copyUrlToClipboard = async (path: string) => {
+export const copyUrlToClipboard = async (path: string, addSlash: boolean = true) => {
   const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
 
-  await copyTextToClipboard(`${originUrl}/${path}`);
+  await copyTextToClipboard(`${originUrl}${addSlash ? "/" : ""}${path}`);
 };
 
 export const generateRandomColor = (string: string): string => {
diff --git a/web/helpers/tab-indices.helper.ts b/web/helpers/tab-indices.helper.ts
index 6b376e7e2..fcf7ad391 100644
--- a/web/helpers/tab-indices.helper.ts
+++ b/web/helpers/tab-indices.helper.ts
@@ -1,4 +1,4 @@
-import { ETabIndices, TAB_INDEX_MAP } from "@/constants/tab-indices";
+import { ETabIndices, TAB_INDEX_MAP } from "@plane/constants";
 
 export const getTabIndex = (type?: ETabIndices, isMobile: boolean = false) => {
   const getIndex = (key: string) =>
diff --git a/web/helpers/user.helper.ts b/web/helpers/user.helper.ts
index 9f60b15b8..7d0637afb 100644
--- a/web/helpers/user.helper.ts
+++ b/web/helpers/user.helper.ts
@@ -1,6 +1,6 @@
-import { EUserPermissions } from "@/plane-web/constants/user-permissions";
+import { EUserProjectRoles, EUserWorkspaceRoles, EUserPermissions } from "@plane/constants";
 
-export const getUserRole = (role: EUserPermissions) => {
+export const getUserRole = (role: EUserPermissions | EUserWorkspaceRoles | EUserProjectRoles) => {
   switch (role) {
     case EUserPermissions.GUEST:
       return "GUEST";
diff --git a/web/helpers/views.helper.ts b/web/helpers/views.helper.ts
new file mode 100644
index 000000000..8ce430aaf
--- /dev/null
+++ b/web/helpers/views.helper.ts
@@ -0,0 +1,15 @@
+import { Globe2, Lock, LucideIcon } from "lucide-react";
+import { EViewAccess, VIEW_ACCESS_SPECIFIERS as VIEW_ACCESS_SPECIFIERS_CONSTANTS } from "@plane/constants";
+
+const VIEW_ACCESS_ICONS = {
+  [EViewAccess.PUBLIC]: Globe2,
+  [EViewAccess.PRIVATE]: Lock,
+};
+export const VIEW_ACCESS_SPECIFIERS: {
+  key: EViewAccess;
+  i18n_label: string;
+  icon: LucideIcon;
+}[] = VIEW_ACCESS_SPECIFIERS_CONSTANTS.map((option) => ({
+  ...option,
+  icon: VIEW_ACCESS_ICONS[option.key as keyof typeof VIEW_ACCESS_ICONS],
+}));
diff --git a/web/instrumentation.ts b/web/instrumentation.ts
deleted file mode 100644
index f8a929ba4..000000000
--- a/web/instrumentation.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export async function register() {
-  if (process.env.NEXT_RUNTIME === "nodejs") {
-    await import("./sentry.server.config");
-  }
-
-  if (process.env.NEXT_RUNTIME === "edge") {
-    await import("./sentry.edge.config");
-  }
-}
diff --git a/web/next.config.js b/web/next.config.js
index 14ba0d735..672d9151b 100644
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -1,9 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /** @type {import("next").NextConfig} */
 require("dotenv").config({ path: ".env" });
-// const path = require("path");
-
-const { withSentryConfig } = require("@sentry/nextjs");
 
 const nextConfig = {
   trailingSlash: true,
@@ -14,28 +11,14 @@ const nextConfig = {
     return [
       {
         source: "/(.*)?",
-        headers: [
-          { key: "X-Frame-Options", value: "SAMEORIGIN" },
-          // {
-          //   key: "Referrer-Policy",
-          //   value: "origin-when-cross-origin",
-          // },
-          // { key: "Cross-Origin-Opener-Policy", value: "same-origin" },
-          // { key: "Cross-Origin-Embedder-Policy", value: "credentialless" },
-        ],
+        headers: [{ key: "X-Frame-Options", value: "SAMEORIGIN" }],
       },
     ];
   },
   images: {
     unoptimized: true,
   },
-  // webpack: (config, { isServer }) => {
-  //   if (!isServer) {
-  //     // Ensure that all imports of 'yjs' resolve to the same instance
-  //     config.resolve.alias["yjs"] = path.resolve(__dirname, "node_modules/yjs");
-  //   }
-  //   return config;
-  // },
+  transpilePackages: ["@plane/i18n", "@plane/propel"],
   async redirects() {
     return [
       {
@@ -67,7 +50,6 @@ const nextConfig = {
   },
   async rewrites() {
     const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://app.posthog.com";
-    const uploadsBaseURL = process.env.NEXT_PUBLIC_API_BASE_URL || "";
     const rewrites = [
       {
         source: "/ingest/static/:path*",
@@ -95,39 +77,4 @@ const nextConfig = {
   },
 };
 
-const sentryConfig = {
-  // For all available options, see:
-  // https://github.com/getsentry/sentry-webpack-plugin#options
-  org: process.env.SENTRY_ORG_ID || "plane-hq",
-  project: process.env.SENTRY_PROJECT_ID || "plane-web",
-  authToken: process.env.SENTRY_AUTH_TOKEN,
-  // Only print logs for uploading source maps in CI
-  silent: true,
-
-  // Upload a larger set of source maps for prettier stack traces (increases build time)
-  widenClientFileUpload: true,
-
-  // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-  // This can increase your server load as well as your hosting bill.
-  // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-  // side errors will fail.
-  tunnelRoute: "/monitoring",
-
-  // Hides source maps from generated client bundles
-  hideSourceMaps: true,
-
-  // Automatically tree-shake Sentry logger statements to reduce bundle size
-  disableLogger: true,
-
-  // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-  // See the following for more information:
-  // https://docs.sentry.io/product/crons/
-  // https://vercel.com/docs/cron-jobs
-  automaticVercelMonitors: true,
-};
-
-if (parseInt(process.env.SENTRY_MONITORING_ENABLED || "0", 10)) {
-  module.exports = withSentryConfig(nextConfig, sentryConfig);
-} else {
-  module.exports = nextConfig;
-}
+module.exports = nextConfig;
diff --git a/web/package.json b/web/package.json
index cd0a5ddcc..1191b2b63 100644
--- a/web/package.json
+++ b/web/package.json
@@ -31,21 +31,22 @@
     "@plane/constants": "*",
     "@plane/editor": "*",
     "@plane/hooks": "*",
+    "@plane/i18n": "*",
+    "@plane/propel": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
     "@plane/utils": "*",
     "@popperjs/core": "^2.11.8",
     "@react-pdf/renderer": "^3.4.5",
-    "@sentry/nextjs": "^8.32.0",
-    "axios": "^1.7.4",
+    "axios": "^1.7.9",
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",
     "comlink": "^4.4.1",
-    "date-fns": "^2.30.0",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.0.3",
     "isomorphic-dompurify": "^2.12.0",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.469.0",
     "mobx": "^6.10.0",
     "mobx-react": "^9.1.1",
     "mobx-utils": "^6.0.8",
@@ -55,11 +56,12 @@
     "posthog-js": "^1.131.3",
     "react": "^18.3.1",
     "react-color": "^2.19.3",
-    "react-day-picker": "^8.10.0",
+    "react-day-picker": "9.5.0",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.51.5",
     "react-markdown": "^8.0.7",
+    "react-masonry-component": "^6.3.0",
     "react-pdf-html": "^2.1.2",
     "react-popper": "^2.3.0",
     "recharts": "^2.12.7",
@@ -74,6 +76,7 @@
   },
   "devDependencies": {
     "@plane/eslint-config": "*",
+    "@plane/tailwind-config": "*",
     "@plane/typescript-config": "*",
     "@types/dompurify": "^3.0.5",
     "@types/lodash": "^4.14.202",
@@ -85,7 +88,6 @@
     "@types/uuid": "^8.3.4",
     "@types/zxcvbn": "^4.4.4",
     "prettier": "^3.2.5",
-    "tailwind-config-custom": "*",
     "typescript": "5.3.3"
   }
 }
diff --git a/web/public/empty-state/dashboard/widgets-dark.webp b/web/public/empty-state/dashboard/widgets-dark.webp
new file mode 100644
index 000000000..4c185294b
Binary files /dev/null and b/web/public/empty-state/dashboard/widgets-dark.webp differ
diff --git a/web/public/empty-state/dashboard/widgets-light.webp b/web/public/empty-state/dashboard/widgets-light.webp
new file mode 100644
index 000000000..3230b29fd
Binary files /dev/null and b/web/public/empty-state/dashboard/widgets-light.webp differ
diff --git a/web/public/empty-state/epics/epics-dark.webp b/web/public/empty-state/epics/epics-dark.webp
new file mode 100644
index 000000000..ee8da3014
Binary files /dev/null and b/web/public/empty-state/epics/epics-dark.webp differ
diff --git a/web/public/empty-state/epics/epics-light.webp b/web/public/empty-state/epics/epics-light.webp
new file mode 100644
index 000000000..179acf0ad
Binary files /dev/null and b/web/public/empty-state/epics/epics-light.webp differ
diff --git a/web/public/empty-state/stickies/stickies-dark.webp b/web/public/empty-state/stickies/stickies-dark.webp
new file mode 100644
index 000000000..d50f957d7
Binary files /dev/null and b/web/public/empty-state/stickies/stickies-dark.webp differ
diff --git a/web/public/empty-state/stickies/stickies-light.webp b/web/public/empty-state/stickies/stickies-light.webp
new file mode 100644
index 000000000..041806a38
Binary files /dev/null and b/web/public/empty-state/stickies/stickies-light.webp differ
diff --git a/web/public/empty-state/stickies/stickies-search-dark.webp b/web/public/empty-state/stickies/stickies-search-dark.webp
new file mode 100644
index 000000000..50d15f2f7
Binary files /dev/null and b/web/public/empty-state/stickies/stickies-search-dark.webp differ
diff --git a/web/public/empty-state/stickies/stickies-search-light.webp b/web/public/empty-state/stickies/stickies-search-light.webp
new file mode 100644
index 000000000..fe341ce0a
Binary files /dev/null and b/web/public/empty-state/stickies/stickies-search-light.webp differ
diff --git a/web/sentry.client.config.ts b/web/sentry.client.config.ts
deleted file mode 100644
index efe3e3cd5..000000000
--- a/web/sentry.client.config.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// This file configures the initialization of Sentry on the client.
-// The config you add here will be used whenever a users loads a page in their browser.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import { replayIntegration, init } from "@sentry/nextjs";
-
-init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-
-  replaysOnErrorSampleRate: 1.0,
-
-  // This sets the sample rate to be 10%. You may want this to be 100% while
-  // in development and sample at a lower rate in production
-  replaysSessionSampleRate: 0.1,
-
-  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
-  integrations: [
-    replayIntegration({
-      // Additional Replay configuration goes in here, for example:
-      maskAllText: true,
-      blockAllMedia: true,
-    }),
-  ],
-});
diff --git a/web/sentry.edge.config.ts b/web/sentry.edge.config.ts
deleted file mode 100644
index 93d1c5e47..000000000
--- a/web/sentry.edge.config.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
-// The config you add here will be used whenever one of the edge features is loaded.
-// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import { init } from "@sentry/nextjs";
-
-init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-});
diff --git a/web/sentry.properties b/web/sentry.properties
deleted file mode 100644
index 6796827bd..000000000
--- a/web/sentry.properties
+++ /dev/null
@@ -1,3 +0,0 @@
-defaults.url=https://sentry.io/
-defaults.org=plane
-defaults.project=plane-web
diff --git a/web/sentry.server.config.ts b/web/sentry.server.config.ts
deleted file mode 100644
index e578f1530..000000000
--- a/web/sentry.server.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-  environment: process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT || "development",
-
-  // Adjust this value in production, or use tracesSampler for greater control
-  tracesSampleRate: 1,
-
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-
-  // Uncomment the line below to enable Spotlight (https://spotlightjs.com)
-  // spotlight: process.env.NODE_ENV === 'development',
-});
diff --git a/web/styles/command-pallette.css b/web/styles/command-pallette.css
index 12cfe18eb..e8ca3db4b 100644
--- a/web/styles/command-pallette.css
+++ b/web/styles/command-pallette.css
@@ -37,3 +37,13 @@
 [cmdk-item][aria-selected="true"] {
   background-color: rgba(var(--color-background-80));
 }
+
+[cmdk-item][aria-disabled="true"], [cmdk-item][data-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+  background-color: transparent;
+}
+
+[cmdk-item][aria-disabled="true"]:hover, [cmdk-item][data-disabled="true"]:hover {
+  background-color: transparent;
+}
diff --git a/web/styles/globals.css b/web/styles/globals.css
index b9f85217a..7d44ad0d1 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -379,6 +379,53 @@
     --color-sidebar-border-300: var(--color-border-300); /* strong sidebar border- 1 */
     --color-sidebar-border-400: var(--color-border-400); /* strong sidebar border- 2 */
   }
+
+  /* stickies and editor colors */
+  :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 */
+
+    /* background colors */
+    --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;
+    /* end background colors */
+  }
+  /* 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 background colors */
 }
 
 * {
diff --git a/web/styles/react-day-picker.css b/web/styles/react-day-picker.css
index 4532d3a03..7373b3f9c 100644
--- a/web/styles/react-day-picker.css
+++ b/web/styles/react-day-picker.css
@@ -1,9 +1,9 @@
-.rdp {
+.rdp-root {
   font-size: 12px;
 
   --rdp-cell-size: 40px;
   /* Size of the day cells. */
-  --rdp-caption-font-size: 1.15rem;
+  --rdp-caption-font-size: 1rem;
   /* Font size for the caption labels. */
   --rdp-caption-navigation-size: 1.25rem;
   /* Font size for the caption labels. */
@@ -21,260 +21,16 @@
   background: transparent;
 }
 
-/* Hide elements for devices that are not screen readers */
-.rdp-vhidden {
+.rdp-root {
+  position: relative; /* Required to position the nav. */
   box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-  background: transparent;
-  border: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  position: absolute !important;
-  top: 0;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  border: 0 !important;
-}
-
-/* Buttons */
-.rdp-button_reset {
-  appearance: none;
-  position: relative;
-  margin: 0;
-  padding: 0;
-  cursor: default;
-  color: inherit;
-  background: none;
-  font: inherit;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-}
-
-.rdp-button_reset:focus-visible {
-  /* Make sure to reset outline only when :focus-visible is supported */
-  outline: none;
-}
-
-.rdp-button {
-  border: 2px solid transparent;
-}
-
-.rdp-button[disabled]:not(.rdp-day_selected) {
-  opacity: 0.25;
-}
-
-.rdp-button:not([disabled]) {
-  cursor: pointer;
-}
-
-.rdp-button:focus-visible:not([disabled]):not(.rdp-day_selected) {
-  color: inherit;
-  background-color: var(--rdp-background-color);
-}
-
-.rdp-button:focus-visible:not([disabled]).rdp-day_selected:not(.rdp-day_range_middle) {
-  outline: var(--rdp-outline);
-  outline-offset: 2px;
-  background-color: var(--rdp-dark-background-color);
-  outline-width: thin;
-}
-
-.rdp-button:hover:not([disabled]).rdp-day_selected {
-  background-color: var(--rdp-dark-background-color);
-}
-
-.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
-  background-color: var(--rdp-background-color);
-}
-
-.rdp-months {
-  display: flex;
-}
-
-.rdp-month {
-  margin: 0 1em;
-}
-
-.rdp-month:first-child {
-  margin-left: 0;
-}
-
-.rdp-month:last-child {
-  margin-right: 0;
-}
-
-.rdp-table {
-  margin: 0;
-  max-width: calc(var(--rdp-cell-size) * 7);
-  border-collapse: collapse;
-}
-
-.rdp-with_weeknumber .rdp-table {
-  max-width: calc(var(--rdp-cell-size) * 8);
-  border-collapse: collapse;
-}
-
-.rdp-caption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0;
-  text-align: left;
-}
-
-.rdp-multiple_months .rdp-caption {
-  position: relative;
-  display: block;
-  text-align: center;
-}
-
-.rdp-caption_dropdowns {
-  position: relative;
-  display: inline-flex;
-}
-
-.rdp-caption_label {
-  position: relative;
-  z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  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;
-}
-
-.rdp-nav {
-  white-space: nowrap;
-}
-
-.rdp-multiple_months .rdp-caption_start .rdp-nav {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
-}
-
-.rdp-multiple_months .rdp-caption_end .rdp-nav {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-}
-
-.rdp-nav_button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--rdp-caption-navigation-size);
-  height: var(--rdp-caption-navigation-size);
-  padding: 0.25em;
-  border-radius: 2px;
-}
-
-.rdp-nav_button:hover,
-.rdp-nav_button:focus-visible {
-  background-color: rgba(var(--color-background-80)) !important;
 }
 
 /* ---------- */
-/* Dropdowns  */
-/* ---------- */
+/* Day Buttons */
+/* ----------- */
 
-.rdp-dropdown_year,
-.rdp-dropdown_month {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.rdp-dropdown {
-  appearance: none;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-  cursor: inherit;
-  opacity: 0;
-  border: none;
-  background-color: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-.rdp-dropdown[disabled] {
-  opacity: unset;
-  color: unset;
-}
-
-.rdp-dropdown:focus-visible:not([disabled]) + .rdp-caption_label {
-  background-color: var(--rdp-background-color);
-  border: var(--rdp-outline);
-  border-radius: 6px;
-}
-
-.rdp-dropdown_icon {
-  margin: 0 0 0 5px;
-}
-
-.rdp-head {
-  border: 0;
-}
-
-.rdp-head_row,
-.rdp-row {
-  height: 100%;
-}
-
-.rdp-head_cell {
-  vertical-align: middle;
-  font-size: 0.75em;
-  font-weight: 700;
-  text-align: center;
-  height: 100%;
-  height: var(--rdp-cell-size);
-  padding: 0;
-  text-transform: uppercase;
-}
-
-.rdp-tbody {
-  border: 0;
-}
-
-.rdp-tfoot {
-  margin: 0.5em;
-}
-
-.rdp-cell {
-  width: var(--rdp-cell-size);
-  height: 100%;
-  height: var(--rdp-cell-size);
-  padding: 0;
-  text-align: center;
-}
-
-.rdp-weeknumber {
-  font-size: 0.75em;
-}
-
-.rdp-weeknumber,
-.rdp-day {
+.rdp-day_button {
   display: flex;
   overflow: hidden;
   align-items: center;
@@ -285,14 +41,58 @@
   height: var(--rdp-cell-size);
   margin: 0;
   border: 2px solid transparent;
-  border-radius: 100%;
+  border-radius: 50%;
 }
 
-.rdp-day_today:not(.rdp-day_outside) {
+.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-day_today:not(.rdp-day_outside)::after {
+.rdp-today:not(.rdp-outside)::after {
   content: "";
   position: absolute;
   left: 50%;
@@ -304,31 +104,173 @@
   transform: translate(-50%, 0);
 }
 
-.rdp-day_selected,
-.rdp-day_selected:focus-visible,
-.rdp-day_selected:hover {
+.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-day_outside:not(.rdp-day_selected) {
-  opacity: 0.5;
+.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;
 }
 
-.rdp-day_selected:focus-visible {
+/* ---------- */
+/* 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 {
+  fill: rgba(var(--color-text-200));
+  height: 0.75rem;
+  width: 0.75rem;
+}
+
+.rdp-button_next:hover,
+.rdp-button_previous:hover,
+.rdp-button_next:focus-visible,
+.rdp-button_previous:focus-visible {
+  background-color: rgba(var(--color-background-80)) !important;
+}
+
+/* ---------- */
+/* 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 {
+    background-color: rgba(var(--color-background-80)) !important;
+  }
+}
+
+.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;
 }
 
-td:has(.rdp-day_range_start),
-td:has(.rdp-day_range_middle),
-td:has(.rdp-day_range_end) {
+.rdp-dropdown:not([data-disabled="true"]) {
+  &:focus-visible + .rdp-caption_label {
+    border: var(--rdp-outline);
+    border-radius: 6px;
+  }
+
+  &:hover {
+    & + .rdp-caption_label {
+      background-color: rgba(var(--color-background-80)) !important;
+    }
+  }
+}
+
+.rdp-dropdown_icon {
+  margin: 0 0 0 5px;
+}
+
+/* --------------- */
+/* Range selection */
+/* --------------- */
+
+.rdp-range_start,
+.rdp-range_middle,
+.rdp-range_end {
   position: relative;
 }
 
-td:has(.rdp-day_range_start)::before,
-td:has(.rdp-day_range_middle)::before,
-td:has(.rdp-day_range_end)::before {
+.rdp-range_start::before,
+.rdp-range_middle::before,
+.rdp-range_end::before {
   content: "";
   position: absolute;
   background-color: var(--rdp-background-color);
@@ -336,33 +278,34 @@ td:has(.rdp-day_range_end)::before {
   height: 100%;
   width: 50%;
   transform: translate(0, -50%);
+  z-index: -1;
 }
 
-td:has(.rdp-day_range_start)::before {
+.rdp-range_start::before {
   left: 50%;
 }
 
-td:has(.rdp-day_range_middle)::before {
+.rdp-range_middle::before {
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
 }
 
-td:has(.rdp-day_range_end)::before {
+.rdp-range_end::before {
   right: 50%;
 }
 
-td:has(.rdp-day_range_start.rdp-day_range_end)::before {
+.rdp-range_start.rdp-range_end::before {
   display: none;
 }
 
-.rdp-day_range_middle {
+.rdp-range_middle .rdp-day_button {
   background-color: transparent;
   color: inherit;
 }
 
-.rdp-day_range_middle:hover,
-.rdp-day_range_middle:focus-visible {
-  background-color: var(--rdp-background-color) !important;
-  color: inherit !important;
+.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/web/tailwind.config.js b/web/tailwind.config.js
index 9b3463d0b..b6377a045 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const sharedConfig = require("tailwind-config-custom/tailwind.config.js");
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const sharedConfig = require("@plane/tailwind-config/tailwind.config.js");
 
 module.exports = {
   presets: [sharedConfig],
diff --git a/yarn.lock b/yarn.lock
index 95377ec6c..5a7f98aa2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4,25 +4,36 @@
 
 "@adobe/css-tools@^4.4.0":
   version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.1.tgz#2447a230bfe072c1659e6815129c03cf170710e3"
+  resolved "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.1.tgz#2447a230bfe072c1659e6815129c03cf170710e3"
   integrity sha512-12WGKBQzjUAI4ayyF4IAtfw2QR/IDoqk6jTddXDhtYTJF9ASmoE1zst7cVtP0aL/F1jUJL5r+JxKXKEgHNbEUQ==
 
 "@alloc/quick-lru@^5.2.0":
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
+  resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
 "@ampproject/remapping@^2.2.0":
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
+  resolved "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"
   integrity sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
+"@asamuzakjp/css-color@^2.8.2":
+  version "2.8.3"
+  resolved "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-2.8.3.tgz#665f0f5e8edb95d8f543847529e30fe5cc437ef7"
+  integrity sha512-GIc76d9UI1hCvOATjZPyHFmE5qhRccp3/zGfMPapK3jBi+yocEzp6BBB0UnfRYP9NP4FANqUZYb0hnfs3TM3hw==
+  dependencies:
+    "@csstools/css-calc" "^2.1.1"
+    "@csstools/css-color-parser" "^3.0.7"
+    "@csstools/css-parser-algorithms" "^3.0.4"
+    "@csstools/css-tokenizer" "^3.0.3"
+    lru-cache "^10.4.3"
+
 "@atlaskit/pragmatic-drag-and-drop-auto-scroll@^1.3.0":
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@atlaskit/pragmatic-drag-and-drop-auto-scroll/-/pragmatic-drag-and-drop-auto-scroll-1.4.0.tgz#99be18a428c93996b2cde3b97e88db85753aa5a5"
+  resolved "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop-auto-scroll/-/pragmatic-drag-and-drop-auto-scroll-1.4.0.tgz#99be18a428c93996b2cde3b97e88db85753aa5a5"
   integrity sha512-5GoikoTSW13UX76F9TDeWB8x3jbbGlp/Y+3aRkHe1MOBMkrWkwNpJ42MIVhhX/6NSeaZiPumP0KbGJVs2tOWSQ==
   dependencies:
     "@atlaskit/pragmatic-drag-and-drop" "^1.2.0"
@@ -30,16 +41,16 @@
 
 "@atlaskit/pragmatic-drag-and-drop-hitbox@^1.0.3":
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@atlaskit/pragmatic-drag-and-drop-hitbox/-/pragmatic-drag-and-drop-hitbox-1.0.3.tgz#fcce42f5e2c5a26007f4422397acad29608d3784"
+  resolved "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop-hitbox/-/pragmatic-drag-and-drop-hitbox-1.0.3.tgz#fcce42f5e2c5a26007f4422397acad29608d3784"
   integrity sha512-/Sbu/HqN2VGLYBhnsG7SbRNg98XKkbF6L7XDdBi+izRybfaK1FeMfodPpm/xnBHPJzwYMdkE0qtLyv6afhgMUA==
   dependencies:
     "@atlaskit/pragmatic-drag-and-drop" "^1.1.0"
     "@babel/runtime" "^7.0.0"
 
 "@atlaskit/pragmatic-drag-and-drop@^1.1.0", "@atlaskit/pragmatic-drag-and-drop@^1.1.10", "@atlaskit/pragmatic-drag-and-drop@^1.1.3", "@atlaskit/pragmatic-drag-and-drop@^1.2.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@atlaskit/pragmatic-drag-and-drop/-/pragmatic-drag-and-drop-1.4.0.tgz#0e3441b2549adcc41e0cacac33d33bc71952f9f8"
-  integrity sha512-qRY3PTJIcxfl/QB8Gwswz+BRvlmgAC5pB+J2hL6dkIxgqAgVwOhAamMUKsrOcFU/axG2Q7RbNs1xfoLKDuhoPg==
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@atlaskit/pragmatic-drag-and-drop/-/pragmatic-drag-and-drop-1.5.0.tgz#d49979bfac99030b43196d05223989eee0c0030c"
+  integrity sha512-VnHcgOBALm+mbL9CoJPI6wBNQeB0is+CkejdfAlaP8RfBoELe+0sQtE8j4Z4fPRqDzo11OEqUYKHkmx4Ttzozg==
   dependencies:
     "@babel/runtime" "^7.0.0"
     bind-event-listener "^3.0.0"
@@ -47,7 +58,7 @@
 
 "@babel/cli@^7.25.6":
   version "7.26.4"
-  resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.26.4.tgz#4101ff8ee5de8447a6c395397a97921056411d20"
+  resolved "https://registry.npmjs.org/@babel/cli/-/cli-7.26.4.tgz#4101ff8ee5de8447a6c395397a97921056411d20"
   integrity sha512-+mORf3ezU3p3qr+82WvJSnQNE1GAYeoCfEv4fik6B5/2cvKZ75AX8oawWQdXtM9MmndooQj15Jr9kelRFWsuRw==
   dependencies:
     "@jridgewell/trace-mapping" "^0.3.25"
@@ -61,65 +72,66 @@
     "@nicolo-ribaudo/chokidar-2" "2.1.8-no-fsevents.3"
     chokidar "^3.6.0"
 
-"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.0", "@babel/code-frame@^7.26.2":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.16.7", "@babel/code-frame@^7.26.2":
   version "7.26.2"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz#4b5fab97d33338eff916235055f0ebc21e573a85"
   integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
   dependencies:
     "@babel/helper-validator-identifier" "^7.25.9"
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
-"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.25.9", "@babel/compat-data@^7.26.0":
-  version "7.26.3"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.26.3.tgz#99488264a56b2aded63983abd6a417f03b92ed02"
-  integrity sha512-nHIxvKPniQXpmQLb0vhY3VaFb3S0YrTAwpOWJZh1wn3oJPjJk9Asva204PsBdmAE8vpzfHudT8DB0scYvy9q0g==
+"@babel/compat-data@^7.22.6", "@babel/compat-data@^7.26.5", "@babel/compat-data@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz#821c1d35641c355284d4a870b8a4a7b0c141e367"
+  integrity sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==
 
 "@babel/core@^7.18.5", "@babel/core@^7.18.9", "@babel/core@^7.25.2":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.26.0.tgz#d78b6023cc8f3114ccf049eb219613f74a747b40"
-  integrity sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.26.8.tgz#7742f11c75acea6b08a8e24c5c0c8c89e89bf53e"
+  integrity sha512-l+lkXCHS6tQEc5oUpK28xBOZ6+HwaH7YwoYQbLFiYb4nS2/l1tKnZEtEWkD0GuiYdvArf9qBS0XlQGXzPMsNqQ==
   dependencies:
     "@ampproject/remapping" "^2.2.0"
-    "@babel/code-frame" "^7.26.0"
-    "@babel/generator" "^7.26.0"
-    "@babel/helper-compilation-targets" "^7.25.9"
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.8"
+    "@babel/helper-compilation-targets" "^7.26.5"
     "@babel/helper-module-transforms" "^7.26.0"
-    "@babel/helpers" "^7.26.0"
-    "@babel/parser" "^7.26.0"
-    "@babel/template" "^7.25.9"
-    "@babel/traverse" "^7.25.9"
-    "@babel/types" "^7.26.0"
+    "@babel/helpers" "^7.26.7"
+    "@babel/parser" "^7.26.8"
+    "@babel/template" "^7.26.8"
+    "@babel/traverse" "^7.26.8"
+    "@babel/types" "^7.26.8"
+    "@types/gensync" "^1.0.0"
     convert-source-map "^2.0.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
     json5 "^2.2.3"
     semver "^6.3.1"
 
-"@babel/generator@^7.26.0", "@babel/generator@^7.26.3":
-  version "7.26.3"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.26.3.tgz#ab8d4360544a425c90c248df7059881f4b2ce019"
-  integrity sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==
+"@babel/generator@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.26.8.tgz#f9c5e770309e12e3099ad8271e52f6caa15442ab"
+  integrity sha512-ef383X5++iZHWAXX0SXQR6ZyQhw/0KtTkrTz61WXRhFM6dhpHulO/RJz79L8S6ugZHJkOOkUrUdxgdF2YiPFnA==
   dependencies:
-    "@babel/parser" "^7.26.3"
-    "@babel/types" "^7.26.3"
+    "@babel/parser" "^7.26.8"
+    "@babel/types" "^7.26.8"
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^3.0.2"
 
 "@babel/helper-annotate-as-pure@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
+  resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz#d8eac4d2dc0d7b6e11fa6e535332e0d3184f06b4"
   integrity sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==
   dependencies:
     "@babel/types" "^7.25.9"
 
-"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz#55af025ce365be3cdc0c1c1e56c6af617ce88875"
-  integrity sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==
+"@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.25.9", "@babel/helper-compilation-targets@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz#75d92bb8d8d51301c0d49e52a65c9a7fe94514d8"
+  integrity sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==
   dependencies:
-    "@babel/compat-data" "^7.25.9"
+    "@babel/compat-data" "^7.26.5"
     "@babel/helper-validator-option" "^7.25.9"
     browserslist "^4.24.0"
     lru-cache "^5.1.1"
@@ -127,7 +139,7 @@
 
 "@babel/helper-create-class-features-plugin@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83"
+  resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.25.9.tgz#7644147706bb90ff613297d49ed5266bde729f83"
   integrity sha512-UTZQMvt0d/rSz6KI+qdu7GQze5TIajwTS++GUozlw8VBJDEOAqSXwm1WvmYEZwqdqSGQshRocPDqrt4HBZB3fQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.25.9"
@@ -140,16 +152,16 @@
 
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.25.9":
   version "7.26.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
+  resolved "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.26.3.tgz#5169756ecbe1d95f7866b90bb555b022595302a0"
   integrity sha512-G7ZRb40uUgdKOQqPLjfD12ZmGA54PzqDFUv2BKImnC9QIfGhIHKvVML0oN8IUiDq4iRqpq74ABpvOaerfWdong==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.25.9"
     regexpu-core "^6.2.0"
     semver "^6.3.1"
 
-"@babel/helper-define-polyfill-provider@^0.6.2", "@babel/helper-define-polyfill-provider@^0.6.3":
+"@babel/helper-define-polyfill-provider@^0.6.3":
   version "0.6.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz#f4f2792fae2ef382074bc2d713522cf24e6ddb21"
+  resolved "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.3.tgz#f4f2792fae2ef382074bc2d713522cf24e6ddb21"
   integrity sha512-HK7Bi+Hj6H+VTHA3ZvBis7V/6hu9QuTrnMXNybfUf2iiuU/N97I8VjB+KbhFF8Rld/Lx5MzoCwPCpPjfK+n8Cg==
   dependencies:
     "@babel/helper-compilation-targets" "^7.22.6"
@@ -160,7 +172,7 @@
 
 "@babel/helper-member-expression-to-functions@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
+  resolved "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz#9dfffe46f727005a5ea29051ac835fb735e4c1a3"
   integrity sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==
   dependencies:
     "@babel/traverse" "^7.25.9"
@@ -168,7 +180,7 @@
 
 "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz#e7f8d20602ebdbf9ebbea0a0751fb0f2a4141715"
   integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
   dependencies:
     "@babel/traverse" "^7.25.9"
@@ -176,7 +188,7 @@
 
 "@babel/helper-module-transforms@^7.25.9", "@babel/helper-module-transforms@^7.26.0":
   version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz#8ce54ec9d592695e58d84cd884b7b5c6a2fdeeae"
   integrity sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==
   dependencies:
     "@babel/helper-module-imports" "^7.25.9"
@@ -185,19 +197,19 @@
 
 "@babel/helper-optimise-call-expression@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
+  resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz#3324ae50bae7e2ab3c33f60c9a877b6a0146b54e"
   integrity sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==
   dependencies:
     "@babel/types" "^7.25.9"
 
-"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46"
-  integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==
+"@babel/helper-plugin-utils@^7.0.0", "@babel/helper-plugin-utils@^7.18.6", "@babel/helper-plugin-utils@^7.22.5", "@babel/helper-plugin-utils@^7.25.9", "@babel/helper-plugin-utils@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz#18580d00c9934117ad719392c4f6585c9333cc35"
+  integrity sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==
 
 "@babel/helper-remap-async-to-generator@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92"
+  resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz#e53956ab3d5b9fb88be04b3e2f31b523afd34b92"
   integrity sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.25.9"
@@ -205,17 +217,17 @@
     "@babel/traverse" "^7.25.9"
 
 "@babel/helper-replace-supers@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.25.9.tgz#ba447224798c3da3f8713fc272b145e33da6a5c5"
-  integrity sha512-IiDqTOTBQy0sWyeXyGSC5TBJpGFXBkRynjBeXsvbhQFKj2viwJC76Epz35YLU1fpe/Am6Vppb7W7zM4fPQzLsQ==
+  version "7.26.5"
+  resolved "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz#6cb04e82ae291dae8e72335dfe438b0725f14c8d"
+  integrity sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==
   dependencies:
     "@babel/helper-member-expression-to-functions" "^7.25.9"
     "@babel/helper-optimise-call-expression" "^7.25.9"
-    "@babel/traverse" "^7.25.9"
+    "@babel/traverse" "^7.26.5"
 
 "@babel/helper-skip-transparent-expression-wrappers@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
+  resolved "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz#0b2e1b62d560d6b1954893fd2b705dc17c91f0c9"
   integrity sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==
   dependencies:
     "@babel/traverse" "^7.25.9"
@@ -223,46 +235,46 @@
 
 "@babel/helper-string-parser@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz#1aabb72ee72ed35789b4bbcad3ca2862ce614e8c"
   integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
 
 "@babel/helper-validator-identifier@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz#24b64e2c3ec7cd3b3c547729b8d16871f22cbdc7"
   integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
 
 "@babel/helper-validator-option@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz#86e45bd8a49ab7e03f276577f96179653d41da72"
   integrity sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==
 
 "@babel/helper-wrap-function@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0"
+  resolved "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz#d99dfd595312e6c894bd7d237470025c85eea9d0"
   integrity sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==
   dependencies:
     "@babel/template" "^7.25.9"
     "@babel/traverse" "^7.25.9"
     "@babel/types" "^7.25.9"
 
-"@babel/helpers@^7.26.0":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.26.0.tgz#30e621f1eba5aa45fe6f4868d2e9154d884119a4"
-  integrity sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==
+"@babel/helpers@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.7.tgz#fd1d2a7c431b6e39290277aacfd8367857c576a4"
+  integrity sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==
   dependencies:
     "@babel/template" "^7.25.9"
-    "@babel/types" "^7.26.0"
+    "@babel/types" "^7.26.7"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.3":
-  version "7.26.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.3.tgz#8c51c5db6ddf08134af1ddbacf16aaab48bac234"
-  integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.26.8.tgz#deca2b4d99e5e1b1553843b99823f118da6107c2"
+  integrity sha512-TZIQ25pkSoaKEYYaHbbxkfL36GNsQ6iFiBbeuzAkLnXayKR1yP1zFe+NxuZWWsUyvt8icPU9CCq0sgWGXR1GEw==
   dependencies:
-    "@babel/types" "^7.26.3"
+    "@babel/types" "^7.26.8"
 
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz#cc2e53ebf0a0340777fff5ed521943e253b4d8fe"
   integrity sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -270,21 +282,21 @@
 
 "@babel/plugin-bugfix-safari-class-field-initializer-scope@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz#af9e4fb63ccb8abcb92375b2fcfe36b60c774d30"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz#af9e4fb63ccb8abcb92375b2fcfe36b60c774d30"
   integrity sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz#e8dc26fcd616e6c5bf2bd0d5a2c151d4f92a9137"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz#e8dc26fcd616e6c5bf2bd0d5a2c151d4f92a9137"
   integrity sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz#807a667f9158acac6f6164b4beb85ad9ebc9e1d1"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz#807a667f9158acac6f6164b4beb85ad9ebc9e1d1"
   integrity sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -293,7 +305,7 @@
 
 "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz#de7093f1e7deaf68eadd7cc6b07f2ab82543269e"
+  resolved "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz#de7093f1e7deaf68eadd7cc6b07f2ab82543269e"
   integrity sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -301,40 +313,40 @@
 
 "@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2":
   version "7.21.0-placeholder-for-preset-env.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
+  resolved "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz#7844f9289546efa9febac2de4cfe358a050bd703"
   integrity sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==
 
 "@babel/plugin-syntax-import-assertions@^7.26.0":
   version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz#620412405058efa56e4a564903b79355020f445f"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz#620412405058efa56e4a564903b79355020f445f"
   integrity sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-syntax-import-attributes@^7.26.0":
   version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz#3b1412847699eea739b4f2602c74ce36f6b0b0f7"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz#3b1412847699eea739b4f2602c74ce36f6b0b0f7"
   integrity sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-syntax-jsx@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz#a34313a178ea56f1951599b929c1ceacee719290"
   integrity sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-syntax-typescript@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz#67dda2b74da43727cf21d46cf9afef23f4365399"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz#67dda2b74da43727cf21d46cf9afef23f4365399"
   integrity sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
   version "7.18.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
+  resolved "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
   integrity sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.18.6"
@@ -342,46 +354,46 @@
 
 "@babel/plugin-transform-arrow-functions@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845"
   integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-async-generator-functions@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.25.9.tgz#1b18530b077d18a407c494eb3d1d72da505283a2"
-  integrity sha512-RXV6QAzTBbhDMO9fWwOmwwTuYaiPbggWQ9INdZqAYeSHyG7FzQ+nOZaUUjNwKv9pV3aE4WFqFm1Hnbci5tBCAw==
+"@babel/plugin-transform-async-generator-functions@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.26.8.tgz#5e3991135e3b9c6eaaf5eff56d1ae5a11df45ff8"
+  integrity sha512-He9Ej2X7tNf2zdKMAGOsmg2MrFc+hfoAhd3po4cWfo/NWjzEAKa0oQruj1ROVUdl0e6fb6/kE/G3SSxE0lRJOg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
     "@babel/helper-remap-async-to-generator" "^7.25.9"
-    "@babel/traverse" "^7.25.9"
+    "@babel/traverse" "^7.26.8"
 
 "@babel/plugin-transform-async-to-generator@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz#c80008dacae51482793e5a9c08b39a5be7e12d71"
   integrity sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==
   dependencies:
     "@babel/helper-module-imports" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
     "@babel/helper-remap-async-to-generator" "^7.25.9"
 
-"@babel/plugin-transform-block-scoped-functions@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.25.9.tgz#5700691dbd7abb93de300ca7be94203764fce458"
-  integrity sha512-toHc9fzab0ZfenFpsyYinOX0J/5dgJVA2fm64xPewu7CoYHWEivIWKxkK2rMi4r3yQqLnVmheMXRdG+k239CgA==
+"@babel/plugin-transform-block-scoped-functions@^7.26.5":
+  version "7.26.5"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.26.5.tgz#3dc4405d31ad1cbe45293aa57205a6e3b009d53e"
+  integrity sha512-chuTSY+hq09+/f5lMj8ZSYgCFpppV2CbYrhNFJ1BFoXpiWPnnAb7R0MqrafCpN8E1+YRrtM1MXZHJdIx8B6rMQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
 "@babel/plugin-transform-block-scoping@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.25.9.tgz#c33665e46b06759c93687ca0f84395b80c0473a1"
   integrity sha512-1F05O7AYjymAtqbsFETboN1NvBdcnzMerO+zlMyJBEz6WkMdejvGWw9p05iTSjC85RLlBseHHQpYaM4gzJkBGg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-class-properties@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz#a8ce84fedb9ad512549984101fa84080a9f5f51f"
   integrity sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==
   dependencies:
     "@babel/helper-create-class-features-plugin" "^7.25.9"
@@ -389,7 +401,7 @@
 
 "@babel/plugin-transform-class-static-block@^7.26.0":
   version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz#6c8da219f4eb15cae9834ec4348ff8e9e09664a0"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz#6c8da219f4eb15cae9834ec4348ff8e9e09664a0"
   integrity sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==
   dependencies:
     "@babel/helper-create-class-features-plugin" "^7.25.9"
@@ -397,7 +409,7 @@
 
 "@babel/plugin-transform-classes@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz#7152457f7880b593a63ade8a861e6e26a4469f52"
   integrity sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.25.9"
@@ -409,7 +421,7 @@
 
 "@babel/plugin-transform-computed-properties@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz#db36492c78460e534b8852b1d5befe3c923ef10b"
   integrity sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -417,14 +429,14 @@
 
 "@babel/plugin-transform-destructuring@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz#966ea2595c498224340883602d3cfd7a0c79cea1"
   integrity sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-dotall-regex@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz#bad7945dd07734ca52fe3ad4e872b40ed09bb09a"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz#bad7945dd07734ca52fe3ad4e872b40ed09bb09a"
   integrity sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
@@ -432,14 +444,14 @@
 
 "@babel/plugin-transform-duplicate-keys@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz#8850ddf57dce2aebb4394bb434a7598031059e6d"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz#8850ddf57dce2aebb4394bb434a7598031059e6d"
   integrity sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-duplicate-named-capturing-groups-regex@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz#6f7259b4de127721a08f1e5165b852fcaa696d31"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz#6f7259b4de127721a08f1e5165b852fcaa696d31"
   integrity sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
@@ -447,28 +459,28 @@
 
 "@babel/plugin-transform-dynamic-import@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz#23e917de63ed23c6600c5dd06d94669dce79f7b8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz#23e917de63ed23c6600c5dd06d94669dce79f7b8"
   integrity sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-exponentiation-operator@^7.25.9":
+"@babel/plugin-transform-exponentiation-operator@^7.26.3":
   version "7.26.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz#e29f01b6de302c7c2c794277a48f04a9ca7f03bc"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz#e29f01b6de302c7c2c794277a48f04a9ca7f03bc"
   integrity sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-export-namespace-from@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz#90745fe55053394f554e40584cda81f2c8a402a2"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz#90745fe55053394f554e40584cda81f2c8a402a2"
   integrity sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-for-of@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz#4bdc7d42a213397905d89f02350c5267866d5755"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.25.9.tgz#4bdc7d42a213397905d89f02350c5267866d5755"
   integrity sha512-LqHxduHoaGELJl2uhImHwRQudhCM50pT46rIBNvtT/Oql3nqiS3wOwP+5ten7NpYSXrrVLgtZU3DZmPtWZo16A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -476,7 +488,7 @@
 
 "@babel/plugin-transform-function-name@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz#939d956e68a606661005bfd550c4fc2ef95f7b97"
   integrity sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==
   dependencies:
     "@babel/helper-compilation-targets" "^7.25.9"
@@ -485,43 +497,43 @@
 
 "@babel/plugin-transform-json-strings@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz#c86db407cb827cded902a90c707d2781aaa89660"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz#c86db407cb827cded902a90c707d2781aaa89660"
   integrity sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-literals@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz#1a1c6b4d4aa59bc4cad5b6b3a223a0abd685c9de"
   integrity sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-logical-assignment-operators@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz#b19441a8c39a2fda0902900b306ea05ae1055db7"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz#b19441a8c39a2fda0902900b306ea05ae1055db7"
   integrity sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-member-expression-literals@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz#63dff19763ea64a31f5e6c20957e6a25e41ed5de"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz#63dff19763ea64a31f5e6c20957e6a25e41ed5de"
   integrity sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-modules-amd@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz#49ba478f2295101544abd794486cd3088dddb6c5"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz#49ba478f2295101544abd794486cd3088dddb6c5"
   integrity sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==
   dependencies:
     "@babel/helper-module-transforms" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-modules-commonjs@^7.25.9":
+"@babel/plugin-transform-modules-commonjs@^7.25.9", "@babel/plugin-transform-modules-commonjs@^7.26.3":
   version "7.26.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz#8f011d44b20d02c3de44d8850d971d8497f981fb"
   integrity sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==
   dependencies:
     "@babel/helper-module-transforms" "^7.26.0"
@@ -529,7 +541,7 @@
 
 "@babel/plugin-transform-modules-systemjs@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz#8bd1b43836269e3d33307151a114bcf3ba6793f8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz#8bd1b43836269e3d33307151a114bcf3ba6793f8"
   integrity sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==
   dependencies:
     "@babel/helper-module-transforms" "^7.25.9"
@@ -539,7 +551,7 @@
 
 "@babel/plugin-transform-modules-umd@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz#6710079cdd7c694db36529a1e8411e49fcbf14c9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz#6710079cdd7c694db36529a1e8411e49fcbf14c9"
   integrity sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==
   dependencies:
     "@babel/helper-module-transforms" "^7.25.9"
@@ -547,7 +559,7 @@
 
 "@babel/plugin-transform-named-capturing-groups-regex@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz#454990ae6cc22fd2a0fa60b3a2c6f63a38064e6a"
   integrity sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
@@ -555,28 +567,28 @@
 
 "@babel/plugin-transform-new-target@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz#42e61711294b105c248336dcb04b77054ea8becd"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz#42e61711294b105c248336dcb04b77054ea8becd"
   integrity sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-nullish-coalescing-operator@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.25.9.tgz#bcb1b0d9e948168102d5f7104375ca21c3266949"
-  integrity sha512-ENfftpLZw5EItALAD4WsY/KUWvhUlZndm5GC7G3evUsVeSJB6p0pBeLQUnRnBCBx7zV0RKQjR9kCuwrsIrjWog==
+"@babel/plugin-transform-nullish-coalescing-operator@^7.26.6":
+  version "7.26.6"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.6.tgz#fbf6b3c92cb509e7b319ee46e3da89c5bedd31fe"
+  integrity sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
 "@babel/plugin-transform-numeric-separator@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz#bfed75866261a8b643468b0ccfd275f2033214a1"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz#bfed75866261a8b643468b0ccfd275f2033214a1"
   integrity sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-object-rest-spread@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz#0203725025074164808bcf1a2cfa90c652c99f18"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz#0203725025074164808bcf1a2cfa90c652c99f18"
   integrity sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==
   dependencies:
     "@babel/helper-compilation-targets" "^7.25.9"
@@ -585,7 +597,7 @@
 
 "@babel/plugin-transform-object-super@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz#385d5de135162933beb4a3d227a2b7e52bb4cf03"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz#385d5de135162933beb4a3d227a2b7e52bb4cf03"
   integrity sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -593,14 +605,14 @@
 
 "@babel/plugin-transform-optional-catch-binding@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz#10e70d96d52bb1f10c5caaac59ac545ea2ba7ff3"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz#10e70d96d52bb1f10c5caaac59ac545ea2ba7ff3"
   integrity sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-optional-chaining@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz#e142eb899d26ef715435f201ab6e139541eee7dd"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz#e142eb899d26ef715435f201ab6e139541eee7dd"
   integrity sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -608,14 +620,14 @@
 
 "@babel/plugin-transform-parameters@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz#b856842205b3e77e18b7a7a1b94958069c7ba257"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz#b856842205b3e77e18b7a7a1b94958069c7ba257"
   integrity sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-private-methods@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz#847f4139263577526455d7d3223cd8bda51e3b57"
   integrity sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==
   dependencies:
     "@babel/helper-create-class-features-plugin" "^7.25.9"
@@ -623,7 +635,7 @@
 
 "@babel/plugin-transform-private-property-in-object@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz#9c8b73e64e6cc3cbb2743633885a7dd2c385fe33"
   integrity sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.25.9"
@@ -632,14 +644,14 @@
 
 "@babel/plugin-transform-property-literals@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz#d72d588bd88b0dec8b62e36f6fda91cedfe28e3f"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz#d72d588bd88b0dec8b62e36f6fda91cedfe28e3f"
   integrity sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-regenerator@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz#03a8a4670d6cebae95305ac6defac81ece77740b"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.25.9.tgz#03a8a4670d6cebae95305ac6defac81ece77740b"
   integrity sha512-vwDcDNsgMPDGP0nMqzahDWE5/MLcX8sv96+wfX7as7LoF/kr97Bo/7fI00lXY4wUXYfVmwIIyG80fGZ1uvt2qg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -647,7 +659,7 @@
 
 "@babel/plugin-transform-regexp-modifiers@^7.26.0":
   version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz#2f5837a5b5cd3842a919d8147e9903cc7455b850"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz#2f5837a5b5cd3842a919d8147e9903cc7455b850"
   integrity sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
@@ -655,21 +667,21 @@
 
 "@babel/plugin-transform-reserved-words@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz#0398aed2f1f10ba3f78a93db219b27ef417fb9ce"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz#0398aed2f1f10ba3f78a93db219b27ef417fb9ce"
   integrity sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-shorthand-properties@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2"
   integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-spread@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz#24a35153931b4ba3d13cec4a7748c21ab5514ef9"
   integrity sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -677,46 +689,46 @@
 
 "@babel/plugin-transform-sticky-regex@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz#c7f02b944e986a417817b20ba2c504dfc1453d32"
   integrity sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
-"@babel/plugin-transform-template-literals@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz#6dbd4a24e8fad024df76d1fac6a03cf413f60fe1"
-  integrity sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw==
+"@babel/plugin-transform-template-literals@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.26.8.tgz#966b15d153a991172a540a69ad5e1845ced990b5"
+  integrity sha512-OmGDL5/J0CJPJZTHZbi2XpO0tyT2Ia7fzpW5GURwdtp2X3fMmN8au/ej6peC/T33/+CRiIpA8Krse8hFGVmT5Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
-"@babel/plugin-transform-typeof-symbol@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.25.9.tgz#224ba48a92869ddbf81f9b4a5f1204bbf5a2bc4b"
-  integrity sha512-v61XqUMiueJROUv66BVIOi0Fv/CUuZuZMl5NkRoCVxLAnMexZ0A3kMe7vvZ0nulxMuMp0Mk6S5hNh48yki08ZA==
+"@babel/plugin-transform-typeof-symbol@^7.26.7":
+  version "7.26.7"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.26.7.tgz#d0e33acd9223744c1e857dbd6fa17bd0a3786937"
+  integrity sha512-jfoTXXZTgGg36BmhqT3cAYK5qkmqvJpvNrPhaK/52Vgjhw4Rq29s9UqpWWV0D6yuRmgiFH/BUVlkl96zJWqnaw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
 
 "@babel/plugin-transform-typescript@^7.25.9":
-  version "7.26.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.3.tgz#3d6add9c78735623317387ee26d5ada540eee3fd"
-  integrity sha512-6+5hpdr6mETwSKjmJUdYw0EIkATiQhnELWlE3kJFBwSg/BGIVwVaVbX+gOXBCdc7Ln1RXZxyWGecIXhUfnl7oA==
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.26.8.tgz#2e9caa870aa102f50d7125240d9dbf91334b0950"
+  integrity sha512-bME5J9AC8ChwA7aEPJ6zym3w7aObZULHhbNLU0bKUhKsAkylkzUdq+0kdymh9rzi8nlNFl2bmldFBCKNJBUpuw==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.25.9"
     "@babel/helper-create-class-features-plugin" "^7.25.9"
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/helper-plugin-utils" "^7.26.5"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.25.9"
     "@babel/plugin-syntax-typescript" "^7.25.9"
 
 "@babel/plugin-transform-unicode-escapes@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz#a75ef3947ce15363fccaa38e2dd9bc70b2788b82"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz#a75ef3947ce15363fccaa38e2dd9bc70b2788b82"
   integrity sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/plugin-transform-unicode-property-regex@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz#a901e96f2c1d071b0d1bb5dc0d3c880ce8f53dd3"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz#a901e96f2c1d071b0d1bb5dc0d3c880ce8f53dd3"
   integrity sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
@@ -724,7 +736,7 @@
 
 "@babel/plugin-transform-unicode-regex@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz#5eae747fe39eacf13a8bd006a4fb0b5d1fa5e9b1"
   integrity sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
@@ -732,20 +744,20 @@
 
 "@babel/plugin-transform-unicode-sets-regex@^7.25.9":
   version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz#65114c17b4ffc20fa5b163c63c70c0d25621fabe"
+  resolved "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz#65114c17b4ffc20fa5b163c63c70c0d25621fabe"
   integrity sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==
   dependencies:
     "@babel/helper-create-regexp-features-plugin" "^7.25.9"
     "@babel/helper-plugin-utils" "^7.25.9"
 
 "@babel/preset-env@^7.25.4":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.26.0.tgz#30e5c6bc1bcc54865bff0c5a30f6d4ccdc7fa8b1"
-  integrity sha512-H84Fxq0CQJNdPFT2DrfnylZ3cf5K43rGfWK4LJGPpjKHiZlk0/RzwEus3PDDZZg+/Er7lCA03MVacueUuXdzfw==
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.8.tgz#7af0090829b606d2046db99679004731e1dc364d"
+  integrity sha512-um7Sy+2THd697S4zJEfv/U5MHGJzkN2xhtsR3T/SWRbVSic62nbISh51VVfU9JiO/L/Z97QczHTaFVkOU8IzNg==
   dependencies:
-    "@babel/compat-data" "^7.26.0"
-    "@babel/helper-compilation-targets" "^7.25.9"
-    "@babel/helper-plugin-utils" "^7.25.9"
+    "@babel/compat-data" "^7.26.8"
+    "@babel/helper-compilation-targets" "^7.26.5"
+    "@babel/helper-plugin-utils" "^7.26.5"
     "@babel/helper-validator-option" "^7.25.9"
     "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.25.9"
     "@babel/plugin-bugfix-safari-class-field-initializer-scope" "^7.25.9"
@@ -757,9 +769,9 @@
     "@babel/plugin-syntax-import-attributes" "^7.26.0"
     "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
     "@babel/plugin-transform-arrow-functions" "^7.25.9"
-    "@babel/plugin-transform-async-generator-functions" "^7.25.9"
+    "@babel/plugin-transform-async-generator-functions" "^7.26.8"
     "@babel/plugin-transform-async-to-generator" "^7.25.9"
-    "@babel/plugin-transform-block-scoped-functions" "^7.25.9"
+    "@babel/plugin-transform-block-scoped-functions" "^7.26.5"
     "@babel/plugin-transform-block-scoping" "^7.25.9"
     "@babel/plugin-transform-class-properties" "^7.25.9"
     "@babel/plugin-transform-class-static-block" "^7.26.0"
@@ -770,7 +782,7 @@
     "@babel/plugin-transform-duplicate-keys" "^7.25.9"
     "@babel/plugin-transform-duplicate-named-capturing-groups-regex" "^7.25.9"
     "@babel/plugin-transform-dynamic-import" "^7.25.9"
-    "@babel/plugin-transform-exponentiation-operator" "^7.25.9"
+    "@babel/plugin-transform-exponentiation-operator" "^7.26.3"
     "@babel/plugin-transform-export-namespace-from" "^7.25.9"
     "@babel/plugin-transform-for-of" "^7.25.9"
     "@babel/plugin-transform-function-name" "^7.25.9"
@@ -779,12 +791,12 @@
     "@babel/plugin-transform-logical-assignment-operators" "^7.25.9"
     "@babel/plugin-transform-member-expression-literals" "^7.25.9"
     "@babel/plugin-transform-modules-amd" "^7.25.9"
-    "@babel/plugin-transform-modules-commonjs" "^7.25.9"
+    "@babel/plugin-transform-modules-commonjs" "^7.26.3"
     "@babel/plugin-transform-modules-systemjs" "^7.25.9"
     "@babel/plugin-transform-modules-umd" "^7.25.9"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.25.9"
     "@babel/plugin-transform-new-target" "^7.25.9"
-    "@babel/plugin-transform-nullish-coalescing-operator" "^7.25.9"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.26.6"
     "@babel/plugin-transform-numeric-separator" "^7.25.9"
     "@babel/plugin-transform-object-rest-spread" "^7.25.9"
     "@babel/plugin-transform-object-super" "^7.25.9"
@@ -800,22 +812,22 @@
     "@babel/plugin-transform-shorthand-properties" "^7.25.9"
     "@babel/plugin-transform-spread" "^7.25.9"
     "@babel/plugin-transform-sticky-regex" "^7.25.9"
-    "@babel/plugin-transform-template-literals" "^7.25.9"
-    "@babel/plugin-transform-typeof-symbol" "^7.25.9"
+    "@babel/plugin-transform-template-literals" "^7.26.8"
+    "@babel/plugin-transform-typeof-symbol" "^7.26.7"
     "@babel/plugin-transform-unicode-escapes" "^7.25.9"
     "@babel/plugin-transform-unicode-property-regex" "^7.25.9"
     "@babel/plugin-transform-unicode-regex" "^7.25.9"
     "@babel/plugin-transform-unicode-sets-regex" "^7.25.9"
     "@babel/preset-modules" "0.1.6-no-external-plugins"
     babel-plugin-polyfill-corejs2 "^0.4.10"
-    babel-plugin-polyfill-corejs3 "^0.10.6"
+    babel-plugin-polyfill-corejs3 "^0.11.0"
     babel-plugin-polyfill-regenerator "^0.6.1"
-    core-js-compat "^3.38.1"
+    core-js-compat "^3.40.0"
     semver "^6.3.1"
 
 "@babel/preset-modules@0.1.6-no-external-plugins":
   version "0.1.6-no-external-plugins"
-  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
+  resolved "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz#ccb88a2c49c817236861fee7826080573b8a923a"
   integrity sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -824,7 +836,7 @@
 
 "@babel/preset-typescript@^7.24.7":
   version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz#4a570f1b8d104a242d923957ffa1eaff142a106d"
+  resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.26.0.tgz#4a570f1b8d104a242d923957ffa1eaff142a106d"
   integrity sha512-NMk1IGZ5I/oHhoXEElcm+xUnL/szL6xflkFZmoEU9xj1qSJXpiS7rsspYo92B4DRCDvZn2erT5LdsCeXAKNCkg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.25.9"
@@ -833,53 +845,53 @@
     "@babel/plugin-transform-modules-commonjs" "^7.25.9"
     "@babel/plugin-transform-typescript" "^7.25.9"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
-  version "7.26.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
-  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.13", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+  version "7.26.7"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.7.tgz#f4e7fe527cd710f8dc0618610b61b4b060c3c341"
+  integrity sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ==
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/template@^7.25.9":
-  version "7.25.9"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.9.tgz#ecb62d81a8a6f5dc5fe8abfc3901fc52ddf15016"
-  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
-  dependencies:
-    "@babel/code-frame" "^7.25.9"
-    "@babel/parser" "^7.25.9"
-    "@babel/types" "^7.25.9"
-
-"@babel/traverse@^7.18.9", "@babel/traverse@^7.25.9":
-  version "7.26.4"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.26.4.tgz#ac3a2a84b908dde6d463c3bfa2c5fdc1653574bd"
-  integrity sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==
+"@babel/template@^7.25.9", "@babel/template@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.26.8.tgz#db3898f47a17bab2f4c78ec1d0de38527c2ffe19"
+  integrity sha512-iNKaX3ZebKIsCvJ+0jd6embf+Aulaa3vNBqZ41kM7iTWjx5qzWKXGHiJUW3+nTpQ18SG11hdF8OAzKrpXkb96Q==
   dependencies:
     "@babel/code-frame" "^7.26.2"
-    "@babel/generator" "^7.26.3"
-    "@babel/parser" "^7.26.3"
-    "@babel/template" "^7.25.9"
-    "@babel/types" "^7.26.3"
+    "@babel/parser" "^7.26.8"
+    "@babel/types" "^7.26.8"
+
+"@babel/traverse@^7.18.9", "@babel/traverse@^7.25.9", "@babel/traverse@^7.26.5", "@babel/traverse@^7.26.8":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.8.tgz#0a8a9c2b7cc9519eed14275f4fd2278ad46e8cc9"
+  integrity sha512-nic9tRkjYH0oB2dzr/JoGIm+4Q6SuYeLEiIiZDwBscRMYFJ+tMAz98fuel9ZnbXViA2I0HVSSRRK8DW5fjXStA==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.8"
+    "@babel/parser" "^7.26.8"
+    "@babel/template" "^7.26.8"
+    "@babel/types" "^7.26.8"
     debug "^4.3.1"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.25.9", "@babel/types@^7.26.0", "@babel/types@^7.26.3", "@babel/types@^7.4.4":
-  version "7.26.3"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.26.3.tgz#37e79830f04c2b5687acc77db97fbc75fb81f3c0"
-  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+"@babel/types@^7.0.0", "@babel/types@^7.18.9", "@babel/types@^7.20.7", "@babel/types@^7.25.9", "@babel/types@^7.26.7", "@babel/types@^7.26.8", "@babel/types@^7.4.4":
+  version "7.26.8"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.26.8.tgz#97dcdc190fab45be7f3dc073e3c11160d677c127"
+  integrity sha512-eUuWapzEGWFEpHFxgEaBG8e3n6S8L3MSu0oda755rOfabWPnh0Our1AozNFVUxGFIhbKgd1ksprsoDGMinTOTA==
   dependencies:
     "@babel/helper-string-parser" "^7.25.9"
     "@babel/helper-validator-identifier" "^7.25.9"
 
 "@blueprintjs/colors@^4.2.1":
   version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/colors/-/colors-4.2.1.tgz#603b2512caee84feddcb3dbd536534c140b9a1f3"
+  resolved "https://registry.npmjs.org/@blueprintjs/colors/-/colors-4.2.1.tgz#603b2512caee84feddcb3dbd536534c140b9a1f3"
   integrity sha512-Cx7J2YnUuxn+fi+y5XtXnBB7+cFHN4xBrRkaAetp78i3VTCXjUk+d1omrOr8TqbRucUXTdrhbZOUHpzRLFcJpQ==
   dependencies:
     tslib "~2.5.0"
 
 "@blueprintjs/core@^4.16.3", "@blueprintjs/core@^4.20.2":
   version "4.20.2"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/core/-/core-4.20.2.tgz#ae1bbaf13bd1bf887b506760c478cc940f6d6e20"
+  resolved "https://registry.npmjs.org/@blueprintjs/core/-/core-4.20.2.tgz#ae1bbaf13bd1bf887b506760c478cc940f6d6e20"
   integrity sha512-5v4Nr0jozfAjiOkjY4zvt1XSpt4ldnrSaxtwo506S2cxJYfwFeMTmDshXNPFcc8L1fjZMxi0IWI2WABXzZXS6w==
   dependencies:
     "@blueprintjs/colors" "^4.2.1"
@@ -896,7 +908,7 @@
 
 "@blueprintjs/icons@^4.16.0":
   version "4.16.0"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/icons/-/icons-4.16.0.tgz#47f9e8abe64d84fc18721080b8f191d8aac075d8"
+  resolved "https://registry.npmjs.org/@blueprintjs/icons/-/icons-4.16.0.tgz#47f9e8abe64d84fc18721080b8f191d8aac075d8"
   integrity sha512-cyfgjUZcZCtQrXWUV8FwqYTFEzduV4a0N7yhOU38jY+cBRCLu/sDrD0Osvfk4DGRvNe4YjY7pohVLFSxpg68Uw==
   dependencies:
     change-case "^4.1.2"
@@ -905,7 +917,7 @@
 
 "@blueprintjs/popover2@^1.13.3":
   version "1.14.11"
-  resolved "https://registry.yarnpkg.com/@blueprintjs/popover2/-/popover2-1.14.11.tgz#0698fdeaf6710460cef0b71bed592ca37f40d1f9"
+  resolved "https://registry.npmjs.org/@blueprintjs/popover2/-/popover2-1.14.11.tgz#0698fdeaf6710460cef0b71bed592ca37f40d1f9"
   integrity sha512-5XAjeb2mlWjYXC0pqrNDLzHSsX85Zaiv8jixxUN9abarMUUFKGATgGF8MRsWTLAW94Gli6CB1lzVkrYkRHHf6Q==
   dependencies:
     "@blueprintjs/core" "^4.20.2"
@@ -916,16 +928,9 @@
     react-popper "^2.3.0"
     tslib "~2.5.0"
 
-"@cfcs/core@^0.0.6":
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/@cfcs/core/-/core-0.0.6.tgz#9f8499dcd2ad29fd96d8fa72055411cd4a249121"
-  integrity sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==
-  dependencies:
-    "@egjs/component" "^3.0.2"
-
 "@chromatic-com/storybook@^1.4.0":
   version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@chromatic-com/storybook/-/storybook-1.9.0.tgz#d95eb3474783bcc17a830a7627c3f099c1f75ba5"
+  resolved "https://registry.npmjs.org/@chromatic-com/storybook/-/storybook-1.9.0.tgz#d95eb3474783bcc17a830a7627c3f099c1f75ba5"
   integrity sha512-vYQ+TcfktEE3GHnLZXHCzXF/sN9dw+KivH8a5cmPyd9YtQs7fZtHrEgsIjWpYycXiweKMo1Lm1RZsjxk8DH3rA==
   dependencies:
     chromatic "^11.4.0"
@@ -934,43 +939,63 @@
     react-confetti "^6.1.0"
     strip-ansi "^7.1.0"
 
+"@colors/colors@1.6.0", "@colors/colors@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/@colors/colors/-/colors-1.6.0.tgz#ec6cd237440700bc23ca23087f513c75508958b0"
+  integrity sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==
+
 "@cspotcode/source-map-support@^0.8.0":
   version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
+  resolved "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz#00629c35a688e05a88b1cda684fb9d5e73f000a1"
   integrity sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@daybrush/utils@^1.1.1", "@daybrush/utils@^1.13.0", "@daybrush/utils@^1.4.0", "@daybrush/utils@^1.6.0", "@daybrush/utils@^1.7.1":
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/@daybrush/utils/-/utils-1.13.0.tgz#ea70a60864130da476406fdd1d465e3068aea0ff"
-  integrity sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==
+"@csstools/color-helpers@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.0.1.tgz#829f1c76f5800b79c51c709e2f36821b728e0e10"
+  integrity sha512-MKtmkA0BX87PKaO1NFRTFH+UnkgnmySQOvNxJubsadusqPEC2aJ9MOQiMceZJJ6oitUl/i0L6u0M1IrmAOmgBA==
 
-"@egjs/agent@^2.2.1":
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/@egjs/agent/-/agent-2.4.4.tgz#bd2ef4a17427d425332b01f3e79953cd413b532d"
-  integrity sha512-cvAPSlUILhBBOakn2krdPnOGv5hAZq92f1YHxYcfu0p7uarix2C6Ia3AVizpS1SGRZGiEkIS5E+IVTLg1I2Iog==
+"@csstools/css-calc@^2.1.1":
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.1.tgz#a7dbc66627f5cf458d42aed14bda0d3860562383"
+  integrity sha512-rL7kaUnTkL9K+Cvo2pnCieqNpTKgQzy5f+N+5Iuko9HAoasP+xgprVh7KN/MaJVvVL1l0EzQq2MoqBHKSrDrag==
 
-"@egjs/children-differ@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@egjs/children-differ/-/children-differ-1.0.1.tgz#5465fa80671d5ca3564ebe912f48b05b3e8a14fd"
-  integrity sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==
+"@csstools/css-color-parser@^3.0.7":
+  version "3.0.7"
+  resolved "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.0.7.tgz#442d61d58e54ad258d52c309a787fceb33906484"
+  integrity sha512-nkMp2mTICw32uE5NN+EsJ4f5N+IGFeCFu4bGpiKgb2Pq/7J/MpyLBeQ5ry4KKtRFZaYs6sTmcMYrSRIyj5DFKA==
   dependencies:
-    "@egjs/list-differ" "^1.0.0"
+    "@csstools/color-helpers" "^5.0.1"
+    "@csstools/css-calc" "^2.1.1"
 
-"@egjs/component@^3.0.2":
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@egjs/component/-/component-3.0.5.tgz#2dc86e835d5dc5055cdf46c7cd794eb45330e1b6"
-  integrity sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==
+"@csstools/css-parser-algorithms@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz#74426e93bd1c4dcab3e441f5cc7ba4fb35d94356"
+  integrity sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==
 
-"@egjs/list-differ@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@egjs/list-differ/-/list-differ-1.0.1.tgz#5772b0f8b87973bb67827f6c7d7df8d7f64a22eb"
-  integrity sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==
+"@csstools/css-tokenizer@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.3.tgz#a5502c8539265fecbd873c1e395a890339f119c2"
+  integrity sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==
+
+"@dabh/diagnostics@^2.0.2":
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/@dabh/diagnostics/-/diagnostics-2.0.3.tgz#7f7e97ee9a725dffc7808d93668cc984e1dc477a"
+  integrity sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==
+  dependencies:
+    colorspace "1.1.x"
+    enabled "2.0.x"
+    kuler "^2.0.0"
+
+"@date-fns/tz@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@date-fns/tz/-/tz-1.2.0.tgz#81cb3211693830babaf3b96aff51607e143030a6"
+  integrity sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg==
 
 "@emotion/babel-plugin@^11.13.5":
   version "11.13.5"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0"
+  resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz#eab8d65dbded74e0ecfd28dc218e75607c4e7bc0"
   integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==
   dependencies:
     "@babel/helper-module-imports" "^7.16.7"
@@ -985,9 +1010,9 @@
     source-map "^0.5.7"
     stylis "4.2.0"
 
-"@emotion/cache@^11.11.0", "@emotion/cache@^11.14.0":
+"@emotion/cache@^11.13.5", "@emotion/cache@^11.14.0":
   version "11.14.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76"
+  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz#ee44b26986eeb93c8be82bb92f1f7a9b21b2ed76"
   integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
   dependencies:
     "@emotion/memoize" "^0.9.0"
@@ -998,24 +1023,24 @@
 
 "@emotion/hash@^0.9.2":
   version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
   integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
 
 "@emotion/is-prop-valid@^1.3.0":
   version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
+  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
   integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
   dependencies:
     "@emotion/memoize" "^0.9.0"
 
 "@emotion/memoize@^0.9.0":
   version "0.9.0"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
   integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
 
 "@emotion/react@^11.11.1":
   version "11.14.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d"
+  resolved "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz#cfaae35ebc67dd9ef4ea2e9acc6cd29e157dd05d"
   integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
   dependencies:
     "@babel/runtime" "^7.18.3"
@@ -1029,7 +1054,7 @@
 
 "@emotion/serialize@^1.3.3":
   version "1.3.3"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8"
+  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz#d291531005f17d704d0463a032fe679f376509e8"
   integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
   dependencies:
     "@emotion/hash" "^0.9.2"
@@ -1040,12 +1065,12 @@
 
 "@emotion/sheet@^1.4.0":
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
   integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
 
 "@emotion/styled@^11.11.0":
   version "11.14.0"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.14.0.tgz#f47ca7219b1a295186d7661583376fcea95f0ff3"
+  resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz#f47ca7219b1a295186d7661583376fcea95f0ff3"
   integrity sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==
   dependencies:
     "@babel/runtime" "^7.18.3"
@@ -1057,274 +1082,164 @@
 
 "@emotion/unitless@^0.10.0":
   version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
   integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
 
 "@emotion/use-insertion-effect-with-fallbacks@^1.2.0":
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz#8a8cb77b590e09affb960f4ff1e9a89e532738bf"
+  resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz#8a8cb77b590e09affb960f4ff1e9a89e532738bf"
   integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==
 
 "@emotion/utils@^1.4.2":
   version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52"
+  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz#6df6c45881fcb1c412d6688a311a98b7f59c1b52"
   integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
 
 "@emotion/weak-memoize@^0.4.0":
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
   integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
 
-"@esbuild/aix-ppc64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
-  integrity sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==
+"@esbuild/aix-ppc64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.25.0.tgz#499600c5e1757a524990d5d92601f0ac3ce87f64"
+  integrity sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==
 
-"@esbuild/aix-ppc64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz#b57697945b50e99007b4c2521507dc613d4a648c"
-  integrity sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==
+"@esbuild/android-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.25.0.tgz#b9b8231561a1dfb94eb31f4ee056b92a985c324f"
+  integrity sha512-grvv8WncGjDSyUBjN9yHXNt+cq0snxXbDxy5pJtzMKGmmpPxeAmAhWxXI+01lU5rwZomDgD3kJwulEnhTRUd6g==
 
-"@esbuild/android-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz#7ad65a36cfdb7e0d429c353e00f680d737c2aed4"
-  integrity sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==
+"@esbuild/android-arm@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.25.0.tgz#ca6e7888942505f13e88ac9f5f7d2a72f9facd2b"
+  integrity sha512-PTyWCYYiU0+1eJKmw21lWtC+d08JDZPQ5g+kFyxP0V+es6VPPSUhM6zk8iImp2jbV6GwjX4pap0JFbUQN65X1g==
 
-"@esbuild/android-arm64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz#1add7e0af67acefd556e407f8497e81fddad79c0"
-  integrity sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==
+"@esbuild/android-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.25.0.tgz#e765ea753bac442dfc9cb53652ce8bd39d33e163"
+  integrity sha512-m/ix7SfKG5buCnxasr52+LI78SQ+wgdENi9CqyCXwjVR2X4Jkz+BpC3le3AoBPYTC9NHklwngVXvbJ9/Akhrfg==
 
-"@esbuild/android-arm@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz#b0c26536f37776162ca8bde25e42040c203f2824"
-  integrity sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==
+"@esbuild/darwin-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.25.0.tgz#fa394164b0d89d4fdc3a8a21989af70ef579fa2c"
+  integrity sha512-mVwdUb5SRkPayVadIOI78K7aAnPamoeFR2bT5nszFUZ9P8UpK4ratOdYbZZXYSqPKMHfS1wdHCJk1P1EZpRdvw==
 
-"@esbuild/android-arm@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.24.0.tgz#ab7263045fa8e090833a8e3c393b60d59a789810"
-  integrity sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==
+"@esbuild/darwin-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.25.0.tgz#91979d98d30ba6e7d69b22c617cc82bdad60e47a"
+  integrity sha512-DgDaYsPWFTS4S3nWpFcMn/33ZZwAAeAFKNHNa1QN0rI4pUjgqf0f7ONmXf6d22tqTY+H9FNdgeaAa+YIFUn2Rg==
 
-"@esbuild/android-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz#cb13e2211282012194d89bf3bfe7721273473b3d"
-  integrity sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==
+"@esbuild/freebsd-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.0.tgz#b97e97073310736b430a07b099d837084b85e9ce"
+  integrity sha512-VN4ocxy6dxefN1MepBx/iD1dH5K8qNtNe227I0mnTRjry8tj5MRk4zprLEdG8WPyAPb93/e4pSgi1SoHdgOa4w==
 
-"@esbuild/android-x64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.24.0.tgz#e8f8b196cfdfdd5aeaebbdb0110983460440e705"
-  integrity sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==
+"@esbuild/freebsd-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.25.0.tgz#f3b694d0da61d9910ec7deff794d444cfbf3b6e7"
+  integrity sha512-mrSgt7lCh07FY+hDD1TxiTyIHyttn6vnjesnPoVDNmDfOmggTLXRv8Id5fNZey1gl/V2dyVK1VXXqVsQIiAk+A==
 
-"@esbuild/darwin-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e"
-  integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
+"@esbuild/linux-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.25.0.tgz#f921f699f162f332036d5657cad9036f7a993f73"
+  integrity sha512-9QAQjTWNDM/Vk2bgBl17yWuZxZNQIF0OUUuPZRKoDtqF2k4EtYbpyiG5/Dk7nqeK6kIJWPYldkOcBqjXjrUlmg==
 
-"@esbuild/darwin-arm64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz#2d0d9414f2acbffd2d86e98253914fca603a53dd"
-  integrity sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==
+"@esbuild/linux-arm@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.25.0.tgz#cc49305b3c6da317c900688995a4050e6cc91ca3"
+  integrity sha512-vkB3IYj2IDo3g9xX7HqhPYxVkNQe8qTK55fraQyTzTX/fxaDtXiEnavv9geOsonh2Fd2RMB+i5cbhu2zMNWJwg==
 
-"@esbuild/darwin-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz#e37d9633246d52aecf491ee916ece709f9d5f4cd"
-  integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
+"@esbuild/linux-ia32@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.25.0.tgz#3e0736fcfab16cff042dec806247e2c76e109e19"
+  integrity sha512-43ET5bHbphBegyeqLb7I1eYn2P/JYGNmzzdidq/w0T8E2SsYL1U6un2NFROFRg1JZLTzdCoRomg8Rvf9M6W6Gg==
 
-"@esbuild/darwin-x64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz#33087aab31a1eb64c89daf3d2cf8ce1775656107"
-  integrity sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==
+"@esbuild/linux-loong64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.25.0.tgz#ea2bf730883cddb9dfb85124232b5a875b8020c7"
+  integrity sha512-fC95c/xyNFueMhClxJmeRIj2yrSMdDfmqJnyOY4ZqsALkDrrKJfIg5NTMSzVBr5YW1jf+l7/cndBfP3MSDpoHw==
 
-"@esbuild/freebsd-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz#1ee4d8b682ed363b08af74d1ea2b2b4dbba76487"
-  integrity sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==
+"@esbuild/linux-mips64el@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.25.0.tgz#4cababb14eede09248980a2d2d8b966464294ff1"
+  integrity sha512-nkAMFju7KDW73T1DdH7glcyIptm95a7Le8irTQNO/qtkoyypZAnjchQgooFUDQhNAy4iu08N79W4T4pMBwhPwQ==
 
-"@esbuild/freebsd-arm64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz#bb76e5ea9e97fa3c753472f19421075d3a33e8a7"
-  integrity sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==
+"@esbuild/linux-ppc64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.25.0.tgz#8860a4609914c065373a77242e985179658e1951"
+  integrity sha512-NhyOejdhRGS8Iwv+KKR2zTq2PpysF9XqY+Zk77vQHqNbo/PwZCzB5/h7VGuREZm1fixhs4Q/qWRSi5zmAiO4Fw==
 
-"@esbuild/freebsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c"
-  integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
+"@esbuild/linux-riscv64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.25.0.tgz#baf26e20bb2d38cfb86ee282dff840c04f4ed987"
+  integrity sha512-5S/rbP5OY+GHLC5qXp1y/Mx//e92L1YDqkiBbO9TQOvuFXM+iDqUNG5XopAnXoRH3FjIUDkeGcY1cgNvnXp/kA==
 
-"@esbuild/freebsd-x64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz#e0e2ce9249fdf6ee29e5dc3d420c7007fa579b93"
-  integrity sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==
+"@esbuild/linux-s390x@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.25.0.tgz#8323afc0d6cb1b6dc6e9fd21efd9e1542c3640a4"
+  integrity sha512-XM2BFsEBz0Fw37V0zU4CXfcfuACMrppsMFKdYY2WuTS3yi8O1nFOhil/xhKTmE1nPmVyvQJjJivgDT+xh8pXJA==
 
-"@esbuild/linux-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz#be9b145985ec6c57470e0e051d887b09dddb2d4b"
-  integrity sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==
+"@esbuild/linux-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.25.0.tgz#08fcf60cb400ed2382e9f8e0f5590bac8810469a"
+  integrity sha512-9yl91rHw/cpwMCNytUDxwj2XjFpxML0y9HAOH9pNVQDpQrBxHy01Dx+vaMu0N1CKa/RzBD2hB4u//nfc+Sd3Cw==
 
-"@esbuild/linux-arm64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz#d1b2aa58085f73ecf45533c07c82d81235388e75"
-  integrity sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==
+"@esbuild/netbsd-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.0.tgz#935c6c74e20f7224918fbe2e6c6fe865b6c6ea5b"
+  integrity sha512-RuG4PSMPFfrkH6UwCAqBzauBWTygTvb1nxWasEJooGSJ/NwRw7b2HOwyRTQIU97Hq37l3npXoZGYMy3b3xYvPw==
 
-"@esbuild/linux-arm@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz#207ecd982a8db95f7b5279207d0ff2331acf5eef"
-  integrity sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==
+"@esbuild/netbsd-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.25.0.tgz#414677cef66d16c5a4d210751eb2881bb9c1b62b"
+  integrity sha512-jl+qisSB5jk01N5f7sPCsBENCOlPiS/xptD5yxOx2oqQfyourJwIKLRA2yqWdifj3owQZCL2sn6o08dBzZGQzA==
 
-"@esbuild/linux-arm@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz#8e4915df8ea3e12b690a057e77a47b1d5935ef6d"
-  integrity sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==
+"@esbuild/openbsd-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.0.tgz#8fd55a4d08d25cdc572844f13c88d678c84d13f7"
+  integrity sha512-21sUNbq2r84YE+SJDfaQRvdgznTD8Xc0oc3p3iW/a1EVWeNj/SdUCbm5U0itZPQYRuRTW20fPMWMpcrciH2EJw==
 
-"@esbuild/linux-ia32@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz#d0d86b5ca1562523dc284a6723293a52d5860601"
-  integrity sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==
+"@esbuild/openbsd-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.25.0.tgz#0c48ddb1494bbc2d6bcbaa1429a7f465fa1dedde"
+  integrity sha512-2gwwriSMPcCFRlPlKx3zLQhfN/2WjJ2NSlg5TKLQOJdV0mSxIcYNTMhk3H3ulL/cak+Xj0lY1Ym9ysDV1igceg==
 
-"@esbuild/linux-ia32@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz#8200b1110666c39ab316572324b7af63d82013fb"
-  integrity sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==
+"@esbuild/sunos-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.25.0.tgz#86ff9075d77962b60dd26203d7352f92684c8c92"
+  integrity sha512-bxI7ThgLzPrPz484/S9jLlvUAHYMzy6I0XiU1ZMeAEOBcS0VePBFxh1JjTQt3Xiat5b6Oh4x7UC7IwKQKIJRIg==
 
-"@esbuild/linux-loong64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz#9a37f87fec4b8408e682b528391fa22afd952299"
-  integrity sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==
+"@esbuild/win32-arm64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.25.0.tgz#849c62327c3229467f5b5cd681bf50588442e96c"
+  integrity sha512-ZUAc2YK6JW89xTbXvftxdnYy3m4iHIkDtK3CLce8wg8M2L+YZhIvO1DKpxrd0Yr59AeNNkTiic9YLf6FTtXWMw==
 
-"@esbuild/linux-loong64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz#6ff0c99cf647504df321d0640f0d32e557da745c"
-  integrity sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==
+"@esbuild/win32-ia32@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.25.0.tgz#f62eb480cd7cca088cb65bb46a6db25b725dc079"
+  integrity sha512-eSNxISBu8XweVEWG31/JzjkIGbGIJN/TrRoiSVZwZ6pkC6VX4Im/WV2cz559/TXLcYbcrDN8JtKgd9DJVIo8GA==
 
-"@esbuild/linux-mips64el@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz#4ddebd4e6eeba20b509d8e74c8e30d8ace0b89ec"
-  integrity sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==
-
-"@esbuild/linux-mips64el@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz#3f720ccd4d59bfeb4c2ce276a46b77ad380fa1f3"
-  integrity sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==
-
-"@esbuild/linux-ppc64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz#adb67dadb73656849f63cd522f5ecb351dd8dee8"
-  integrity sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==
-
-"@esbuild/linux-ppc64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz#9d6b188b15c25afd2e213474bf5f31e42e3aa09e"
-  integrity sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==
-
-"@esbuild/linux-riscv64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz#11bc0698bf0a2abf8727f1c7ace2112612c15adf"
-  integrity sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==
-
-"@esbuild/linux-riscv64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz#f989fdc9752dfda286c9cd87c46248e4dfecbc25"
-  integrity sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==
-
-"@esbuild/linux-s390x@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz#e86fb8ffba7c5c92ba91fc3b27ed5a70196c3cc8"
-  integrity sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==
-
-"@esbuild/linux-s390x@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz#29ebf87e4132ea659c1489fce63cd8509d1c7319"
-  integrity sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==
-
-"@esbuild/linux-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz#5f37cfdc705aea687dfe5dfbec086a05acfe9c78"
-  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
-
-"@esbuild/linux-x64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz#4af48c5c0479569b1f359ffbce22d15f261c0cef"
-  integrity sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==
-
-"@esbuild/netbsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz#29da566a75324e0d0dd7e47519ba2f7ef168657b"
-  integrity sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==
-
-"@esbuild/netbsd-x64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz#1ae73d23cc044a0ebd4f198334416fb26c31366c"
-  integrity sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==
-
-"@esbuild/openbsd-arm64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz#5d904a4f5158c89859fd902c427f96d6a9e632e2"
-  integrity sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==
-
-"@esbuild/openbsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz#306c0acbdb5a99c95be98bdd1d47c916e7dc3ff0"
-  integrity sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==
-
-"@esbuild/openbsd-x64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz#4c8aa88c49187c601bae2971e71c6dc5e0ad1cdf"
-  integrity sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==
-
-"@esbuild/sunos-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz#0933eaab9af8b9b2c930236f62aae3fc593faf30"
-  integrity sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==
-
-"@esbuild/sunos-x64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz#8ddc35a0ea38575fa44eda30a5ee01ae2fa54dd4"
-  integrity sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==
-
-"@esbuild/win32-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae"
-  integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
-
-"@esbuild/win32-arm64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz#6e79c8543f282c4539db684a207ae0e174a9007b"
-  integrity sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==
-
-"@esbuild/win32-ia32@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67"
-  integrity sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==
-
-"@esbuild/win32-ia32@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz#057af345da256b7192d18b676a02e95d0fa39103"
-  integrity sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==
-
-"@esbuild/win32-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
-  integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
-
-"@esbuild/win32-x64@0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz#168ab1c7e1c318b922637fad8f339d48b01e1244"
-  integrity sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==
+"@esbuild/win32-x64@0.25.0":
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.25.0.tgz#c8e119a30a7c8d60b9d2e22d2073722dde3b710b"
+  integrity sha512-ZENoHJBxA20C2zFzh6AI4fT6RraMzjYw4xKWemRTRmRVtN9c5DcH9r/f2ihEkMjOW5eGgrwCslG/+Y/3bL+DHQ==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
+  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz#d1145bf2c20132d6400495d6df4bf59362fd9d56"
   integrity sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==
   dependencies:
     eslint-visitor-keys "^3.4.3"
 
 "@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.4.0", "@eslint-community/regexpp@^4.6.1":
   version "4.12.1"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
+  resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz#cfc6cffe39df390a3841cde2abccf92eaa7ae0e0"
   integrity sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==
 
 "@eslint/eslintrc@^2.1.4":
   version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
   integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
@@ -1339,111 +1254,152 @@
 
 "@eslint/js@8.57.1":
   version "8.57.1"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
+  resolved "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz#de633db3ec2ef6a3c89e2f19038063e8a122e2c2"
   integrity sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==
 
 "@floating-ui/core@^1.6.0":
-  version "1.6.8"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
-  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  version "1.6.9"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz#64d1da251433019dafa091de9b2886ff35ec14e6"
+  integrity sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==
   dependencies:
-    "@floating-ui/utils" "^0.2.8"
+    "@floating-ui/utils" "^0.2.9"
 
 "@floating-ui/dom@^1.0.0":
-  version "1.6.12"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
-  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  version "1.6.13"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz#a8a938532aea27a95121ec16e667a7cbe8c59e34"
+  integrity sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==
   dependencies:
     "@floating-ui/core" "^1.6.0"
-    "@floating-ui/utils" "^0.2.8"
+    "@floating-ui/utils" "^0.2.9"
 
 "@floating-ui/react-dom@^2.1.2":
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
+  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
   integrity sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==
   dependencies:
     "@floating-ui/dom" "^1.0.0"
 
 "@floating-ui/react@^0.26.4":
   version "0.26.28"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.28.tgz#93f44ebaeb02409312e9df9507e83aab4a8c0dc7"
+  resolved "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz#93f44ebaeb02409312e9df9507e83aab4a8c0dc7"
   integrity sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==
   dependencies:
     "@floating-ui/react-dom" "^2.1.2"
     "@floating-ui/utils" "^0.2.8"
     tabbable "^6.0.0"
 
-"@floating-ui/utils@^0.2.8":
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
-  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+"@floating-ui/utils@^0.2.8", "@floating-ui/utils@^0.2.9":
+  version "0.2.9"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz#50dea3616bc8191fb8e112283b49eaff03e78429"
+  integrity sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==
+
+"@formatjs/ecma402-abstract@2.3.3":
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.3.tgz#fbc7555c9e4fdd104cd5e23129fa3735be3ad0ba"
+  integrity sha512-pJT1OkhplSmvvr6i3CWTPvC/FGC06MbN5TNBfRO6Ox62AEz90eMq+dVvtX9Bl3jxCEkS0tATzDarRZuOLw7oFg==
+  dependencies:
+    "@formatjs/fast-memoize" "2.2.6"
+    "@formatjs/intl-localematcher" "0.6.0"
+    decimal.js "10"
+    tslib "2"
+
+"@formatjs/fast-memoize@2.2.6":
+  version "2.2.6"
+  resolved "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.2.6.tgz#fac0a84207a1396be1f1aa4ee2805b179e9343d1"
+  integrity sha512-luIXeE2LJbQnnzotY1f2U2m7xuQNj2DA8Vq4ce1BY9ebRZaoPB1+8eZ6nXpLzsxuW5spQxr7LdCg+CApZwkqkw==
+  dependencies:
+    tslib "2"
+
+"@formatjs/icu-messageformat-parser@2.11.1":
+  version "2.11.1"
+  resolved "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.11.1.tgz#59d69124b9cf3186800a576c0228947d10594347"
+  integrity sha512-o0AhSNaOfKoic0Sn1GkFCK4MxdRsw7mPJ5/rBpIqdvcC7MIuyUSW8WChUEvrK78HhNpYOgqCQbINxCTumJLzZA==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.3.3"
+    "@formatjs/icu-skeleton-parser" "1.8.13"
+    tslib "2"
+
+"@formatjs/icu-skeleton-parser@1.8.13":
+  version "1.8.13"
+  resolved "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.8.13.tgz#5e8b1e1bb467c937735fecb4cb4b345932151a44"
+  integrity sha512-N/LIdTvVc1TpJmMt2jVg0Fr1F7Q1qJPdZSCs19unMskCmVQ/sa0H9L8PWt13vq+gLdLg1+pPsvBLydL1Apahjg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "2.3.3"
+    tslib "2"
+
+"@formatjs/intl-localematcher@0.6.0":
+  version "0.6.0"
+  resolved "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.6.0.tgz#33cf0d33279572c990e02ab75a93122569878082"
+  integrity sha512-4rB4g+3hESy1bHSBG3tDFaMY2CH67iT7yne1e+0CLTsGLDcmoEWWpJjjpWVaYgYfYuohIRuo0E+N536gd2ZHZA==
+  dependencies:
+    tslib "2"
 
 "@headlessui/react@^1.7.13", "@headlessui/react@^1.7.19", "@headlessui/react@^1.7.3":
   version "1.7.19"
-  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40"
+  resolved "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40"
   integrity sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==
   dependencies:
     "@tanstack/react-virtual" "^3.0.0-beta.60"
     client-only "^0.0.1"
 
-"@hocuspocus/common@^2.14.0":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@hocuspocus/common/-/common-2.14.0.tgz#3da9ce0f2d179a83ffba36f7cededcc9c96de991"
-  integrity sha512-ACtaKxfpf9p5GkrAHn3/lkD/evLAMkud1EZo3T2VTEDORqj2Es8MKx2QwhdY+PyGUlWZFKhgQrshWnzJmnCQDA==
+"@hocuspocus/common@^2.15.2":
+  version "2.15.2"
+  resolved "https://registry.npmjs.org/@hocuspocus/common/-/common-2.15.2.tgz#dec1869f41716bd80a454e4cefb789fcbad543a0"
+  integrity sha512-wU1wxXNnQQMXyeL3mdSDYiQsm/r/QyJVjjQhF7sUBrLnjdsN7bA1cvfcSvJBr1ymrMSeYRmUL3UlQmEHEOaP7w==
   dependencies:
     lib0 "^0.2.87"
 
-"@hocuspocus/extension-database@^2.11.3":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@hocuspocus/extension-database/-/extension-database-2.14.0.tgz#47a43f06c414555f988f8ec5fa879ec4f741e58e"
-  integrity sha512-6lz75I4F84rkITrl6gk3w4BqQAZwlJEiYSkJ54c20yepFX+c1NICmbq/TKRaTJRbmzrWkBu9CQRhPGBt9lrVAQ==
+"@hocuspocus/extension-database@^2.15.0":
+  version "2.15.2"
+  resolved "https://registry.npmjs.org/@hocuspocus/extension-database/-/extension-database-2.15.2.tgz#d17be8061525c308038f973bc9878732a3423fb7"
+  integrity sha512-BkYDfKA99udx7AEkqWReBS61kvGMC9SqoPJs3v8xNgpaj2GGyMJQlUdQRMhPyZTn2osV+pqhk8Hn7xUJCW1RJg==
   dependencies:
-    "@hocuspocus/server" "^2.14.0"
+    "@hocuspocus/server" "^2.15.2"
 
-"@hocuspocus/extension-logger@^2.11.3":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@hocuspocus/extension-logger/-/extension-logger-2.14.0.tgz#35d0caa04356291cd1fd46d5d6c6f64f1b9f493b"
-  integrity sha512-Z6kffQK/wO+JW43UzfDXkFl5s+3eNc92ReDz8nayByjSOAAXz5EZ/e/YWhrwU+ViwONQ4yLyx2x/lmxDA8lZ5g==
+"@hocuspocus/extension-logger@^2.15.0":
+  version "2.15.2"
+  resolved "https://registry.npmjs.org/@hocuspocus/extension-logger/-/extension-logger-2.15.2.tgz#f13fe713311d832dabefc03dc412657c184232da"
+  integrity sha512-nqSnSFI+xO7dBTsgzSANKvx09ptq8J4Doz3AdLgxfaweYC85qFao7mAx1ZCtWoVHseVwBYua6S3dTwQq5IsWEg==
   dependencies:
-    "@hocuspocus/server" "^2.14.0"
+    "@hocuspocus/server" "^2.15.2"
 
-"@hocuspocus/extension-redis@^2.13.5":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@hocuspocus/extension-redis/-/extension-redis-2.14.0.tgz#d4a6ea0d7a3e809eb2673e0f3907ed3d6b6f7a0d"
-  integrity sha512-4wGWBrmlmaJlSVojz5ocdGrx3GP2EEX0kxq6kmYiiy4NStQSxPyAtMjc0TG6G8IAWQYvpGgpvXeapuNKjnxgQw==
+"@hocuspocus/extension-redis@^2.15.0":
+  version "2.15.2"
+  resolved "https://registry.npmjs.org/@hocuspocus/extension-redis/-/extension-redis-2.15.2.tgz#0982f65d7588235d039b80313e77103dc605285c"
+  integrity sha512-2BNBLnDEQq2v3uQSidBSdUOIbHhH383SGxn+hmy6tDQfrt2hLE4MwilgDdcCO0FKOCYaJrV7HyKu6/WyzLbAOg==
   dependencies:
-    "@hocuspocus/server" "^2.14.0"
+    "@hocuspocus/server" "^2.15.2"
     ioredis "^4.28.2"
     kleur "^4.1.4"
     lodash.debounce "^4.0.8"
     redlock "^4.2.0"
-    uuid "^10.0.0"
+    uuid "^11.0.3"
 
-"@hocuspocus/provider@^2.13.5":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@hocuspocus/provider/-/provider-2.14.0.tgz#4c71bc8f3ca088ad0be062a7cb649932eee2d24d"
-  integrity sha512-RvluPeNSJH+AkAAYz76DsBxMKQJBp+UQh1qRPtjbHy7QtqnBX/xiCDw1g/FIdphWY+uH0vHTpnohjUPDDhcauw==
+"@hocuspocus/provider@^2.15.0":
+  version "2.15.2"
+  resolved "https://registry.npmjs.org/@hocuspocus/provider/-/provider-2.15.2.tgz#ce534b90e161cd32fd02928d7296bb38f424c319"
+  integrity sha512-mdBurviyaUd7bQx4vMIE39WqRJDTpfFelHOVXr7w/jA8G1E7K7lxQ9/DacSrbg+9o8s+1z1+SerZiUjaToaBJg==
   dependencies:
-    "@hocuspocus/common" "^2.14.0"
+    "@hocuspocus/common" "^2.15.2"
     "@lifeomic/attempt" "^3.0.2"
     lib0 "^0.2.87"
     ws "^8.17.1"
 
-"@hocuspocus/server@^2.11.3", "@hocuspocus/server@^2.14.0":
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/@hocuspocus/server/-/server-2.14.0.tgz#c227448ff4ad07626837a8a48b0c464d0be47228"
-  integrity sha512-8ol/g9+M4fAgJOvHSp83gLyTKe95oMnBZaY7FtT2beTOFzDNGdpOJEZX7PIMSY7vGZlT8pOYAauOdpCtBpkz7w==
+"@hocuspocus/server@^2.15.0", "@hocuspocus/server@^2.15.2":
+  version "2.15.2"
+  resolved "https://registry.npmjs.org/@hocuspocus/server/-/server-2.15.2.tgz#77be1e2540843bec313141dad7f39ea65a4221dd"
+  integrity sha512-+fLRVswg+bkgfHqJ+wFgywivw3H08WMOtVvJF7dJzWT2ZR/Sc3nDMFh2KqMF6Ygh4z6mt23xr7SKIm3eP1zoLA==
   dependencies:
-    "@hocuspocus/common" "^2.14.0"
+    "@hocuspocus/common" "^2.15.2"
     async-lock "^1.3.1"
     kleur "^4.1.4"
     lib0 "^0.2.47"
-    uuid "^10.0.0"
+    uuid "^11.0.3"
     ws "^8.5.0"
 
 "@humanwhocodes/config-array@^0.13.0":
   version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz#fb907624df3256d04b9aa2df50d7aa97ec648748"
   integrity sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==
   dependencies:
     "@humanwhocodes/object-schema" "^2.0.3"
@@ -1452,17 +1408,17 @@
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
 "@humanwhocodes/object-schema@^2.0.3":
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
 "@hypnosphi/create-react-context@^0.3.1":
   version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
+  resolved "https://registry.npmjs.org/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
   integrity sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==
   dependencies:
     gud "^1.0.0"
@@ -1470,22 +1426,22 @@
 
 "@icons/material@^0.2.4":
   version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  resolved "https://registry.npmjs.org/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
   integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
 
 "@intercom/messenger-js-sdk@^0.0.12":
   version "0.0.12"
-  resolved "https://registry.yarnpkg.com/@intercom/messenger-js-sdk/-/messenger-js-sdk-0.0.12.tgz#1b80acf6b2a59ef9ce4010e0920522d579a590fa"
+  resolved "https://registry.npmjs.org/@intercom/messenger-js-sdk/-/messenger-js-sdk-0.0.12.tgz#1b80acf6b2a59ef9ce4010e0920522d579a590fa"
   integrity sha512-xoUGlKLD8nIcZaH7AesR/LfwXH4QQUdPZMV4sApK/zvVFBgAY/A9IWp1ey/jUcp+776ejtZeEqreJZxG4LdEuw==
 
 "@ioredis/commands@^1.1.1":
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"
+  resolved "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz#6d61b3097470af1fdbbe622795b8921d42018e11"
   integrity sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==
 
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
   integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
   dependencies:
     string-width "^5.1.2"
@@ -1496,9 +1452,9 @@
     wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
 
 "@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
-  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  version "0.3.8"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz#4f0e06362e01362f823d348f1872b08f666d8142"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
   dependencies:
     "@jridgewell/set-array" "^1.2.1"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -1506,17 +1462,17 @@
 
 "@jridgewell/resolve-uri@^3.0.3", "@jridgewell/resolve-uri@^3.1.0":
   version "3.1.2"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
   integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
 
 "@jridgewell/set-array@^1.2.1":
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
   integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
 
 "@jridgewell/source-map@^0.3.3":
   version "0.3.6"
-  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a"
+  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz#9d71ca886e32502eb9362c9a74a46787c36df81a"
   integrity sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.5"
@@ -1524,20 +1480,20 @@
 
 "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.4.15", "@jridgewell/sourcemap-codec@^1.5.0":
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz#3188bcb273a414b0d215fd22a58540b989b9409a"
   integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
 
 "@jridgewell/trace-mapping@0.3.9":
   version "0.3.9"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
   integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
   dependencies:
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jridgewell/trace-mapping@^0.3.20", "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
   version "0.3.25"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
@@ -1545,159 +1501,159 @@
 
 "@juggle/resize-observer@^3.4.0":
   version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
+  resolved "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
 "@lifeomic/attempt@^3.0.2":
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@lifeomic/attempt/-/attempt-3.1.0.tgz#7fc703559177b81a008b9d263e3d9a001d11d08a"
+  resolved "https://registry.npmjs.org/@lifeomic/attempt/-/attempt-3.1.0.tgz#7fc703559177b81a008b9d263e3d9a001d11d08a"
   integrity sha512-QZqem4QuAnAyzfz+Gj5/+SLxqwCAw2qmt7732ZXodr6VDWGeYLG6w1i/vYLa55JQM9wRuBKLmXmiZ2P0LtE5rw==
 
 "@mdx-js/react@^3.0.0":
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-3.1.0.tgz#c4522e335b3897b9a845db1dbdd2f966ae8fb0ed"
+  resolved "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz#c4522e335b3897b9a845db1dbdd2f966ae8fb0ed"
   integrity sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==
   dependencies:
     "@types/mdx" "^2.0.0"
 
-"@mui/core-downloads-tracker@^5.16.9":
-  version "5.16.9"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.9.tgz#df68e6b685857d48cab5ed73ec2bf47fdd48d252"
-  integrity sha512-ue3j79XJ56+F6DlTtFTM+n//5AvNENOvl3MFruZZP5iZzz+hOq6WBwnr+YxiMlr+kvmMHuHxgOHFdPR8+mElDw==
+"@mui/core-downloads-tracker@^5.16.14":
+  version "5.16.14"
+  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.14.tgz#e6536f1b6caa873f7915fbf9703fdc840a5a98d9"
+  integrity sha512-sbjXW+BBSvmzn61XyTMun899E7nGPTXwqD9drm1jBUAvWEhJpPFIRxwQQiATWZnd9rvdxtnhhdsDxEGWI0jxqA==
 
 "@mui/material@^5.14.1":
-  version "5.16.9"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.16.9.tgz#d0d3e2e9882d11d94171298e2d7ab38db736ce1f"
-  integrity sha512-XC0oHFm7mrWV0tvhed9uv/o6kLNClnLj1eo/ufuKbj+rgk47ek8Y6HjHe3cGvMn4Bcq8KyoQPgzdwqvS2ZzYrA==
+  version "5.16.14"
+  resolved "https://registry.npmjs.org/@mui/material/-/material-5.16.14.tgz#da8a75822f039d8c1b0ab7fb4146d767c2f9248a"
+  integrity sha512-eSXQVCMKU2xc7EcTxe/X/rC9QsV2jUe8eLM3MUCPYbo6V52eCE436akRIvELq/AqZpxx2bwkq7HC0cRhLB+yaw==
   dependencies:
     "@babel/runtime" "^7.23.9"
-    "@mui/core-downloads-tracker" "^5.16.9"
-    "@mui/system" "^5.16.8"
+    "@mui/core-downloads-tracker" "^5.16.14"
+    "@mui/system" "^5.16.14"
     "@mui/types" "^7.2.15"
-    "@mui/utils" "^5.16.8"
+    "@mui/utils" "^5.16.14"
     "@popperjs/core" "^2.11.8"
     "@types/react-transition-group" "^4.4.10"
     clsx "^2.1.0"
     csstype "^3.1.3"
     prop-types "^15.8.1"
-    react-is "^18.3.1"
+    react-is "^19.0.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.16.8":
-  version "5.16.8"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.16.8.tgz#7914996caaf6eedc59914aeab83dcd2d4e4da1ec"
-  integrity sha512-3Vl9yFVLU6T3CFtxRMQTcJ60Ijv7wxQi4yjH92+9YXcsqvVspeIYoocqNoIV/1bXGYfyWu5zrCmwQVHaGY7bug==
+"@mui/private-theming@^5.16.14":
+  version "5.16.14"
+  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.14.tgz#7ad2b8a8fe0417f9fdfd05011806b9cb33c1a20a"
+  integrity sha512-12t7NKzvYi819IO5IapW2BcR33wP/KAVrU8d7gLhGHoAmhDxyXlRoKiRij3TOD8+uzk0B6R9wHUNKi4baJcRNg==
   dependencies:
     "@babel/runtime" "^7.23.9"
-    "@mui/utils" "^5.16.8"
+    "@mui/utils" "^5.16.14"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.16.8":
-  version "5.16.8"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.16.8.tgz#b8ca35f93f503a51d0759a05475bfd28e10757ea"
-  integrity sha512-OFdgFf8JczSRs0kvWGdSn0ZeXxWrY0LITDPJ/nAtLEvUUTyrlFaO4il3SECX8ruzvf1VnAxHx4M/4mX9oOn9yA==
+"@mui/styled-engine@^5.16.14":
+  version "5.16.14"
+  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.14.tgz#f90fef5b4f8ebf11d48e1b1df8854a45bb31a9f5"
+  integrity sha512-UAiMPZABZ7p8mUW4akDV6O7N3+4DatStpXMZwPlt+H/dA0lt67qawN021MNND+4QTpjaiMYxbhKZeQcyWCbuKw==
   dependencies:
     "@babel/runtime" "^7.23.9"
-    "@emotion/cache" "^11.11.0"
+    "@emotion/cache" "^11.13.5"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^5.16.8":
-  version "5.16.8"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.16.8.tgz#e5010d76cd2fdcc403ad3f98abfba99d330055ad"
-  integrity sha512-L32TaFDFpGIi1g6ysRtmhc9zDgrlxDXu3NlrGE8gAsQw/ziHrPdr0PNr20O0POUshA1q14W4dNZ/z0Nx2F9lhA==
+"@mui/system@^5.16.14":
+  version "5.16.14"
+  resolved "https://registry.npmjs.org/@mui/system/-/system-5.16.14.tgz#92765ba01a3d1f8ee4967248cb00077d7aed225b"
+  integrity sha512-KBxMwCb8mSIABnKvoGbvM33XHyT+sN0BzEBG+rsSc0lLQGzs7127KWkCA6/H8h6LZ00XpBEME5MAj8mZLiQ1tw==
   dependencies:
     "@babel/runtime" "^7.23.9"
-    "@mui/private-theming" "^5.16.8"
-    "@mui/styled-engine" "^5.16.8"
+    "@mui/private-theming" "^5.16.14"
+    "@mui/styled-engine" "^5.16.14"
     "@mui/types" "^7.2.15"
-    "@mui/utils" "^5.16.8"
+    "@mui/utils" "^5.16.14"
     clsx "^2.1.0"
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
 "@mui/types@^7.2.15":
-  version "7.2.19"
-  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.19.tgz#c941954dd24393fdce5f07830d44440cf4ab6c80"
-  integrity sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==
+  version "7.2.21"
+  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.21.tgz#63f50874eda8e4a021a69aaa8ba9597369befda2"
+  integrity sha512-6HstngiUxNqLU+/DPqlUJDIPbzUBxIVHb1MmXP0eTWDIROiCR2viugXpEif0PPe2mLqqakPzzRClWAnK+8UJww==
 
-"@mui/utils@^5.16.8":
-  version "5.16.8"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.16.8.tgz#e44acf38d446d361347c46b3e81ae366f615f37b"
-  integrity sha512-P/yb7BSWallQUeiNGxb+TM8epHteIUC8gzNTdPV2VfKhVY/EnGliHgt5np0GPkjQ7EzwDi/+gBevrAJtf+K94A==
+"@mui/utils@^5.16.14":
+  version "5.16.14"
+  resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.16.14.tgz#7217e876a5092cd04c184b34bca348e0befaef8c"
+  integrity sha512-wn1QZkRzSmeXD1IguBVvJJHV3s6rxJrfb6YuC9Kk6Noh9f8Fb54nUs5JRkKm+BOerRhj5fLg05Dhx/H3Ofb8Mg==
   dependencies:
     "@babel/runtime" "^7.23.9"
     "@mui/types" "^7.2.15"
     "@types/prop-types" "^15.7.12"
     clsx "^2.1.1"
     prop-types "^15.8.1"
-    react-is "^18.3.1"
+    react-is "^19.0.0"
 
-"@next/env@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.20.tgz#0be2cc955f4eb837516e7d7382284cd5bc1d5a02"
-  integrity sha512-JfDpuOCB0UBKlEgEy/H6qcBSzHimn/YWjUHzKl1jMeUO+QVRdzmTTl8gFJaNO87c8DXmVKhFCtwxQ9acqB3+Pw==
+"@next/env@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/env/-/env-14.2.24.tgz#49274c9ccbbb9d314d4a414a4ff2717756105ebc"
+  integrity sha512-LAm0Is2KHTNT6IT16lxT+suD0u+VVfYNQqM+EJTKuFRRuY2z+zj01kueWXPCxbMBDt0B5vONYzabHGUNbZYAhA==
 
-"@next/eslint-plugin-next@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.20.tgz#8ef8df309c4d16346764479eacf9802492fe8204"
-  integrity sha512-T0JRi706KLbvR1Uc46t56VtawbhR/igdBagzOrA7G+vv4rvjwnlu/Y4/Iq6X9TDVj5UZjyot4lUdkNd3V2kLhw==
+"@next/eslint-plugin-next@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-14.2.24.tgz#2bd0857c31d510610386ecb7a4cc9c2ca452a4ee"
+  integrity sha512-FDL3qs+5DML0AJz56DCVr+KnFYivxeAX73En8QbPw9GjJZ6zbfvqDy+HrarHFzbsIASn7y8y5ySJ/lllSruNVQ==
   dependencies:
     glob "10.3.10"
 
-"@next/swc-darwin-arm64@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.20.tgz#3c99d318c08362aedde5d2778eec3a50b8085d99"
-  integrity sha512-WDfq7bmROa5cIlk6ZNonNdVhKmbCv38XteVFYsxea1vDJt3SnYGgxLGMTXQNfs5OkFvAhmfKKrwe7Y0Hs+rWOg==
+"@next/swc-darwin-arm64@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.24.tgz#95a4be350a03c136ae1b61969748ff810ffc63eb"
+  integrity sha512-7Tdi13aojnAZGpapVU6meVSpNzgrFwZ8joDcNS8cJVNuP3zqqrLqeory9Xec5TJZR/stsGJdfwo8KeyloT3+rQ==
 
-"@next/swc-darwin-x64@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.20.tgz#fd547fad1446a677f29c1160006fdd482bba4052"
-  integrity sha512-XIQlC+NAmJPfa2hruLvr1H1QJJeqOTDV+v7tl/jIdoFvqhoihvSNykLU/G6NMgoeo+e/H7p/VeWSOvMUHKtTIg==
+"@next/swc-darwin-x64@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.24.tgz#5fdfa185040924c0533c4005a21a8e5985ffbd9c"
+  integrity sha512-lXR2WQqUtu69l5JMdTwSvQUkdqAhEWOqJEYUQ21QczQsAlNOW2kWZCucA6b3EXmPbcvmHB1kSZDua/713d52xg==
 
-"@next/swc-linux-arm64-gnu@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.20.tgz#1d6ba1929d3a11b74c0185cdeca1e38b824222ca"
-  integrity sha512-pnzBrHTPXIMm5QX3QC8XeMkpVuoAYOmyfsO4VlPn+0NrHraNuWjdhe+3xLq01xR++iCvX+uoeZmJDKcOxI201Q==
+"@next/swc-linux-arm64-gnu@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.24.tgz#7242d382d2e301d385591b4250ebf608b3a555d3"
+  integrity sha512-nxvJgWOpSNmzidYvvGDfXwxkijb6hL9+cjZx1PVG6urr2h2jUqBALkKjT7kpfurRWicK6hFOvarmaWsINT1hnA==
 
-"@next/swc-linux-arm64-musl@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.20.tgz#0fe0c67b5d916f99ca76b39416557af609768f17"
-  integrity sha512-WhJJAFpi6yqmUx1momewSdcm/iRXFQS0HU2qlUGlGE/+98eu7JWLD5AAaP/tkK1mudS/rH2f9E3WCEF2iYDydQ==
+"@next/swc-linux-arm64-musl@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.24.tgz#9a67b28e6fd6f0078929f0ef5256549b51b0320d"
+  integrity sha512-PaBgOPhqa4Abxa3y/P92F3kklNPsiFjcjldQGT7kFmiY5nuFn8ClBEoX8GIpqU1ODP2y8P6hio6vTomx2Vy0UQ==
 
-"@next/swc-linux-x64-gnu@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.20.tgz#6d29fa8cdb6a9f8250c2048aaa24538f0cd0b02d"
-  integrity sha512-ao5HCbw9+iG1Kxm8XsGa3X174Ahn17mSYBQlY6VGsdsYDAbz/ZP13wSLfvlYoIDn1Ger6uYA+yt/3Y9KTIupRg==
+"@next/swc-linux-x64-gnu@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.24.tgz#012d801b44e179912d7136c74d25de8a7da42084"
+  integrity sha512-vEbyadiRI7GOr94hd2AB15LFVgcJZQWu7Cdi9cWjCMeCiUsHWA0U5BkGPuoYRnTxTn0HacuMb9NeAmStfBCLoQ==
 
-"@next/swc-linux-x64-musl@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.20.tgz#bfc57482bc033fda8455e8aab1c3cbc44f0c4690"
-  integrity sha512-CXm/kpnltKTT7945np6Td3w7shj/92TMRPyI/VvveFe8+YE+/YOJ5hyAWK5rpx711XO1jBCgXl211TWaxOtkaA==
+"@next/swc-linux-x64-musl@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.24.tgz#97408c53510c6960094bc6c743670c6e72bfa41c"
+  integrity sha512-df0FC9ptaYsd8nQCINCzFtDWtko8PNRTAU0/+d7hy47E0oC17tI54U/0NdGk7l/76jz1J377dvRjmt6IUdkpzQ==
 
-"@next/swc-win32-arm64-msvc@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.20.tgz#6f7783e643310510240a981776532ffe0e02af95"
-  integrity sha512-upJn2HGQgKNDbXVfIgmqT2BN8f3z/mX8ddoyi1I565FHbfowVK5pnMEwauvLvaJf4iijvuKq3kw/b6E9oIVRWA==
+"@next/swc-win32-arm64-msvc@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.24.tgz#4252ea2bcc5ae62ebff16dd9320741b4f88ec368"
+  integrity sha512-ZEntbLjeYAJ286eAqbxpZHhDFYpYjArotQ+/TW9j7UROh0DUmX7wYDGtsTPpfCV8V+UoqHBPU7q9D4nDNH014Q==
 
-"@next/swc-win32-ia32-msvc@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.20.tgz#58c7720687e80a13795e22c29d5860fa142e44fc"
-  integrity sha512-igQW/JWciTGJwj3G1ipalD2V20Xfx3ywQy17IV0ciOUBbFhNfyU1DILWsTi32c8KmqgIDviUEulW/yPb2FF90w==
+"@next/swc-win32-ia32-msvc@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.24.tgz#fa15ae451617ce820517714cf2e98b56c18960d7"
+  integrity sha512-9KuS+XUXM3T6v7leeWU0erpJ6NsFIwiTFD5nzNg8J5uo/DMIPvCp3L1Ao5HjbHX0gkWPB1VrKoo/Il4F0cGK2Q==
 
-"@next/swc-win32-x64-msvc@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.20.tgz#689bc7beb8005b73c95d926e7edfb7f73efc78f2"
-  integrity sha512-AFmqeLW6LtxeFTuoB+MXFeM5fm5052i3MU6xD0WzJDOwku6SkZaxb1bxjBaRC8uNqTRTSPl0yMFtjNowIVI67w==
+"@next/swc-win32-x64-msvc@14.2.24":
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.24.tgz#0f7002e8c8b1f310a48fdc829cfda77ffcabf489"
+  integrity sha512-cXcJ2+x0fXQ2CntaE00d7uUH+u1Bfp/E0HsNQH79YiLaZE5Rbm7dZzyAYccn3uICM7mw+DxoMqEfGXZtF4Fgaw==
 
 "@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3":
   version "2.1.8-no-fsevents.3"
-  resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
+  resolved "https://registry.npmjs.org/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b"
   integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==
 
 "@nivo/annotations@0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/annotations/-/annotations-0.88.0.tgz#96830d735331dea2b60e66ce3971ef43b45cca8c"
+  resolved "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.88.0.tgz#96830d735331dea2b60e66ce3971ef43b45cca8c"
   integrity sha512-NXE+1oIUn+EGWMQpnpeRMLgi2wyuzhGDoJQY4OUHissCUiNotid2oNQ/PXJwN0toiu+/j9SyhzI32xr70OPi7Q==
   dependencies:
     "@nivo/colors" "0.88.0"
@@ -1707,7 +1663,7 @@
 
 "@nivo/arcs@0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/arcs/-/arcs-0.88.0.tgz#0004aa612fd12eee5fd415ed257812b722bf5a10"
+  resolved "https://registry.npmjs.org/@nivo/arcs/-/arcs-0.88.0.tgz#0004aa612fd12eee5fd415ed257812b722bf5a10"
   integrity sha512-q7MHxT71s/KKlDDtSJS4L9+/JIa5HPZZrDr3ZFECLnvp0TC1qzyFMtVevN2CsXopSTj8poN4uFXPWxYVXOq8vg==
   dependencies:
     "@nivo/colors" "0.88.0"
@@ -1718,7 +1674,7 @@
 
 "@nivo/axes@0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/axes/-/axes-0.88.0.tgz#b773efb217fc0faedbb5f8bc458f4b78820e2761"
+  resolved "https://registry.npmjs.org/@nivo/axes/-/axes-0.88.0.tgz#b773efb217fc0faedbb5f8bc458f4b78820e2761"
   integrity sha512-jF7aIxzTNayV5cI1J/b9Q1FfpMBxTXGk3OwSigXMSfYWlliskDn2u0qGRLiYhuXFdQAWIp4oXsO1GcAQ0eRVdg==
   dependencies:
     "@nivo/core" "0.88.0"
@@ -1731,7 +1687,7 @@
 
 "@nivo/bar@^0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/bar/-/bar-0.88.0.tgz#646f12233c0dc9f2507823bfe30a2f1d76ddae71"
+  resolved "https://registry.npmjs.org/@nivo/bar/-/bar-0.88.0.tgz#646f12233c0dc9f2507823bfe30a2f1d76ddae71"
   integrity sha512-wckwuHWeCikxGvvdRfGL+dVFsUD9uHk1r9s7bWUfOD+p8BWhxtYqfXpHolEfgGg3UyPaHtpGA7P4zgE5vgo7gQ==
   dependencies:
     "@nivo/annotations" "0.88.0"
@@ -1750,7 +1706,7 @@
 
 "@nivo/calendar@^0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/calendar/-/calendar-0.88.0.tgz#f09e8ab5332d8f9b18de87e95ca6a48013ac0606"
+  resolved "https://registry.npmjs.org/@nivo/calendar/-/calendar-0.88.0.tgz#f09e8ab5332d8f9b18de87e95ca6a48013ac0606"
   integrity sha512-sTpoaN5bNRwywRIVKAv7oo+/ZZjX0cjBcpbyFQZqXnEmFX8tEO55Rn/469zWDG776Gk7wHcuwmQfEIqwWM9PfQ==
   dependencies:
     "@nivo/core" "0.88.0"
@@ -1766,7 +1722,7 @@
 
 "@nivo/colors@0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/colors/-/colors-0.88.0.tgz#2790ac0607381800270f2902e4d957e65e2cad70"
+  resolved "https://registry.npmjs.org/@nivo/colors/-/colors-0.88.0.tgz#2790ac0607381800270f2902e4d957e65e2cad70"
   integrity sha512-IZ+leYIqAlo7dyLHmsQwujanfRgXyoQ5H7PU3RWLEn1PP0zxDKLgEjFEDADpDauuslh2Tx0L81GNkWR6QSP0Mw==
   dependencies:
     "@nivo/core" "0.88.0"
@@ -1782,7 +1738,7 @@
 
 "@nivo/core@0.88.0", "@nivo/core@^0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/core/-/core-0.88.0.tgz#ec79c7d63311473f15a463fd78274d9971a52848"
+  resolved "https://registry.npmjs.org/@nivo/core/-/core-0.88.0.tgz#ec79c7d63311473f15a463fd78274d9971a52848"
   integrity sha512-XjUkA5MmwjLP38bdrJwn36Gj7T5SYMKD55LYQp/1nIJPdxqJ38dUfE4XyBDfIEgfP6yrHOihw3C63cUdnUBoiw==
   dependencies:
     "@nivo/tooltip" "0.88.0"
@@ -1800,7 +1756,7 @@
 
 "@nivo/legends@0.88.0", "@nivo/legends@^0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/legends/-/legends-0.88.0.tgz#a6007492048358a14bd061472a117ed34e7b0c81"
+  resolved "https://registry.npmjs.org/@nivo/legends/-/legends-0.88.0.tgz#a6007492048358a14bd061472a117ed34e7b0c81"
   integrity sha512-d4DF9pHbD8LmGJlp/Gp1cF4e8y2wfQTcw3jVhbZj9zkb7ZWB7JfeF60VHRfbXNux9bjQ9U78/SssQqueVDPEmg==
   dependencies:
     "@nivo/colors" "0.88.0"
@@ -1810,7 +1766,7 @@
 
 "@nivo/line@^0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/line/-/line-0.88.0.tgz#145b194f2c1bff2dd6071ab46fe114f9c4237811"
+  resolved "https://registry.npmjs.org/@nivo/line/-/line-0.88.0.tgz#145b194f2c1bff2dd6071ab46fe114f9c4237811"
   integrity sha512-hFTyZ3BdAZvq2HwdwMj2SJGUeodjEW+7DLtFMIIoVIxmjZlAs3z533HcJ9cJd3it928fDm8SF/rgHs0TztYf9Q==
   dependencies:
     "@nivo/annotations" "0.88.0"
@@ -1826,7 +1782,7 @@
 
 "@nivo/pie@^0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/pie/-/pie-0.88.0.tgz#628a608d077d9cfe850ffef1b16181482479e7c7"
+  resolved "https://registry.npmjs.org/@nivo/pie/-/pie-0.88.0.tgz#628a608d077d9cfe850ffef1b16181482479e7c7"
   integrity sha512-BE6dFWlGne1SnaEkFHNbg0sZBiwtcIqBFwmMRJ0F11SiKOzVeJyq3KiyY1I2ySSCx5VR1V8/MNBXzXFu3vJMAQ==
   dependencies:
     "@nivo/arcs" "0.88.0"
@@ -1839,7 +1795,7 @@
 
 "@nivo/scales@0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/scales/-/scales-0.88.0.tgz#c69110b5ab504debb80a5a01a7824780af241ffb"
+  resolved "https://registry.npmjs.org/@nivo/scales/-/scales-0.88.0.tgz#c69110b5ab504debb80a5a01a7824780af241ffb"
   integrity sha512-HbpxkQp6tHCltZ1yDGeqdLcaJl5ze54NPjurfGtx/Uq+H5IQoBd4Tln49bUar5CsFAMsXw8yF1HQvASr7I1SIA==
   dependencies:
     "@types/d3-scale" "^4.0.8"
@@ -1852,7 +1808,7 @@
 
 "@nivo/scatterplot@^0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/scatterplot/-/scatterplot-0.88.0.tgz#d6572986eee49e2da942c01be37f6fe189bf6506"
+  resolved "https://registry.npmjs.org/@nivo/scatterplot/-/scatterplot-0.88.0.tgz#d6572986eee49e2da942c01be37f6fe189bf6506"
   integrity sha512-kVUnBknVnX/+kAnOVl27wSrVrDAnYt7hyttss5jydBMzGidxK7vFBwRUFl5yrPGmEwpDSO8POvXjSF4M3XHzZA==
   dependencies:
     "@nivo/annotations" "0.88.0"
@@ -1872,7 +1828,7 @@
 
 "@nivo/tooltip@0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/tooltip/-/tooltip-0.88.0.tgz#b98348c0d617fea09c1bbddccc443c12ca697620"
+  resolved "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.88.0.tgz#b98348c0d617fea09c1bbddccc443c12ca697620"
   integrity sha512-iEjVfQA8gumAzg/yUinjTwswygCkE5Iwuo8opwnrbpNIqMrleBV+EAKIgB0PrzepIoW8CFG/SJhoiRfbU8jhOw==
   dependencies:
     "@nivo/core" "0.88.0"
@@ -1880,7 +1836,7 @@
 
 "@nivo/voronoi@0.88.0":
   version "0.88.0"
-  resolved "https://registry.yarnpkg.com/@nivo/voronoi/-/voronoi-0.88.0.tgz#029f984ccb6e72b415f398e1bd74c572960197ae"
+  resolved "https://registry.npmjs.org/@nivo/voronoi/-/voronoi-0.88.0.tgz#029f984ccb6e72b415f398e1bd74c572960197ae"
   integrity sha512-MyiNLvODthFoMjQ7Wjp693nogbTmVEx8Yn/7QkJhyPQbFyyA37TF/D1a/ox4h2OslXtP6K9QFN+42gB/zu7ixw==
   dependencies:
     "@nivo/core" "0.88.0"
@@ -1892,7 +1848,7 @@
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
   integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
   dependencies:
     "@nodelib/fs.stat" "2.0.5"
@@ -1900,12 +1856,12 @@
 
 "@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
 "@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
   dependencies:
     "@nodelib/fs.scandir" "2.1.5"
@@ -1913,263 +1869,270 @@
 
 "@nolyfill/is-core-module@1.0.39":
   version "1.0.39"
-  resolved "https://registry.yarnpkg.com/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz#3dc35ba0f1e66b403c00b39344f870298ebb1c8e"
+  resolved "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz#3dc35ba0f1e66b403c00b39344f870298ebb1c8e"
   integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==
 
-"@opentelemetry/api-logs@0.52.1":
-  version "0.52.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.52.1.tgz#52906375da4d64c206b0c4cb8ffa209214654ecc"
-  integrity sha512-qnSqB2DQ9TPP96dl8cDubDvrUyWc0/sK81xHTK8eSUspzDM3bsewX903qclQFvVhgStjRWdC5bLb3kQqMkfV5A==
-  dependencies:
-    "@opentelemetry/api" "^1.0.0"
-
 "@opentelemetry/api-logs@0.53.0":
   version "0.53.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.53.0.tgz#c478cbd8120ec2547b64edfa03a552cfe42170be"
+  resolved "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.53.0.tgz#c478cbd8120ec2547b64edfa03a552cfe42170be"
   integrity sha512-8HArjKx+RaAI8uEIgcORbZIPklyh1YLjPSBus8hjRmvLi6DeFzgOcdZ7KwPabKj8mXF8dX0hyfAyGfycz0DbFw==
   dependencies:
     "@opentelemetry/api" "^1.0.0"
 
-"@opentelemetry/api-logs@0.54.2":
-  version "0.54.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.54.2.tgz#bb8aa11cdc69b327b58d7e10cc2bc26bf540421f"
-  integrity sha512-4MTVwwmLgUh5QrJnZpYo6YRO5IBLAggf2h8gWDblwRagDStY13aEvt7gGk3jewrMaPlHiF83fENhIx0HO97/cQ==
+"@opentelemetry/api-logs@0.56.0":
+  version "0.56.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.56.0.tgz#68f8c51ca905c260b610c8a3c67d3f9fa3d59a45"
+  integrity sha512-Wr39+94UNNG3Ei9nv3pHd4AJ63gq5nSemMRpCd8fPwDL9rN3vK26lzxfH27mw16XzOSO+TpyQwBAMaLxaPWG0g==
+  dependencies:
+    "@opentelemetry/api" "^1.3.0"
+
+"@opentelemetry/api-logs@0.57.1":
+  version "0.57.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/api-logs/-/api-logs-0.57.1.tgz#97ebd714f0b1fcdf896e85c465ae5c5b22747425"
+  integrity sha512-I4PHczeujhQAQv6ZBzqHYEUiggZL4IdSMixtVD3EYqbdrjujE7kRfI5QohjlPoJm8BvenoW5YaTMWRrbpot6tg==
   dependencies:
     "@opentelemetry/api" "^1.3.0"
 
 "@opentelemetry/api@^1.0.0", "@opentelemetry/api@^1.3.0", "@opentelemetry/api@^1.8", "@opentelemetry/api@^1.9.0":
   version "1.9.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.9.0.tgz#d03eba68273dc0f7509e2a3d5cba21eae10379fe"
+  resolved "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz#d03eba68273dc0f7509e2a3d5cba21eae10379fe"
   integrity sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==
 
-"@opentelemetry/context-async-hooks@^1.25.1":
-  version "1.29.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/context-async-hooks/-/context-async-hooks-1.29.0.tgz#3b3836c913834afa7720fdcf9687620f49b2cf37"
-  integrity sha512-TKT91jcFXgHyIDF1lgJF3BHGIakn6x0Xp7Tq3zoS3TMPzT9IlP0xEavWP8C1zGjU9UmZP2VR1tJhW9Az1A3w8Q==
+"@opentelemetry/context-async-hooks@^1.30.1":
+  version "1.30.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/context-async-hooks/-/context-async-hooks-1.30.1.tgz#4f76280691a742597fd0bf682982126857622948"
+  integrity sha512-s5vvxXPVdjqS3kTLKMeBMvop9hbWkwzBpu+mUO2M7sZtlkyDJGwFe33wRKnbaYDo8ExRVBIIdwIGrqpxHuKttA==
 
-"@opentelemetry/core@1.26.0":
-  version "1.26.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.26.0.tgz#7d84265aaa850ed0ca5813f97d831155be42b328"
-  integrity sha512-1iKxXXE8415Cdv0yjG3G6hQnB5eVEsJce3QaawX8SjDn0mAS0ZM8fAbZZJD4ajvhC15cePvosSCut404KrIIvQ==
-  dependencies:
-    "@opentelemetry/semantic-conventions" "1.27.0"
-
-"@opentelemetry/core@1.29.0", "@opentelemetry/core@^1.1.0", "@opentelemetry/core@^1.25.1", "@opentelemetry/core@^1.8.0":
-  version "1.29.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/core/-/core-1.29.0.tgz#a9397dfd9a8b37b2435b5e44be16d39ec1c82bd9"
-  integrity sha512-gmT7vAreXl0DTHD2rVZcw3+l2g84+5XiHIqdBUxXbExymPCvSsGOpiwMmn8nkiJur28STV31wnhIDrzWDPzjfA==
+"@opentelemetry/core@1.30.1", "@opentelemetry/core@^1.1.0", "@opentelemetry/core@^1.26.0", "@opentelemetry/core@^1.30.1", "@opentelemetry/core@^1.8.0":
+  version "1.30.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/core/-/core-1.30.1.tgz#a0b468bb396358df801881709ea38299fc30ab27"
+  integrity sha512-OOCM2C/QIURhJMuKaekP3TRBxBKxG/TWWA0TL2J6nXUtDnuCtccy49LUJF8xPFXMX+0LMcxFpCo8M9cGY1W6rQ==
   dependencies:
     "@opentelemetry/semantic-conventions" "1.28.0"
 
-"@opentelemetry/instrumentation-amqplib@^0.43.0":
-  version "0.43.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-amqplib/-/instrumentation-amqplib-0.43.0.tgz#e18b7d763b69c605a7abf9869e1c278f9bfdc1eb"
-  integrity sha512-ALjfQC+0dnIEcvNYsbZl/VLh7D2P1HhFF4vicRKHhHFIUV3Shpg4kXgiek5PLhmeKSIPiUB25IYH5RIneclL4A==
+"@opentelemetry/instrumentation-amqplib@^0.46.0":
+  version "0.46.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-amqplib/-/instrumentation-amqplib-0.46.0.tgz#8b0c61213034780a79c16216c62eee0ce1457ddf"
+  integrity sha512-04VHHV1KIN/c1wLWwzmLI02d/welgscBJ4BuDqrHaxd+ZIdlVXK9UYQsYf3JwSeF52z/4YoSzr8bfdVBSWoMAg==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.54.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-connect@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-connect/-/instrumentation-connect-0.40.0.tgz#cb151b860ad8a711ebce4d7e025dcde95e4ba2c5"
-  integrity sha512-3aR/3YBQ160siitwwRLjwqrv2KBT16897+bo6yz8wIfel6nWOxTZBJudcbsK3p42pTC7qrbotJ9t/1wRLpv79Q==
+"@opentelemetry/instrumentation-connect@0.43.0":
+  version "0.43.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-connect/-/instrumentation-connect-0.43.0.tgz#411035f4a8f2e498dbfa7300e545c58586a062e2"
+  integrity sha512-Q57JGpH6T4dkYHo9tKXONgLtxzsh1ZEW5M9A/OwKrZFyEpLqWgjhcZ3hIuVvDlhb426iDF1f9FPToV/mi5rpeA==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.54.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
     "@types/connect" "3.4.36"
 
-"@opentelemetry/instrumentation-dataloader@0.12.0":
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-dataloader/-/instrumentation-dataloader-0.12.0.tgz#de03a3948dec4f15fed80aa424d6bd5d6a8d10c7"
-  integrity sha512-pnPxatoFE0OXIZDQhL2okF//dmbiWFzcSc8pUg9TqofCLYZySSxDCgQc69CJBo5JnI3Gz1KP+mOjS4WAeRIH4g==
-  dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
-
-"@opentelemetry/instrumentation-express@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-express/-/instrumentation-express-0.44.0.tgz#51dc11e3152ffbee1c4e389298aac30231c8270a"
-  integrity sha512-GWgibp6Q0wxyFaaU8ERIgMMYgzcHmGrw3ILUtGchLtLncHNOKk0SNoWGqiylXWWT4HTn5XdV8MGawUgpZh80cA==
-  dependencies:
-    "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.54.0"
-    "@opentelemetry/semantic-conventions" "^1.27.0"
-
-"@opentelemetry/instrumentation-fastify@0.41.0":
-  version "0.41.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fastify/-/instrumentation-fastify-0.41.0.tgz#5e1d00383756f3a8cc2ea4a9d15f9f7510cec571"
-  integrity sha512-pNRjFvf0mvqfJueaeL/qEkuGJwgtE5pgjIHGYwjc2rMViNCrtY9/Sf+Nu8ww6dDd/Oyk2fwZZP7i0XZfCnETrA==
-  dependencies:
-    "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.54.0"
-    "@opentelemetry/semantic-conventions" "^1.27.0"
-
-"@opentelemetry/instrumentation-fs@0.16.0":
+"@opentelemetry/instrumentation-dataloader@0.16.0":
   version "0.16.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-fs/-/instrumentation-fs-0.16.0.tgz#aa1cc3aa81011ad9843a0156b200f06f31ffa03e"
-  integrity sha512-hMDRUxV38ln1R3lNz6osj3YjlO32ykbHqVrzG7gEhGXFQfu7LJUx8t9tEwE4r2h3CD4D0Rw4YGDU4yF4mP3ilg==
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-dataloader/-/instrumentation-dataloader-0.16.0.tgz#913345c335f67bf8e17a9b38c227dba741fe488b"
+  integrity sha512-88+qCHZC02up8PwKHk0UQKLLqGGURzS3hFQBZC7PnGwReuoKjHXS1o29H58S+QkXJpkTr2GACbx8j6mUoGjNPA==
+  dependencies:
+    "@opentelemetry/instrumentation" "^0.57.0"
+
+"@opentelemetry/instrumentation-express@0.47.0":
+  version "0.47.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-express/-/instrumentation-express-0.47.0.tgz#f0477db3b1f4b342beb9ecd08edc26c470566724"
+  integrity sha512-XFWVx6k0XlU8lu6cBlCa29ONtVt6ADEjmxtyAyeF2+rifk8uBJbk1La0yIVfI0DoKURGbaEDTNelaXG9l/lNNQ==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.54.0"
-
-"@opentelemetry/instrumentation-generic-pool@0.39.0":
-  version "0.39.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-generic-pool/-/instrumentation-generic-pool-0.39.0.tgz#2b9af16ad82d5cbe67125c0125753cecd162a728"
-  integrity sha512-y4v8Y+tSfRB3NNBvHjbjrn7rX/7sdARG7FuK6zR8PGb28CTa0kHpEGCJqvL9L8xkTNvTXo+lM36ajFGUaK1aNw==
-  dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
-
-"@opentelemetry/instrumentation-graphql@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-graphql/-/instrumentation-graphql-0.44.0.tgz#6fce8e2f303d16810bf8a03148cad6e8e6119de1"
-  integrity sha512-FYXTe3Bv96aNpYktqm86BFUTpjglKD0kWI5T5bxYkLUPEPvFn38vWGMJTGrDMVou/i55E4jlWvcm6hFIqLsMbg==
-  dependencies:
-    "@opentelemetry/instrumentation" "^0.54.0"
-
-"@opentelemetry/instrumentation-hapi@0.41.0":
-  version "0.41.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-hapi/-/instrumentation-hapi-0.41.0.tgz#de8711907256d8fae1b5faf71fc825cef4a7ddbb"
-  integrity sha512-jKDrxPNXDByPlYcMdZjNPYCvw0SQJjN+B1A+QH+sx+sAHsKSAf9hwFiJSrI6C4XdOls43V/f/fkp9ITkHhKFbQ==
-  dependencies:
-    "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-http@0.53.0":
-  version "0.53.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-http/-/instrumentation-http-0.53.0.tgz#0d806adf1b3aba036bc46e16162e3c0dbb8a6b60"
-  integrity sha512-H74ErMeDuZfj7KgYCTOFGWF5W9AfaPnqLQQxeFq85+D29wwV2yqHbz2IKLYpkOh7EI6QwDEl7rZCIxjJLyc/CQ==
+"@opentelemetry/instrumentation-fastify@0.44.1":
+  version "0.44.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-fastify/-/instrumentation-fastify-0.44.1.tgz#c8080f24a6fbdd14689c619ad7b14fe189b10f28"
+  integrity sha512-RoVeMGKcNttNfXMSl6W4fsYoCAYP1vi6ZAWIGhBY+o7R9Y0afA7f9JJL0j8LHbyb0P0QhSYk+6O56OwI2k4iRQ==
   dependencies:
-    "@opentelemetry/core" "1.26.0"
-    "@opentelemetry/instrumentation" "0.53.0"
-    "@opentelemetry/semantic-conventions" "1.27.0"
+    "@opentelemetry/core" "^1.8.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
+    "@opentelemetry/semantic-conventions" "^1.27.0"
+
+"@opentelemetry/instrumentation-fs@0.19.0":
+  version "0.19.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-fs/-/instrumentation-fs-0.19.0.tgz#a44807aea97edc64c597d6a5b5b8637b7ab45057"
+  integrity sha512-JGwmHhBkRT2G/BYNV1aGI+bBjJu4fJUD/5/Jat0EWZa2ftrLV3YE8z84Fiij/wK32oMZ88eS8DI4ecLGZhpqsQ==
+  dependencies:
+    "@opentelemetry/core" "^1.8.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
+
+"@opentelemetry/instrumentation-generic-pool@0.43.0":
+  version "0.43.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-generic-pool/-/instrumentation-generic-pool-0.43.0.tgz#b1769eb0e30f2abb764a9cbc811aa3d4560ecc24"
+  integrity sha512-at8GceTtNxD1NfFKGAuwtqM41ot/TpcLh+YsGe4dhf7gvv1HW/ZWdq6nfRtS6UjIvZJOokViqLPJ3GVtZItAnQ==
+  dependencies:
+    "@opentelemetry/instrumentation" "^0.57.0"
+
+"@opentelemetry/instrumentation-graphql@0.47.0":
+  version "0.47.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-graphql/-/instrumentation-graphql-0.47.0.tgz#271807e21a6224bd1986a3e9887650f1858ee733"
+  integrity sha512-Cc8SMf+nLqp0fi8oAnooNEfwZWFnzMiBHCGmDFYqmgjPylyLmi83b+NiTns/rKGwlErpW0AGPt0sMpkbNlzn8w==
+  dependencies:
+    "@opentelemetry/instrumentation" "^0.57.0"
+
+"@opentelemetry/instrumentation-hapi@0.45.1":
+  version "0.45.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-hapi/-/instrumentation-hapi-0.45.1.tgz#5edf982549070d95e20152d568279548ad44d662"
+  integrity sha512-VH6mU3YqAKTePPfUPwfq4/xr049774qWtfTuJqVHoVspCLiT3bW+fCQ1toZxt6cxRPYASoYaBsMA3CWo8B8rcw==
+  dependencies:
+    "@opentelemetry/core" "^1.8.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
+    "@opentelemetry/semantic-conventions" "^1.27.0"
+
+"@opentelemetry/instrumentation-http@0.57.1":
+  version "0.57.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-http/-/instrumentation-http-0.57.1.tgz#2d8b395df62191475e76fa0eb7bf60079ea886b9"
+  integrity sha512-ThLmzAQDs7b/tdKI3BV2+yawuF09jF111OFsovqT1Qj3D8vjwKBwhi/rDE5xethwn4tSXtZcJ9hBsVAlWFQZ7g==
+  dependencies:
+    "@opentelemetry/core" "1.30.1"
+    "@opentelemetry/instrumentation" "0.57.1"
+    "@opentelemetry/semantic-conventions" "1.28.0"
+    forwarded-parse "2.1.2"
     semver "^7.5.2"
 
-"@opentelemetry/instrumentation-ioredis@0.43.0":
-  version "0.43.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-ioredis/-/instrumentation-ioredis-0.43.0.tgz#dbadabaeefc4cb47c406f878444f1bcac774fa89"
-  integrity sha512-i3Dke/LdhZbiUAEImmRG3i7Dimm/BD7t8pDDzwepSvIQ6s2X6FPia7561gw+64w+nx0+G9X14D7rEfaMEmmjig==
+"@opentelemetry/instrumentation-ioredis@0.47.0":
+  version "0.47.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-ioredis/-/instrumentation-ioredis-0.47.0.tgz#f83bd133d36d137d2d0b58bfbdfe12ed6fe5ab2f"
+  integrity sha512-4HqP9IBC8e7pW9p90P3q4ox0XlbLGme65YTrA3UTLvqvo4Z6b0puqZQP203YFu8m9rE/luLfaG7/xrwwqMUpJw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/redis-common" "^0.36.2"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-kafkajs@0.4.0":
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-kafkajs/-/instrumentation-kafkajs-0.4.0.tgz#c1fe0de45a65a66581be0d7422f6828cc806b3bb"
-  integrity sha512-I9VwDG314g7SDL4t8kD/7+1ytaDBRbZQjhVaQaVIDR8K+mlsoBhLsWH79yHxhHQKvwCSZwqXF+TiTOhoQVUt7A==
+"@opentelemetry/instrumentation-kafkajs@0.7.0":
+  version "0.7.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-kafkajs/-/instrumentation-kafkajs-0.7.0.tgz#079b949ec814b42e49d23bb4d4f73735fe460d52"
+  integrity sha512-LB+3xiNzc034zHfCtgs4ITWhq6Xvdo8bsq7amR058jZlf2aXXDrN9SV4si4z2ya9QX4tz6r4eZJwDkXOp14/AQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.54.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-knex@0.41.0":
-  version "0.41.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-knex/-/instrumentation-knex-0.41.0.tgz#74d611489e823003a825097bac019c6c2ad061a5"
-  integrity sha512-OhI1SlLv5qnsnm2dOVrian/x3431P75GngSpnR7c4fcVFv7prXGYu29Z6ILRWJf/NJt6fkbySmwdfUUnFnHCTg==
+"@opentelemetry/instrumentation-knex@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-knex/-/instrumentation-knex-0.44.0.tgz#af251ed38f06a2f248812c5addf0266697b6149a"
+  integrity sha512-SlT0+bLA0Lg3VthGje+bSZatlGHw/vwgQywx0R/5u9QC59FddTQSPJeWNw29M6f8ScORMeUOOTwihlQAn4GkJQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.54.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-koa@0.43.0":
-  version "0.43.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-koa/-/instrumentation-koa-0.43.0.tgz#963fd192a1b5f6cbae5dabf4ec82e3105cbb23b1"
-  integrity sha512-lDAhSnmoTIN6ELKmLJBplXzT/Jqs5jGZehuG22EdSMaTwgjMpxMDI1YtlKEhiWPWkrz5LUsd0aOO0ZRc9vn3AQ==
+"@opentelemetry/instrumentation-koa@0.47.0":
+  version "0.47.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-koa/-/instrumentation-koa-0.47.0.tgz#a74b35809ba95d0f9db49e8c3f214bde475b095a"
+  integrity sha512-HFdvqf2+w8sWOuwtEXayGzdZ2vWpCKEQv5F7+2DSA74Te/Cv4rvb2E5So5/lh+ok4/RAIPuvCbCb/SHQFzMmbw==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-lru-memoizer@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-lru-memoizer/-/instrumentation-lru-memoizer-0.40.0.tgz#dc60d7fdfd2a0c681cb23e7ed4f314d1506ccdc0"
-  integrity sha512-21xRwZsEdMPnROu/QsaOIODmzw59IYpGFmuC4aFWvMj6stA8+Ei1tX67nkarJttlNjoM94um0N4X26AD7ff54A==
+"@opentelemetry/instrumentation-lru-memoizer@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-lru-memoizer/-/instrumentation-lru-memoizer-0.44.0.tgz#c22e770d950c165f80c657a9c790c9843baaa65b"
+  integrity sha512-Tn7emHAlvYDFik3vGU0mdwvWJDwtITtkJ+5eT2cUquct6nIs+H8M47sqMJkCpyPe5QIBJoTOHxmc6mj9lz6zDw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
 
-"@opentelemetry/instrumentation-mongodb@0.48.0":
-  version "0.48.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongodb/-/instrumentation-mongodb-0.48.0.tgz#40fb8c705cb4bf8d8c5bf8752c60c5a0aaaaf617"
-  integrity sha512-9YWvaGvrrcrydMsYGLu0w+RgmosLMKe3kv/UNlsPy8RLnCkN2z+bhhbjjjuxtUmvEuKZMCoXFluABVuBr1yhjw==
+"@opentelemetry/instrumentation-mongodb@0.51.0":
+  version "0.51.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-mongodb/-/instrumentation-mongodb-0.51.0.tgz#8a323c2fb4cb2c93bf95f1b1c0fcb30952d12a08"
+  integrity sha512-cMKASxCX4aFxesoj3WK8uoQ0YUrRvnfxaO72QWI2xLu5ZtgX/QvdGBlU3Ehdond5eb74c2s1cqRQUIptBnKz1g==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.54.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-mongoose@0.42.0":
-  version "0.42.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mongoose/-/instrumentation-mongoose-0.42.0.tgz#375afd21adfcd897a8f521c1ffd2d91e6a428705"
-  integrity sha512-AnWv+RaR86uG3qNEMwt3plKX1ueRM7AspfszJYVkvkehiicC3bHQA6vWdb6Zvy5HAE14RyFbu9+2hUUjR2NSyg==
+"@opentelemetry/instrumentation-mongoose@0.46.0":
+  version "0.46.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-mongoose/-/instrumentation-mongoose-0.46.0.tgz#c3a5f69e1a5b950b542cf84650fbbd3e31bd681e"
+  integrity sha512-mtVv6UeaaSaWTeZtLo4cx4P5/ING2obSqfWGItIFSunQBrYROfhuVe7wdIrFUs2RH1tn2YYpAJyMaRe/bnTTIQ==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-mysql2@0.41.0":
-  version "0.41.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql2/-/instrumentation-mysql2-0.41.0.tgz#6377b6e2d2487fd88e1d79aa03658db6c8d51651"
-  integrity sha512-REQB0x+IzVTpoNgVmy5b+UnH1/mDByrneimP6sbDHkp1j8QOl1HyWOrBH/6YWR0nrbU3l825Em5PlybjT3232g==
+"@opentelemetry/instrumentation-mysql2@0.45.0":
+  version "0.45.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-mysql2/-/instrumentation-mysql2-0.45.0.tgz#95501759d470dbc7038670e91205e8ed601ec402"
+  integrity sha512-qLslv/EPuLj0IXFvcE3b0EqhWI8LKmrgRPIa4gUd8DllbBpqJAvLNJSv3cC6vWwovpbSI3bagNO/3Q2SuXv2xA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
     "@opentelemetry/sql-common" "^0.40.1"
 
-"@opentelemetry/instrumentation-mysql@0.41.0":
-  version "0.41.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-mysql/-/instrumentation-mysql-0.41.0.tgz#2d50691ead5219774bd36d66c35d5b4681485dd7"
-  integrity sha512-jnvrV6BsQWyHS2qb2fkfbfSb1R/lmYwqEZITwufuRl37apTopswu9izc0b1CYRp/34tUG/4k/V39PND6eyiNvw==
+"@opentelemetry/instrumentation-mysql@0.45.0":
+  version "0.45.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-mysql/-/instrumentation-mysql-0.45.0.tgz#e4df8bc709c0c8b0ff90bbef92fb36e92ebe0d19"
+  integrity sha512-tWWyymgwYcTwZ4t8/rLDfPYbOTF3oYB8SxnYMtIQ1zEf5uDm90Ku3i6U/vhaMyfHNlIHvDhvJh+qx5Nc4Z3Acg==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
     "@types/mysql" "2.15.26"
 
-"@opentelemetry/instrumentation-nestjs-core@0.40.0":
-  version "0.40.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-nestjs-core/-/instrumentation-nestjs-core-0.40.0.tgz#2c0e6405b56caaec32747d55c57ff9a034668ea8"
-  integrity sha512-WF1hCUed07vKmf5BzEkL0wSPinqJgH7kGzOjjMAiTGacofNXjb/y4KQ8loj2sNsh5C/NN7s1zxQuCgbWbVTGKg==
+"@opentelemetry/instrumentation-nestjs-core@0.44.0":
+  version "0.44.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-nestjs-core/-/instrumentation-nestjs-core-0.44.0.tgz#d2a3631de3bed2b1c0a03afa79c08ae22bef8b6c"
+  integrity sha512-t16pQ7A4WYu1yyQJZhRKIfUNvl5PAaF2pEteLvgJb/BWdd1oNuU1rOYt4S825kMy+0q4ngiX281Ss9qiwHfxFQ==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-pg@0.44.0":
-  version "0.44.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-pg/-/instrumentation-pg-0.44.0.tgz#1e97a0aeb2dca068ee23ce75884a0a0063a7ce3f"
-  integrity sha512-oTWVyzKqXud1BYEGX1loo2o4k4vaU1elr3vPO8NZolrBtFvQ34nx4HgUaexUDuEog00qQt+MLR5gws/p+JXMLQ==
+"@opentelemetry/instrumentation-pg@0.50.0":
+  version "0.50.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-pg/-/instrumentation-pg-0.50.0.tgz#525ecf683c349529539a14f2be47164f4e3eb0f5"
+  integrity sha512-TtLxDdYZmBhFswm8UIsrDjh/HFBeDXd4BLmE8h2MxirNHewLJ0VS9UUddKKEverb5Sm2qFVjqRjcU+8Iw4FJ3w==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
-    "@opentelemetry/semantic-conventions" "^1.27.0"
+    "@opentelemetry/core" "^1.26.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
+    "@opentelemetry/semantic-conventions" "1.27.0"
     "@opentelemetry/sql-common" "^0.40.1"
     "@types/pg" "8.6.1"
     "@types/pg-pool" "2.0.6"
 
-"@opentelemetry/instrumentation-redis-4@0.42.0":
-  version "0.42.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-redis-4/-/instrumentation-redis-4-0.42.0.tgz#fc01104cfe884c7546385eaae03c57a47edd19d1"
-  integrity sha512-NaD+t2JNcOzX/Qa7kMy68JbmoVIV37fT/fJYzLKu2Wwd+0NCxt+K2OOsOakA8GVg8lSpFdbx4V/suzZZ2Pvdjg==
+"@opentelemetry/instrumentation-redis-4@0.46.0":
+  version "0.46.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-redis-4/-/instrumentation-redis-4-0.46.0.tgz#828704b8134f023730ac508bcf3a38ca4d5d697c"
+  integrity sha512-aTUWbzbFMFeRODn3720TZO0tsh/49T8H3h8vVnVKJ+yE36AeW38Uj/8zykQ/9nO8Vrtjr5yKuX3uMiG/W8FKNw==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/redis-common" "^0.36.2"
     "@opentelemetry/semantic-conventions" "^1.27.0"
 
-"@opentelemetry/instrumentation-tedious@0.15.0":
-  version "0.15.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-tedious/-/instrumentation-tedious-0.15.0.tgz#da82f4d153fb6ff7d1f85d39872ac40bf9db12ea"
-  integrity sha512-Kb7yo8Zsq2TUwBbmwYgTAMPK0VbhoS8ikJ6Bup9KrDtCx2JC01nCb+M0VJWXt7tl0+5jARUbKWh5jRSoImxdCw==
+"@opentelemetry/instrumentation-tedious@0.18.0":
+  version "0.18.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-tedious/-/instrumentation-tedious-0.18.0.tgz#636745423db28e303b4e0289b8f69685cb36f807"
+  integrity sha512-9zhjDpUDOtD+coeADnYEJQ0IeLVCj7w/hqzIutdp5NqS1VqTAanaEfsEcSypyvYv5DX3YOsTUoF+nr2wDXPETA==
   dependencies:
-    "@opentelemetry/instrumentation" "^0.54.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
     "@opentelemetry/semantic-conventions" "^1.27.0"
     "@types/tedious" "^4.0.14"
 
-"@opentelemetry/instrumentation-undici@0.6.0":
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation-undici/-/instrumentation-undici-0.6.0.tgz#9436ee155c8dcb0b760b66947c0e0f347688a5ef"
-  integrity sha512-ABJBhm5OdhGmbh0S/fOTE4N69IZ00CsHC5ijMYfzbw3E5NwLgpQk5xsljaECrJ8wz1SfXbO03FiSuu5AyRAkvQ==
+"@opentelemetry/instrumentation-undici@0.10.0":
+  version "0.10.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation-undici/-/instrumentation-undici-0.10.0.tgz#99cba213a6e9d47a82896b6c782c3f2d60e0edb5"
+  integrity sha512-vm+V255NGw9gaSsPD6CP0oGo8L55BffBc8KnxqsMuc6XiAD1L8SFNzsW0RHhxJFqy9CJaJh+YiJ5EHXuZ5rZBw==
   dependencies:
     "@opentelemetry/core" "^1.8.0"
-    "@opentelemetry/instrumentation" "^0.53.0"
+    "@opentelemetry/instrumentation" "^0.57.0"
 
-"@opentelemetry/instrumentation@0.53.0", "@opentelemetry/instrumentation@^0.53.0":
+"@opentelemetry/instrumentation@0.57.1", "@opentelemetry/instrumentation@^0.57.0", "@opentelemetry/instrumentation@^0.57.1":
+  version "0.57.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.57.1.tgz#5aea772be8783a35d69d643da46582f381ba1810"
+  integrity sha512-SgHEKXoVxOjc20ZYusPG3Fh+RLIZTSa4x8QtD3NfgAUDyqdFFS9W1F2ZVbZkqDCdyMcQG02Ok4duUGLHJXHgbA==
+  dependencies:
+    "@opentelemetry/api-logs" "0.57.1"
+    "@types/shimmer" "^1.2.0"
+    import-in-the-middle "^1.8.1"
+    require-in-the-middle "^7.1.1"
+    semver "^7.5.2"
+    shimmer "^1.2.1"
+
+"@opentelemetry/instrumentation@^0.49 || ^0.50 || ^0.51 || ^0.52.0 || ^0.53.0":
   version "0.53.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.53.0.tgz#e6369e4015eb5112468a4d45d38dcada7dad892d"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.53.0.tgz#e6369e4015eb5112468a4d45d38dcada7dad892d"
   integrity sha512-DMwg0hy4wzf7K73JJtl95m/e0boSoWhH07rfvHvYzQtBD3Bmv0Wc1x733vyZBqmFm8OjJD0/pfiUg1W3JjFX0A==
   dependencies:
     "@opentelemetry/api-logs" "0.53.0"
@@ -2179,24 +2142,12 @@
     semver "^7.5.2"
     shimmer "^1.2.1"
 
-"@opentelemetry/instrumentation@^0.49 || ^0.50 || ^0.51 || ^0.52.0":
-  version "0.52.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.52.1.tgz#2e7e46a38bd7afbf03cf688c862b0b43418b7f48"
-  integrity sha512-uXJbYU/5/MBHjMp1FqrILLRuiJCs3Ofk0MeRDk8g1S1gD47U8X3JnSwcMO1rtRo1x1a7zKaQHaoYu49p/4eSKw==
+"@opentelemetry/instrumentation@^0.52.0 || ^0.53.0 || ^0.54.0 || ^0.55.0 || ^0.56.0":
+  version "0.56.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/instrumentation/-/instrumentation-0.56.0.tgz#3330ce16d9235a548efa1019a4a7f01414edd44a"
+  integrity sha512-2KkGBKE+FPXU1F0zKww+stnlUxUTlBvLCiWdP63Z9sqXYeNI/ziNzsxAp4LAdUcTQmXjw1IWgvm5CAb/BHy99w==
   dependencies:
-    "@opentelemetry/api-logs" "0.52.1"
-    "@types/shimmer" "^1.0.2"
-    import-in-the-middle "^1.8.1"
-    require-in-the-middle "^7.1.1"
-    semver "^7.5.2"
-    shimmer "^1.2.1"
-
-"@opentelemetry/instrumentation@^0.54.0":
-  version "0.54.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/instrumentation/-/instrumentation-0.54.2.tgz#29693a33bbaaf0156634ac5d9e774636b8f17f73"
-  integrity sha512-go6zpOVoZVztT9r1aPd79Fr3OWiD4N24bCPJsIKkBses8oyFo12F/Ew3UBTdIu6hsW4HC4MVEJygG6TEyJI/lg==
-  dependencies:
-    "@opentelemetry/api-logs" "0.54.2"
+    "@opentelemetry/api-logs" "0.56.0"
     "@types/shimmer" "^1.2.0"
     import-in-the-middle "^1.8.1"
     require-in-the-middle "^7.1.1"
@@ -2205,193 +2156,230 @@
 
 "@opentelemetry/redis-common@^0.36.2":
   version "0.36.2"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/redis-common/-/redis-common-0.36.2.tgz#906ac8e4d804d4109f3ebd5c224ac988276fdc47"
+  resolved "https://registry.npmjs.org/@opentelemetry/redis-common/-/redis-common-0.36.2.tgz#906ac8e4d804d4109f3ebd5c224ac988276fdc47"
   integrity sha512-faYX1N0gpLhej/6nyp6bgRjzAKXn5GOEMYY7YhciSfCoITAktLUtQ36d24QEWNA1/WA1y6qQunCe0OhHRkVl9g==
 
-"@opentelemetry/resources@1.29.0", "@opentelemetry/resources@^1.26.0":
-  version "1.29.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/resources/-/resources-1.29.0.tgz#d170f39b2ac93d61b53d13dfcd96795181bdc372"
-  integrity sha512-s7mLXuHZE7RQr1wwweGcaRp3Q4UJJ0wazeGlc/N5/XSe6UyXfsh1UQGMADYeg7YwD+cEdMtU1yJAUXdnFzYzyQ==
+"@opentelemetry/resources@1.30.1", "@opentelemetry/resources@^1.30.1":
+  version "1.30.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/resources/-/resources-1.30.1.tgz#a4eae17ebd96947fdc7a64f931ca4b71e18ce964"
+  integrity sha512-5UxZqiAgLYGFjS4s9qm5mBVo433u+dSPUFWVWXmLAD4wB65oMCoXaJP1KJa9DIYYMeHu3z4BZcStG3LC593cWA==
   dependencies:
-    "@opentelemetry/core" "1.29.0"
+    "@opentelemetry/core" "1.30.1"
     "@opentelemetry/semantic-conventions" "1.28.0"
 
-"@opentelemetry/sdk-trace-base@^1.22", "@opentelemetry/sdk-trace-base@^1.26.0":
-  version "1.29.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.29.0.tgz#f48d95dae0e58e601d0596bd2e482122d2688fb8"
-  integrity sha512-hEOpAYLKXF3wGJpXOtWsxEtqBgde0SCv+w+jvr3/UusR4ll3QrENEGnSl1WDCyRrpqOQ5NCNOvZch9UFVa7MnQ==
+"@opentelemetry/sdk-trace-base@^1.22", "@opentelemetry/sdk-trace-base@^1.30.1":
+  version "1.30.1"
+  resolved "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-1.30.1.tgz#41a42234096dc98e8f454d24551fc80b816feb34"
+  integrity sha512-jVPgBbH1gCy2Lb7X0AVQ8XAfgg0pJ4nvl8/IiQA6nxOsPvS+0zMJaFSs2ltXe0J6C8dqjcnpyqINDJmU30+uOg==
   dependencies:
-    "@opentelemetry/core" "1.29.0"
-    "@opentelemetry/resources" "1.29.0"
+    "@opentelemetry/core" "1.30.1"
+    "@opentelemetry/resources" "1.30.1"
     "@opentelemetry/semantic-conventions" "1.28.0"
 
 "@opentelemetry/semantic-conventions@1.27.0":
   version "1.27.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.27.0.tgz#1a857dcc95a5ab30122e04417148211e6f945e6c"
+  resolved "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.27.0.tgz#1a857dcc95a5ab30122e04417148211e6f945e6c"
   integrity sha512-sAay1RrB+ONOem0OZanAR1ZI/k7yDpnOQSQmTMuGImUQb2y8EbSaCJ94FQluM74xoU03vlb2d2U90hZluL6nQg==
 
-"@opentelemetry/semantic-conventions@1.28.0", "@opentelemetry/semantic-conventions@^1.27.0":
+"@opentelemetry/semantic-conventions@1.28.0":
   version "1.28.0"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.28.0.tgz#337fb2bca0453d0726696e745f50064411f646d6"
+  resolved "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.28.0.tgz#337fb2bca0453d0726696e745f50064411f646d6"
   integrity sha512-lp4qAiMTD4sNWW4DbKLBkfiMZ4jbAboJIGOQr5DvciMRI494OapieI9qiODpOt0XBr1LjIDy1xAGAnVs5supTA==
 
+"@opentelemetry/semantic-conventions@^1.27.0", "@opentelemetry/semantic-conventions@^1.28.0":
+  version "1.30.0"
+  resolved "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.30.0.tgz#3a42c4c475482f2ec87c12aad98832dc0087dc9a"
+  integrity sha512-4VlGgo32k2EQ2wcCY3vEU28A0O13aOtHz3Xt2/2U5FAh9EfhD6t6DqL5Z6yAnRCntbTFDU4YfbpyzSlHNWycPw==
+
 "@opentelemetry/sql-common@^0.40.1":
   version "0.40.1"
-  resolved "https://registry.yarnpkg.com/@opentelemetry/sql-common/-/sql-common-0.40.1.tgz#93fbc48d8017449f5b3c3274f2268a08af2b83b6"
+  resolved "https://registry.npmjs.org/@opentelemetry/sql-common/-/sql-common-0.40.1.tgz#93fbc48d8017449f5b3c3274f2268a08af2b83b6"
   integrity sha512-nSDlnHSqzC3pXn/wZEZVLuAuJ1MYMXPBwtv2qAbCa3847SaHItdE7SzUq/Jtb0KZmh1zfAbNi3AAMjztTT4Ugg==
   dependencies:
     "@opentelemetry/core" "^1.1.0"
 
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
-  resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
+  resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"
   integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
 
 "@popperjs/core@^2.11.7", "@popperjs/core@^2.11.8", "@popperjs/core@^2.9.0":
   version "2.11.8"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@prisma/instrumentation@5.19.1":
-  version "5.19.1"
-  resolved "https://registry.yarnpkg.com/@prisma/instrumentation/-/instrumentation-5.19.1.tgz#146319cf85f22b7a43296f0f40cfeac55516e66e"
-  integrity sha512-VLnzMQq7CWroL5AeaW0Py2huiNKeoMfCH3SUxstdzPrlWQi6UQ9UrfcbUkNHlVFqOMacqy8X/8YtE0kuKDpD9w==
+"@prisma/instrumentation@5.22.0":
+  version "5.22.0"
+  resolved "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-5.22.0.tgz#c39941046e9886e17bdb47dbac45946c24d579aa"
+  integrity sha512-LxccF392NN37ISGxIurUljZSh1YWnphO34V5a0+T7FVQG2u9bhAXRTJpgmQ3483woVhkraQZFF7cbRrpbw/F4Q==
   dependencies:
     "@opentelemetry/api" "^1.8"
-    "@opentelemetry/instrumentation" "^0.49 || ^0.50 || ^0.51 || ^0.52.0"
+    "@opentelemetry/instrumentation" "^0.49 || ^0.50 || ^0.51 || ^0.52.0 || ^0.53.0"
     "@opentelemetry/sdk-trace-base" "^1.22"
 
-"@radix-ui/primitive@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.1.0.tgz#42ef83b3b56dccad5d703ae8c42919a68798bbe2"
-  integrity sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==
+"@prisma/instrumentation@6.2.1":
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-6.2.1.tgz#261b885467d36759b7ca01d1b2ca4e1120bda886"
+  integrity sha512-QrcWRAwNHXX4nHXB+Q94nfm701gPQsR4zkaxYV6qCiENopRi8yYvXt6FNIvxbuwEiWW5Zid6DoWwIsBKJ/5r5w==
+  dependencies:
+    "@opentelemetry/instrumentation" "^0.52.0 || ^0.53.0 || ^0.54.0 || ^0.55.0 || ^0.56.0"
 
-"@radix-ui/react-compose-refs@1.1.0":
+"@radix-ui/number@1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
-  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.1.0.tgz#1e95610461a09cdf8bb05c152e76ca1278d5da46"
+  integrity sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ==
+
+"@radix-ui/primitive@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz#fc169732d755c7fbad33ba8d0cd7fd10c90dc8e3"
+  integrity sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA==
+
+"@radix-ui/react-compose-refs@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
+  integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
 
 "@radix-ui/react-context@1.1.1":
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
+  resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz#82074aa83a472353bb22e86f11bcbd1c61c4c71a"
   integrity sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==
 
 "@radix-ui/react-dialog@^1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz#d9345575211d6f2d13e209e84aec9a8584b54d6c"
-  integrity sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==
+  version "1.1.6"
+  resolved "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz#65b4465e99ad900f28a98eed9a94bb21ec644bf7"
+  integrity sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==
   dependencies:
-    "@radix-ui/primitive" "1.1.0"
-    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
     "@radix-ui/react-context" "1.1.1"
-    "@radix-ui/react-dismissable-layer" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.5"
     "@radix-ui/react-focus-guards" "1.1.1"
-    "@radix-ui/react-focus-scope" "1.1.0"
+    "@radix-ui/react-focus-scope" "1.1.2"
     "@radix-ui/react-id" "1.1.0"
-    "@radix-ui/react-portal" "1.1.2"
-    "@radix-ui/react-presence" "1.1.1"
-    "@radix-ui/react-primitive" "2.0.0"
-    "@radix-ui/react-slot" "1.1.0"
+    "@radix-ui/react-portal" "1.1.4"
+    "@radix-ui/react-presence" "1.1.2"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-slot" "1.1.2"
     "@radix-ui/react-use-controllable-state" "1.1.0"
-    aria-hidden "^1.1.1"
-    react-remove-scroll "2.6.0"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
 
-"@radix-ui/react-dismissable-layer@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz#cbdcb739c5403382bdde5f9243042ba643883396"
-  integrity sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==
+"@radix-ui/react-direction@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.1.0.tgz#a7d39855f4d077adc2a1922f9c353c5977a09cdc"
+  integrity sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==
+
+"@radix-ui/react-dismissable-layer@1.1.5":
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.5.tgz#96dde2be078c694a621e55e047406c58cd5fe774"
+  integrity sha512-E4TywXY6UsXNRhFrECa5HAvE5/4BFcGyfTyK36gP+pAW1ed7UTK4vKwdr53gAJYwqbfCWC6ATvJa3J3R/9+Qrg==
   dependencies:
-    "@radix-ui/primitive" "1.1.0"
-    "@radix-ui/react-compose-refs" "1.1.0"
-    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.2"
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-escape-keydown" "1.1.0"
 
 "@radix-ui/react-focus-guards@1.1.1":
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
+  resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz#8635edd346304f8b42cae86b05912b61aef27afe"
   integrity sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==
 
-"@radix-ui/react-focus-scope@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz#ebe2891a298e0a33ad34daab2aad8dea31caf0b2"
-  integrity sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==
+"@radix-ui/react-focus-scope@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.2.tgz#c0a4519cd95c772606a82fc5b96226cd7fdd2602"
+  integrity sha512-zxwE80FCU7lcXUGWkdt6XpTTCKPitG1XKOwViTxHVKIJhZl9MvIl2dVHeZENCWD9+EdWv05wlaEkRXUykU27RA==
   dependencies:
-    "@radix-ui/react-compose-refs" "1.1.0"
-    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.2"
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
 "@radix-ui/react-id@1.1.0", "@radix-ui/react-id@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
+  resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz#de47339656594ad722eb87f94a6b25f9cffae0ed"
   integrity sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-portal@1.1.2":
+"@radix-ui/react-portal@1.1.4":
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.4.tgz#ff5401ff63c8a825c46eea96d3aef66074b8c0c8"
+  integrity sha512-sn2O9k1rPFYVyKd5LAJfo96JlSGVFpa1fS6UuBJfrZadudiw5tAmru+n1x7aMRQ84qDM71Zh1+SzK5QwU0tJfA==
+  dependencies:
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-use-layout-effect" "1.1.0"
+
+"@radix-ui/react-presence@1.1.2":
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.1.2.tgz#51eb46dae7505074b306ebcb985bf65cc547d74e"
-  integrity sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==
+  resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz#bb764ed8a9118b7ec4512da5ece306ded8703cdc"
+  integrity sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==
   dependencies:
-    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-compose-refs" "1.1.1"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-presence@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.1.1.tgz#98aba423dba5e0c687a782c0669dcd99de17f9b1"
-  integrity sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==
+"@radix-ui/react-primitive@2.0.2", "@radix-ui/react-primitive@^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz#ac8b7854d87b0d7af388d058268d9a7eb64ca8ef"
+  integrity sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==
   dependencies:
-    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-slot" "1.1.2"
+
+"@radix-ui/react-scroll-area@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.3.tgz#6a9a7897add739ce84b517796ee345d495893d3f"
+  integrity sha512-l7+NNBfBYYJa9tNqVcP2AGvxdE3lmE6kFTBXdvHgUaZuy+4wGCL1Cl2AfaR7RKyimj7lZURGLwFO59k4eBnDJQ==
+  dependencies:
+    "@radix-ui/number" "1.1.0"
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-presence" "1.1.2"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-primitive@2.0.0", "@radix-ui/react-primitive@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884"
-  integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==
+"@radix-ui/react-slot@1.1.2", "@radix-ui/react-slot@^1.1.1":
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz#daffff7b2bfe99ade63b5168407680b93c00e1c6"
+  integrity sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==
   dependencies:
-    "@radix-ui/react-slot" "1.1.0"
-
-"@radix-ui/react-slot@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
-  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
-  dependencies:
-    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.1"
 
 "@radix-ui/react-use-callback-ref@1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1"
   integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==
 
 "@radix-ui/react-use-controllable-state@1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz#1321446857bb786917df54c0d4d084877aab04b0"
   integrity sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
 "@radix-ui/react-use-escape-keydown@1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz#31a5b87c3b726504b74e05dac1edce7437b98754"
   integrity sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==
   dependencies:
     "@radix-ui/react-use-callback-ref" "1.1.0"
 
 "@radix-ui/react-use-layout-effect@1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27"
   integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==
 
 "@react-pdf/fns@2.2.1":
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@react-pdf/fns/-/fns-2.2.1.tgz#04fe664a6f70214569c9c27e249e3395836f37d5"
+  resolved "https://registry.npmjs.org/@react-pdf/fns/-/fns-2.2.1.tgz#04fe664a6f70214569c9c27e249e3395836f37d5"
   integrity sha512-s78aDg0vDYaijU5lLOCsUD+qinQbfOvcNeaoX9AiE7+kZzzCo6B/nX+l48cmt9OosJmvZvE9DWR9cLhrhOi2pA==
   dependencies:
     "@babel/runtime" "^7.20.13"
 
 "@react-pdf/font@^2.5.2":
   version "2.5.2"
-  resolved "https://registry.yarnpkg.com/@react-pdf/font/-/font-2.5.2.tgz#4a2fcaac3b55470a2727387ec28937b54cba0d77"
+  resolved "https://registry.npmjs.org/@react-pdf/font/-/font-2.5.2.tgz#4a2fcaac3b55470a2727387ec28937b54cba0d77"
   integrity sha512-Ud0EfZ2FwrbvwAWx8nz+KKLmiqACCH9a/N/xNDOja0e/YgSnqTpuyHegFBgIMKjuBtO5dNvkb4dXkxAhGe/ayw==
   dependencies:
     "@babel/runtime" "^7.20.13"
@@ -2402,7 +2390,7 @@
 
 "@react-pdf/image@^2.3.6":
   version "2.3.6"
-  resolved "https://registry.yarnpkg.com/@react-pdf/image/-/image-2.3.6.tgz#72444842517f8b0c08bbf4c216d8b41110498d16"
+  resolved "https://registry.npmjs.org/@react-pdf/image/-/image-2.3.6.tgz#72444842517f8b0c08bbf4c216d8b41110498d16"
   integrity sha512-7iZDYZrZlJqNzS6huNl2XdMcLFUo68e6mOdzQeJ63d5eApdthhSHBnkGzHfLhH5t8DCpZNtClmklzuLL63ADfw==
   dependencies:
     "@babel/runtime" "^7.20.13"
@@ -2412,7 +2400,7 @@
 
 "@react-pdf/layout@^3.13.0":
   version "3.13.0"
-  resolved "https://registry.yarnpkg.com/@react-pdf/layout/-/layout-3.13.0.tgz#2ef1423f32e891b5ec24f2d9d5c2daad4da01c66"
+  resolved "https://registry.npmjs.org/@react-pdf/layout/-/layout-3.13.0.tgz#2ef1423f32e891b5ec24f2d9d5c2daad4da01c66"
   integrity sha512-lpPj/EJYHFOc0ALiJwLP09H28B4ADyvTjxOf67xTF+qkWd+dq1vg7dw3wnYESPnWk5T9NN+HlUenJqdYEY9AvA==
   dependencies:
     "@babel/runtime" "^7.20.13"
@@ -2430,7 +2418,7 @@
 
 "@react-pdf/pdfkit@^3.2.0":
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@react-pdf/pdfkit/-/pdfkit-3.2.0.tgz#d4a088b8cc61c35512dc885e67ff2c6058518bea"
+  resolved "https://registry.npmjs.org/@react-pdf/pdfkit/-/pdfkit-3.2.0.tgz#d4a088b8cc61c35512dc885e67ff2c6058518bea"
   integrity sha512-OBfCcnTC6RpD9uv9L2woF60Zj1uQxhLFzTBXTdcYE9URzPE/zqXIyzpXEA4Vf3TFbvBCgFE2RzJ2ZUS0asq7yA==
   dependencies:
     "@babel/runtime" "^7.20.13"
@@ -2443,19 +2431,19 @@
 
 "@react-pdf/png-js@^2.3.1":
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@react-pdf/png-js/-/png-js-2.3.1.tgz#5381d5443ac1134e98fc446fa1debb45950665bc"
+  resolved "https://registry.npmjs.org/@react-pdf/png-js/-/png-js-2.3.1.tgz#5381d5443ac1134e98fc446fa1debb45950665bc"
   integrity sha512-pEZ18I4t1vAUS4lmhvXPmXYP4PHeblpWP/pAlMMRkEyP7tdAeHUN7taQl9sf9OPq7YITMY3lWpYpJU6t4CZgZg==
   dependencies:
     browserify-zlib "^0.2.0"
 
 "@react-pdf/primitives@^3.1.1":
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@react-pdf/primitives/-/primitives-3.1.1.tgz#45a3253806fa61046f3821b8553bfee3cd848d14"
+  resolved "https://registry.npmjs.org/@react-pdf/primitives/-/primitives-3.1.1.tgz#45a3253806fa61046f3821b8553bfee3cd848d14"
   integrity sha512-miwjxLwTnO3IjoqkTVeTI+9CdyDggwekmSLhVCw+a/7FoQc+gF3J2dSKwsHvAcVFM0gvU8mzCeTofgw0zPDq0w==
 
 "@react-pdf/render@^3.5.0":
   version "3.5.0"
-  resolved "https://registry.yarnpkg.com/@react-pdf/render/-/render-3.5.0.tgz#1be1f7ca280473680ce4f11e90b697e2c635ad16"
+  resolved "https://registry.npmjs.org/@react-pdf/render/-/render-3.5.0.tgz#1be1f7ca280473680ce4f11e90b697e2c635ad16"
   integrity sha512-gFOpnyqCgJ6l7VzfJz6rG1i2S7iVSD8bUHDjPW9Mze8TmyksHzN2zBH3y7NbsQOw1wU6hN4NhRmslrsn+BRDPA==
   dependencies:
     "@babel/runtime" "^7.20.13"
@@ -2471,7 +2459,7 @@
 
 "@react-pdf/renderer@^3.4.5":
   version "3.4.5"
-  resolved "https://registry.yarnpkg.com/@react-pdf/renderer/-/renderer-3.4.5.tgz#e369149d12815b53934183353fcfcee2386fb862"
+  resolved "https://registry.npmjs.org/@react-pdf/renderer/-/renderer-3.4.5.tgz#e369149d12815b53934183353fcfcee2386fb862"
   integrity sha512-O1N8q45bTs7YuC+x9afJSKQWDYQy2RjoCxlxEGdbCwP+WD5G6dWRUWXlc8F0TtzU3uFglYMmDab2YhXTmnVN9g==
   dependencies:
     "@babel/runtime" "^7.20.13"
@@ -2489,7 +2477,7 @@
 
 "@react-pdf/stylesheet@^4.3.0":
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@react-pdf/stylesheet/-/stylesheet-4.3.0.tgz#3b0ad11e8d304347c8de5caacaa708f16d4a0473"
+  resolved "https://registry.npmjs.org/@react-pdf/stylesheet/-/stylesheet-4.3.0.tgz#3b0ad11e8d304347c8de5caacaa708f16d4a0473"
   integrity sha512-x7IVZOqRrUum9quuDeFXBveXwBht+z/6B0M+z4a4XjfSg1vZVvzoTl07Oa1yvQ/4yIC5yIkG2TSMWeKnDB+hrw==
   dependencies:
     "@babel/runtime" "^7.20.13"
@@ -2502,7 +2490,7 @@
 
 "@react-pdf/textkit@^4.4.1":
   version "4.4.1"
-  resolved "https://registry.yarnpkg.com/@react-pdf/textkit/-/textkit-4.4.1.tgz#b4e4181ea7d4269c54a1794d4022b55c5135f0e7"
+  resolved "https://registry.npmjs.org/@react-pdf/textkit/-/textkit-4.4.1.tgz#b4e4181ea7d4269c54a1794d4022b55c5135f0e7"
   integrity sha512-Jl9wdTqIvJ5pX+vAGz0EOhP7ut5Two9H6CzTKo/YYPeD79cM2yTXF3JzTERBC28y7LR0Waq9D2LHQjI+b/EYUQ==
   dependencies:
     "@babel/runtime" "^7.20.13"
@@ -2512,13 +2500,13 @@
     unicode-properties "^1.4.1"
 
 "@react-pdf/types@^2.6.0":
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/@react-pdf/types/-/types-2.7.0.tgz#56a0232ce420c313fe67cef193cbf57870a01477"
-  integrity sha512-7KrPPCpgRPKR+g+T127PE4bpw9Q84ZiY07EYRwXKVtTEVW9wJ5BZiF9smT9IvH19s+MQaDLmYRgjESsnqlyH0Q==
+  version "2.7.1"
+  resolved "https://registry.npmjs.org/@react-pdf/types/-/types-2.7.1.tgz#eb9f70be66b42c47f60c5afcc0af044ac48b98bf"
+  integrity sha512-MyjR1u+6SclQ/Tx6NP3/yoYZw7reXgC4OHFOrdMh/zeZ+ezfdGyovB+jdmVQuMe7Fsh64v7PUkO5tnsXHyCFWQ==
 
 "@react-spring/animated@~9.7.5":
   version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.5.tgz#eb0373aaf99b879736b380c2829312dae3b05f28"
+  resolved "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz#eb0373aaf99b879736b380c2829312dae3b05f28"
   integrity sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==
   dependencies:
     "@react-spring/shared" "~9.7.5"
@@ -2526,7 +2514,7 @@
 
 "@react-spring/core@~9.7.5":
   version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.5.tgz#72159079f52c1c12813d78b52d4f17c0bf6411f7"
+  resolved "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz#72159079f52c1c12813d78b52d4f17c0bf6411f7"
   integrity sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==
   dependencies:
     "@react-spring/animated" "~9.7.5"
@@ -2535,12 +2523,12 @@
 
 "@react-spring/rafz@~9.7.5":
   version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.7.5.tgz#ee7959676e7b5d6a3813e8c17d5e50df98b95df9"
+  resolved "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz#ee7959676e7b5d6a3813e8c17d5e50df98b95df9"
   integrity sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==
 
 "@react-spring/shared@~9.7.5":
   version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.5.tgz#6d513622df6ad750bbbd4dedb4ca0a653ec92073"
+  resolved "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz#6d513622df6ad750bbbd4dedb4ca0a653ec92073"
   integrity sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==
   dependencies:
     "@react-spring/rafz" "~9.7.5"
@@ -2548,12 +2536,12 @@
 
 "@react-spring/types@~9.7.5":
   version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.5.tgz#e5dd180f3ed985b44fd2cd2f32aa9203752ef3e8"
+  resolved "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz#e5dd180f3ed985b44fd2cd2f32aa9203752ef3e8"
   integrity sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==
 
 "@react-spring/web@9.4.5 || ^9.7.2":
   version "9.7.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.5.tgz#7d7782560b3a6fb9066b52824690da738605de80"
+  resolved "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz#7d7782560b3a6fb9066b52824690da738605de80"
   integrity sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==
   dependencies:
     "@react-spring/animated" "~9.7.5"
@@ -2563,12 +2551,12 @@
 
 "@remirror/core-constants@3.0.0":
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-3.0.0.tgz#96fdb89d25c62e7b6a5d08caf0ce5114370e3b8f"
+  resolved "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz#96fdb89d25c62e7b6a5d08caf0ce5114370e3b8f"
   integrity sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==
 
 "@rollup/plugin-commonjs@28.0.1":
   version "28.0.1"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.1.tgz#e2138e31cc0637676dc3d5cae7739131f7cd565e"
+  resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.1.tgz#e2138e31cc0637676dc3d5cae7739131f7cd565e"
   integrity sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA==
   dependencies:
     "@rollup/pluginutils" "^5.0.1"
@@ -2580,195 +2568,173 @@
     picomatch "^4.0.2"
 
 "@rollup/pluginutils@^5.0.1":
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf"
-  integrity sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==
+  version "5.1.4"
+  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz#bb94f1f9eaaac944da237767cdfee6c5b2262d4a"
+  integrity sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^2.0.2"
     picomatch "^4.0.2"
 
-"@rollup/rollup-android-arm-eabi@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.28.1.tgz#7f4c4d8cd5ccab6e95d6750dbe00321c1f30791e"
-  integrity sha512-2aZp8AES04KI2dy3Ss6/MDjXbwBzj+i0GqKtWXgw2/Ma6E4jJvujryO6gJAghIRVz7Vwr9Gtl/8na3nDUKpraQ==
+"@rollup/rollup-android-arm-eabi@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.6.tgz#9b726b4dcafb9332991e9ca49d54bafc71d9d87f"
+  integrity sha512-+GcCXtOQoWuC7hhX1P00LqjjIiS/iOouHXhMdiDSnq/1DGTox4SpUvO52Xm+div6+106r+TcvOeo/cxvyEyTgg==
 
-"@rollup/rollup-android-arm64@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.28.1.tgz#17ea71695fb1518c2c324badbe431a0bd1879f2d"
-  integrity sha512-EbkK285O+1YMrg57xVA+Dp0tDBRB93/BZKph9XhMjezf6F4TpYjaUSuPt5J0fZXlSag0LmZAsTmdGGqPp4pQFA==
+"@rollup/rollup-android-arm64@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.6.tgz#88326ff46168a47851077ca0bf0c442689ec088f"
+  integrity sha512-E8+2qCIjciYUnCa1AiVF1BkRgqIGW9KzJeesQqVfyRITGQN+dFuoivO0hnro1DjT74wXLRZ7QF8MIbz+luGaJA==
 
-"@rollup/rollup-darwin-arm64@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.28.1.tgz#dac0f0d0cfa73e7d5225ae6d303c13c8979e7999"
-  integrity sha512-prduvrMKU6NzMq6nxzQw445zXgaDBbMQvmKSJaxpaZ5R1QDM8w+eGxo6Y/jhT/cLoCvnZI42oEqf9KQNYz1fqQ==
+"@rollup/rollup-darwin-arm64@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.6.tgz#b8fbcc9389bc6fad3334a1d16dbeaaa5637c5772"
+  integrity sha512-z9Ib+OzqN3DZEjX7PDQMHEhtF+t6Mi2z/ueChQPLS/qUMKY7Ybn5A2ggFoKRNRh1q1T03YTQfBTQCJZiepESAg==
 
-"@rollup/rollup-darwin-x64@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.28.1.tgz#8f63baa1d31784904a380d2e293fa1ddf53dd4a2"
-  integrity sha512-WsvbOunsUk0wccO/TV4o7IKgloJ942hVFK1CLatwv6TJspcCZb9umQkPdvB7FihmdxgaKR5JyxDjWpCOp4uZlQ==
+"@rollup/rollup-darwin-x64@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.6.tgz#1aa2bcad84c0fb5902e945d88822e17a4f661d51"
+  integrity sha512-PShKVY4u0FDAR7jskyFIYVyHEPCPnIQY8s5OcXkdU8mz3Y7eXDJPdyM/ZWjkYdR2m0izD9HHWA8sGcXn+Qrsyg==
 
-"@rollup/rollup-freebsd-arm64@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.28.1.tgz#30ed247e0df6e8858cdc6ae4090e12dbeb8ce946"
-  integrity sha512-HTDPdY1caUcU4qK23FeeGxCdJF64cKkqajU0iBnTVxS8F7H/7BewvYoG+va1KPSL63kQ1PGNyiwKOfReavzvNA==
+"@rollup/rollup-freebsd-arm64@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.6.tgz#29c54617e0929264dcb6416597d6d7481696e49f"
+  integrity sha512-YSwyOqlDAdKqs0iKuqvRHLN4SrD2TiswfoLfvYXseKbL47ht1grQpq46MSiQAx6rQEN8o8URtpXARCpqabqxGQ==
 
-"@rollup/rollup-freebsd-x64@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.28.1.tgz#57846f382fddbb508412ae07855b8a04c8f56282"
-  integrity sha512-m/uYasxkUevcFTeRSM9TeLyPe2QDuqtjkeoTpP9SW0XxUWfcYrGDMkO/m2tTw+4NMAF9P2fU3Mw4ahNvo7QmsQ==
+"@rollup/rollup-freebsd-x64@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.6.tgz#a8b58ab7d31882559d93f2d1b5863d9e4b4b2678"
+  integrity sha512-HEP4CgPAY1RxXwwL5sPFv6BBM3tVeLnshF03HMhJYCNc6kvSqBgTMmsEjb72RkZBAWIqiPUyF1JpEBv5XT9wKQ==
 
-"@rollup/rollup-linux-arm-gnueabihf@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.28.1.tgz#378ca666c9dae5e6f94d1d351e7497c176e9b6df"
-  integrity sha512-QAg11ZIt6mcmzpNE6JZBpKfJaKkqTm1A9+y9O+frdZJEuhQxiugM05gnCWiANHj4RmbgeVJpTdmKRmH/a+0QbA==
+"@rollup/rollup-linux-arm-gnueabihf@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.6.tgz#a844e1978c8b9766b169ecb1cb5cc0d8a3f05930"
+  integrity sha512-88fSzjC5xeH9S2Vg3rPgXJULkHcLYMkh8faix8DX4h4TIAL65ekwuQMA/g2CXq8W+NJC43V6fUpYZNjaX3+IIg==
 
-"@rollup/rollup-linux-arm-musleabihf@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.28.1.tgz#a692eff3bab330d5c33a5d5813a090c15374cddb"
-  integrity sha512-dRP9PEBfolq1dmMcFqbEPSd9VlRuVWEGSmbxVEfiq2cs2jlZAl0YNxFzAQS2OrQmsLBLAATDMb3Z6MFv5vOcXg==
+"@rollup/rollup-linux-arm-musleabihf@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.6.tgz#6b44c3b7257985d71b087fcb4ef01325e2fff201"
+  integrity sha512-wM4ztnutBqYFyvNeR7Av+reWI/enK9tDOTKNF+6Kk2Q96k9bwhDDOlnCUNRPvromlVXo04riSliMBs/Z7RteEg==
 
-"@rollup/rollup-linux-arm64-gnu@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.28.1.tgz#6b1719b76088da5ac1ae1feccf48c5926b9e3db9"
-  integrity sha512-uGr8khxO+CKT4XU8ZUH1TTEUtlktK6Kgtv0+6bIFSeiSlnGJHG1tSFSjm41uQ9sAO/5ULx9mWOz70jYLyv1QkA==
+"@rollup/rollup-linux-arm64-gnu@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.6.tgz#ebb499cf1720115256d0c9ae7598c90cc2251bc5"
+  integrity sha512-9RyprECbRa9zEjXLtvvshhw4CMrRa3K+0wcp3KME0zmBe1ILmvcVHnypZ/aIDXpRyfhSYSuN4EPdCCj5Du8FIA==
 
-"@rollup/rollup-linux-arm64-musl@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.28.1.tgz#865baf5b6f5ff67acb32e5a359508828e8dc5788"
-  integrity sha512-QF54q8MYGAqMLrX2t7tNpi01nvq5RI59UBNx+3+37zoKX5KViPo/gk2QLhsuqok05sSCRluj0D00LzCwBikb0A==
+"@rollup/rollup-linux-arm64-musl@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.6.tgz#9658221b59d9e5643348f9a52fa5ef35b4dc07b1"
+  integrity sha512-qTmklhCTyaJSB05S+iSovfo++EwnIEZxHkzv5dep4qoszUMX5Ca4WM4zAVUMbfdviLgCSQOu5oU8YoGk1s6M9Q==
 
-"@rollup/rollup-linux-loongarch64-gnu@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.28.1.tgz#23c6609ba0f7fa7a7f2038b6b6a08555a5055a87"
-  integrity sha512-vPul4uodvWvLhRco2w0GcyZcdyBfpfDRgNKU+p35AWEbJ/HPs1tOUrkSueVbBS0RQHAf/A+nNtDpvw95PeVKOA==
+"@rollup/rollup-linux-loongarch64-gnu@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.6.tgz#19418cc57579a5655af2d850a89d74b3f7e9aa92"
+  integrity sha512-4Qmkaps9yqmpjY5pvpkfOerYgKNUGzQpFxV6rnS7c/JfYbDSU0y6WpbbredB5cCpLFGJEqYX40WUmxMkwhWCjw==
 
-"@rollup/rollup-linux-powerpc64le-gnu@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.28.1.tgz#652ef0d9334a9f25b9daf85731242801cb0fc41c"
-  integrity sha512-pTnTdBuC2+pt1Rmm2SV7JWRqzhYpEILML4PKODqLz+C7Ou2apEV52h19CR7es+u04KlqplggmN9sqZlekg3R1A==
+"@rollup/rollup-linux-powerpc64le-gnu@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.6.tgz#fe0bce7778cb6ce86898c781f3f11369d1a4952c"
+  integrity sha512-Zsrtux3PuaxuBTX/zHdLaFmcofWGzaWW1scwLU3ZbW/X+hSsFbz9wDIp6XvnT7pzYRl9MezWqEqKy7ssmDEnuQ==
 
-"@rollup/rollup-linux-riscv64-gnu@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.28.1.tgz#1eb6651839ee6ebca64d6cc64febbd299e95e6bd"
-  integrity sha512-vWXy1Nfg7TPBSuAncfInmAI/WZDd5vOklyLJDdIRKABcZWojNDY0NJwruY2AcnCLnRJKSaBgf/GiJfauu8cQZA==
+"@rollup/rollup-linux-riscv64-gnu@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.6.tgz#9c158360abf6e6f7794285642ba0898c580291f6"
+  integrity sha512-aK+Zp+CRM55iPrlyKiU3/zyhgzWBxLVrw2mwiQSYJRobCURb781+XstzvA8Gkjg/hbdQFuDw44aUOxVQFycrAg==
 
-"@rollup/rollup-linux-s390x-gnu@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.28.1.tgz#015c52293afb3ff2a293cf0936b1d43975c1e9cd"
-  integrity sha512-/yqC2Y53oZjb0yz8PVuGOQQNOTwxcizudunl/tFs1aLvObTclTwZ0JhXF2XcPT/zuaymemCDSuuUPXJJyqeDOg==
+"@rollup/rollup-linux-s390x-gnu@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.6.tgz#f9113498d22962baacdda008b5587d568b05aa34"
+  integrity sha512-WoKLVrY9ogmaYPXwTH326+ErlCIgMmsoRSx6bO+l68YgJnlOXhygDYSZe/qbUJCSiCiZAQ+tKm88NcWuUXqOzw==
 
-"@rollup/rollup-linux-x64-gnu@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.28.1.tgz#b83001b5abed2bcb5e2dbeec6a7e69b194235c1e"
-  integrity sha512-fzgeABz7rrAlKYB0y2kSEiURrI0691CSL0+KXwKwhxvj92VULEDQLpBYLHpF49MSiPG4sq5CK3qHMnb9tlCjBw==
+"@rollup/rollup-linux-x64-gnu@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.6.tgz#aec8d4cdf911cd869a72b8bd00833cb426664e0c"
+  integrity sha512-Sht4aFvmA4ToHd2vFzwMFaQCiYm2lDFho5rPcvPBT5pCdC+GwHG6CMch4GQfmWTQ1SwRKS0dhDYb54khSrjDWw==
 
-"@rollup/rollup-linux-x64-musl@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.28.1.tgz#6cc7c84cd4563737f8593e66f33b57d8e228805b"
-  integrity sha512-xQTDVzSGiMlSshpJCtudbWyRfLaNiVPXt1WgdWTwWz9n0U12cI2ZVtWe/Jgwyv/6wjL7b66uu61Vg0POWVfz4g==
+"@rollup/rollup-linux-x64-musl@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.6.tgz#61c0a146bdd1b5e0dcda33690dd909b321d8f20f"
+  integrity sha512-zmmpOQh8vXc2QITsnCiODCDGXFC8LMi64+/oPpPx5qz3pqv0s6x46ps4xoycfUiVZps5PFn1gksZzo4RGTKT+A==
 
-"@rollup/rollup-win32-arm64-msvc@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.28.1.tgz#631ffeee094d71279fcd1fe8072bdcf25311bc11"
-  integrity sha512-wSXmDRVupJstFP7elGMgv+2HqXelQhuNf+IS4V+nUpNVi/GUiBgDmfwD0UGN3pcAnWsgKG3I52wMOBnk1VHr/A==
+"@rollup/rollup-win32-arm64-msvc@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.6.tgz#c6c5bf290a3a459c18871110bc2e7009ce35b15a"
+  integrity sha512-3/q1qUsO/tLqGBaD4uXsB6coVGB3usxw3qyeVb59aArCgedSF66MPdgRStUd7vbZOsko/CgVaY5fo2vkvPLWiA==
 
-"@rollup/rollup-win32-ia32-msvc@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.28.1.tgz#06d1d60d5b9f718e8a6c4a43f82e3f9e3254587f"
-  integrity sha512-ZkyTJ/9vkgrE/Rk9vhMXhf8l9D+eAhbAVbsGsXKy2ohmJaWg0LPQLnIxRdRp/bKyr8tXuPlXhIoGlEB5XpJnGA==
+"@rollup/rollup-win32-ia32-msvc@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.6.tgz#16ca6bdadc9e054818b9c51f8dac82f6b8afab81"
+  integrity sha512-oLHxuyywc6efdKVTxvc0135zPrRdtYVjtVD5GUm55I3ODxhU/PwkQFD97z16Xzxa1Fz0AEe4W/2hzRtd+IfpOA==
 
-"@rollup/rollup-win32-x64-msvc@4.28.1":
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.28.1.tgz#4dff5c4259ebe6c5b4a8f2c5bc3829b7a8447ff0"
-  integrity sha512-ZvK2jBafvttJjoIdKm/Q/Bh7IJ1Ose9IBOwpOXcOvW3ikGTQGmKDgxTC6oCAzW6PynbkKP8+um1du81XJHZ0JA==
+"@rollup/rollup-win32-x64-msvc@4.34.6":
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.6.tgz#f3d03ce2d82723eb089188ea1494a719b09e1561"
+  integrity sha512-0PVwmgzZ8+TZ9oGBmdZoQVXflbvuwzN/HRclujpl4N/q3i+y0lqLw8n1bXA8ru3sApDjlmONaNAuYr38y1Kr9w==
 
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
+  resolved "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
   integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
 
 "@rushstack/eslint-patch@^1.3.3":
-  version "1.10.4"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz#427d5549943a9c6fce808e39ea64dbe60d4047f1"
-  integrity sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==
+  version "1.10.5"
+  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.5.tgz#3a1c12c959010a55c17d46b395ed3047b545c246"
+  integrity sha512-kkKUDVlII2DQiKy7UstOR1ErJP8kUKAQ4oa+SQtM0K+lPdmmjj0YnnxBgtTVYH7mUKtbsxeFC9y0AmK7Yb78/A==
 
-"@scena/dragscroll@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@scena/dragscroll/-/dragscroll-1.4.0.tgz#220b2430c16119cd3e70044ee533a5b9a43cffd7"
-  integrity sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==
+"@sentry-internal/browser-utils@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.54.0.tgz#2d68c7fa843db867ed98059faf1a750be3eca95a"
+  integrity sha512-DKWCqb4YQosKn6aD45fhKyzhkdG7N6goGFDeyTaJFREJDFVDXiNDsYZu30nJ6BxMM7uQIaARhPAC5BXfoED3pQ==
   dependencies:
-    "@daybrush/utils" "^1.6.0"
-    "@scena/event-emitter" "^1.0.2"
+    "@sentry/core" "8.54.0"
 
-"@scena/event-emitter@^1.0.2", "@scena/event-emitter@^1.0.5":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@scena/event-emitter/-/event-emitter-1.0.5.tgz#047e3acef93cf238d7ce3a8cc5a12ec6bd9c3bb1"
-  integrity sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==
+"@sentry-internal/feedback@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-8.54.0.tgz#52c3a63aa5b520eca7acfa1376621e8441984126"
+  integrity sha512-nQqRacOXoElpE0L0ADxUUII0I3A94niqG9Z4Fmsw6057QvyrV/LvTiMQBop6r5qLjwMqK+T33iR4/NQI5RhsXQ==
   dependencies:
-    "@daybrush/utils" "^1.1.1"
+    "@sentry/core" "8.54.0"
 
-"@scena/matrix@^1.0.0", "@scena/matrix@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@scena/matrix/-/matrix-1.1.1.tgz#5297f71825c72e2c2c8f802f924f482ed200c43c"
-  integrity sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==
+"@sentry-internal/replay-canvas@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-8.54.0.tgz#e57a3893db2bb0ea7ad9dc2a804bb035142fe3ba"
+  integrity sha512-K/On3OAUBeq/TV2n+1EvObKC+WMV9npVXpVyJqCCyn8HYMm8FUGzuxeajzm0mlW4wDTPCQor6mK9/IgOquUzCw==
   dependencies:
-    "@daybrush/utils" "^1.4.0"
+    "@sentry-internal/replay" "8.54.0"
+    "@sentry/core" "8.54.0"
 
-"@sentry-internal/browser-utils@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.42.0.tgz#18155ea3d01ddb0234a6e9f59a2c6c329ff09dde"
-  integrity sha512-xzgRI0wglKYsPrna574w1t38aftuvo44gjOKFvPNGPnYfiW9y4m+64kUz3JFbtanvOrKPcaITpdYiB4DeJXEbA==
+"@sentry-internal/replay@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry-internal/replay/-/replay-8.54.0.tgz#b92990a51ffbe8d92998ff8188db9e3a6f9d1e18"
+  integrity sha512-8xuBe06IaYIGJec53wUC12tY2q4z2Z0RPS2s1sLtbA00EvK1YDGuXp96IDD+HB9mnDMrQ/jW5f97g9TvPsPQUg==
   dependencies:
-    "@sentry/core" "8.42.0"
+    "@sentry-internal/browser-utils" "8.54.0"
+    "@sentry/core" "8.54.0"
 
-"@sentry-internal/feedback@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.42.0.tgz#20275774ab81b9cf776a2ab2f8b17269b8f5f62f"
-  integrity sha512-dkIw5Wdukwzngg5gNJ0QcK48LyJaMAnBspqTqZ3ItR01STi6Z+6+/Bt5XgmrvDgRD+FNBinflc5zMmfdFXXhvw==
+"@sentry/babel-plugin-component-annotate@2.22.7":
+  version "2.22.7"
+  resolved "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.22.7.tgz#604c7e33d48528a13477e7af597c4d5fca51b8bd"
+  integrity sha512-aa7XKgZMVl6l04NY+3X7BP7yvQ/s8scn8KzQfTLrGRarziTlMGrsCOBQtCNWXOPEbtxAIHpZ9dsrAn5EJSivOQ==
+
+"@sentry/browser@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry/browser/-/browser-8.54.0.tgz#5487075908aac564892e689e1b6d233fdb314f5b"
+  integrity sha512-BgUtvxFHin0fS0CmJVKTLXXZcke0Av729IVfi+2fJ4COX8HO7/HAP02RKaSQGmL2HmvWYTfNZ7529AnUtrM4Rg==
   dependencies:
-    "@sentry/core" "8.42.0"
+    "@sentry-internal/browser-utils" "8.54.0"
+    "@sentry-internal/feedback" "8.54.0"
+    "@sentry-internal/replay" "8.54.0"
+    "@sentry-internal/replay-canvas" "8.54.0"
+    "@sentry/core" "8.54.0"
 
-"@sentry-internal/replay-canvas@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.42.0.tgz#4b8cf2e6e390a697038123f80208368bf507fb5d"
-  integrity sha512-XrPErqVhPsPh/oFLVKvz7Wb+Fi2J1zCPLeZCxWqFuPWI2agRyLVu0KvqJyzSpSrRAEJC/XFzuSVILlYlXXSfgA==
-  dependencies:
-    "@sentry-internal/replay" "8.42.0"
-    "@sentry/core" "8.42.0"
-
-"@sentry-internal/replay@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.42.0.tgz#9024eb254e60295d303899c904db8ba933e17d05"
-  integrity sha512-oNcJEBlDfXnRFYC5Mxj5fairyZHNqlnU4g8kPuztB9G5zlsyLgWfPxzcn1ixVQunth2/WZRklDi4o1ZfyHww7w==
-  dependencies:
-    "@sentry-internal/browser-utils" "8.42.0"
-    "@sentry/core" "8.42.0"
-
-"@sentry/babel-plugin-component-annotate@2.22.6":
-  version "2.22.6"
-  resolved "https://registry.yarnpkg.com/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.22.6.tgz#829d6caf2c95c1c46108336de4e1049e6521435e"
-  integrity sha512-V2g1Y1I5eSe7dtUVMBvAJr8BaLRr4CLrgNgtPaZyMT4Rnps82SrZ5zqmEkLXPumlXhLUWR6qzoMNN2u+RXVXfQ==
-
-"@sentry/browser@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.42.0.tgz#2408a627f263adf2466b5a304957aa6c00d8351f"
-  integrity sha512-lStrEk609KJHwXfDrOgoYVVoFFExixHywxSExk7ZDtwj2YPv6r6Y1gogvgr7dAZj7jWzadHkxZ33l9EOSJBfug==
-  dependencies:
-    "@sentry-internal/browser-utils" "8.42.0"
-    "@sentry-internal/feedback" "8.42.0"
-    "@sentry-internal/replay" "8.42.0"
-    "@sentry-internal/replay-canvas" "8.42.0"
-    "@sentry/core" "8.42.0"
-
-"@sentry/bundler-plugin-core@2.22.6":
-  version "2.22.6"
-  resolved "https://registry.yarnpkg.com/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.22.6.tgz#a1ea1fd43700a3ece9e7db016997e79a2782b87d"
-  integrity sha512-1esQdgSUCww9XAntO4pr7uAM5cfGhLsgTK9MEwAKNfvpMYJi9NUTYa3A7AZmdA8V6107Lo4OD7peIPrDRbaDCg==
+"@sentry/bundler-plugin-core@2.22.7":
+  version "2.22.7"
+  resolved "https://registry.npmjs.org/@sentry/bundler-plugin-core/-/bundler-plugin-core-2.22.7.tgz#28204a224cd1fef58d157e5beeb2493947a9bc35"
+  integrity sha512-ouQh5sqcB8vsJ8yTTe0rf+iaUkwmeUlGNFi35IkCFUQlWJ22qS6OfvNjOqFI19e6eGUXks0c/2ieFC4+9wJ+1g==
   dependencies:
     "@babel/core" "^7.18.5"
-    "@sentry/babel-plugin-component-annotate" "2.22.6"
-    "@sentry/cli" "^2.36.1"
+    "@sentry/babel-plugin-component-annotate" "2.22.7"
+    "@sentry/cli" "2.39.1"
     dotenv "^16.3.1"
     find-up "^5.0.0"
     glob "^9.3.2"
@@ -2777,42 +2743,42 @@
 
 "@sentry/cli-darwin@2.39.1":
   version "2.39.1"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-darwin/-/cli-darwin-2.39.1.tgz#75c338a53834b4cf72f57599f4c72ffb36cf0781"
+  resolved "https://registry.npmjs.org/@sentry/cli-darwin/-/cli-darwin-2.39.1.tgz#75c338a53834b4cf72f57599f4c72ffb36cf0781"
   integrity sha512-kiNGNSAkg46LNGatfNH5tfsmI/kCAaPA62KQuFZloZiemTNzhy9/6NJP8HZ/GxGs8GDMxic6wNrV9CkVEgFLJQ==
 
 "@sentry/cli-linux-arm64@2.39.1":
   version "2.39.1"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.39.1.tgz#27db44700c33fcb1e8966257020b43f8494373e6"
+  resolved "https://registry.npmjs.org/@sentry/cli-linux-arm64/-/cli-linux-arm64-2.39.1.tgz#27db44700c33fcb1e8966257020b43f8494373e6"
   integrity sha512-5VbVJDatolDrWOgaffsEM7znjs0cR8bHt9Bq0mStM3tBolgAeSDHE89NgHggfZR+DJ2VWOy4vgCwkObrUD6NQw==
 
 "@sentry/cli-linux-arm@2.39.1":
   version "2.39.1"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-arm/-/cli-linux-arm-2.39.1.tgz#451683fa9a5a60b1359d104ec71334ed16f4b63c"
+  resolved "https://registry.npmjs.org/@sentry/cli-linux-arm/-/cli-linux-arm-2.39.1.tgz#451683fa9a5a60b1359d104ec71334ed16f4b63c"
   integrity sha512-DkENbxyRxUrfLnJLXTA4s5UL/GoctU5Cm4ER1eB7XN7p9WsamFJd/yf2KpltkjEyiTuplv0yAbdjl1KX3vKmEQ==
 
 "@sentry/cli-linux-i686@2.39.1":
   version "2.39.1"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-i686/-/cli-linux-i686-2.39.1.tgz#9965a81f97a94e8b6d1d15589e43fee158e35201"
+  resolved "https://registry.npmjs.org/@sentry/cli-linux-i686/-/cli-linux-i686-2.39.1.tgz#9965a81f97a94e8b6d1d15589e43fee158e35201"
   integrity sha512-pXWVoKXCRrY7N8vc9H7mETiV9ZCz+zSnX65JQCzZxgYrayQPJTc+NPRnZTdYdk5RlAupXaFicBI2GwOCRqVRkg==
 
 "@sentry/cli-linux-x64@2.39.1":
   version "2.39.1"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-linux-x64/-/cli-linux-x64-2.39.1.tgz#31fe008b02f92769543dc9919e2a5cbc4cda7889"
+  resolved "https://registry.npmjs.org/@sentry/cli-linux-x64/-/cli-linux-x64-2.39.1.tgz#31fe008b02f92769543dc9919e2a5cbc4cda7889"
   integrity sha512-IwayNZy+it7FWG4M9LayyUmG1a/8kT9+/IEm67sT5+7dkMIMcpmHDqL8rWcPojOXuTKaOBBjkVdNMBTXy0mXlA==
 
 "@sentry/cli-win32-i686@2.39.1":
   version "2.39.1"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-win32-i686/-/cli-win32-i686-2.39.1.tgz#609e8790c49414011445e397130560c777850b35"
+  resolved "https://registry.npmjs.org/@sentry/cli-win32-i686/-/cli-win32-i686-2.39.1.tgz#609e8790c49414011445e397130560c777850b35"
   integrity sha512-NglnNoqHSmE+Dz/wHeIVRnV2bLMx7tIn3IQ8vXGO5HWA2f8zYJGktbkLq1Lg23PaQmeZLPGlja3gBQfZYSG10Q==
 
 "@sentry/cli-win32-x64@2.39.1":
   version "2.39.1"
-  resolved "https://registry.yarnpkg.com/@sentry/cli-win32-x64/-/cli-win32-x64-2.39.1.tgz#1a874a5570c6d162b35d9d001c96e5389d07d2cb"
+  resolved "https://registry.npmjs.org/@sentry/cli-win32-x64/-/cli-win32-x64-2.39.1.tgz#1a874a5570c6d162b35d9d001c96e5389d07d2cb"
   integrity sha512-xv0R2CMf/X1Fte3cMWie1NXuHmUyQPDBfCyIt6k6RPFPxAYUgcqgMPznYwVMwWEA1W43PaOkSn3d8ZylsDaETw==
 
-"@sentry/cli@^2.36.1":
+"@sentry/cli@2.39.1":
   version "2.39.1"
-  resolved "https://registry.yarnpkg.com/@sentry/cli/-/cli-2.39.1.tgz#916bb5b7567ccf7fdf94ef6cf8a2b9ab78370d29"
+  resolved "https://registry.npmjs.org/@sentry/cli/-/cli-2.39.1.tgz#916bb5b7567ccf7fdf94ef6cf8a2b9ab78370d29"
   integrity sha512-JIb3e9vh0+OmQ0KxmexMXg9oZsR/G7HMwxt5BUIKAXZ9m17Xll4ETXTRnRUBT3sf7EpNGAmlQk1xEmVN9pYZYQ==
   dependencies:
     https-proxy-agent "^5.0.0"
@@ -2829,125 +2795,176 @@
     "@sentry/cli-win32-i686" "2.39.1"
     "@sentry/cli-win32-x64" "2.39.1"
 
-"@sentry/core@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.42.0.tgz#9fc0db6794186dc2d1167cf82e579e387198ba77"
-  integrity sha512-ac6O3pgoIbU6rpwz6LlwW0wp3/GAHuSI0C5IsTgIY6baN8rOBnlAtG6KrHDDkGmUQ2srxkDJu9n1O6Td3cBCqw==
+"@sentry/core@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry/core/-/core-8.54.0.tgz#a2ebec965cadcb6de89e116689feeef79d5862a6"
+  integrity sha512-03bWf+D1j28unOocY/5FDB6bUHtYlm6m6ollVejhg45ZmK9iPjdtxNWbrLsjT1WRym0Tjzowu+A3p+eebYEv0Q==
 
-"@sentry/nextjs@^8.32.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry/nextjs/-/nextjs-8.42.0.tgz#a2d7c15ab7a7ad9aebf1461b3f38267d6f43aef0"
-  integrity sha512-8gZ0kVwaMpNeDg510m/8OSIuPSahP9GaKoFwPqscbvvbk1Hd+9wdW2X6YhdY+KzKiPLmYH/dGU20CvtN0iZqeg==
+"@sentry/core@9.0.1":
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/@sentry/core/-/core-9.0.1.tgz#da0207f7a4f74eb4af4ba26ad4244056968b3e41"
+  integrity sha512-RQ3B3NfF+BdmQz1c+vj4OBO+kxvxSsYMcmCDxSEZ7YrS/6Er1kMy0fwfxmdZJMdM1LlzXmO0XWF2g1IO9CzKyQ==
+
+"@sentry/nextjs@^8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry/nextjs/-/nextjs-8.54.0.tgz#53e8c8620de95c7f3ac848b21a3e5021a11ba57d"
+  integrity sha512-TiNrT98+3AdeX/CMM8uhx0yOt/ITkx8EOJ8d1FjiRZdrR/UcY1dpq1S/m3h3T2NkwTQ9Os1A/GpDJz7LHPoL/w==
   dependencies:
     "@opentelemetry/api" "^1.9.0"
-    "@opentelemetry/instrumentation-http" "0.53.0"
-    "@opentelemetry/semantic-conventions" "^1.27.0"
+    "@opentelemetry/semantic-conventions" "^1.28.0"
     "@rollup/plugin-commonjs" "28.0.1"
-    "@sentry-internal/browser-utils" "8.42.0"
-    "@sentry/core" "8.42.0"
-    "@sentry/node" "8.42.0"
-    "@sentry/opentelemetry" "8.42.0"
-    "@sentry/react" "8.42.0"
-    "@sentry/vercel-edge" "8.42.0"
-    "@sentry/webpack-plugin" "2.22.6"
+    "@sentry-internal/browser-utils" "8.54.0"
+    "@sentry/core" "8.54.0"
+    "@sentry/node" "8.54.0"
+    "@sentry/opentelemetry" "8.54.0"
+    "@sentry/react" "8.54.0"
+    "@sentry/vercel-edge" "8.54.0"
+    "@sentry/webpack-plugin" "2.22.7"
     chalk "3.0.0"
     resolve "1.22.8"
     rollup "3.29.5"
     stacktrace-parser "^0.1.10"
 
-"@sentry/node@8.42.0", "@sentry/node@^8.28.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-8.42.0.tgz#829a02ce322bf7ee13e2bd09acc2eb56a8e04525"
-  integrity sha512-MsNrmAIwDaxf1jTX1FsgZ+3mUq6G6IuU6FAqyp7TDnvUTsbWUtr0OM6EvVUz0zCImybIh9dcTQ+6KTmUyA7URw==
+"@sentry/node@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry/node/-/node-8.54.0.tgz#4ba175e320c36263f75a88670f4a5507754cf8f0"
+  integrity sha512-z9ak481OtCw3V4l55ke/9FOiorF2J/niO1J1gvGefXpgFucpw0M3qqEFjB5cpg9HoZM8Y1WtA1OFusfTAnvcXg==
   dependencies:
     "@opentelemetry/api" "^1.9.0"
-    "@opentelemetry/context-async-hooks" "^1.25.1"
-    "@opentelemetry/core" "^1.25.1"
-    "@opentelemetry/instrumentation" "^0.54.0"
-    "@opentelemetry/instrumentation-amqplib" "^0.43.0"
-    "@opentelemetry/instrumentation-connect" "0.40.0"
-    "@opentelemetry/instrumentation-dataloader" "0.12.0"
-    "@opentelemetry/instrumentation-express" "0.44.0"
-    "@opentelemetry/instrumentation-fastify" "0.41.0"
-    "@opentelemetry/instrumentation-fs" "0.16.0"
-    "@opentelemetry/instrumentation-generic-pool" "0.39.0"
-    "@opentelemetry/instrumentation-graphql" "0.44.0"
-    "@opentelemetry/instrumentation-hapi" "0.41.0"
-    "@opentelemetry/instrumentation-http" "0.53.0"
-    "@opentelemetry/instrumentation-ioredis" "0.43.0"
-    "@opentelemetry/instrumentation-kafkajs" "0.4.0"
-    "@opentelemetry/instrumentation-knex" "0.41.0"
-    "@opentelemetry/instrumentation-koa" "0.43.0"
-    "@opentelemetry/instrumentation-lru-memoizer" "0.40.0"
-    "@opentelemetry/instrumentation-mongodb" "0.48.0"
-    "@opentelemetry/instrumentation-mongoose" "0.42.0"
-    "@opentelemetry/instrumentation-mysql" "0.41.0"
-    "@opentelemetry/instrumentation-mysql2" "0.41.0"
-    "@opentelemetry/instrumentation-nestjs-core" "0.40.0"
-    "@opentelemetry/instrumentation-pg" "0.44.0"
-    "@opentelemetry/instrumentation-redis-4" "0.42.0"
-    "@opentelemetry/instrumentation-tedious" "0.15.0"
-    "@opentelemetry/instrumentation-undici" "0.6.0"
-    "@opentelemetry/resources" "^1.26.0"
-    "@opentelemetry/sdk-trace-base" "^1.26.0"
-    "@opentelemetry/semantic-conventions" "^1.27.0"
-    "@prisma/instrumentation" "5.19.1"
-    "@sentry/core" "8.42.0"
-    "@sentry/opentelemetry" "8.42.0"
+    "@opentelemetry/context-async-hooks" "^1.30.1"
+    "@opentelemetry/core" "^1.30.1"
+    "@opentelemetry/instrumentation" "^0.57.1"
+    "@opentelemetry/instrumentation-amqplib" "^0.46.0"
+    "@opentelemetry/instrumentation-connect" "0.43.0"
+    "@opentelemetry/instrumentation-dataloader" "0.16.0"
+    "@opentelemetry/instrumentation-express" "0.47.0"
+    "@opentelemetry/instrumentation-fastify" "0.44.1"
+    "@opentelemetry/instrumentation-fs" "0.19.0"
+    "@opentelemetry/instrumentation-generic-pool" "0.43.0"
+    "@opentelemetry/instrumentation-graphql" "0.47.0"
+    "@opentelemetry/instrumentation-hapi" "0.45.1"
+    "@opentelemetry/instrumentation-http" "0.57.1"
+    "@opentelemetry/instrumentation-ioredis" "0.47.0"
+    "@opentelemetry/instrumentation-kafkajs" "0.7.0"
+    "@opentelemetry/instrumentation-knex" "0.44.0"
+    "@opentelemetry/instrumentation-koa" "0.47.0"
+    "@opentelemetry/instrumentation-lru-memoizer" "0.44.0"
+    "@opentelemetry/instrumentation-mongodb" "0.51.0"
+    "@opentelemetry/instrumentation-mongoose" "0.46.0"
+    "@opentelemetry/instrumentation-mysql" "0.45.0"
+    "@opentelemetry/instrumentation-mysql2" "0.45.0"
+    "@opentelemetry/instrumentation-nestjs-core" "0.44.0"
+    "@opentelemetry/instrumentation-pg" "0.50.0"
+    "@opentelemetry/instrumentation-redis-4" "0.46.0"
+    "@opentelemetry/instrumentation-tedious" "0.18.0"
+    "@opentelemetry/instrumentation-undici" "0.10.0"
+    "@opentelemetry/resources" "^1.30.1"
+    "@opentelemetry/sdk-trace-base" "^1.30.1"
+    "@opentelemetry/semantic-conventions" "^1.28.0"
+    "@prisma/instrumentation" "5.22.0"
+    "@sentry/core" "8.54.0"
+    "@sentry/opentelemetry" "8.54.0"
     import-in-the-middle "^1.11.2"
 
-"@sentry/opentelemetry@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry/opentelemetry/-/opentelemetry-8.42.0.tgz#d4a5e988689b3c64370eff5763e7cf3af4e43cba"
-  integrity sha512-QPb9kMFgl35TIwIz0u+BFTbPG461CofMiloidJ44GFZ9cB33T5cB0oIN7ut/5tsH/AvqUmucydsV/Nj3HNQx9g==
+"@sentry/node@^9.0.1":
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/@sentry/node/-/node-9.0.1.tgz#6f5bba1adbc2b735b52884706622a5bdab5f5423"
+  integrity sha512-ofc0dvOoFEIVmV5bcNdvLLBzPvjF1L04MFIVPIUk9+6hm/7sqUdhQe84h56244/u5ILDMPsHxFX34iXGabjqYw==
   dependencies:
-    "@sentry/core" "8.42.0"
+    "@opentelemetry/api" "^1.9.0"
+    "@opentelemetry/context-async-hooks" "^1.30.1"
+    "@opentelemetry/core" "^1.30.1"
+    "@opentelemetry/instrumentation" "^0.57.1"
+    "@opentelemetry/instrumentation-amqplib" "^0.46.0"
+    "@opentelemetry/instrumentation-connect" "0.43.0"
+    "@opentelemetry/instrumentation-dataloader" "0.16.0"
+    "@opentelemetry/instrumentation-express" "0.47.0"
+    "@opentelemetry/instrumentation-fastify" "0.44.1"
+    "@opentelemetry/instrumentation-fs" "0.19.0"
+    "@opentelemetry/instrumentation-generic-pool" "0.43.0"
+    "@opentelemetry/instrumentation-graphql" "0.47.0"
+    "@opentelemetry/instrumentation-hapi" "0.45.1"
+    "@opentelemetry/instrumentation-http" "0.57.1"
+    "@opentelemetry/instrumentation-ioredis" "0.47.0"
+    "@opentelemetry/instrumentation-kafkajs" "0.7.0"
+    "@opentelemetry/instrumentation-knex" "0.44.0"
+    "@opentelemetry/instrumentation-koa" "0.47.0"
+    "@opentelemetry/instrumentation-lru-memoizer" "0.44.0"
+    "@opentelemetry/instrumentation-mongodb" "0.51.0"
+    "@opentelemetry/instrumentation-mongoose" "0.46.0"
+    "@opentelemetry/instrumentation-mysql" "0.45.0"
+    "@opentelemetry/instrumentation-mysql2" "0.45.0"
+    "@opentelemetry/instrumentation-pg" "0.50.0"
+    "@opentelemetry/instrumentation-redis-4" "0.46.0"
+    "@opentelemetry/instrumentation-tedious" "0.18.0"
+    "@opentelemetry/instrumentation-undici" "0.10.0"
+    "@opentelemetry/resources" "^1.30.1"
+    "@opentelemetry/sdk-trace-base" "^1.30.1"
+    "@opentelemetry/semantic-conventions" "^1.28.0"
+    "@prisma/instrumentation" "6.2.1"
+    "@sentry/core" "9.0.1"
+    "@sentry/opentelemetry" "9.0.1"
+    import-in-the-middle "^1.12.0"
+
+"@sentry/opentelemetry@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry/opentelemetry/-/opentelemetry-8.54.0.tgz#0fd2c732b6f83ec7a6eb27defbb535784657669d"
+  integrity sha512-Tkmd8bmXMx0PKZF53ywk/FfvDrphX8NdPH5N53HxyMvGxSf2trZkTuOSFJg6zKibyGYO6+PUeGO3g2WJKUxwGA==
+  dependencies:
+    "@sentry/core" "8.54.0"
+
+"@sentry/opentelemetry@9.0.1":
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/@sentry/opentelemetry/-/opentelemetry-9.0.1.tgz#62b056e99129f09f40b83cc74b1a8ccf5e1fb093"
+  integrity sha512-kWLnCnSGVMBhM6e33u7/NTHOtHHtZZuVV8bUa2Pum6aBAHVcF4/jJI9dFTdNhy93OYsyA3Ip48+Y2G2TUVE5ug==
+  dependencies:
+    "@sentry/core" "9.0.1"
 
 "@sentry/profiling-node@^8.28.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry/profiling-node/-/profiling-node-8.42.0.tgz#bdda77e1088e980757cba9f80fe0ede0be8bbf47"
-  integrity sha512-YyMfE5wrWhqkp+u1rr8ZRa8iNHl4yHQKBclme+AYY4z0f/7s36LU5otKpCz7w/C20ecO7lI8RCzszFI1lD10xA==
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry/profiling-node/-/profiling-node-8.54.0.tgz#c20f3061dbf39aaae74006b3a75888f4f6a4c1a9"
+  integrity sha512-E2WKaEmQunu1PiUX1HGYVwEw18b4YDBLINeOTwJRqApGSNwc/EggYZzhXSPWjsPh7D5ZRGBr0p1bKQwkNMvtRg==
   dependencies:
-    "@sentry/core" "8.42.0"
-    "@sentry/node" "8.42.0"
+    "@sentry/core" "8.54.0"
+    "@sentry/node" "8.54.0"
     detect-libc "^2.0.2"
     node-abi "^3.61.0"
 
-"@sentry/react@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-8.42.0.tgz#7c3ae19e5d9ea3332303fcd347eb220ec1c69e93"
-  integrity sha512-UBi/WM4oMa+kOA99R7t7Ke57zq6uQw6mALYW4fJ+wuhHZJBLDDDHSGpEUhdWuQ1oWQv/laT34DGS44PJOjfeAg==
+"@sentry/react@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry/react/-/react-8.54.0.tgz#16cec103b5d5697bdfebacf6e2d35f19699b3ab3"
+  integrity sha512-42T/fp8snYN19Fy/2P0Mwotu4gcdy+1Lx+uYCNcYP1o7wNGigJ7qb27sW7W34GyCCHjoCCfQgeOqDQsyY8LC9w==
   dependencies:
-    "@sentry/browser" "8.42.0"
-    "@sentry/core" "8.42.0"
+    "@sentry/browser" "8.54.0"
+    "@sentry/core" "8.54.0"
     hoist-non-react-statics "^3.3.2"
 
-"@sentry/vercel-edge@8.42.0":
-  version "8.42.0"
-  resolved "https://registry.yarnpkg.com/@sentry/vercel-edge/-/vercel-edge-8.42.0.tgz#02149bacf42522916aacfe75fcd86f05c39fa48a"
-  integrity sha512-OvUPowWCLqrllJ/1mUs2SfkNGNVjYDJ2+nmbHOdK7SMlUaHatKbCrb1nUWzRgWJ5E+ztsXi3uCC7cE1a3kA/rQ==
+"@sentry/vercel-edge@8.54.0":
+  version "8.54.0"
+  resolved "https://registry.npmjs.org/@sentry/vercel-edge/-/vercel-edge-8.54.0.tgz#aee82fa4970ed4de8f85d7402ad583b83bf108a6"
+  integrity sha512-1oct5P0iTPJOBCzNKZZ+H1ja7b1izZNCObBRhxscOsDHM4fUFwCP8MfjxGIphzj9XLibzo+4dsn6JtkxIdn5GQ==
   dependencies:
     "@opentelemetry/api" "^1.9.0"
-    "@sentry/core" "8.42.0"
+    "@sentry/core" "8.54.0"
 
-"@sentry/webpack-plugin@2.22.6":
-  version "2.22.6"
-  resolved "https://registry.yarnpkg.com/@sentry/webpack-plugin/-/webpack-plugin-2.22.6.tgz#8c9d27d5cd89153a5b6e08cc9dcb3048b122ffbc"
-  integrity sha512-BiLhAzQYAz/9kCXKj2LeUKWf/9GBVn2dD0DeYK89s+sjDEaxjbcLBBiLlLrzT7eC9QVj2tUZRKOi6puCfc8ysw==
+"@sentry/webpack-plugin@2.22.7":
+  version "2.22.7"
+  resolved "https://registry.npmjs.org/@sentry/webpack-plugin/-/webpack-plugin-2.22.7.tgz#992c6c782c736f22e72eb318745e28cc24aabad7"
+  integrity sha512-j5h5LZHWDlm/FQCCmEghQ9FzYXwfZdlOf3FE/X6rK6lrtx0JCAkq+uhMSasoyP4XYKL4P4vRS6WFSos4jxf/UA==
   dependencies:
-    "@sentry/bundler-plugin-core" "2.22.6"
+    "@sentry/bundler-plugin-core" "2.22.7"
     unplugin "1.0.1"
     uuid "^9.0.0"
 
 "@sindresorhus/merge-streams@^2.1.0":
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz#719df7fb41766bc143369eaa0dd56d8dc87c9958"
+  resolved "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz#719df7fb41766bc143369eaa0dd56d8dc87c9958"
   integrity sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==
 
-"@storybook/addon-actions@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-8.4.7.tgz#210c6bb5a7e17c3664c300b4b69b6243ec34b9cd"
-  integrity sha512-mjtD5JxcPuW74T6h7nqMxWTvDneFtokg88p6kQ5OnC1M259iAXb//yiSZgu/quunMHPCXSiqn4FNOSgASTSbsA==
+"@storybook/addon-actions@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-8.5.4.tgz#8d1cd697a96d85d0e4d235b094753b3ac5610871"
+  integrity sha512-b7dwmVWaiJJmPdNrCCuy5wPD1HsPNGHCH+O9XJDrQpZ4EFREAcoWurIztldy5PV7DOOeLlW5rXxtwEEN41emQg==
   dependencies:
     "@storybook/global" "^5.0.0"
     "@types/uuid" "^9.0.1"
@@ -2955,146 +2972,143 @@
     polished "^4.2.2"
     uuid "^9.0.0"
 
-"@storybook/addon-backgrounds@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-8.4.7.tgz#56856bdafc5a2ba18cc19422320883c9e8f66c1c"
-  integrity sha512-I4/aErqtFiazcoWyKafOAm3bLpxTj6eQuH/woSbk1Yx+EzN+Dbrgx1Updy8//bsNtKkcrXETITreqHC+a57DHQ==
+"@storybook/addon-backgrounds@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-8.5.4.tgz#2021295f44f8ce02ac05724c12a335fc9ab134a2"
+  integrity sha512-PldWAiNGZ2gjwHSYpqCgkMAQ9kt6yZSZ6BMvQMEMZ5uUhTlQ65g/aSAVN8a3baM79idPA3yetnMm2ybXbUxKOQ==
   dependencies:
     "@storybook/global" "^5.0.0"
     memoizerific "^1.11.3"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-controls@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-8.4.7.tgz#0c2ace0c7056248577f08f90471f29e861b485be"
-  integrity sha512-377uo5IsJgXLnQLJixa47+11V+7Wn9KcDEw+96aGCBCfLbWNH8S08tJHHnSu+jXg9zoqCAC23MetntVp6LetHA==
+"@storybook/addon-controls@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-8.5.4.tgz#2d2b54e3fe3ec7afe51ea816d36d114e4c181ab6"
+  integrity sha512-6rI+IIYdTpR7RrZQfE1ixPINm+a4DOggs82PX8q8gLGErHQo1TSfLaUeNpysb9DTZev0PhTdajdiW4AVakMgyg==
   dependencies:
     "@storybook/global" "^5.0.0"
     dequal "^2.0.2"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-8.4.7.tgz#556515da1049f97023427301e11ecb52d0b9dbe7"
-  integrity sha512-NwWaiTDT5puCBSUOVuf6ME7Zsbwz7Y79WF5tMZBx/sLQ60vpmJVQsap6NSjvK1Ravhc21EsIXqemAcBjAWu80w==
+"@storybook/addon-docs@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-8.5.4.tgz#aa12e4adbdce1104f9befb70043c3f1e1c92202f"
+  integrity sha512-dLDM1oycm50a2wJVtuPwoNLIBmy8Z9r7e0F9InsPu9iTZAZLb6C5lYDNXG7GkFrRU/Q2yqSb9q7upoV7UiPGWA==
   dependencies:
     "@mdx-js/react" "^3.0.0"
-    "@storybook/blocks" "8.4.7"
-    "@storybook/csf-plugin" "8.4.7"
-    "@storybook/react-dom-shim" "8.4.7"
-    react "^16.8.0 || ^17.0.0 || ^18.0.0"
-    react-dom "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "@storybook/blocks" "8.5.4"
+    "@storybook/csf-plugin" "8.5.4"
+    "@storybook/react-dom-shim" "8.5.4"
+    react "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    react-dom "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     ts-dedent "^2.0.0"
 
 "@storybook/addon-essentials@^8.1.1":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-8.4.7.tgz#381c74230d1b1a209d5fdc017d241c016b98affe"
-  integrity sha512-+BtZHCBrYtQKILtejKxh0CDRGIgTl9PumfBOKRaihYb4FX1IjSAxoV/oo/IfEjlkF5f87vouShWsRa8EUauFDw==
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-8.5.4.tgz#978fc8357ea8075158396749bd7596a4c65c4e3c"
+  integrity sha512-syocWJaOI+JpV6aRhw1+QKFjJ0LEt1L/qDDz+UWyH2ryppXUkKQtc8nJVkLogkWODIZ/Q4cjIVD0kdrDSmtu0g==
   dependencies:
-    "@storybook/addon-actions" "8.4.7"
-    "@storybook/addon-backgrounds" "8.4.7"
-    "@storybook/addon-controls" "8.4.7"
-    "@storybook/addon-docs" "8.4.7"
-    "@storybook/addon-highlight" "8.4.7"
-    "@storybook/addon-measure" "8.4.7"
-    "@storybook/addon-outline" "8.4.7"
-    "@storybook/addon-toolbars" "8.4.7"
-    "@storybook/addon-viewport" "8.4.7"
+    "@storybook/addon-actions" "8.5.4"
+    "@storybook/addon-backgrounds" "8.5.4"
+    "@storybook/addon-controls" "8.5.4"
+    "@storybook/addon-docs" "8.5.4"
+    "@storybook/addon-highlight" "8.5.4"
+    "@storybook/addon-measure" "8.5.4"
+    "@storybook/addon-outline" "8.5.4"
+    "@storybook/addon-toolbars" "8.5.4"
+    "@storybook/addon-viewport" "8.5.4"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-highlight@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-highlight/-/addon-highlight-8.4.7.tgz#06b9752977e38884007e9446f9a2b0c04c873229"
-  integrity sha512-whQIDBd3PfVwcUCrRXvCUHWClXe9mQ7XkTPCdPo4B/tZ6Z9c6zD8JUHT76ddyHivixFLowMnA8PxMU6kCMAiNw==
+"@storybook/addon-highlight@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-8.5.4.tgz#62d63e946059fe3249ee093aad57812794f20964"
+  integrity sha512-llrxTpzJs+F61nU9ZPaVhw8iHE3hVSc5bVRuEFSRRroJC/wSNGBHz9nLBfmZ7w+06dXK4S5DRHbYehBLRRzj3Q==
   dependencies:
     "@storybook/global" "^5.0.0"
 
 "@storybook/addon-interactions@^8.1.1":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-interactions/-/addon-interactions-8.4.7.tgz#d34545db5ea6f03a5499ad6742c3317fb9e02d55"
-  integrity sha512-fnufT3ym8ht3HHUIRVXAH47iOJW/QOb0VSM+j269gDuvyDcY03D1civCu1v+eZLGaXPKJ8vtjr0L8zKQ/4P0JQ==
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-interactions/-/addon-interactions-8.5.4.tgz#9a2a9c8c0de341df8bb92544e67296de98086ff5"
+  integrity sha512-9xhz7goOKV13WIAcrCZs4kP7pMutLqyMygjCt+oNHCiDx7Sj8q+heVT46uSR1xkgZU1C7uKpUeQWkb+kfkB54Q==
   dependencies:
     "@storybook/global" "^5.0.0"
-    "@storybook/instrumenter" "8.4.7"
-    "@storybook/test" "8.4.7"
+    "@storybook/instrumenter" "8.5.4"
+    "@storybook/test" "8.5.4"
     polished "^4.2.2"
     ts-dedent "^2.2.0"
 
 "@storybook/addon-links@^8.1.1":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-8.4.7.tgz#c38b2b63c3b0308adacff4b0758464a0657154c4"
-  integrity sha512-L/1h4dMeMKF+MM0DanN24v5p3faNYbbtOApMgg7SlcBT/tgo3+cAjkgmNpYA8XtKnDezm+T2mTDhB8mmIRZpIQ==
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.5.4.tgz#ab0dcc30275b03c8cce2b92f822596dfad9f9dbb"
+  integrity sha512-t28NJXhtTGa4RbzGOWNoL0T9liqhdlVbq3wkhbpUgXI4ay5BA2bVsVUuO7vKDp26oNeaZDsSyWv78Gg7FoeVmQ==
   dependencies:
-    "@storybook/csf" "^0.1.11"
+    "@storybook/csf" "0.1.12"
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-8.4.7.tgz#9d556ba34b57c13ad8d00bd953b27ec405a64d23"
-  integrity sha512-QfvqYWDSI5F68mKvafEmZic3SMiK7zZM8VA0kTXx55hF/+vx61Mm0HccApUT96xCXIgmwQwDvn9gS4TkX81Dmw==
+"@storybook/addon-measure@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-8.5.4.tgz#711d01ee33d5df726eb771be135780928d80e672"
+  integrity sha512-VmKvXGm7s++BUrnmT8GHw2A3x+nDTk+8PtP4cBVaqMqyiYOd7ycWDrCTrLl/sm+WcYo3NY9/iXYNgluN4rKQ5Q==
   dependencies:
     "@storybook/global" "^5.0.0"
     tiny-invariant "^1.3.1"
 
 "@storybook/addon-onboarding@^8.1.1":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-onboarding/-/addon-onboarding-8.4.7.tgz#212a5e27db1ee8440a2dd0d5c67ac29f0e6efda5"
-  integrity sha512-FdC2NV60VNYeMxf6DVe0qV9ucSBAzMh1//C0Qqwq8CcjthMbmKlVZ7DqbVsbIHKnFaSCaUC88eR5olAfMaauCQ==
-  dependencies:
-    react-confetti "^6.1.0"
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-onboarding/-/addon-onboarding-8.5.4.tgz#49ad7197e3222ddc574a168e8055f5b572fd1f2b"
+  integrity sha512-QCj1HY2G+Rs60i0bhWEl1675MZ/iBLBofFyubmP2G8cdgYMLUrOtbrd0cQBp11TSGVNzkT8sCDHYW+JEtsb0tQ==
 
-"@storybook/addon-outline@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-8.4.7.tgz#8a35fe519dd639bb287a370da2222e6ffdce4020"
-  integrity sha512-6LYRqUZxSodmAIl8icr585Oi8pmzbZ90aloZJIpve+dBAzo7ydYrSQxxoQEVltXbKf3VeVcrs64ouAYqjisMYA==
+"@storybook/addon-outline@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-8.5.4.tgz#edc388fb0eb508391d35050f195b5503ce027cd0"
+  integrity sha512-DSrTzQpCObZ9Af3djJPWVkBxvUfkBtMMeXKaGazOZem90vk2r1Q2PRaX8J/xhWxMhZtvjQuYexAyn5O7JxdaWA==
   dependencies:
     "@storybook/global" "^5.0.0"
     ts-dedent "^2.0.0"
 
 "@storybook/addon-styling-webpack@^1.0.0":
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-styling-webpack/-/addon-styling-webpack-1.0.1.tgz#660ee002ec249f6e32dd2784abfa50f59ef97951"
+  resolved "https://registry.npmjs.org/@storybook/addon-styling-webpack/-/addon-styling-webpack-1.0.1.tgz#660ee002ec249f6e32dd2784abfa50f59ef97951"
   integrity sha512-5n+SXPfMTc4m7sWaJWPWjoHYWc6/B111M2Ia55toQ3GV4ON4vVlTgH9FX+EgCkDticElj99HLTMDJkHRj2yvkg==
   dependencies:
     "@storybook/node-logger" "^8.0.0-alpha.10"
 
-"@storybook/addon-toolbars@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-8.4.7.tgz#b898d4deaf6f5a58f3b70bd8d136cd4ec2844b79"
-  integrity sha512-OSfdv5UZs+NdGB+nZmbafGUWimiweJ/56gShlw8Neo/4jOJl1R3rnRqqY7MYx8E4GwoX+i3GF5C3iWFNQqlDcw==
+"@storybook/addon-toolbars@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-8.5.4.tgz#6c79ed56cdc732301b41cfcc0b31f64e88e14f86"
+  integrity sha512-aszYJ8VJjaQV6RcZhD27NMSHpPHygt130l3VnRg1EqKN/r2QdNU1hVC8n2EPASYOJfOQH4Q9eySIplbQYSt0+g==
 
-"@storybook/addon-viewport@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-8.4.7.tgz#e65c53608f52149c06347b395487960605fc4805"
-  integrity sha512-hvczh/jjuXXcOogih09a663sRDDSATXwbE866al1DXgbDFraYD/LxX/QDb38W9hdjU9+Qhx8VFIcNWoMQns5HQ==
+"@storybook/addon-viewport@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-8.5.4.tgz#2e4d90071302d9c50d5788403c8669ae406c6e8d"
+  integrity sha512-CweXFUXmdG9d4uRVspGzhtrzwyLYQMKLIpjz1N5jDHiT234+xWKYtlqYbpmm5x56M/w9kzxqIWgyMgB/i2mPIA==
   dependencies:
     memoizerific "^1.11.3"
 
 "@storybook/addon-webpack5-compiler-swc@^1.0.2":
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-webpack5-compiler-swc/-/addon-webpack5-compiler-swc-1.0.5.tgz#675f8520c9df6d2a9873f5e23539538e43fe9b04"
-  integrity sha512-1NlM3noit2vA22OyWb8Ma2lhcEKCS1Snv2kr+EkaVABUqNDfVc9AD/GgYQhF7F/2CoF5N2JU7uzXDzFHd5TzZg==
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/@storybook/addon-webpack5-compiler-swc/-/addon-webpack5-compiler-swc-1.0.6.tgz#6fe1d3af421e3efc935c866a719e02b62f2ab6ea"
+  integrity sha512-QiZheKKYsUCAtPn9phwtmOBAWBNxnxyfu5E+HUSQIbX94pTwc3ROufJ3g1R/RMQZcklOYXpSI0V8FS1m6aUVkg==
   dependencies:
     "@swc/core" "^1.7.3"
     swc-loader "^0.2.3"
 
-"@storybook/blocks@8.4.7", "@storybook/blocks@^8.1.1":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/blocks/-/blocks-8.4.7.tgz#ee17f59dd52d11c97c39b0f6b03957085a80ad95"
-  integrity sha512-+QH7+JwXXXIyP3fRCxz/7E2VZepAanXJM7G8nbR3wWsqWgrRp4Wra6MvybxAYCxU7aNfJX5c+RW84SNikFpcIA==
+"@storybook/blocks@8.5.4", "@storybook/blocks@^8.1.1":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/blocks/-/blocks-8.5.4.tgz#cf91a257ab8e756d53393126251708149cfa8d26"
+  integrity sha512-QLfQ5KX6m2FAsz1zjB+mUp9jEA+LCzIHo3BxLr/tWN3pIwSURoHs2wrHDXT2r+wu5CBesGvTKI4KUWlsxsOF9g==
   dependencies:
-    "@storybook/csf" "^0.1.11"
+    "@storybook/csf" "0.1.12"
     "@storybook/icons" "^1.2.12"
     ts-dedent "^2.0.0"
 
-"@storybook/builder-webpack5@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-8.4.7.tgz#5bc15568716bbf4f45a88fc389e25fa2ce50a8c2"
-  integrity sha512-O8LpsQ+4g2x5kh7rI9+jEUdX8k1a5egBQU1lbudmHchqsV0IKiVqBD9LL5Gj3wpit4vB8coSW4ZWTFBw8FQb4Q==
+"@storybook/builder-webpack5@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-8.5.4.tgz#d5f5f0c97c6b8dace63f0abe4b314a50d7e17c30"
+  integrity sha512-bOcq7qrcW31Oy1RcR7utgr3SEYBvSj5wiQYHmRMgvAbcmWP80mP6scTHFdauvc/kzKE11Yri9CT/KG9GgoEm4g==
   dependencies:
-    "@storybook/core-webpack" "8.4.7"
-    "@types/node" "^22.0.0"
+    "@storybook/core-webpack" "8.5.4"
     "@types/semver" "^7.3.4"
     browser-assert "^1.2.1"
     case-sensitive-paths-webpack-plugin "^2.4.0"
@@ -3119,25 +3133,24 @@
     webpack-hot-middleware "^2.25.1"
     webpack-virtual-modules "^0.6.0"
 
-"@storybook/components@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-8.4.7.tgz#09eeffa07aa672ad3966ca1764a43003731b1d30"
-  integrity sha512-uyJIcoyeMWKAvjrG9tJBUCKxr2WZk+PomgrgrUwejkIfXMO76i6jw9BwLa0NZjYdlthDv30r9FfbYZyeNPmF0g==
+"@storybook/components@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/components/-/components-8.5.4.tgz#f1eab3e26c687a225e21a0e8af5f257f6326601e"
+  integrity sha512-z4lWN4W1cUqlhOFQ3Kg33Yu4uuoOvECQtxJqNHUPFsHNOtIbYIdUMCLwiJFUxrzdJXUnOqn5QTcsFerWX6Roag==
 
-"@storybook/core-webpack@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/core-webpack/-/core-webpack-8.4.7.tgz#660d1cbd03a91fee27b65e6acc2f9269ed1fbfc8"
-  integrity sha512-Tj+CjQLpFyBJxhhMms+vbPT3+gTRAiQlrhY3L1IEVwBa3wtRMS0qjozH26d1hK4G6mUIEdwu13L54HMU/w33Sg==
+"@storybook/core-webpack@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/core-webpack/-/core-webpack-8.5.4.tgz#430ebf12a063efb03859fa105bb09c32feaddd79"
+  integrity sha512-YOlzywqG4pVFYMzkmYuMrueI4swofOaoKvQjlVIE/8fP7vSu7HhhBbtlxowd0i08UjP/wSVq0zvxl9RGxHWq5Q==
   dependencies:
-    "@types/node" "^22.0.0"
     ts-dedent "^2.0.0"
 
-"@storybook/core@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-8.4.7.tgz#af9cbb3f26f0b6c98c679a134ce776c202570d66"
-  integrity sha512-7Z8Z0A+1YnhrrSXoKKwFFI4gnsLbWzr8fnDCU6+6HlDukFYh8GHRcZ9zKfqmy6U3hw2h8H5DrHsxWfyaYUUOoA==
+"@storybook/core@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/core/-/core-8.5.4.tgz#7dfdd3496620f607253bd23bb004d602e17114ee"
+  integrity sha512-x7SoqdDAi6+x7hFRF7SIcxKKNdj8E1pK0B9k6uf+cop16/mxNWazqQFJRpKRE66h/ImYqopMnpX3ASaa3Khm4w==
   dependencies:
-    "@storybook/csf" "^0.1.11"
+    "@storybook/csf" "0.1.12"
     better-opn "^3.0.2"
     browser-assert "^1.2.1"
     esbuild "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0"
@@ -3149,57 +3162,56 @@
     util "^0.12.5"
     ws "^8.2.3"
 
-"@storybook/csf-plugin@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/csf-plugin/-/csf-plugin-8.4.7.tgz#0117c872b05bf033eec089ab0224e0fab01da810"
-  integrity sha512-Fgogplu4HImgC+AYDcdGm1rmL6OR1rVdNX1Be9C/NEXwOCpbbBwi0BxTf/2ZxHRk9fCeaPEcOdP5S8QHfltc1g==
+"@storybook/csf-plugin@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/csf-plugin/-/csf-plugin-8.5.4.tgz#e8638a45f07fd3e9d080c29c3cf7f2737438e6af"
+  integrity sha512-W368wMblH861QlW5gfZEwF/LYrWQ2NheXgikBfYv73se1WxvQCo8IMLXCNpgmYhse81GsvXRddKULGsqDSH37A==
   dependencies:
     unplugin "^1.3.1"
 
-"@storybook/csf@^0.1.11":
+"@storybook/csf@0.1.12":
   version "0.1.12"
-  resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.1.12.tgz#1dcfa0f398a69b834c563884b5f747db3d5a81df"
+  resolved "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.12.tgz#1dcfa0f398a69b834c563884b5f747db3d5a81df"
   integrity sha512-9/exVhabisyIVL0VxTCxo01Tdm8wefIXKXfltAPTSr8cbLn5JAxGQ6QV3mjdecLGEOucfoVhAKtJfVHxEK1iqw==
   dependencies:
     type-fest "^2.19.0"
 
 "@storybook/global@^5.0.0":
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
+  resolved "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz#b793d34b94f572c1d7d9e0f44fac4e0dbc9572ed"
   integrity sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==
 
 "@storybook/icons@^1.2.12":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@storybook/icons/-/icons-1.3.0.tgz#a5c1460fb15a7260e0b638ab86163f7347a0061e"
-  integrity sha512-Nz/UzeYQdUZUhacrPyfkiiysSjydyjgg/p0P9HxB4p/WaJUUjMAcaoaLgy3EXx61zZJ3iD36WPuDkZs5QYrA0A==
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/@storybook/icons/-/icons-1.3.2.tgz#e9b92c35ca789ff79f9d0b3848829dd6490ca628"
+  integrity sha512-t3xcbCKkPvqyef8urBM0j/nP6sKtnlRkVgC+8JTbTAZQjaTmOjes3byEgzs89p4B/K6cJsg9wLW2k3SknLtYJw==
 
-"@storybook/instrumenter@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-8.4.7.tgz#5a37876fee8f828241a1e7fd76891c6effc1805a"
-  integrity sha512-k6NSD3jaRCCHAFtqXZ7tw8jAzD/yTEWXGya+REgZqq5RCkmJ+9S4Ytp/6OhQMPtPFX23gAuJJzTQVLcCr+gjRg==
+"@storybook/instrumenter@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.5.4.tgz#002e79b6d1d618c6249cfa82a1adf79e298535ad"
+  integrity sha512-6Y2d6SNZslZl2UhkfH8Ml6SzKX5b2x/QRBwkLAAXc/xZcFdK5luAOPk/fW1BU7jEAPAjtn493V3oo2nGA5D22A==
   dependencies:
     "@storybook/global" "^5.0.0"
     "@vitest/utils" "^2.1.1"
 
-"@storybook/manager-api@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/manager-api/-/manager-api-8.4.7.tgz#4e13debf645c9300d7d6d49195e720d0c7ecd261"
-  integrity sha512-ELqemTviCxAsZ5tqUz39sDmQkvhVAvAgiplYy9Uf15kO0SP2+HKsCMzlrm2ue2FfkUNyqbDayCPPCB0Cdn/mpQ==
+"@storybook/manager-api@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.5.4.tgz#3d198104264af3ffac27b0a6c3700b822484af16"
+  integrity sha512-kFK5DM+4YPob0qdiXN5DJh33fDyQvNJb7IAobDS/rPo2L+t6M+DAgqEsXLQXT9nUbnUD9IcCjwEnjKa+EHU2RA==
 
 "@storybook/node-logger@^8.0.0-alpha.10":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-8.4.7.tgz#9bc5adc7ea820b41ba7602890ac5c5e090bc4419"
-  integrity sha512-bsNMy9RgN4jVw5MMHMf0T04dX8a1lLTWq4iZoZkfdbshDKn5Z16brzPVwhFg2IE0YTEZi9XyA1NJLPgUTCcp7g==
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-8.5.4.tgz#0805ba35a71ece96b29458fd76dee71900310901"
+  integrity sha512-76vc3gkwOO6gnh/l4uRbYQ4AFNcWoklOED0Ck6yP2OsuH5lRb8sayeE9sluRCathXHBiI2nW1c85P8OeYCP55w==
 
-"@storybook/preset-react-webpack@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/preset-react-webpack/-/preset-react-webpack-8.4.7.tgz#7b303f464228035a919ea18a3cd6193f6776c2bc"
-  integrity sha512-geTSBKyrBagVihil5MF7LkVFynbfHhCinvnbCZZqXW7M1vgcxvatunUENB+iV8eWg/0EJ+8O7scZL+BAxQ/2qg==
+"@storybook/preset-react-webpack@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/preset-react-webpack/-/preset-react-webpack-8.5.4.tgz#916e54cebd4e0f8fe6f2c11f4ba0471883921cae"
+  integrity sha512-4T9wzY+G0TtyzAqlqFwOujffxxjxrJGY2vLtHVWNP5kTjqIdmmqes7LFz+69Pmily1qKJg+bIPkelu/MUBECRA==
   dependencies:
-    "@storybook/core-webpack" "8.4.7"
-    "@storybook/react" "8.4.7"
+    "@storybook/core-webpack" "8.5.4"
+    "@storybook/react" "8.5.4"
     "@storybook/react-docgen-typescript-plugin" "1.0.6--canary.9.0c3f3b7.0"
-    "@types/node" "^22.0.0"
     "@types/semver" "^7.3.4"
     find-up "^5.0.0"
     magic-string "^0.30.5"
@@ -3209,14 +3221,14 @@
     tsconfig-paths "^4.2.0"
     webpack "5"
 
-"@storybook/preview-api@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/preview-api/-/preview-api-8.4.7.tgz#85e01a97f4182b974581765d725f6c7a7d190013"
-  integrity sha512-0QVQwHw+OyZGHAJEXo6Knx+6/4er7n2rTDE5RYJ9F2E2Lg42E19pfdLlq2Jhoods2Xrclo3wj6GWR//Ahi39Eg==
+"@storybook/preview-api@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.5.4.tgz#ea3f05bfbbc2924c1112fd25befdc8be28101ee0"
+  integrity sha512-V9cTl5uWRmWAA4hCmz97PxgP0QYq2DpJUpeSxt/+Hhhm1OYTxAYJWt6Y3pIfqEFhOFjQzZwTprzGYzVjk4S3DA==
 
 "@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0":
   version "1.0.6--canary.9.0c3f3b7.0"
-  resolved "https://registry.yarnpkg.com/@storybook/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.6--canary.9.0c3f3b7.0.tgz#7f10f3c641f32e4513a8b6ffb5036933e7059534"
+  resolved "https://registry.npmjs.org/@storybook/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.6--canary.9.0c3f3b7.0.tgz#7f10f3c641f32e4513a8b6ffb5036933e7059534"
   integrity sha512-KUqXC3oa9JuQ0kZJLBhVdS4lOneKTOopnNBK4tUAgoxWQ3u/IjzdueZjFr7gyBrXMoU6duutk3RQR9u8ZpYJ4Q==
   dependencies:
     debug "^4.1.1"
@@ -3227,129 +3239,128 @@
     react-docgen-typescript "^2.2.2"
     tslib "^2.0.0"
 
-"@storybook/react-dom-shim@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/react-dom-shim/-/react-dom-shim-8.4.7.tgz#f0dd5bbf2fc185def72d9d08a11c8de22f152c2a"
-  integrity sha512-6bkG2jvKTmWrmVzCgwpTxwIugd7Lu+2btsLAqhQSzDyIj2/uhMNp8xIMr/NBDtLgq3nomt9gefNa9xxLwk/OMg==
+"@storybook/react-dom-shim@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/react-dom-shim/-/react-dom-shim-8.5.4.tgz#32f2d82b0a7478f5ad39013fba5d0a093b4e7a01"
+  integrity sha512-m6soTAZFlOH5L2CW3V3g1eJ9Z06Gzgv8urOrnqeBmyCTcpuzxs4GRf9whvu5x/ULZAuvAL77H53d9W1/UYI4sQ==
 
 "@storybook/react-webpack5@^8.1.1":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/react-webpack5/-/react-webpack5-8.4.7.tgz#b0c48caffd658912bd10f4f9960edb229e990b4b"
-  integrity sha512-T9GLqlsP4It4El7cC8rSkBPRWvORAsTDULeWlO36RST2TrYnmBOUytsi22mk7cAAAVhhD6rTrs1YdqWRMpfa1w==
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/react-webpack5/-/react-webpack5-8.5.4.tgz#57f2f37e044c0f2ce1e0ef2b33eb7a650d3a7962"
+  integrity sha512-rXdvr2Ls22chU8BoiCFicaERKo3vZarrHeS4y++pL5ef+RIU0bnZitxGyhusolL6s2q36ZS6u+i1BXr//c0Ynw==
   dependencies:
-    "@storybook/builder-webpack5" "8.4.7"
-    "@storybook/preset-react-webpack" "8.4.7"
-    "@storybook/react" "8.4.7"
-    "@types/node" "^22.0.0"
+    "@storybook/builder-webpack5" "8.5.4"
+    "@storybook/preset-react-webpack" "8.5.4"
+    "@storybook/react" "8.5.4"
 
-"@storybook/react@8.4.7", "@storybook/react@^8.1.1":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-8.4.7.tgz#e2cf62b3c1d8e4bfe5eff82ced07ec473d4e4fd1"
-  integrity sha512-nQ0/7i2DkaCb7dy0NaT95llRVNYWQiPIVuhNfjr1mVhEP7XD090p0g7eqUmsx8vfdHh2BzWEo6CoBFRd3+EXxw==
+"@storybook/react@8.5.4", "@storybook/react@^8.1.1":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/react/-/react-8.5.4.tgz#cbf286803bf8dc6477dab582b82f010e2c3b6bfc"
+  integrity sha512-4OipHaxH+IYqrYrX25kjrXTC3gj0NhpksYG/cfZ38MgLY+odFHGI7hNMgx9YMoaL/pnQRtnVjWaz2nIahsUXSA==
   dependencies:
-    "@storybook/components" "8.4.7"
+    "@storybook/components" "8.5.4"
     "@storybook/global" "^5.0.0"
-    "@storybook/manager-api" "8.4.7"
-    "@storybook/preview-api" "8.4.7"
-    "@storybook/react-dom-shim" "8.4.7"
-    "@storybook/theming" "8.4.7"
+    "@storybook/manager-api" "8.5.4"
+    "@storybook/preview-api" "8.5.4"
+    "@storybook/react-dom-shim" "8.5.4"
+    "@storybook/theming" "8.5.4"
 
-"@storybook/test@8.4.7", "@storybook/test@^8.1.1":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/test/-/test-8.4.7.tgz#7f58f2cdf3a6d810bf3ff4e0e2fee634040c678f"
-  integrity sha512-AhvJsu5zl3uG40itSQVuSy5WByp3UVhS6xAnme4FWRwgSxhvZjATJ3AZkkHWOYjnnk+P2/sbz/XuPli1FVCWoQ==
+"@storybook/test@8.5.4", "@storybook/test@^8.1.1":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/test/-/test-8.5.4.tgz#700d9fdd08c3ce76dc0f3d98fd35a7c68b9a8b1e"
+  integrity sha512-H7zV39GLiUSz/M7fJtv/NWOF1J99CTAqqXMaETwJU5wEpkj1Q3jzmWss+UFtl5x7f/OZC4niP9s9A3G8rZHpKw==
   dependencies:
-    "@storybook/csf" "^0.1.11"
+    "@storybook/csf" "0.1.12"
     "@storybook/global" "^5.0.0"
-    "@storybook/instrumenter" "8.4.7"
+    "@storybook/instrumenter" "8.5.4"
     "@testing-library/dom" "10.4.0"
     "@testing-library/jest-dom" "6.5.0"
     "@testing-library/user-event" "14.5.2"
     "@vitest/expect" "2.0.5"
     "@vitest/spy" "2.0.5"
 
-"@storybook/theming@8.4.7":
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-8.4.7.tgz#c308f6a883999bd35e87826738ab8a76515932b5"
-  integrity sha512-99rgLEjf7iwfSEmdqlHkSG3AyLcK0sfExcr0jnc6rLiAkBhzuIsvcHjjUwkR210SOCgXqBPW0ZA6uhnuyppHLw==
+"@storybook/theming@8.5.4":
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/@storybook/theming/-/theming-8.5.4.tgz#9e50d3c16e0c3885de5ed02925de1e0cbf0e7dfa"
+  integrity sha512-mgMQDe6rF0fS3cDGx55KSzv0URA9Eefo89uoh2oKUmv5+M30067axNK62A9Ys03fSVcB11Iccen0cyu3SHeiyw==
 
-"@swc/core-darwin-arm64@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.1.tgz#faaaab19b4a039ae67ef661c0144a6f20fe8a78e"
-  integrity sha512-NyELPp8EsVZtxH/mEqvzSyWpfPJ1lugpTQcSlMduZLj1EASLO4sC8wt8hmL1aizRlsbjCX+r0PyL+l0xQ64/6Q==
+"@swc/core-darwin-arm64@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.15.tgz#1703ee8e98ea859965bfc7a912db4c452dc4ca36"
+  integrity sha512-zFdZ6/yHqMCPk7OhLFqHy/MQ1EqJhcZMpNHd1gXYT7VRU3FaqvvKETrUlG3VYl65McPC7AhMRfXPyJ0JO/jARQ==
 
-"@swc/core-darwin-x64@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-darwin-x64/-/core-darwin-x64-1.10.1.tgz#754600f453abd24471c202d48836f1161d798f49"
-  integrity sha512-L4BNt1fdQ5ZZhAk5qoDfUnXRabDOXKnXBxMDJ+PWLSxOGBbWE6aJTnu4zbGjJvtot0KM46m2LPAPY8ttknqaZA==
+"@swc/core-darwin-x64@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.10.15.tgz#e8d60fc04ca56b1e5644b25f0032093a5bef70a0"
+  integrity sha512-8g4yiQwbr8fxOOjKXdot0dEkE5zgE8uNZudLy/ZyAhiwiZ8pbJ8/wVrDOu6dqbX7FBXAoDnvZ7fwN1jk4C8jdA==
 
-"@swc/core-linux-arm-gnueabihf@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.10.1.tgz#b0f43c482d0d1819b382a4eb4a0733ce2e386257"
-  integrity sha512-Y1u9OqCHgvVp2tYQAJ7hcU9qO5brDMIrA5R31rwWQIAKDkJKtv3IlTHF0hrbWk1wPR0ZdngkQSJZple7G+Grvw==
+"@swc/core-linux-arm-gnueabihf@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.10.15.tgz#1ec6d2caf1a8a099e13dcd459f45be2fb4febde8"
+  integrity sha512-rl+eVOltl2+7WXOnvmWBpMgh6aO13G5x0U0g8hjwlmD6ku3Y9iRcThpOhm7IytMEarUp5pQxItNoPq+VUGjVHg==
 
-"@swc/core-linux-arm64-gnu@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.10.1.tgz#e02a9e22c25ba85ef00335742e549e06284cf33a"
-  integrity sha512-tNQHO/UKdtnqjc7o04iRXng1wTUXPgVd8Y6LI4qIbHVoVPwksZydISjMcilKNLKIwOoUQAkxyJ16SlOAeADzhQ==
+"@swc/core-linux-arm64-gnu@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.10.15.tgz#dfcf6a63e9d6cb75779411e637c86ff7a04d352b"
+  integrity sha512-qxWEQeyAJMWJqjaN4hi58WMpPdt3Tn0biSK9CYRegQtvZWCbewr6v2agtSu5AZ2rudeH6OfCWAMDQQeSgn6PJQ==
 
-"@swc/core-linux-arm64-musl@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.10.1.tgz#3a0530af8f8bd3717f2f1bd8a2f5183fc58d4cf1"
-  integrity sha512-x0L2Pd9weQ6n8dI1z1Isq00VHFvpBClwQJvrt3NHzmR+1wCT/gcYl1tp9P5xHh3ldM8Cn4UjWCw+7PaUgg8FcQ==
+"@swc/core-linux-arm64-musl@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.10.15.tgz#a629b47066f83730b757743145e2c8354a42164f"
+  integrity sha512-QcELd9/+HjZx0WCxRrKcyKGWTiQ0485kFb5w8waxcSNd0d9Lgk4EFfWWVyvIb5gIHpDQmhrgzI/yRaWQX4YSZQ==
 
-"@swc/core-linux-x64-gnu@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.10.1.tgz#5eb4d282b047a22896ab1d4627403be4c3e4fa6a"
-  integrity sha512-yyYEwQcObV3AUsC79rSzN9z6kiWxKAVJ6Ntwq2N9YoZqSPYph+4/Am5fM1xEQYf/kb99csj0FgOelomJSobxQA==
+"@swc/core-linux-x64-gnu@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.10.15.tgz#2a5ec7ed21b38d6f07524ec6af6ae90c10ad3f63"
+  integrity sha512-S1+ZEEn3+a/MiMeQqQypbwTGoBG8/sPoCvpNbk+uValyygT+jSn3U0xVr45FbukpmMB+NhBMqfedMLqKA0QnJA==
 
-"@swc/core-linux-x64-musl@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.10.1.tgz#890f2eda3e67ccc6817cdd04eff91e6ad9e761c4"
-  integrity sha512-tcaS43Ydd7Fk7sW5ROpaf2Kq1zR+sI5K0RM+0qYLYYurvsJruj3GhBCaiN3gkzd8m/8wkqNqtVklWaQYSDsyqA==
+"@swc/core-linux-x64-musl@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.10.15.tgz#64bf2a9d4b3858a002a4879833245c25e742149b"
+  integrity sha512-qW+H9g/2zTJ4jP7NDw4VAALY0ZlNEKzYsEoSj/HKi7k3tYEHjMzsxjfsY9I8WZCft23bBdV3RTCPoxCshaj1CQ==
 
-"@swc/core-win32-arm64-msvc@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.10.1.tgz#4ea7b2a2fab47f801d31ea8b001a141efaa5e6bf"
-  integrity sha512-D3Qo1voA7AkbOzQ2UGuKNHfYGKL6eejN8VWOoQYtGHHQi1p5KK/Q7V1ku55oxXBsj79Ny5FRMqiRJpVGad7bjQ==
+"@swc/core-win32-arm64-msvc@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.10.15.tgz#1c703c90873991b37a49df056af0f71bd632db5b"
+  integrity sha512-AhRB11aA6LxjIqut+mg7qsu/7soQDmbK6MKR9nP3hgBszpqtXbRba58lr24xIbBCMr+dpo6kgEapWt+t5Po6Zg==
 
-"@swc/core-win32-ia32-msvc@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.10.1.tgz#729102669ccdb72e69884cce58e3686ac63d6f36"
-  integrity sha512-WalYdFoU3454Og+sDKHM1MrjvxUGwA2oralknXkXL8S0I/8RkWZOB++p3pLaGbTvOO++T+6znFbQdR8KRaa7DA==
+"@swc/core-win32-ia32-msvc@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.10.15.tgz#09f86d172b08913aaf0b96aa1596505cd95447af"
+  integrity sha512-UGdh430TQwbDn6KjgvRTg1fO022sbQ4yCCHUev0+5B8uoBwi9a89qAz3emy2m56C8TXxUoihW9Y9OMfaRwPXUw==
 
-"@swc/core-win32-x64-msvc@1.10.1":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.10.1.tgz#7d665a7c69642861aed850ecb0cdf5d87197edda"
-  integrity sha512-JWobfQDbTnoqaIwPKQ3DVSywihVXlQMbDuwik/dDWlj33A8oEHcjPOGs4OqcA3RHv24i+lfCQpM3Mn4FAMfacA==
+"@swc/core-win32-x64-msvc@1.10.15":
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.10.15.tgz#70bcf83837d331e5cebaf2195a1e696549fdfef3"
+  integrity sha512-XJzBCqO1m929qbJsOG7FZXQWX26TnEoMctS3QjuCoyBmkHxxQmZsy78KjMes1aomTcKHCyFYgrRGWgVmk7tT4Q==
 
 "@swc/core@^1.7.3":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@swc/core/-/core-1.10.1.tgz#16b3b8284bafb0ecabb253925796883971e5a761"
-  integrity sha512-rQ4dS6GAdmtzKiCRt3LFVxl37FaY1cgL9kSUTnhQ2xc3fmHOd7jdJK/V4pSZMG1ruGTd0bsi34O2R0Olg9Zo/w==
+  version "1.10.15"
+  resolved "https://registry.npmjs.org/@swc/core/-/core-1.10.15.tgz#41568ec332765d2798f56753fd56d7aeece48510"
+  integrity sha512-/iFeQuNaGdK7mfJbQcObhAhsMqLT7qgMYl7jX2GEIO+VDTejESpzAyKwaMeYXExN8D6e5BRHBCe7M5YlsuzjDA==
   dependencies:
     "@swc/counter" "^0.1.3"
     "@swc/types" "^0.1.17"
   optionalDependencies:
-    "@swc/core-darwin-arm64" "1.10.1"
-    "@swc/core-darwin-x64" "1.10.1"
-    "@swc/core-linux-arm-gnueabihf" "1.10.1"
-    "@swc/core-linux-arm64-gnu" "1.10.1"
-    "@swc/core-linux-arm64-musl" "1.10.1"
-    "@swc/core-linux-x64-gnu" "1.10.1"
-    "@swc/core-linux-x64-musl" "1.10.1"
-    "@swc/core-win32-arm64-msvc" "1.10.1"
-    "@swc/core-win32-ia32-msvc" "1.10.1"
-    "@swc/core-win32-x64-msvc" "1.10.1"
+    "@swc/core-darwin-arm64" "1.10.15"
+    "@swc/core-darwin-x64" "1.10.15"
+    "@swc/core-linux-arm-gnueabihf" "1.10.15"
+    "@swc/core-linux-arm64-gnu" "1.10.15"
+    "@swc/core-linux-arm64-musl" "1.10.15"
+    "@swc/core-linux-x64-gnu" "1.10.15"
+    "@swc/core-linux-x64-musl" "1.10.15"
+    "@swc/core-win32-arm64-msvc" "1.10.15"
+    "@swc/core-win32-ia32-msvc" "1.10.15"
+    "@swc/core-win32-x64-msvc" "1.10.15"
 
 "@swc/counter@^0.1.3":
   version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
+  resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz#cc7463bd02949611c6329596fccd2b0ec782b0e9"
   integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
 
 "@swc/helpers@0.5.5":
   version "0.5.5"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.5.tgz#12689df71bfc9b21c4f4ca00ae55f2f16c8b77c0"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz#12689df71bfc9b21c4f4ca00ae55f2f16c8b77c0"
   integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
   dependencies:
     "@swc/counter" "^0.1.3"
@@ -3357,22 +3368,22 @@
 
 "@swc/helpers@^0.5.12":
   version "0.5.15"
-  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz#79efab344c5819ecf83a43f3f9f811fc84b516d7"
   integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
   dependencies:
     tslib "^2.8.0"
 
 "@swc/types@^0.1.17":
   version "0.1.17"
-  resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.17.tgz#bd1d94e73497f27341bf141abdf4c85230d41e7c"
+  resolved "https://registry.npmjs.org/@swc/types/-/types-0.1.17.tgz#bd1d94e73497f27341bf141abdf4c85230d41e7c"
   integrity sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==
   dependencies:
     "@swc/counter" "^0.1.3"
 
 "@tailwindcss/typography@^0.5.9":
-  version "0.5.15"
-  resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.15.tgz#007ab9870c86082a1c76e5b3feda9392c7c8d648"
-  integrity sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==
+  version "0.5.16"
+  resolved "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz#a926c8f44d5c439b2915e231cad80058850047c6"
+  integrity sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==
   dependencies:
     lodash.castarray "^4.4.0"
     lodash.isplainobject "^4.0.6"
@@ -3380,20 +3391,20 @@
     postcss-selector-parser "6.0.10"
 
 "@tanstack/react-virtual@^3.0.0-beta.60":
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.11.0.tgz#d847da68ade193155a9621fed56e4817ae24084f"
-  integrity sha512-liRl34SrQm54NZdf22d/H4a7GucPNCxBSJdWWZlUrF1E1oXcZ3/GfRRHFDUJXwEuTfjtyp0X6NnUK7bhIuDzoQ==
+  version "3.13.0"
+  resolved "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.0.tgz#f50bccdfbb792cb11fdc0342fd3ec6945c730389"
+  integrity sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==
   dependencies:
-    "@tanstack/virtual-core" "3.10.9"
+    "@tanstack/virtual-core" "3.13.0"
 
-"@tanstack/virtual-core@3.10.9":
-  version "3.10.9"
-  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz#55710c92b311fdaa8d8c66682a0dbdd684bc77c4"
-  integrity sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==
+"@tanstack/virtual-core@3.13.0":
+  version "3.13.0"
+  resolved "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.0.tgz#8db0ccc9d6c32b6393551a6d19c87dbb259a8828"
+  integrity sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==
 
 "@testing-library/dom@10.4.0":
   version "10.4.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
+  resolved "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
   integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==
   dependencies:
     "@babel/code-frame" "^7.10.4"
@@ -3407,7 +3418,7 @@
 
 "@testing-library/jest-dom@6.5.0":
   version "6.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz#50484da3f80fb222a853479f618a9ce5c47bfe54"
+  resolved "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.5.0.tgz#50484da3f80fb222a853479f618a9ce5c47bfe54"
   integrity sha512-xGGHpBXYSHUUr6XsKBfs85TWlYKpTc37cSBBVrXcib2MkHLboWlkClhWF37JKlDb9KEq3dHs+f2xR7XJEWGBxA==
   dependencies:
     "@adobe/css-tools" "^4.4.0"
@@ -3420,179 +3431,199 @@
 
 "@testing-library/user-event@14.5.2":
   version "14.5.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
+  resolved "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
   integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
 
-"@tiptap/core@^2.1.13", "@tiptap/core@^2.10.3", "@tiptap/core@^2.4.0":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/core/-/core-2.10.3.tgz#7744abd4a954f35265af351f1be9b545e819c66d"
-  integrity sha512-wAG/0/UsLeZLmshWb6rtWNXKJftcmnned91/HLccHVQAuQZ1UWH+wXeQKu/mtodxEO7JcU2mVPR9mLGQkK0McQ==
+"@tiptap/core@2.10.4":
+  version "2.10.4"
+  resolved "https://registry.npmjs.org/@tiptap/core/-/core-2.10.4.tgz#0b3ad822d71f5834b281590809f430e6fd41523c"
+  integrity sha512-fExFRTRgb6MSpg2VvR5qO2dPTQAZWuUoU4UsBCurIVcPWcyVv4FG1YzgMyoLDKy44rebFtwUGJbfU9NzX7Q/bA==
 
-"@tiptap/extension-blockquote@^2.1.13", "@tiptap/extension-blockquote@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-blockquote/-/extension-blockquote-2.10.3.tgz#ee29925930ac9a5b129d3ad262bb45afcc23b318"
-  integrity sha512-u9Mq4r8KzoeGVT8ms6FQDIMN95dTh3TYcT7fZpwcVM96mIl2Oyt+Bk66mL8z4zuFptfRI57Cu9QdnHEeILd//w==
+"@tiptap/core@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/core/-/core-2.11.5.tgz#2bf1b08c4ca2467778d0a109634c45ab475522f4"
+  integrity sha512-jb0KTdUJaJY53JaN7ooY3XAxHQNoMYti/H6ANo707PsLXVeEqJ9o8+eBup1JU5CuwzrgnDc2dECt2WIGX9f8Jw==
 
-"@tiptap/extension-bold@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bold/-/extension-bold-2.10.3.tgz#6ffdeed5d1b2c7bd2a248b327083f3db89c02f87"
-  integrity sha512-xnF1tS2BsORenr11qyybW120gHaeHKiKq+ZOP14cGA0MsriKvWDnaCSocXP/xMEYHy7+2uUhJ0MsKkHVj4bPzQ==
+"@tiptap/extension-blockquote@2.10.4":
+  version "2.10.4"
+  resolved "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.10.4.tgz#0f9a26740009fc7430fabc423077c369feaebb42"
+  integrity sha512-4JSwAM3B92YWvGzu/Vd5rovPrCGwLSaSLD5rxcLyfxLSrTDQd3n7lp78pzVgGhunVECzaGF5A0ByWWpEyS0a3w==
 
-"@tiptap/extension-bubble-menu@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.10.3.tgz#e7f2fdddd6ef4310f9a18bc8df79f910ab26c688"
-  integrity sha512-e9a4yMjQezuKy0rtyyzxbV2IAE1bm1PY3yoZEFrcaY0o47g1CMUn2Hwe+9As2HdntEjQpWR7NO1mZeKxHlBPYA==
+"@tiptap/extension-blockquote@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.11.5.tgz#d43ae78f5eba7de1b9138820502e950bae83c31c"
+  integrity sha512-MZfcRIzKRD8/J1hkt/eYv49060GTL6qGR3NY/oTDuw2wYzbQXXLEbjk8hxAtjwNn7G+pWQv3L+PKFzZDxibLuA==
+
+"@tiptap/extension-bold@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.11.5.tgz#7fc13d835067fbee4ff2be83a694f5200ba50e41"
+  integrity sha512-OAq03MHEbl7MtYCUzGuwb0VpOPnM0k5ekMbEaRILFU5ZC7cEAQ36XmPIw1dQayrcuE8GZL35BKub2qtRxyC9iA==
+
+"@tiptap/extension-bubble-menu@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.11.5.tgz#75da9bcea2a6579cd3ad41cf82f7bc7369c1816d"
+  integrity sha512-rx+rMd7EEdht5EHLWldpkzJ56SWYA9799b33ustePqhXd6linnokJCzBqY13AfZ9+xp3RsR6C0ZHI9GGea0tIA==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-bullet-list@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-bullet-list/-/extension-bullet-list-2.10.3.tgz#0a17343aaf64679327de87785918bcdb04744edf"
-  integrity sha512-PTkwJOVlHi4RR4Wrs044tKMceweXwNmWA6EoQ93hPUVtQcwQL990Es5Izp+i88twTPLuGD9dH+o9QDyH9SkWdA==
+"@tiptap/extension-bullet-list@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.11.5.tgz#84c6bf623c5dffcd73dd24d012c9636191031d43"
+  integrity sha512-VXwHlX6A/T6FAspnyjbKDO0TQ+oetXuat6RY1/JxbXphH42nLuBaGWJ6pgy6xMl6XY8/9oPkTNrfJw/8/eeRwA==
 
-"@tiptap/extension-character-count@^2.6.5":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-character-count/-/extension-character-count-2.10.3.tgz#f9ad8eb86ea08d09678a1e6ea5915660ffe73f1b"
-  integrity sha512-7L3VS9+SZqwK94/Yk4c+NEpI6kDUAYW3tYGuxCRiKHDlUy3fkXkVkPlxsoNUpAA4O05KGAwD0YW5rvAkNXdi8w==
+"@tiptap/extension-character-count@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-character-count/-/extension-character-count-2.11.0.tgz#7d3992ceba72f1eeb2db3a1fc997c50dddd7cf8c"
+  integrity sha512-WbqVr1QY62vxpmDJP5k3bwyzoHha1sZTs0xj3L+4s1j/SB2A7tAlFdcNPPwfbPOINHQgomSAyClfTyd4Gor7HA==
 
-"@tiptap/extension-code-block@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code-block/-/extension-code-block-2.10.3.tgz#5ff1b1e563c4eda44677df444c523de1e5258fa4"
-  integrity sha512-yiDVNg22fYkzsFk5kBlDSHcjwVJgajvO/M5fDXA+Hfxwo2oNcG6aJyyHXFe+UaXTVjdkPej0J6kcMKrTMCiFug==
+"@tiptap/extension-code-block@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.11.5.tgz#b90cea403884630f3f86c7629815250e8a266802"
+  integrity sha512-ksxMMvqLDlC+ftcQLynqZMdlJT1iHYZorXsXw/n+wuRd7YElkRkd6YWUX/Pq/njFY6lDjKiqFLEXBJB8nrzzBA==
 
-"@tiptap/extension-code@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-code/-/extension-code-2.10.3.tgz#b9fb04be2d51760f011ec7a060d4e2e3eefe392c"
-  integrity sha512-JyLbfyY3cPctq9sVdpcRWTcoUOoq3/MnGE1eP6eBNyMTHyBPcM9TPhOkgj+xkD1zW/884jfelB+wa70RT/AMxQ==
+"@tiptap/extension-code@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.11.5.tgz#a550c544804e65507ab66dc8ab89a1e2f7d9228d"
+  integrity sha512-xOvHevNIQIcCCVn9tpvXa1wBp0wHN/2umbAZGTVzS+AQtM7BTo0tz8IyzwxkcZJaImONcUVYLOLzt2AgW1LltA==
 
-"@tiptap/extension-collaboration@^2.3.2":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-collaboration/-/extension-collaboration-2.10.3.tgz#822191287610024650a15867be8fa260b1ed3a9a"
-  integrity sha512-QythXxiYNiypHpBL2/352gBfFtvi8A4Yxw5jptzVTEuGnzOCX4PKvmjZmgH1q6lVyV3G7TPxeepYtNpJPxqI1w==
+"@tiptap/extension-collaboration@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-collaboration/-/extension-collaboration-2.11.0.tgz#21ac1c8bc2ca6d8ba2a838e63457528627294888"
+  integrity sha512-pS3E//ODD80PwVXp7zOqek0q9z5AtZ6sMSK5nPneNioe7dSvCeQzToOD9V6EevK4KChUIN9wEryK8mkQs57ioA==
 
-"@tiptap/extension-document@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-document/-/extension-document-2.10.3.tgz#2ba039932af67c85475870697495b099d9983a1d"
-  integrity sha512-6i8+xbS2zB6t8iFzli1O/QB01MmwyI5Hqiiv4m5lOxqavmJwLss2sRhoMC2hB3CyFg5UmeODy/f/RnI6q5Vixg==
+"@tiptap/extension-document@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.11.5.tgz#1d650d232df46cf07b83e0a5cc64db1c70057f37"
+  integrity sha512-7I4BRTpIux2a0O2qS3BDmyZ5LGp3pszKbix32CmeVh7lN9dV7W5reDqtJJ9FCZEEF+pZ6e1/DQA362dflwZw2g==
 
-"@tiptap/extension-dropcursor@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-dropcursor/-/extension-dropcursor-2.10.3.tgz#c5484e16df98f3c43c9f585c5686b38808c4615b"
-  integrity sha512-wzWf82ixWzZQr0hxcf/A0ul8NNxgy1N63O+c56st6OomoLuKUJWOXF+cs9O7V+/5rZKWdbdYYoRB5QLvnDBAlQ==
+"@tiptap/extension-dropcursor@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.11.5.tgz#a1d6fad3379551449534bdb8135da2577a8ec8fb"
+  integrity sha512-uIN7L3FU0904ec7FFFbndO7RQE/yiON4VzAMhNn587LFMyWO8US139HXIL4O8dpZeYwYL3d1FnDTflZl6CwLlg==
 
-"@tiptap/extension-floating-menu@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-floating-menu/-/extension-floating-menu-2.10.3.tgz#5ce1613d79d80182b9b92f77ef7c429a8dc6b88a"
-  integrity sha512-Prg8rYLxeyzHxfzVu1mDkkUWMnD9ZN3y370O/1qy55e+XKVw9jFkTSuz0y0+OhMJG6bulYpDUMtb+N3+2xOWlQ==
+"@tiptap/extension-floating-menu@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.11.5.tgz#97868901bae46e1826b9d2cfe5a4a33a446adfc1"
+  integrity sha512-HsMI0hV5Lwzm530Z5tBeyNCBNG38eJ3qjfdV2OHlfSf3+KOEfn6a5AUdoNaZO02LF79/8+7BaYU2drafag9cxQ==
   dependencies:
     tippy.js "^6.3.7"
 
-"@tiptap/extension-gapcursor@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-gapcursor/-/extension-gapcursor-2.10.3.tgz#6a68027d41fb77707104551b2886146253a9461b"
-  integrity sha512-FskZi2DqDSTH1WkgLF2OLy0xU7qj3AgHsKhVsryeAtld4jAK5EsonneWgaipbz0e/MxuIvc1oyacfZKABpLaNg==
+"@tiptap/extension-gapcursor@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.11.5.tgz#6771e387d90ef85ee834f4572627d76e303e1297"
+  integrity sha512-kcWa+Xq9cb6lBdiICvLReuDtz/rLjFKHWpW3jTTF3FiP3wx4H8Rs6bzVtty7uOVTfwupxZRiKICAMEU6iT0xrQ==
 
-"@tiptap/extension-hard-break@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-hard-break/-/extension-hard-break-2.10.3.tgz#1fd1ea91e57c018747e54516eaca963e578af6a4"
-  integrity sha512-2rFlimUKAgKDwT6nqAMtPBjkrknQY8S7oBNyIcDOUGyFkvbDUl3Jd0PiC929S5F3XStJRppnMqhpNDAlWmvBLA==
+"@tiptap/extension-hard-break@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.11.5.tgz#cf9610846cb7ab0f3a8d8dc37fd1fcee6a39d72f"
+  integrity sha512-q9doeN+Yg9F5QNTG8pZGYfNye3tmntOwch683v0CCVCI4ldKaLZ0jG3NbBTq+mosHYdgOH2rNbIORlRRsQ+iYQ==
 
-"@tiptap/extension-heading@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-heading/-/extension-heading-2.10.3.tgz#bf8efb3a580c75b86dce505a63f1ca7450a9aaea"
-  integrity sha512-AlxXXPCWIvw8hQUDFRskasj32iMNB8Sb19VgyFWqwvntGs2/UffNu8VdsVqxD2HpZ0g5rLYCYtSW4wigs9R3og==
+"@tiptap/extension-heading@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.11.5.tgz#e9a54e4cbb5c9c7fc95a24cc894a16751ecd185f"
+  integrity sha512-x/MV53psJ9baRcZ4k4WjnCUBMt8zCX7mPlKVT+9C/o+DEs/j/qxPLs95nHeQv70chZpSwCQCt93xMmuF0kPoAg==
 
-"@tiptap/extension-history@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-history/-/extension-history-2.10.3.tgz#86ddbdaaa1573d4461c3a925185c4ebd9aec8079"
-  integrity sha512-HaSiMdx9Im9Pb9qGlVud7W8bweRDRMez33Uzs5a2x0n1RWkelfH7TwYs41Y3wus8Ujs7kw6qh7jyhvPpQBKaSA==
+"@tiptap/extension-history@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.11.5.tgz#c636c8da784ad25886eb617cff6b4752ac9586d1"
+  integrity sha512-b+wOS33Dz1azw6F1i9LFTEIJ/gUui0Jwz5ZvmVDpL2ZHBhq1Ui0/spTT+tuZOXq7Y/uCbKL8Liu4WoedIvhboQ==
 
-"@tiptap/extension-horizontal-rule@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.10.3.tgz#b2b6e47896ad12ef6747816bc11b388a53480614"
-  integrity sha512-1a2IWhD00tgUNg/91RLnBvfENL7DLCui5L245+smcaLu+OXOOEpoBHawx59/M4hEpsjqvRRM79TzO9YXfopsPw==
+"@tiptap/extension-horizontal-rule@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.11.5.tgz#b876f606386c51bc2ff45d4bd26267f5b104a850"
+  integrity sha512-3up2r1Du8/5/4ZYzTC0DjTwhgPI3dn8jhOCLu73m5F3OGvK/9whcXoeWoX103hYMnGDxBlfOje71yQuN35FL4A==
 
-"@tiptap/extension-image@^2.1.13":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.10.3.tgz#88f18344bcb8878cd47504e3eb592ced5da1e32f"
-  integrity sha512-YIjAF5CwDkMe28OQ5pvnmdRgbJ9JcGMIHY1kyqNunSf2iwphK+6SWz9UEIkDFiT7AsRZySqxFSq93iK1XyTifw==
+"@tiptap/extension-image@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-image/-/extension-image-2.11.0.tgz#e9611a6a032804279f9b12a483a7afe696358a3f"
+  integrity sha512-R+JkK5ocX35ag1c42aAw6rcb9QlLUBB0ju8A7b+8qZXN5yWKE0yO/oixYFmnZN7WSnBYtzuCVDX8cvRG+BPbgA==
 
-"@tiptap/extension-italic@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.10.3.tgz#0efb940c572e47bd03e7e50a7ce745b60040771d"
-  integrity sha512-wAiO6ZxoHx2H90phnKttLWGPjPZXrfKxhOCsqYrK8BpRByhr48godOFRuGwYnKaiwoVjpxc63t+kDJDWvqmgMw==
+"@tiptap/extension-italic@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.11.5.tgz#63b09c7fb41ab64681983df7be8cf6bc330c0ede"
+  integrity sha512-9VGfb2/LfPhQ6TjzDwuYLRvw0A6VGbaIp3F+5Mql8XVdTBHb2+rhELbyhNGiGVR78CaB/EiKb6dO9xu/tBWSYA==
 
-"@tiptap/extension-list-item@^2.1.13", "@tiptap/extension-list-item@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-list-item/-/extension-list-item-2.10.3.tgz#a35c10a579acff63bb46a2fa9491b5f4edf00188"
-  integrity sha512-9sok81gvZfSta2K1Dwrq5/HSz1jk4zHBpFqCx0oydzodGslx6X1bNxdca+eXJpXZmQIWALK7zEr4X8kg3WZsgw==
+"@tiptap/extension-list-item@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.11.0.tgz#15889fd8217b998bfef78cd9079c8405b5a9abcd"
+  integrity sha512-Jikcg0fccpM13a3hAFLtguMcpVg4eMWI8NnC0aUULD9rFhvWZQYQYQuoK3fO6vQrAQpNhsV4oa0dfSq1btu9kg==
 
-"@tiptap/extension-mention@^2.1.13":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-mention/-/extension-mention-2.10.3.tgz#544d257f8e5fd79ac32ca6d1b29c4447a1330d9a"
-  integrity sha512-h0+BrTS2HdjMfsuy6zkFIqmVGYL8w3jIG0gYaDHjWwwe/Lf2BDgOu3bZWcSr/3bKiJIwwzpOJrXssqta4TZ0yQ==
+"@tiptap/extension-list-item@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.11.5.tgz#6ada38dd4e6db889288242542bc0490b0908d190"
+  integrity sha512-Mp5RD/pbkfW1vdc6xMVxXYcta73FOwLmblQlFNn/l/E5/X1DUSA4iGhgDDH4EWO3swbs03x2f7Zka/Xoj3+WLg==
 
-"@tiptap/extension-ordered-list@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-ordered-list/-/extension-ordered-list-2.10.3.tgz#5ee0feb2f06a59c50e413160840f244215cc4026"
-  integrity sha512-/SFuEDnbJxy3jvi72LeyiPHWkV+uFc0LUHTUHSh20vwyy+tLrzncJfXohGbTIv5YxYhzExQYZDRD4VbSghKdlw==
+"@tiptap/extension-mention@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-mention/-/extension-mention-2.11.0.tgz#515f831975188ce33e3c0951f94a34396a3f35cd"
+  integrity sha512-5/Yk2rTpsoIZaNyo4f+CgsCCkQkSiNAp24HOvvCm9Dp9w1gIFm6y6dSj5RYqzEucGjOkoaBbfMcm1QxKWIj6/A==
 
-"@tiptap/extension-paragraph@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.10.3.tgz#128c8fcd46d2e854d214c7f566e6212f2ebff6f1"
-  integrity sha512-sNkTX/iN+YoleDiTJsrWSBw9D7c4vsYwnW5y/G5ydfuJMIRQMF78pWSIWZFDRNOMkgK5UHkhu9anrbCFYgBfaA==
+"@tiptap/extension-ordered-list@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.11.5.tgz#c81e33b5bc885450d412e9ea644cc666407e0c13"
+  integrity sha512-Cu8KwruBNWAaEfshRQR0yOSaUKAeEwxW7UgbvF9cN/zZuKgK5uZosPCPTehIFCcRe+TBpRtZQh+06f/gNYpYYg==
 
-"@tiptap/extension-placeholder@^2.3.0":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.10.3.tgz#eeb2b2f1916619e334af7d2a9d6885f77bb4ab78"
-  integrity sha512-0OkwnDLguZgoiJM85cfnOySuMmPUF7qqw7DHQ+c3zwTAYnvzpvqrvpupc+2Zi9GfC1sDgr+Ajrp8imBHa6PHfA==
+"@tiptap/extension-paragraph@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.11.5.tgz#05575f0264a435837483831eebffc5e3af279cb1"
+  integrity sha512-YFBWeg7xu/sBnsDIF/+nh9Arf7R0h07VZMd0id5Ydd2Qe3c1uIZwXxeINVtH0SZozuPIQFAT8ICe9M0RxmE+TA==
 
-"@tiptap/extension-strike@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-strike/-/extension-strike-2.10.3.tgz#99e39c8156cad7a9dc88504ac43aa839c54ef7af"
-  integrity sha512-jYoPy6F6njYp3txF3u23bgdRy/S5ATcWDO9LPZLHSeikwQfJ47nqb+EUNo5M8jIOgFBTn4MEbhuZ6OGyhnxopA==
+"@tiptap/extension-placeholder@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.11.0.tgz#a330df0bc791df82b3a84490031a8db9a68f4061"
+  integrity sha512-ee8vz51pW6H+1rEDMFg2FnBs2Tj5rUHlJ1JgD7Dcp3+89SVHGB3UILGfbNpAnHZvhmsTY3NcfPAcZZ80QfQFMQ==
 
-"@tiptap/extension-task-item@^2.1.13":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-item/-/extension-task-item-2.10.3.tgz#ff64d8620198796266b46e5a27c48ccd31b90b94"
-  integrity sha512-vE4qxGrZTdwynHq6l5xN0jI0ahDZpmKeoD6yuCMNyN831dgHXEjNrV8oBtZUvvqChFRc/LiSmUbrTInUn5xeNg==
+"@tiptap/extension-strike@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.11.5.tgz#94e214dcede09f6c5f99d0c58290a1d3f5db61eb"
+  integrity sha512-PVfUiCqrjvsLpbIoVlegSY8RlkR64F1Rr2RYmiybQfGbg+AkSZXDeO0eIrc03//4gua7D9DfIozHmAKv1KN3ow==
 
-"@tiptap/extension-task-list@^2.1.13":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-task-list/-/extension-task-list-2.10.3.tgz#8a6f2c009f844e1a98395d26140f1045d3efbd5c"
-  integrity sha512-Zj1pj+6VrL8VXlFYWdcLlCMykzARsvdqdU8cGVnBuC0H0vrSSfLGl+GxGnQwxTnqiNtxR4t70DLi/UjFBvzlqw==
+"@tiptap/extension-task-item@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-task-item/-/extension-task-item-2.11.0.tgz#ff97f10bf39d6c27fd3f3f1ee3987d7015304c11"
+  integrity sha512-qu6VuRc8qF80Bwr82CItFcrKtC67LJkwpxESLEIi42zWZ5sXF/3DJEPPS/4Kk+nAc9UCBoEMFAULibPq7rRl/w==
 
-"@tiptap/extension-text-align@^2.8.0":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-align/-/extension-text-align-2.10.3.tgz#f1144210e96219bd0d8c49c78f76c3a3ab543e9b"
-  integrity sha512-g75sNl73gtgjP3XIcl06kvv1qw3c0rGEUD848rUU1bvlBpU3IxjkcQLgYvHmv3vpuUp9cKUkA2wa7Sv6R3fjvw==
+"@tiptap/extension-task-list@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-task-list/-/extension-task-list-2.11.0.tgz#2f197a70aafc0c23163ed70aa314cc0300534cf6"
+  integrity sha512-+dZRjeXLXxyliFt3J7uQADxfOwi6ntyepVM+ri1rnmIaqVZUHJbUFodOc0LivI+Z5iZZ10u3TId8gehqWJHD+w==
 
-"@tiptap/extension-text-style@^2.10.3", "@tiptap/extension-text-style@^2.7.1":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text-style/-/extension-text-style-2.10.3.tgz#fcc93de8d0479b893c2a000ad7e3dc20b944f3dd"
-  integrity sha512-TalYIdlF7vBA4afFhmido7AORdBbu3sV+HCByda0FiNbM6cjng3Nr9oxHOCVJy+ChqrcgF4m54zDfLmamdyu5Q==
+"@tiptap/extension-text-align@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-2.11.0.tgz#b90b86ee3f6e14c9abf186cb8ab6ced20c0df14d"
+  integrity sha512-VRXBqO17po6ddqhoWLBa2aCX/tqHdzdKPLfjnBy1fF8hjQKbidzjMWhb4CMm31ApvJjKK/DTkM3EnyYS/XDhng==
 
-"@tiptap/extension-text@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-text/-/extension-text-2.10.3.tgz#f985ebd37a2c86d621068927bceca0f05e842865"
-  integrity sha512-7p9XiRprsRZm8y9jvF/sS929FCELJ5N9FQnbzikOiyGNUx5mdI+exVZlfvBr9xOD5s7fBLg6jj9Vs0fXPNRkPg==
+"@tiptap/extension-text-style@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.11.0.tgz#2acb6207fe6acdb5479384682846980be15caa80"
+  integrity sha512-vuA16wMZ6J3fboL7FObwV2f5uN9Vg0WYmqU7971vxzJyaRj9VE1eeH8Kh5fq4RgwDzc13MZGvZZV4HcE1R8o8A==
 
-"@tiptap/extension-underline@^2.1.13":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/extension-underline/-/extension-underline-2.10.3.tgz#83d392bd4d0b2344c590c19736bb89d208c413df"
-  integrity sha512-VeGs0jeNiTnXddHHJEgOc/sKljZiyTEgSSuqMmsBACrr9aGFXbLTgKTvNjkZ9WzSnu7LwgJuBrwEhg8yYixUyQ==
+"@tiptap/extension-text-style@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.11.5.tgz#f1b3882de489328203187e6256e6ee130477cfad"
+  integrity sha512-YUmYl0gILSd/u/ZkOmNxjNXVw+mu8fpC2f8G4I4tLODm0zCx09j9DDEJXSrM5XX72nxJQqtSQsCpNKnL0hfeEQ==
 
-"@tiptap/html@^2.3.0":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/html/-/html-2.10.3.tgz#64d29773fbc3d9cc46943a4f8dc4d6dd052608ef"
-  integrity sha512-ERfehdfRN8TRfZCLOWHnZDaP3tTO3+wov791p/b7vuJOKCiPHlGZ1dX72Bysvfn4F98ZLJBHKtuVLqti7qRo5w==
+"@tiptap/extension-text@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.11.5.tgz#10cc6ec519aac71a6841ec9bd914ded747f6ec3f"
+  integrity sha512-Gq1WwyhFpCbEDrLPIHt5A8aLSlf8bfz4jm417c8F/JyU0J5dtYdmx0RAxjnLw1i7ZHE7LRyqqAoS0sl7JHDNSQ==
+
+"@tiptap/extension-underline@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.11.0.tgz#473025d3ed01953fb2c23f8060ea90be4c231faa"
+  integrity sha512-DE1piq441y1+9Aj1pvvuq1dcc5B2HZ2d1SPtO4DTMjCxrhok12biTkMxxq0q1dzA5/BouLlUW6WTPpinhmrUWA==
+
+"@tiptap/html@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/html/-/html-2.11.0.tgz#dd0b4195a07bbdca27aa13325b8ebac41480a6a0"
+  integrity sha512-9+8eSeey3gm6vMtbt+uKZfkvtwsWr577lhtTeGUsoThim9zyBnbhzHc1dQw2m1RefOoPcODrnnQPvi5nvA84Cw==
   dependencies:
     zeed-dom "^0.15.1"
 
-"@tiptap/pm@^2.1.13", "@tiptap/pm@^2.10.3":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/pm/-/pm-2.10.3.tgz#c6925bafd23868800bc71e06cdfe12add7bf4943"
-  integrity sha512-771p53aU0KFvujvKpngvq2uAxThlEsjYaXcVVmwrhf0vxSSg+psKQEvqvWvHv/3BwkPVCGwmEKNVJZjaXFKu4g==
+"@tiptap/pm@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.0.tgz#c2ccb0c9b99fd5915d9390e90d3ab9e5fb408cd8"
+  integrity sha512-4RU6bpODkMY+ZshzdRFcuUc5jWlMW82LWXR6UOsHK/X/Mav41ZFS0Cyf+hQM6gxxTB09YFIICmGpEpULb+/CuA==
   dependencies:
     prosemirror-changeset "^2.2.1"
     prosemirror-collab "^1.3.1"
@@ -3613,77 +3644,101 @@
     prosemirror-transform "^1.10.2"
     prosemirror-view "^1.37.0"
 
-"@tiptap/react@^2.1.13":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/react/-/react-2.10.3.tgz#e0332e9400e5cb653c1d30421c3d20e9f6e117c9"
-  integrity sha512-5GBL3arWai8WZuCl1MMA7bT5aWwqDi5AOQhX+hovKjwHvttpKDogRoUBL5k6Eds/eQMBMGTpsfmZlGNiFxSv1g==
+"@tiptap/pm@^2.11.0":
+  version "2.11.5"
+  resolved "https://registry.npmjs.org/@tiptap/pm/-/pm-2.11.5.tgz#6577e277e5a991c605a3dfcebde7c0b794d8def4"
+  integrity sha512-z9JFtqc5ZOsdQLd9vRnXfTCQ8v5ADAfRt9Nm7SqP6FUHII8E1hs38ACzf5xursmth/VonJYb5+73Pqxk1hGIPw==
   dependencies:
-    "@tiptap/extension-bubble-menu" "^2.10.3"
-    "@tiptap/extension-floating-menu" "^2.10.3"
+    prosemirror-changeset "^2.2.1"
+    prosemirror-collab "^1.3.1"
+    prosemirror-commands "^1.6.2"
+    prosemirror-dropcursor "^1.8.1"
+    prosemirror-gapcursor "^1.3.2"
+    prosemirror-history "^1.4.1"
+    prosemirror-inputrules "^1.4.0"
+    prosemirror-keymap "^1.2.2"
+    prosemirror-markdown "^1.13.1"
+    prosemirror-menu "^1.2.4"
+    prosemirror-model "^1.23.0"
+    prosemirror-schema-basic "^1.2.3"
+    prosemirror-schema-list "^1.4.1"
+    prosemirror-state "^1.4.3"
+    prosemirror-tables "^1.6.3"
+    prosemirror-trailing-node "^3.0.0"
+    prosemirror-transform "^1.10.2"
+    prosemirror-view "^1.37.0"
+
+"@tiptap/react@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/react/-/react-2.11.0.tgz#28b9ca64bdeb6302eaca1941ef792e3acea2e40e"
+  integrity sha512-AALzHbqNq/gerJpkbXmN2OXFmHAs2bQENH7rXbnH70bpxVdIfQVtvjK4dIb+cQQvAuTWZvhsISnTrFY2BesT3Q==
+  dependencies:
+    "@tiptap/extension-bubble-menu" "^2.11.0"
+    "@tiptap/extension-floating-menu" "^2.11.0"
     "@types/use-sync-external-store" "^0.0.6"
     fast-deep-equal "^3"
     use-sync-external-store "^1"
 
-"@tiptap/starter-kit@^2.1.13":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/starter-kit/-/starter-kit-2.10.3.tgz#2b6c3be565219eacd897f1c2d271b516d9ff6f87"
-  integrity sha512-oq8xdVIMqohSs91ofHSr7i5dCp2F56Lb9aYIAI25lZmwNwQJL2geGOYjMSfL0IC4cQHPylIuSKYCg7vRFdZmAA==
+"@tiptap/starter-kit@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.11.0.tgz#3b4a9ca9daaffed3abd030d4cd72e8d9d3eb0649"
+  integrity sha512-lrYmkeaAFiuUjN5nGnCowdjponrsR7eRmeTf/15/5oZsNrMN7t/fvPb014AqhG/anNasa0ism4CKZns3D+4pKQ==
   dependencies:
-    "@tiptap/core" "^2.10.3"
-    "@tiptap/extension-blockquote" "^2.10.3"
-    "@tiptap/extension-bold" "^2.10.3"
-    "@tiptap/extension-bullet-list" "^2.10.3"
-    "@tiptap/extension-code" "^2.10.3"
-    "@tiptap/extension-code-block" "^2.10.3"
-    "@tiptap/extension-document" "^2.10.3"
-    "@tiptap/extension-dropcursor" "^2.10.3"
-    "@tiptap/extension-gapcursor" "^2.10.3"
-    "@tiptap/extension-hard-break" "^2.10.3"
-    "@tiptap/extension-heading" "^2.10.3"
-    "@tiptap/extension-history" "^2.10.3"
-    "@tiptap/extension-horizontal-rule" "^2.10.3"
-    "@tiptap/extension-italic" "^2.10.3"
-    "@tiptap/extension-list-item" "^2.10.3"
-    "@tiptap/extension-ordered-list" "^2.10.3"
-    "@tiptap/extension-paragraph" "^2.10.3"
-    "@tiptap/extension-strike" "^2.10.3"
-    "@tiptap/extension-text" "^2.10.3"
-    "@tiptap/extension-text-style" "^2.10.3"
-    "@tiptap/pm" "^2.10.3"
+    "@tiptap/core" "^2.11.0"
+    "@tiptap/extension-blockquote" "^2.11.0"
+    "@tiptap/extension-bold" "^2.11.0"
+    "@tiptap/extension-bullet-list" "^2.11.0"
+    "@tiptap/extension-code" "^2.11.0"
+    "@tiptap/extension-code-block" "^2.11.0"
+    "@tiptap/extension-document" "^2.11.0"
+    "@tiptap/extension-dropcursor" "^2.11.0"
+    "@tiptap/extension-gapcursor" "^2.11.0"
+    "@tiptap/extension-hard-break" "^2.11.0"
+    "@tiptap/extension-heading" "^2.11.0"
+    "@tiptap/extension-history" "^2.11.0"
+    "@tiptap/extension-horizontal-rule" "^2.11.0"
+    "@tiptap/extension-italic" "^2.11.0"
+    "@tiptap/extension-list-item" "^2.11.0"
+    "@tiptap/extension-ordered-list" "^2.11.0"
+    "@tiptap/extension-paragraph" "^2.11.0"
+    "@tiptap/extension-strike" "^2.11.0"
+    "@tiptap/extension-text" "^2.11.0"
+    "@tiptap/extension-text-style" "^2.11.0"
+    "@tiptap/pm" "^2.11.0"
 
-"@tiptap/suggestion@^2.0.13":
-  version "2.10.3"
-  resolved "https://registry.yarnpkg.com/@tiptap/suggestion/-/suggestion-2.10.3.tgz#b8ad4516a6d074bda6e1aeeed0d8eb5df3262773"
-  integrity sha512-ReEwiPQoDTXn3RuWnj9D7Aod9dbNQz0QAoLRftWUTdbj3O2ohbvTNX6tlcfS+7x48Q+fAALiJGpp5BtctODlsA==
+"@tiptap/suggestion@2.11.0":
+  version "2.11.0"
+  resolved "https://registry.npmjs.org/@tiptap/suggestion/-/suggestion-2.11.0.tgz#826140c6f1a76af2d91713dafb4b142c803eabef"
+  integrity sha512-f+KcczhzEEy2f7/0N/RSID+Z6NjxCX6ab26NLfWZxdaEm/J+vQ2Pqh/e5Z59vMfKiC0DJXVcO0rdv2LBh23qDw==
 
 "@tsconfig/node10@^1.0.7":
   version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node10/-/node10-1.0.11.tgz#6ee46400685f130e278128c7b38b7e031ff5b2f2"
+  resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz#6ee46400685f130e278128c7b38b7e031ff5b2f2"
   integrity sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==
 
 "@tsconfig/node12@^1.0.7":
   version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d"
+  resolved "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz#ee3def1f27d9ed66dac6e46a295cffb0152e058d"
   integrity sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==
 
 "@tsconfig/node14@^1.0.0":
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1"
+  resolved "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz#e4386316284f00b98435bf40f72f75a09dabf6c1"
   integrity sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==
 
 "@tsconfig/node16@^1.0.2":
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9"
+  resolved "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz#0b92dcc0cc1c81f6f306a381f28e31b1a56536e9"
   integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
 
 "@types/aria-query@^5.0.1":
   version "5.0.4"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
+  resolved "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
   integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
 
 "@types/babel__core@^7.18.0":
   version "7.20.5"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
+  resolved "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
   integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
   dependencies:
     "@babel/parser" "^7.20.7"
@@ -3694,14 +3749,14 @@
 
 "@types/babel__generator@*":
   version "7.6.8"
-  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
+  resolved "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz#f836c61f48b1346e7d2b0d93c6dacc5b9535d3ab"
   integrity sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==
   dependencies:
     "@babel/types" "^7.0.0"
 
 "@types/babel__template@*":
   version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"
+  resolved "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz#5672513701c1b2199bc6dad636a9d7491586766f"
   integrity sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==
   dependencies:
     "@babel/parser" "^7.1.0"
@@ -3709,14 +3764,14 @@
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.18.0":
   version "7.20.6"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.6.tgz#8dc9f0ae0f202c08d8d4dab648912c8d6038e3f7"
+  resolved "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz#8dc9f0ae0f202c08d8d4dab648912c8d6038e3f7"
   integrity sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==
   dependencies:
     "@babel/types" "^7.20.7"
 
 "@types/body-parser@*":
   version "1.19.5"
-  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.5.tgz#04ce9a3b677dc8bd681a17da1ab9835dc9d3ede4"
+  resolved "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz#04ce9a3b677dc8bd681a17da1ab9835dc9d3ede4"
   integrity sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==
   dependencies:
     "@types/connect" "*"
@@ -3724,147 +3779,147 @@
 
 "@types/compression@^1.7.5":
   version "1.7.5"
-  resolved "https://registry.yarnpkg.com/@types/compression/-/compression-1.7.5.tgz#0f80efef6eb031be57b12221c4ba6bc3577808f7"
+  resolved "https://registry.npmjs.org/@types/compression/-/compression-1.7.5.tgz#0f80efef6eb031be57b12221c4ba6bc3577808f7"
   integrity sha512-AAQvK5pxMpaT+nDvhHrsBhLSYG5yQdtkaJE1WYieSNY2mVFKAgmU4ks65rkZD5oqnGCFLyQpUr1CqI4DmUMyDg==
   dependencies:
     "@types/express" "*"
 
 "@types/connect@*":
   version "3.4.38"
-  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.38.tgz#5ba7f3bc4fbbdeaff8dded952e5ff2cc53f8d858"
+  resolved "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz#5ba7f3bc4fbbdeaff8dded952e5ff2cc53f8d858"
   integrity sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==
   dependencies:
     "@types/node" "*"
 
 "@types/connect@3.4.36":
   version "3.4.36"
-  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.36.tgz#e511558c15a39cb29bd5357eebb57bd1459cd1ab"
+  resolved "https://registry.npmjs.org/@types/connect/-/connect-3.4.36.tgz#e511558c15a39cb29bd5357eebb57bd1459cd1ab"
   integrity sha512-P63Zd/JUGq+PdrM1lv0Wv5SBYeA2+CORvbrXbngriYY0jzLUWfQMQQxOhjONEz/wlHOAxOdY7CY65rgQdTjq2w==
   dependencies:
     "@types/node" "*"
 
 "@types/cors@^2.8.17":
   version "2.8.17"
-  resolved "https://registry.yarnpkg.com/@types/cors/-/cors-2.8.17.tgz#5d718a5e494a8166f569d986794e49c48b216b2b"
+  resolved "https://registry.npmjs.org/@types/cors/-/cors-2.8.17.tgz#5d718a5e494a8166f569d986794e49c48b216b2b"
   integrity sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==
   dependencies:
     "@types/node" "*"
 
 "@types/d3-array@^3.0.3":
   version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
+  resolved "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
   integrity sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==
 
 "@types/d3-color@*", "@types/d3-color@^3.0.0":
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  resolved "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
   integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
 
 "@types/d3-delaunay@^6.0.4":
   version "6.0.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz#185c1a80cc807fdda2a3fe960f7c11c4a27952e1"
+  resolved "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz#185c1a80cc807fdda2a3fe960f7c11c4a27952e1"
   integrity sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==
 
 "@types/d3-ease@^3.0.0":
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
+  resolved "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
   integrity sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==
 
 "@types/d3-format@^1.4.1":
   version "1.4.5"
-  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-1.4.5.tgz#6392303c2ca3c287c3a1a2046455cd0a0bd50bbe"
+  resolved "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.5.tgz#6392303c2ca3c287c3a1a2046455cd0a0bd50bbe"
   integrity sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==
 
 "@types/d3-interpolate@^3.0.1":
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  resolved "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
   integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
   dependencies:
     "@types/d3-color" "*"
 
 "@types/d3-path@*":
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.0.tgz#2b907adce762a78e98828f0b438eaca339ae410a"
-  integrity sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz#f632b380c3aca1dba8e34aa049bcd6a4af23df8a"
+  integrity sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==
 
 "@types/d3-scale-chromatic@^3.0.0":
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#dc6d4f9a98376f18ea50bad6c39537f1b5463c39"
+  resolved "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#dc6d4f9a98376f18ea50bad6c39537f1b5463c39"
   integrity sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==
 
 "@types/d3-scale@^4.0.2", "@types/d3-scale@^4.0.8":
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
-  integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
+  version "4.0.9"
+  resolved "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz#57a2f707242e6fe1de81ad7bfcccaaf606179afb"
+  integrity sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==
   dependencies:
     "@types/d3-time" "*"
 
 "@types/d3-shape@^3.1.0", "@types/d3-shape@^3.1.6":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.6.tgz#65d40d5a548f0a023821773e39012805e6e31a72"
-  integrity sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==
+  version "3.1.7"
+  resolved "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz#2b7b423dc2dfe69c8c93596e673e37443348c555"
+  integrity sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==
   dependencies:
     "@types/d3-path" "*"
 
 "@types/d3-time-format@^2.3.1":
   version "2.3.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-2.3.4.tgz#544af5184df8b3fc4d9b42b14058789acee2905e"
+  resolved "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz#544af5184df8b3fc4d9b42b14058789acee2905e"
   integrity sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg==
 
 "@types/d3-time-format@^3.0.0":
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-3.0.4.tgz#f972bdd7be1048184577cf235a44721a78c6bb4b"
+  resolved "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-3.0.4.tgz#f972bdd7be1048184577cf235a44721a78c6bb4b"
   integrity sha512-or9DiDnYI1h38J9hxKEsw513+KVuFbEVhl7qdxcaudoiqWWepapUen+2vAriFGexr6W5+P4l9+HJrB39GG+oRg==
 
 "@types/d3-time@*", "@types/d3-time@^3.0.0":
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.4.tgz#8472feecd639691450dd8000eb33edd444e1323f"
+  resolved "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz#8472feecd639691450dd8000eb33edd444e1323f"
   integrity sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==
 
 "@types/d3-time@^1.0.10", "@types/d3-time@^1.1.1":
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-1.1.4.tgz#20da4b75c537a940e7319b75717c67a2e499515a"
+  resolved "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz#20da4b75c537a940e7319b75717c67a2e499515a"
   integrity sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g==
 
 "@types/d3-timer@^3.0.0":
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
+  resolved "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
   integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
 
 "@types/debug@^4.0.0":
   version "4.1.12"
-  resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
+  resolved "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz#a155f21690871953410df4b6b6f53187f0500917"
   integrity sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==
   dependencies:
     "@types/ms" "*"
 
 "@types/doctrine@^0.0.9":
   version "0.0.9"
-  resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.9.tgz#d86a5f452a15e3e3113b99e39616a9baa0f9863f"
+  resolved "https://registry.npmjs.org/@types/doctrine/-/doctrine-0.0.9.tgz#d86a5f452a15e3e3113b99e39616a9baa0f9863f"
   integrity sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA==
 
 "@types/dom4@^2.0.2":
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@types/dom4/-/dom4-2.0.4.tgz#427a4ce8590727aed5ce0fe39a64f175a57fdc1c"
+  resolved "https://registry.npmjs.org/@types/dom4/-/dom4-2.0.4.tgz#427a4ce8590727aed5ce0fe39a64f175a57fdc1c"
   integrity sha512-PD+wqNhrjWFjAlSVd18jvChZvOXB2SOwAILBmuYev5zswBats5qmzs/QFoooLKd2omj9BT05a8MeSeRmXLGY+Q==
 
 "@types/dompurify@^3.0.5":
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.2.0.tgz#56610bf3e4250df57744d61fbd95422e07dfb840"
+  resolved "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.2.0.tgz#56610bf3e4250df57744d61fbd95422e07dfb840"
   integrity sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==
   dependencies:
     dompurify "*"
 
 "@types/dotenv@^8.2.0":
   version "8.2.3"
-  resolved "https://registry.yarnpkg.com/@types/dotenv/-/dotenv-8.2.3.tgz#c97b3c5b2e97ff3873793a000999e86cd66ff354"
+  resolved "https://registry.npmjs.org/@types/dotenv/-/dotenv-8.2.3.tgz#c97b3c5b2e97ff3873793a000999e86cd66ff354"
   integrity sha512-g2FXjlDX/cYuc5CiQvyU/6kkbP1JtmGzh0obW50zD7OKeILVL0NSpPWLXVfqoAGQjom2/SLLx9zHq0KXvD6mbw==
   dependencies:
     dotenv "*"
 
 "@types/eslint-scope@^3.7.7":
   version "3.7.7"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
+  resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
   integrity sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==
   dependencies:
     "@types/eslint" "*"
@@ -3872,7 +3927,7 @@
 
 "@types/eslint@*":
   version "9.6.1"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
+  resolved "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz#d5795ad732ce81715f27f75da913004a56751584"
   integrity sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==
   dependencies:
     "@types/estree" "*"
@@ -3880,13 +3935,13 @@
 
 "@types/estree@*", "@types/estree@1.0.6", "@types/estree@^1.0.0", "@types/estree@^1.0.6":
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50"
   integrity sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==
 
 "@types/express-serve-static-core@*", "@types/express-serve-static-core@^5.0.0":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-5.0.2.tgz#812d2871e5eea17fb0bd5214dda7a7b748c0e12a"
-  integrity sha512-vluaspfvWEtE4vcSDlKRNer52DvOGrB2xv6diXy6UKyKW0lqZiWHGNApSyxOv+8DE5Z27IzVvE7hNkxg7EXIcg==
+  version "5.0.6"
+  resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz#41fec4ea20e9c7b22f024ab88a95c6bb288f51b8"
+  integrity sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
@@ -3895,7 +3950,7 @@
 
 "@types/express-serve-static-core@^4.17.33":
   version "4.19.6"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz#e01324c2a024ff367d92c66f48553ced0ab50267"
+  resolved "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz#e01324c2a024ff367d92c66f48553ced0ab50267"
   integrity sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==
   dependencies:
     "@types/node" "*"
@@ -3905,7 +3960,7 @@
 
 "@types/express-ws@^3.0.4":
   version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@types/express-ws/-/express-ws-3.0.5.tgz#5abf3dda3acb0a339351f089c31aca708f234c7c"
+  resolved "https://registry.npmjs.org/@types/express-ws/-/express-ws-3.0.5.tgz#5abf3dda3acb0a339351f089c31aca708f234c7c"
   integrity sha512-lbWMjoHrm/v85j81UCmb/GNZFO3genxRYBW1Ob7rjRI+zxUBR+4tcFuOpKKsYQ1LYTYiy3356epLeYi/5zxUwA==
   dependencies:
     "@types/express" "*"
@@ -3914,7 +3969,7 @@
 
 "@types/express@*":
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-5.0.0.tgz#13a7d1f75295e90d19ed6e74cab3678488eaa96c"
+  resolved "https://registry.npmjs.org/@types/express/-/express-5.0.0.tgz#13a7d1f75295e90d19ed6e74cab3678488eaa96c"
   integrity sha512-DvZriSMehGHL1ZNLzi6MidnsDhUZM/x2pRdDIKdwbUNqqwHxMlRdkxtn6/EPKyqKpHqTl/4nRZsRNLpZxZRpPQ==
   dependencies:
     "@types/body-parser" "*"
@@ -3924,7 +3979,7 @@
 
 "@types/express@^4.17.21":
   version "4.17.21"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.21.tgz#c26d4a151e60efe0084b23dc3369ebc631ed192d"
+  resolved "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz#c26d4a151e60efe0084b23dc3369ebc631ed192d"
   integrity sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==
   dependencies:
     "@types/body-parser" "*"
@@ -3932,58 +3987,63 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/gensync@^1.0.0":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@types/gensync/-/gensync-1.0.4.tgz#7122d8f0cd3bf437f9725cc95b180197190cf50b"
+  integrity sha512-C3YYeRQWp2fmq9OryX+FoDy8nXS6scQ7dPptD8LnFDAUNcKWJjXQKDNJD3HVm+kOUsXhTOkpi69vI4EuAr95bA==
+
 "@types/hast@^2.0.0":
   version "2.3.10"
-  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.10.tgz#5c9d9e0b304bbb8879b857225c5ebab2d81d7643"
+  resolved "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz#5c9d9e0b304bbb8879b857225c5ebab2d81d7643"
   integrity sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==
   dependencies:
     "@types/unist" "^2"
 
 "@types/hast@^3.0.0":
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
+  resolved "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
   integrity sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==
   dependencies:
     "@types/unist" "*"
 
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
+  resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
   integrity sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==
 
 "@types/http-errors@*":
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
+  resolved "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz#7eb47726c391b7345a6ec35ad7f4de469cf5ba4f"
   integrity sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==
 
 "@types/json-schema@*", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.15"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
 "@types/json5@^0.0.29":
   version "0.0.29"
-  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/linkify-it@^3":
   version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.5.tgz#1e78a3ac2428e6d7e6c05c1665c242023a4601d8"
+  resolved "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz#1e78a3ac2428e6d7e6c05c1665c242023a4601d8"
   integrity sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==
 
 "@types/linkify-it@^5":
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
+  resolved "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
   integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
 
 "@types/lodash@^4.14.202", "@types/lodash@^4.17.0", "@types/lodash@^4.17.1", "@types/lodash@^4.17.6":
-  version "4.17.13"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.13.tgz#786e2d67cfd95e32862143abe7463a7f90c300eb"
-  integrity sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==
+  version "4.17.15"
+  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.15.tgz#12d4af0ed17cc7600ce1f9980cec48fc17ad1e89"
+  integrity sha512-w/P33JFeySuhN6JLkysYUK2gEmy9kHHFN7E8ro0tkfmlDOgxBDzWEZ/J8cWA+fHqFevpswDTFZnDx+R9lbL6xw==
 
 "@types/markdown-it@^13.0.7":
   version "13.0.9"
-  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-13.0.9.tgz#df79221eae698df5b4e982c7e91128dd8e525743"
+  resolved "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.9.tgz#df79221eae698df5b4e982c7e91128dd8e525743"
   integrity sha512-1XPwR0+MgXLWfTn9gCsZ55AHOKW1WN+P9vr0PaQh5aerR9LLQXUbjfEAFhjmEmyoYFWAyuN2Mqkn40MZ4ukjBw==
   dependencies:
     "@types/linkify-it" "^3"
@@ -3991,7 +4051,7 @@
 
 "@types/markdown-it@^14.0.0":
   version "14.1.2"
-  resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
+  resolved "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
   integrity sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==
   dependencies:
     "@types/linkify-it" "^5"
@@ -3999,93 +4059,93 @@
 
 "@types/mdast@^3.0.0":
   version "3.0.15"
-  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
+  resolved "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz#49c524a263f30ffa28b71ae282f813ed000ab9f5"
   integrity sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==
   dependencies:
     "@types/unist" "^2"
 
 "@types/mdurl@^1":
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.5.tgz#3e0d2db570e9fb6ccb2dc8fde0be1d79ac810d39"
+  resolved "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz#3e0d2db570e9fb6ccb2dc8fde0be1d79ac810d39"
   integrity sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==
 
 "@types/mdurl@^2":
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
+  resolved "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
   integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
 
 "@types/mdx@^2.0.0":
   version "2.0.13"
-  resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.13.tgz#68f6877043d377092890ff5b298152b0a21671bd"
+  resolved "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz#68f6877043d377092890ff5b298152b0a21671bd"
   integrity sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==
 
 "@types/mime@^1":
   version "1.3.5"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.5.tgz#1ef302e01cf7d2b5a0fa526790c9123bf1d06690"
+  resolved "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz#1ef302e01cf7d2b5a0fa526790c9123bf1d06690"
   integrity sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==
 
 "@types/ms@*":
-  version "0.7.34"
-  resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.34.tgz#10964ba0dee6ac4cd462e2795b6bebd407303433"
-  integrity sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz#052aa67a48eccc4309d7f0191b7e41434b90bb78"
+  integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
 
 "@types/mysql@2.15.26":
   version "2.15.26"
-  resolved "https://registry.yarnpkg.com/@types/mysql/-/mysql-2.15.26.tgz#f0de1484b9e2354d587e7d2bd17a873cc8300836"
+  resolved "https://registry.npmjs.org/@types/mysql/-/mysql-2.15.26.tgz#f0de1484b9e2354d587e7d2bd17a873cc8300836"
   integrity sha512-DSLCOXhkvfS5WNNPbfn2KdICAmk8lLc+/PNvnPnF7gOdMZCxopXduqv0OQ13y/yA/zXTSikZZqVgybUxOEg6YQ==
   dependencies:
     "@types/node" "*"
 
-"@types/node@*", "@types/node@^22.0.0", "@types/node@^22.5.4":
-  version "22.10.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.1.tgz#41ffeee127b8975a05f8c4f83fb89bcb2987d766"
-  integrity sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==
+"@types/node@*", "@types/node@^22.5.4":
+  version "22.13.1"
+  resolved "https://registry.npmjs.org/@types/node/-/node-22.13.1.tgz#a2a3fefbdeb7ba6b89f40371842162fac0934f33"
+  integrity sha512-jK8uzQlrvXqEU91UxiK5J7pKHyzgnI1Qnl0QDHIgVGuolJhRb9EEl28Cj9b3rGR8B2lhFCtvIm5os8lFnO/1Ew==
   dependencies:
     undici-types "~6.20.0"
 
 "@types/node@18.14.1":
   version "18.14.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.14.1.tgz#90dad8476f1e42797c49d6f8b69aaf9f876fc69f"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.14.1.tgz#90dad8476f1e42797c49d6f8b69aaf9f876fc69f"
   integrity sha512-QH+37Qds3E0eDlReeboBxfHbX9omAcBCXEzswCu6jySP642jiM3cYSIkU/REqwhCUqXdonHFuBfJDiAJxMNhaQ==
 
 "@types/node@18.15.3":
   version "18.15.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014"
   integrity sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==
 
 "@types/node@18.16.1":
   version "18.16.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.16.1.tgz#5db121e9c5352925bb1f1b892c4ae620e3526799"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz#5db121e9c5352925bb1f1b892c4ae620e3526799"
   integrity sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA==
 
 "@types/node@^20.14.9", "@types/node@^20.5.2":
-  version "20.17.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.17.9.tgz#5f141d4b7ee125cdee5faefe28de095398865bab"
-  integrity sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==
+  version "20.17.17"
+  resolved "https://registry.npmjs.org/@types/node/-/node-20.17.17.tgz#5cea2af2e271313742c14f418eaf5dcfa8ae2e3a"
+  integrity sha512-/WndGO4kIfMicEQLTi/mDANUu/iVUhT7KboZPdEqqHQ4aTS+3qT3U5gIqWDFV+XouorjfgGqvKILJeHhuQgFYg==
   dependencies:
     undici-types "~6.19.2"
 
 "@types/nprogress@^0.2.0":
   version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.3.tgz#b2150b054a13622fabcba12cf6f0b54c48b14287"
+  resolved "https://registry.npmjs.org/@types/nprogress/-/nprogress-0.2.3.tgz#b2150b054a13622fabcba12cf6f0b54c48b14287"
   integrity sha512-k7kRA033QNtC+gLc4VPlfnue58CM1iQLgn1IMAU8VPHGOj7oIHPp9UlhedEnD/Gl8evoCjwkZjlBORtZ3JByUA==
 
 "@types/parse-json@^4.0.0":
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
 "@types/pg-pool@2.0.6":
   version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@types/pg-pool/-/pg-pool-2.0.6.tgz#1376d9dc5aec4bb2ec67ce28d7e9858227403c77"
+  resolved "https://registry.npmjs.org/@types/pg-pool/-/pg-pool-2.0.6.tgz#1376d9dc5aec4bb2ec67ce28d7e9858227403c77"
   integrity sha512-TaAUE5rq2VQYxab5Ts7WZhKNmuN78Q6PiFonTDdpbx8a1H0M1vhy3rhiMjl+e2iHmogyMw7jZF4FrE6eJUy5HQ==
   dependencies:
     "@types/pg" "*"
 
 "@types/pg@*":
-  version "8.11.10"
-  resolved "https://registry.yarnpkg.com/@types/pg/-/pg-8.11.10.tgz#b8fb2b2b759d452fe3ec182beadd382563b63291"
-  integrity sha512-LczQUW4dbOQzsH2RQ5qoeJ6qJPdrcM/DcMLoqWQkMLMsq83J5lAX3LXjdkWdpscFy67JSOWDnh7Ny/sPFykmkg==
+  version "8.11.11"
+  resolved "https://registry.npmjs.org/@types/pg/-/pg-8.11.11.tgz#3bdce0580e521a62a62339a53d110458d9eae6df"
+  integrity sha512-kGT1qKM8wJQ5qlawUrEkXgvMSXoV213KfMGXcwfDwUIfUHXqXYXOfS1nE1LINRJVVVx5wCm70XnFlMHaIcQAfw==
   dependencies:
     "@types/node" "*"
     pg-protocol "*"
@@ -4093,7 +4153,7 @@
 
 "@types/pg@8.6.1":
   version "8.6.1"
-  resolved "https://registry.yarnpkg.com/@types/pg/-/pg-8.6.1.tgz#099450b8dc977e8197a44f5229cedef95c8747f9"
+  resolved "https://registry.npmjs.org/@types/pg/-/pg-8.6.1.tgz#099450b8dc977e8197a44f5229cedef95c8747f9"
   integrity sha512-1Kc4oAGzAl7uqUStZCDvaLFqZrW9qWSjXOmBfdgyBP5La7Us6Mg4GBvRlSoaZMhQF/zSj1C8CtKMBkoiT8eL8w==
   dependencies:
     "@types/node" "*"
@@ -4102,69 +4162,77 @@
 
 "@types/prop-types@*", "@types/prop-types@^15.0.0", "@types/prop-types@^15.7.12", "@types/prop-types@^15.7.2":
   version "15.7.14"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
   integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
 
 "@types/qs@*":
-  version "6.9.17"
-  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.17.tgz#fc560f60946d0aeff2f914eb41679659d3310e1a"
-  integrity sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==
+  version "6.9.18"
+  resolved "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz#877292caa91f7c1b213032b34626505b746624c2"
+  integrity sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==
 
 "@types/range-parser@*":
   version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
+  resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz#50ae4353eaaddc04044279812f52c8c65857dbcb"
   integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==
 
 "@types/react-color@^3.0.6", "@types/react-color@^3.0.9":
-  version "3.0.12"
-  resolved "https://registry.yarnpkg.com/@types/react-color/-/react-color-3.0.12.tgz#231e75f11dd6805bdf1c954774588fefc8172f30"
-  integrity sha512-pr3uKE3lSvf7GFo1Rn2K3QktiZQFFrSgSGJ/3iMvSOYWt2pPAJ97rVdVfhWxYJZ8prAEXzoP2XX//3qGSQgu7Q==
+  version "3.0.13"
+  resolved "https://registry.npmjs.org/@types/react-color/-/react-color-3.0.13.tgz#0f86a14ac948428bd811689706c328817661dc13"
+  integrity sha512-2c/9FZ4ixC5T3JzN0LP5Cke2Mf0MKOP2Eh0NPDPWmuVH3NjPyhEjqNMQpN1Phr5m74egAy+p2lYNAFrX1z9Yrg==
   dependencies:
-    "@types/react" "*"
     "@types/reactcss" "*"
 
-"@types/react-dom@^18.2.18":
-  version "18.3.2"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.2.tgz#b58a9520f5f317a00bbda0271502889b71c345f0"
-  integrity sha512-Fqp+rcvem9wEnGr3RY8dYNvSQ8PoLqjZ9HLgaPUOjJJD120uDyOxOjc/39M4Kddp9JQCxpGQbnhVQF0C0ncYVg==
-  dependencies:
-    "@types/react" "^18"
-
-"@types/react-transition-group@^4.4.10":
-  version "4.4.11"
-  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
-  integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
+"@types/react-dom@18.3.0":
+  version "18.3.0"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18", "@types/react@^18.3.11":
-  version "18.3.14"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.14.tgz#7ce43bbca0e15e1c4f67ad33ea3f83d75aa6756b"
-  integrity sha512-NzahNKvjNhVjuPBQ+2G7WlxstQ+47kXZNHlUvFakDViuIEfGY926GqhMueQFZ7woG+sPiQKlF36XfrIUVSUfFg==
+"@types/react-dom@^18.2.18":
+  version "18.3.5"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716"
+  integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==
+
+"@types/react-transition-group@^4.4.10":
+  version "4.4.12"
+  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
+  integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
+
+"@types/react@*", "@types/react@^18.3.11":
+  version "18.3.18"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.18.tgz#9b382c4cd32e13e463f97df07c2ee3bbcd26904b"
+  integrity sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
+"@types/react@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.1.tgz#fed43985caa834a2084d002e4771e15dfcbdbe8e"
+  integrity sha512-V0kuGBX3+prX+DQ/7r2qsv1NsdfnCLnTgnRJ1pYnxykBhGMz+qj+box5lq7XsO5mtZsBqpjwwTu/7wszPfMBcw==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
 "@types/reactcss@*":
-  version "1.2.12"
-  resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.12.tgz#57f6f046e7aafbe0288689bd96a2d5664378ca7b"
-  integrity sha512-BrXUQ86/wbbFiZv8h/Q1/Q1XOsaHneYmCb/tHe9+M8XBAAUc2EHfdY0DY22ZZjVSaXr5ix7j+zsqO2eGZub8lQ==
-  dependencies:
-    "@types/react" "*"
+  version "1.2.13"
+  resolved "https://registry.npmjs.org/@types/reactcss/-/reactcss-1.2.13.tgz#11c7468cc96b5353f7af998a5664deae21c7af08"
+  integrity sha512-gi3S+aUi6kpkF5vdhUsnkwbiSEIU/BEJyD7kBy2SudWBUuKmJk8AQKE0OVcQQeEy40Azh0lV6uynxlikYIJuwg==
 
 "@types/resolve@^1.20.2":
   version "1.20.6"
-  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.20.6.tgz#e6e60dad29c2c8c206c026e6dd8d6d1bdda850b8"
+  resolved "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.6.tgz#e6e60dad29c2c8c206c026e6dd8d6d1bdda850b8"
   integrity sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==
 
 "@types/semver@^7.3.12", "@types/semver@^7.3.4":
   version "7.5.8"
-  resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
 "@types/send@*":
   version "0.17.4"
-  resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.4.tgz#6619cd24e7270793702e4e6a4b958a9010cfc57a"
+  resolved "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz#6619cd24e7270793702e4e6a4b958a9010cfc57a"
   integrity sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==
   dependencies:
     "@types/mime" "^1"
@@ -4172,85 +4240,90 @@
 
 "@types/serve-static@*":
   version "1.15.7"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.7.tgz#22174bbd74fb97fe303109738e9b5c2f3064f714"
+  resolved "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz#22174bbd74fb97fe303109738e9b5c2f3064f714"
   integrity sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==
   dependencies:
     "@types/http-errors" "*"
     "@types/node" "*"
     "@types/send" "*"
 
-"@types/shimmer@^1.0.2", "@types/shimmer@^1.2.0":
+"@types/shimmer@^1.2.0":
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@types/shimmer/-/shimmer-1.2.0.tgz#9b706af96fa06416828842397a70dfbbf1c14ded"
+  resolved "https://registry.npmjs.org/@types/shimmer/-/shimmer-1.2.0.tgz#9b706af96fa06416828842397a70dfbbf1c14ded"
   integrity sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==
 
 "@types/tedious@^4.0.14":
   version "4.0.14"
-  resolved "https://registry.yarnpkg.com/@types/tedious/-/tedious-4.0.14.tgz#868118e7a67808258c05158e9cad89ca58a2aec1"
+  resolved "https://registry.npmjs.org/@types/tedious/-/tedious-4.0.14.tgz#868118e7a67808258c05158e9cad89ca58a2aec1"
   integrity sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==
   dependencies:
     "@types/node" "*"
 
+"@types/triple-beam@^1.3.2":
+  version "1.3.5"
+  resolved "https://registry.npmjs.org/@types/triple-beam/-/triple-beam-1.3.5.tgz#74fef9ffbaa198eb8b588be029f38b00299caa2c"
+  integrity sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==
+
 "@types/trusted-types@^2.0.7":
   version "2.0.7"
-  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  resolved "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
   integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
 
 "@types/unist@*":
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
+  resolved "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
   integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==
 
 "@types/unist@^2", "@types/unist@^2.0.0":
   version "2.0.11"
-  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.11.tgz#11af57b127e32487774841f7a4e54eab166d03c4"
+  resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz#11af57b127e32487774841f7a4e54eab166d03c4"
   integrity sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==
 
 "@types/use-sync-external-store@^0.0.6":
   version "0.0.6"
-  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz#60be8d21baab8c305132eb9cb912ed497852aadc"
+  resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz#60be8d21baab8c305132eb9cb912ed497852aadc"
   integrity sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==
 
 "@types/uuid@^8.3.4":
   version "8.3.4"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
+  resolved "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
   integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
 
 "@types/uuid@^9.0.1", "@types/uuid@^9.0.8":
   version "9.0.8"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
+  resolved "https://registry.npmjs.org/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
   integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
 
 "@types/ws@*":
-  version "8.5.13"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.13.tgz#6414c280875e2691d0d1e080b05addbf5cb91e20"
-  integrity sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==
+  version "8.5.14"
+  resolved "https://registry.npmjs.org/@types/ws/-/ws-8.5.14.tgz#93d44b268c9127d96026cf44353725dd9b6c3c21"
+  integrity sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==
   dependencies:
     "@types/node" "*"
 
-"@types/zxcvbn@^4.4.4":
+"@types/zxcvbn@^4.4.4", "@types/zxcvbn@^4.4.5":
   version "4.4.5"
-  resolved "https://registry.yarnpkg.com/@types/zxcvbn/-/zxcvbn-4.4.5.tgz#8ce8623ed7a36e3a76d1c0b539708dfb2e859bc0"
+  resolved "https://registry.npmjs.org/@types/zxcvbn/-/zxcvbn-4.4.5.tgz#8ce8623ed7a36e3a76d1c0b539708dfb2e859bc0"
   integrity sha512-FZJgC5Bxuqg7Rhsm/bx6gAruHHhDQ55r+s0JhDh8CQ16fD7NsJJ+p8YMMQDhSQoIrSmjpqqYWA96oQVMNkjRyA==
 
 "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0", "@typescript-eslint/eslint-plugin@^8.6.0":
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.17.0.tgz#2ee073c421f4e81e02d10e731241664b6253b23c"
-  integrity sha512-HU1KAdW3Tt8zQkdvNoIijfWDMvdSweFYm4hWh+KwhPstv+sCmWb89hCIP8msFm9N1R/ooh9honpSuvqKWlYy3w==
+  version "8.24.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.24.0.tgz#574a95d67660a1e4544ae131d672867a5b40abb3"
+  integrity sha512-aFcXEJJCI4gUdXgoo/j9udUYIHgF23MFkg09LFz2dzEmU0+1Plk4rQWv/IYKvPHAtlkkGoB3m5e6oUp+JPsNaQ==
   dependencies:
     "@eslint-community/regexpp" "^4.10.0"
-    "@typescript-eslint/scope-manager" "8.17.0"
-    "@typescript-eslint/type-utils" "8.17.0"
-    "@typescript-eslint/utils" "8.17.0"
-    "@typescript-eslint/visitor-keys" "8.17.0"
+    "@typescript-eslint/scope-manager" "8.24.0"
+    "@typescript-eslint/type-utils" "8.24.0"
+    "@typescript-eslint/utils" "8.24.0"
+    "@typescript-eslint/visitor-keys" "8.24.0"
     graphemer "^1.4.0"
     ignore "^5.3.1"
     natural-compare "^1.4.0"
-    ts-api-utils "^1.3.0"
+    ts-api-utils "^2.0.1"
 
 "@typescript-eslint/eslint-plugin@^5.48.2":
   version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
   integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
   dependencies:
     "@eslint-community/regexpp" "^4.4.0"
@@ -4265,35 +4338,35 @@
     tsutils "^3.21.0"
 
 "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0", "@typescript-eslint/parser@^8.6.0":
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.17.0.tgz#2ee972bb12fa69ac625b85813dc8d9a5a053ff52"
-  integrity sha512-Drp39TXuUlD49F7ilHHCG7TTg8IkA+hxCuULdmzWYICxGXvDXmDmWEjJYZQYgf6l/TFfYNE167m7isnc3xlIEg==
+  version "8.24.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.24.0.tgz#bba837f9ee125b78f459ad947ff9b61be8139085"
+  integrity sha512-MFDaO9CYiard9j9VepMNa9MTcqVvSny2N4hkY6roquzj8pdCBRENhErrteaQuu7Yjn1ppk0v1/ZF9CG3KIlrTA==
   dependencies:
-    "@typescript-eslint/scope-manager" "8.17.0"
-    "@typescript-eslint/types" "8.17.0"
-    "@typescript-eslint/typescript-estree" "8.17.0"
-    "@typescript-eslint/visitor-keys" "8.17.0"
+    "@typescript-eslint/scope-manager" "8.24.0"
+    "@typescript-eslint/types" "8.24.0"
+    "@typescript-eslint/typescript-estree" "8.24.0"
+    "@typescript-eslint/visitor-keys" "8.24.0"
     debug "^4.3.4"
 
 "@typescript-eslint/scope-manager@5.62.0":
   version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz#d9457ccc6a0b8d6b37d0eb252a23022478c5460c"
   integrity sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==
   dependencies:
     "@typescript-eslint/types" "5.62.0"
     "@typescript-eslint/visitor-keys" "5.62.0"
 
-"@typescript-eslint/scope-manager@8.17.0":
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-8.17.0.tgz#a3f49bf3d4d27ff8d6b2ea099ba465ef4dbcaa3a"
-  integrity sha512-/ewp4XjvnxaREtqsZjF4Mfn078RD/9GmiEAtTeLQ7yFdKnqwTOgRMSvFz4et9U5RiJQ15WTGXPLj89zGusvxBg==
+"@typescript-eslint/scope-manager@8.24.0":
+  version "8.24.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.24.0.tgz#2e34b3eb2ce768f2ffb109474174ced5417002b1"
+  integrity sha512-HZIX0UByphEtdVBKaQBgTDdn9z16l4aTUz8e8zPQnyxwHBtf5vtl1L+OhH+m1FGV9DrRmoDuYKqzVrvWDcDozw==
   dependencies:
-    "@typescript-eslint/types" "8.17.0"
-    "@typescript-eslint/visitor-keys" "8.17.0"
+    "@typescript-eslint/types" "8.24.0"
+    "@typescript-eslint/visitor-keys" "8.24.0"
 
 "@typescript-eslint/type-utils@5.62.0":
   version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz#286f0389c41681376cdad96b309cedd17d70346a"
   integrity sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==
   dependencies:
     "@typescript-eslint/typescript-estree" "5.62.0"
@@ -4301,29 +4374,29 @@
     debug "^4.3.4"
     tsutils "^3.21.0"
 
-"@typescript-eslint/type-utils@8.17.0":
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-8.17.0.tgz#d326569f498cdd0edf58d5bb6030b4ad914e63d3"
-  integrity sha512-q38llWJYPd63rRnJ6wY/ZQqIzPrBCkPdpIsaCfkR3Q4t3p6sb422zougfad4TFW9+ElIFLVDzWGiGAfbb/v2qw==
+"@typescript-eslint/type-utils@8.24.0":
+  version "8.24.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.24.0.tgz#6ee3ec4db06f9e5e7b01ca6c2b5dd5843a9fd1e8"
+  integrity sha512-8fitJudrnY8aq0F1wMiPM1UUgiXQRJ5i8tFjq9kGfRajU+dbPyOuHbl0qRopLEidy0MwqgTHDt6CnSeXanNIwA==
   dependencies:
-    "@typescript-eslint/typescript-estree" "8.17.0"
-    "@typescript-eslint/utils" "8.17.0"
+    "@typescript-eslint/typescript-estree" "8.24.0"
+    "@typescript-eslint/utils" "8.24.0"
     debug "^4.3.4"
-    ts-api-utils "^1.3.0"
+    ts-api-utils "^2.0.1"
 
 "@typescript-eslint/types@5.62.0":
   version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz#258607e60effa309f067608931c3df6fed41fd2f"
   integrity sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==
 
-"@typescript-eslint/types@8.17.0":
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-8.17.0.tgz#ef84c709ef8324e766878834970bea9a7e3b72cf"
-  integrity sha512-gY2TVzeve3z6crqh2Ic7Cr+CAv6pfb0Egee7J5UAVWCpVvDI/F71wNfolIim4FE6hT15EbpZFVUj9j5i38jYXA==
+"@typescript-eslint/types@8.24.0":
+  version "8.24.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.24.0.tgz#694e7fb18d70506c317b816de9521300b0f72c8e"
+  integrity sha512-VacJCBTyje7HGAw7xp11q439A+zeGG0p0/p2zsZwpnMzjPB5WteaWqt4g2iysgGFafrqvyLWqq6ZPZAOCoefCw==
 
 "@typescript-eslint/typescript-estree@5.62.0":
   version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz#7d17794b77fabcac615d6a48fb143330d962eb9b"
   integrity sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==
   dependencies:
     "@typescript-eslint/types" "5.62.0"
@@ -4334,23 +4407,23 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@8.17.0":
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-8.17.0.tgz#40b5903bc929b1e8dd9c77db3cb52cfb199a2a34"
-  integrity sha512-JqkOopc1nRKZpX+opvKqnM3XUlM7LpFMD0lYxTqOTKQfCWAmxw45e3qlOCsEqEB2yuacujivudOFpCnqkBDNMw==
+"@typescript-eslint/typescript-estree@8.24.0":
+  version "8.24.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.24.0.tgz#0487349be174097bb329a58273100a9629e03c6c"
+  integrity sha512-ITjYcP0+8kbsvT9bysygfIfb+hBj6koDsu37JZG7xrCiy3fPJyNmfVtaGsgTUSEuTzcvME5YI5uyL5LD1EV5ZQ==
   dependencies:
-    "@typescript-eslint/types" "8.17.0"
-    "@typescript-eslint/visitor-keys" "8.17.0"
+    "@typescript-eslint/types" "8.24.0"
+    "@typescript-eslint/visitor-keys" "8.24.0"
     debug "^4.3.4"
     fast-glob "^3.3.2"
     is-glob "^4.0.3"
     minimatch "^9.0.4"
     semver "^7.6.0"
-    ts-api-utils "^1.3.0"
+    ts-api-utils "^2.0.1"
 
 "@typescript-eslint/utils@5.62.0":
   version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz#141e809c71636e4a75daa39faed2fb5f4b10df86"
   integrity sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
@@ -4362,40 +4435,40 @@
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
-"@typescript-eslint/utils@8.17.0":
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-8.17.0.tgz#41c05105a2b6ab7592f513d2eeb2c2c0236d8908"
-  integrity sha512-bQC8BnEkxqG8HBGKwG9wXlZqg37RKSMY7v/X8VEWD8JG2JuTHuNK0VFvMPMUKQcbk6B+tf05k+4AShAEtCtJ/w==
+"@typescript-eslint/utils@8.24.0":
+  version "8.24.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.24.0.tgz#21cb1195ae79230af825bfeed59574f5cb70a749"
+  integrity sha512-07rLuUBElvvEb1ICnafYWr4hk8/U7X9RDCOqd9JcAMtjh/9oRmcfN4yGzbPVirgMR0+HLVHehmu19CWeh7fsmQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
-    "@typescript-eslint/scope-manager" "8.17.0"
-    "@typescript-eslint/types" "8.17.0"
-    "@typescript-eslint/typescript-estree" "8.17.0"
+    "@typescript-eslint/scope-manager" "8.24.0"
+    "@typescript-eslint/types" "8.24.0"
+    "@typescript-eslint/typescript-estree" "8.24.0"
 
 "@typescript-eslint/visitor-keys@5.62.0":
   version "5.62.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz#2174011917ce582875954ffe2f6912d5931e353e"
   integrity sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==
   dependencies:
     "@typescript-eslint/types" "5.62.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@8.17.0":
-  version "8.17.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-8.17.0.tgz#4dbcd0e28b9bf951f4293805bf34f98df45e1aa8"
-  integrity sha512-1Hm7THLpO6ww5QU6H/Qp+AusUUl+z/CAm3cNZZ0jQvon9yicgO7Rwd+/WWRpMKLYV6p2UvdbR27c86rzCPpreg==
+"@typescript-eslint/visitor-keys@8.24.0":
+  version "8.24.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.24.0.tgz#36ecf0b9b1d819ad88a3bd4157ab7d594cb797c9"
+  integrity sha512-kArLq83QxGLbuHrTMoOEWO+l2MwsNS2TGISEdx8xgqpkbytB07XmlQyQdNDrCc1ecSqx0cnmhGvpX+VBwqqSkg==
   dependencies:
-    "@typescript-eslint/types" "8.17.0"
+    "@typescript-eslint/types" "8.24.0"
     eslint-visitor-keys "^4.2.0"
 
 "@ungap/structured-clone@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.1.tgz#28fa185f67daaf7b7a1a8c1d445132c5d979f8bd"
-  integrity sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA==
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
+  integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
 
 "@vitest/expect@2.0.5":
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.0.5.tgz#f3745a6a2c18acbea4d39f5935e913f40d26fa86"
+  resolved "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz#f3745a6a2c18acbea4d39f5935e913f40d26fa86"
   integrity sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==
   dependencies:
     "@vitest/spy" "2.0.5"
@@ -4405,28 +4478,28 @@
 
 "@vitest/pretty-format@2.0.5":
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.0.5.tgz#91d2e6d3a7235c742e1a6cc50e7786e2f2979b1e"
+  resolved "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz#91d2e6d3a7235c742e1a6cc50e7786e2f2979b1e"
   integrity sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==
   dependencies:
     tinyrainbow "^1.2.0"
 
-"@vitest/pretty-format@2.1.8":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.8.tgz#88f47726e5d0cf4ba873d50c135b02e4395e2bca"
-  integrity sha512-9HiSZ9zpqNLKlbIDRWOnAWqgcA7xu+8YxXSekhr0Ykab7PAYFkhkwoqVArPOtJhPmYeE2YHgKZlj3CP36z2AJQ==
+"@vitest/pretty-format@2.1.9":
+  version "2.1.9"
+  resolved "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.1.9.tgz#434ff2f7611689f9ce70cd7d567eceb883653fdf"
+  integrity sha512-KhRIdGV2U9HOUzxfiHmY8IFHTdqtOhIzCpd8WRdJiE7D/HUcZVD0EgQCVjm+Q9gkUXWgBvMmTtZgIG48wq7sOQ==
   dependencies:
     tinyrainbow "^1.2.0"
 
 "@vitest/spy@2.0.5":
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.0.5.tgz#590fc07df84a78b8e9dd976ec2090920084a2b9f"
+  resolved "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz#590fc07df84a78b8e9dd976ec2090920084a2b9f"
   integrity sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==
   dependencies:
     tinyspy "^3.0.0"
 
 "@vitest/utils@2.0.5":
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.0.5.tgz#6f8307a4b6bc6ceb9270007f73c67c915944e926"
+  resolved "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz#6f8307a4b6bc6ceb9270007f73c67c915944e926"
   integrity sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==
   dependencies:
     "@vitest/pretty-format" "2.0.5"
@@ -4435,17 +4508,17 @@
     tinyrainbow "^1.2.0"
 
 "@vitest/utils@^2.1.1":
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.8.tgz#f8ef85525f3362ebd37fd25d268745108d6ae388"
-  integrity sha512-dwSoui6djdwbfFmIgbIjX2ZhIoG7Ex/+xpxyiEgIGzjliY8xGkcpITKTlp6B4MgtGkF2ilvm97cPM96XZaAgcA==
+  version "2.1.9"
+  resolved "https://registry.npmjs.org/@vitest/utils/-/utils-2.1.9.tgz#4f2486de8a54acf7ecbf2c5c24ad7994a680a6c1"
+  integrity sha512-v0psaMSkNJ3A2NMrUEHFRzJtDPFn+/VWZ5WxImB21T9fjucJRmS7xCS3ppEnARb9y11OAzaD+P2Ps+b+BGX5iQ==
   dependencies:
-    "@vitest/pretty-format" "2.1.8"
+    "@vitest/pretty-format" "2.1.9"
     loupe "^3.1.2"
     tinyrainbow "^1.2.0"
 
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.14.1.tgz#a9f6a07f2b03c95c8d38c4536a1fdfb521ff55b6"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz#a9f6a07f2b03c95c8d38c4536a1fdfb521ff55b6"
   integrity sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==
   dependencies:
     "@webassemblyjs/helper-numbers" "1.13.2"
@@ -4453,22 +4526,22 @@
 
 "@webassemblyjs/floating-point-hex-parser@1.13.2":
   version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz#fcca1eeddb1cc4e7b6eed4fc7956d6813b21b9fb"
+  resolved "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz#fcca1eeddb1cc4e7b6eed4fc7956d6813b21b9fb"
   integrity sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==
 
 "@webassemblyjs/helper-api-error@1.13.2":
   version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz#e0a16152248bc38daee76dd7e21f15c5ef3ab1e7"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz#e0a16152248bc38daee76dd7e21f15c5ef3ab1e7"
   integrity sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==
 
 "@webassemblyjs/helper-buffer@1.14.1":
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz#822a9bc603166531f7d5df84e67b5bf99b72b96b"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz#822a9bc603166531f7d5df84e67b5bf99b72b96b"
   integrity sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==
 
 "@webassemblyjs/helper-numbers@1.13.2":
   version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz#dbd932548e7119f4b8a7877fd5a8d20e63490b2d"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz#dbd932548e7119f4b8a7877fd5a8d20e63490b2d"
   integrity sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==
   dependencies:
     "@webassemblyjs/floating-point-hex-parser" "1.13.2"
@@ -4477,12 +4550,12 @@
 
 "@webassemblyjs/helper-wasm-bytecode@1.13.2":
   version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz#e556108758f448aae84c850e593ce18a0eb31e0b"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz#e556108758f448aae84c850e593ce18a0eb31e0b"
   integrity sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==
 
 "@webassemblyjs/helper-wasm-section@1.14.1":
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz#9629dda9c4430eab54b591053d6dc6f3ba050348"
+  resolved "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz#9629dda9c4430eab54b591053d6dc6f3ba050348"
   integrity sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==
   dependencies:
     "@webassemblyjs/ast" "1.14.1"
@@ -4492,26 +4565,26 @@
 
 "@webassemblyjs/ieee754@1.13.2":
   version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz#1c5eaace1d606ada2c7fd7045ea9356c59ee0dba"
+  resolved "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz#1c5eaace1d606ada2c7fd7045ea9356c59ee0dba"
   integrity sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==
   dependencies:
     "@xtuc/ieee754" "^1.2.0"
 
 "@webassemblyjs/leb128@1.13.2":
   version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.13.2.tgz#57c5c3deb0105d02ce25fa3fd74f4ebc9fd0bbb0"
+  resolved "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz#57c5c3deb0105d02ce25fa3fd74f4ebc9fd0bbb0"
   integrity sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==
   dependencies:
     "@xtuc/long" "4.2.2"
 
 "@webassemblyjs/utf8@1.13.2":
   version "1.13.2"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.13.2.tgz#917a20e93f71ad5602966c2d685ae0c6c21f60f1"
+  resolved "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz#917a20e93f71ad5602966c2d685ae0c6c21f60f1"
   integrity sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==
 
 "@webassemblyjs/wasm-edit@^1.14.1":
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz#ac6689f502219b59198ddec42dcd496b1004d597"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz#ac6689f502219b59198ddec42dcd496b1004d597"
   integrity sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==
   dependencies:
     "@webassemblyjs/ast" "1.14.1"
@@ -4525,7 +4598,7 @@
 
 "@webassemblyjs/wasm-gen@1.14.1":
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz#991e7f0c090cb0bb62bbac882076e3d219da9570"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz#991e7f0c090cb0bb62bbac882076e3d219da9570"
   integrity sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==
   dependencies:
     "@webassemblyjs/ast" "1.14.1"
@@ -4536,7 +4609,7 @@
 
 "@webassemblyjs/wasm-opt@1.14.1":
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz#e6f71ed7ccae46781c206017d3c14c50efa8106b"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz#e6f71ed7ccae46781c206017d3c14c50efa8106b"
   integrity sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==
   dependencies:
     "@webassemblyjs/ast" "1.14.1"
@@ -4546,7 +4619,7 @@
 
 "@webassemblyjs/wasm-parser@1.14.1", "@webassemblyjs/wasm-parser@^1.14.1":
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz#b3e13f1893605ca78b52c68e54cf6a865f90b9fb"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz#b3e13f1893605ca78b52c68e54cf6a865f90b9fb"
   integrity sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==
   dependencies:
     "@webassemblyjs/ast" "1.14.1"
@@ -4558,7 +4631,7 @@
 
 "@webassemblyjs/wast-printer@1.14.1":
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz#3bb3e9638a8ae5fdaf9610e7a06b4d9f9aa6fe07"
+  resolved "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz#3bb3e9638a8ae5fdaf9610e7a06b4d9f9aa6fe07"
   integrity sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==
   dependencies:
     "@webassemblyjs/ast" "1.14.1"
@@ -4566,29 +4639,29 @@
 
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
+  resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
   integrity sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==
 
 "@xtuc/long@4.2.2":
   version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
+  resolved "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
 abort-controller@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
+  resolved "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
   integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==
   dependencies:
     event-target-shim "^5.0.0"
 
 abs-svg-path@^0.1.1:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf"
+  resolved "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz#df601c8e8d2ba10d4a76d625e236a9a39c2723bf"
   integrity sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA==
 
 accepts@~1.3.8:
   version "1.3.8"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
+  resolved "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"
   integrity sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==
   dependencies:
     mime-types "~2.1.34"
@@ -4596,60 +4669,60 @@ accepts@~1.3.8:
 
 acorn-import-attributes@^1.9.5:
   version "1.9.5"
-  resolved "https://registry.yarnpkg.com/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef"
+  resolved "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef"
   integrity sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==
 
 acorn-jsx@^5.3.2:
   version "5.3.2"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
 acorn-walk@^8.1.1:
   version "8.3.4"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.4.tgz#794dd169c3977edf4ba4ea47583587c5866236b7"
+  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz#794dd169c3977edf4ba4ea47583587c5866236b7"
   integrity sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==
   dependencies:
     acorn "^8.11.0"
 
 acorn@^8.11.0, acorn@^8.14.0, acorn@^8.4.1, acorn@^8.8.1, acorn@^8.8.2, acorn@^8.9.0:
   version "8.14.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz#063e2c70cac5fb4f6467f0b11152e04c682795b0"
   integrity sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==
 
 agent-base@6:
   version "6.0.2"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
   dependencies:
     debug "4"
 
 agent-base@^7.1.0, agent-base@^7.1.2:
   version "7.1.3"
-  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.3.tgz#29435eb821bc4194633a5b89e5bc4703bafc25a1"
+  resolved "https://registry.npmjs.org/agent-base/-/agent-base-7.1.3.tgz#29435eb821bc4194633a5b89e5bc4703bafc25a1"
   integrity sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==
 
 ajv-formats@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
+  resolved "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
   integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
   dependencies:
     ajv "^8.0.0"
 
 ajv-keywords@^3.5.2:
   version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
+  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
 ajv-keywords@^5.1.0:
   version "5.1.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
+  resolved "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
   integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
   dependencies:
     fast-deep-equal "^3.1.3"
 
 ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
   dependencies:
     fast-deep-equal "^3.1.1"
@@ -4659,7 +4732,7 @@ ajv@^6.12.4, ajv@^6.12.5:
 
 ajv@^8.0.0, ajv@^8.9.0:
   version "8.17.1"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
   integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
   dependencies:
     fast-deep-equal "^3.1.3"
@@ -4669,44 +4742,44 @@ ajv@^8.0.0, ajv@^8.9.0:
 
 ansi-html-community@0.0.8:
   version "0.0.8"
-  resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
+  resolved "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
   integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
 
 ansi-regex@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
 ansi-regex@^6.0.1:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz#95ec409c69619d6cb1b8b34f14b660ef28ebd654"
   integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
 
 ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
 ansi-styles@^5.0.0:
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
   integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
 
 ansi-styles@^6.1.0:
   version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
 any-promise@^1.0.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  resolved "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
   integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
 
 anymatch@~3.1.2:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
   integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
     normalize-path "^3.0.0"
@@ -4714,54 +4787,54 @@ anymatch@~3.1.2:
 
 arg@^4.1.0:
   version "4.1.3"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
+  resolved "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz#269fc7ad5b8e42cb63c896d5666017261c144089"
   integrity sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==
 
 arg@^5.0.2:
   version "5.0.2"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
+  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz#c81433cc427c92c4dcf4865142dbca6f15acd59c"
   integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
 
 argparse@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-hidden@^1.1.1:
+aria-hidden@^1.2.4:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522"
+  resolved "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz#b78e383fdbc04d05762c78b4a25a501e736c4522"
   integrity sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==
   dependencies:
     tslib "^2.0.0"
 
 aria-query@5.3.0:
   version "5.3.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
   integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
   dependencies:
     dequal "^2.0.3"
 
 aria-query@^5.0.0, aria-query@^5.3.2:
   version "5.3.2"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz#93f81a43480e33a338f19163a3d10a50c01dcd59"
   integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
 
-array-buffer-byte-length@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
-  integrity sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==
+array-buffer-byte-length@^1.0.1, array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz#384d12a37295aec3769ab022ad323a18a51ccf8b"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
   dependencies:
-    call-bind "^1.0.5"
-    is-array-buffer "^3.0.4"
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
 
 array-flatten@1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
+  resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
 array-includes@^3.1.6, array-includes@^3.1.8:
   version "3.1.8"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
+  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
   integrity sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==
   dependencies:
     call-bind "^1.0.7"
@@ -4773,12 +4846,12 @@ array-includes@^3.1.6, array-includes@^3.1.8:
 
 array-union@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
 array.prototype.findlast@^1.2.5:
   version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
+  resolved "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
   integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
   dependencies:
     call-bind "^1.0.7"
@@ -4790,7 +4863,7 @@ array.prototype.findlast@^1.2.5:
 
 array.prototype.findlastindex@^1.2.5:
   version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
+  resolved "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.5.tgz#8c35a755c72908719453f87145ca011e39334d0d"
   integrity sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==
   dependencies:
     call-bind "^1.0.7"
@@ -4801,28 +4874,28 @@ array.prototype.findlastindex@^1.2.5:
     es-shim-unscopables "^1.0.2"
 
 array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz#1476217df8cff17d72ee8f3ba06738db5b387d18"
-  integrity sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz#534aaf9e6e8dd79fb6b9a9917f839ef1ec63afe5"
+  integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    es-shim-unscopables "^1.0.0"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
 
-array.prototype.flatmap@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz#c9a7c6831db8e719d6ce639190146c24bbd3e527"
-  integrity sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==
+array.prototype.flatmap@^1.3.2, array.prototype.flatmap@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz#712cc792ae70370ae40586264629e33aab5dd38b"
+  integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
-    es-shim-unscopables "^1.0.0"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
 
 array.prototype.tosorted@^1.1.4:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
+  resolved "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz#fe954678ff53034e717ea3352a03f0b0b86f7ffc"
   integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
   dependencies:
     call-bind "^1.0.7"
@@ -4831,60 +4904,69 @@ array.prototype.tosorted@^1.1.4:
     es-errors "^1.3.0"
     es-shim-unscopables "^1.0.2"
 
-arraybuffer.prototype.slice@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz#097972f4255e41bc3425e37dc3f6421cf9aefde6"
-  integrity sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz#9d760d84dbdd06d0cbf92c8849615a1a7ab3183c"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
   dependencies:
     array-buffer-byte-length "^1.0.1"
-    call-bind "^1.0.5"
+    call-bind "^1.0.8"
     define-properties "^1.2.1"
-    es-abstract "^1.22.3"
-    es-errors "^1.2.1"
-    get-intrinsic "^1.2.3"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
     is-array-buffer "^3.0.4"
-    is-shared-array-buffer "^1.0.2"
 
 assertion-error@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
+  resolved "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
   integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
 
 ast-types-flow@^0.0.8:
   version "0.0.8"
-  resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
+  resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz#0a85e1c92695769ac13a428bb653e7538bea27d6"
   integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
 
 ast-types@^0.16.1:
   version "0.16.1"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.16.1.tgz#7a9da1617c9081bc121faafe91711b4c8bb81da2"
+  resolved "https://registry.npmjs.org/ast-types/-/ast-types-0.16.1.tgz#7a9da1617c9081bc121faafe91711b4c8bb81da2"
   integrity sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==
   dependencies:
     tslib "^2.0.1"
 
+async-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz#509c9fca60eaf85034c6829838188e4e4c8ffb2b"
+  integrity sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==
+
 async-lock@^1.3.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/async-lock/-/async-lock-1.4.1.tgz#56b8718915a9b68b10fce2f2a9a3dddf765ef53f"
+  resolved "https://registry.npmjs.org/async-lock/-/async-lock-1.4.1.tgz#56b8718915a9b68b10fce2f2a9a3dddf765ef53f"
   integrity sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==
 
+async@^3.2.3:
+  version "3.2.6"
+  resolved "https://registry.npmjs.org/async/-/async-3.2.6.tgz#1b0728e14929d51b85b449b7f06e27c1145e38ce"
+  integrity sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==
+
 asynckit@^0.4.0:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
 atomic-sleep@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
+  resolved "https://registry.npmjs.org/atomic-sleep/-/atomic-sleep-1.0.0.tgz#eb85b77a601fc932cfe432c5acd364a9e2c9075b"
   integrity sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==
 
 attr-accept@^2.2.4:
   version "2.2.5"
-  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.5.tgz#d7061d958e6d4f97bf8665c68b75851a0713ab5e"
+  resolved "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.5.tgz#d7061d958e6d4f97bf8665c68b75851a0713ab5e"
   integrity sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==
 
 autoprefixer@10.4.14:
   version "10.4.14"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
   integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
   dependencies:
     browserslist "^4.21.5"
@@ -4896,7 +4978,7 @@ autoprefixer@10.4.14:
 
 autoprefixer@^10.4.14, autoprefixer@^10.4.19:
   version "10.4.20"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
   integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
   dependencies:
     browserslist "^4.23.3"
@@ -4908,19 +4990,19 @@ autoprefixer@^10.4.14, autoprefixer@^10.4.19:
 
 available-typed-arrays@^1.0.7:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
+  resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
   integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
   dependencies:
     possible-typed-array-names "^1.0.0"
 
 axe-core@^4.10.0:
   version "4.10.2"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
+  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz#85228e3e1d8b8532a27659b332e39b7fa0e022df"
   integrity sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==
 
-axios@^1.7.2, axios@^1.7.4:
+axios@^1.7.9:
   version "1.7.9"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.9.tgz#d7d071380c132a24accda1b2cfc1535b79ec650a"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz#d7d071380c132a24accda1b2cfc1535b79ec650a"
   integrity sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==
   dependencies:
     follow-redirects "^1.15.6"
@@ -4929,17 +5011,17 @@ axios@^1.7.2, axios@^1.7.4:
 
 axobject-query@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
+  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz#28768c76d0e3cff21bc62a9e2d0b6ac30042a1ee"
   integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
 
 b4a@^1.6.4:
   version "1.6.7"
-  resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.7.tgz#a99587d4ebbfbd5a6e3b21bdb5d5fa385767abe4"
+  resolved "https://registry.npmjs.org/b4a/-/b4a-1.6.7.tgz#a99587d4ebbfbd5a6e3b21bdb5d5fa385767abe4"
   integrity sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==
 
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
   integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -4948,7 +5030,7 @@ babel-plugin-macros@^3.1.0:
 
 babel-plugin-module-resolver@^5.0.2:
   version "5.0.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.2.tgz#cdeac5d4aaa3b08dd1ac23ddbf516660ed2d293e"
+  resolved "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-5.0.2.tgz#cdeac5d4aaa3b08dd1ac23ddbf516660ed2d293e"
   integrity sha512-9KtaCazHee2xc0ibfqsDeamwDps6FZNo5S0Q81dUqEuFzVwPhcT4J5jOqIVvgCA3Q/wO9hKYxN/Ds3tIsp5ygg==
   dependencies:
     find-babel-config "^2.1.1"
@@ -4959,110 +5041,115 @@ babel-plugin-module-resolver@^5.0.2:
 
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.12"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz#ca55bbec8ab0edeeef3d7b8ffd75322e210879a9"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.12.tgz#ca55bbec8ab0edeeef3d7b8ffd75322e210879a9"
   integrity sha512-CPWT6BwvhrTO2d8QVorhTCQw9Y43zOu7G9HigcfxvepOU6b8o3tcWad6oVgZIsZCTt42FFv97aA7ZJsbM4+8og==
   dependencies:
     "@babel/compat-data" "^7.22.6"
     "@babel/helper-define-polyfill-provider" "^0.6.3"
     semver "^6.3.1"
 
-babel-plugin-polyfill-corejs3@^0.10.6:
-  version "0.10.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.10.6.tgz#2deda57caef50f59c525aeb4964d3b2f867710c7"
-  integrity sha512-b37+KR2i/khY5sKmWNVQAnitvquQbNdWy6lJdsr0kmquCKEEUgMKK4SboVM3HtfnZilfjr4MMQ7vY58FVWDtIA==
+babel-plugin-polyfill-corejs3@^0.11.0:
+  version "0.11.1"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz#4e4e182f1bb37c7ba62e2af81d8dd09df31344f6"
+  integrity sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==
   dependencies:
-    "@babel/helper-define-polyfill-provider" "^0.6.2"
-    core-js-compat "^3.38.0"
+    "@babel/helper-define-polyfill-provider" "^0.6.3"
+    core-js-compat "^3.40.0"
 
 babel-plugin-polyfill-regenerator@^0.6.1:
   version "0.6.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz#abeb1f3f1c762eace37587f42548b08b57789bc8"
+  resolved "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.3.tgz#abeb1f3f1c762eace37587f42548b08b57789bc8"
   integrity sha512-LiWSbl4CRSIa5x/JAU6jZiG9eit9w6mz+yVMFwDE83LAWvt0AfGBoZ7HS/mkhrKuh2ZlzfVZYKoLjXdqw6Yt7Q==
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.6.3"
 
 bail@^2.0.0:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
+  resolved "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
   integrity sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==
 
 balanced-match@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 bare-events@^2.0.0, bare-events@^2.2.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/bare-events/-/bare-events-2.5.0.tgz#305b511e262ffd8b9d5616b056464f8e1b3329cc"
-  integrity sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==
+  version "2.5.4"
+  resolved "https://registry.npmjs.org/bare-events/-/bare-events-2.5.4.tgz#16143d435e1ed9eafd1ab85f12b89b3357a41745"
+  integrity sha512-+gFfDkR8pj4/TrWCGUGWmJIkBwuxPS5F+a5yWjOHQt2hHvNZd5YLzadjmDUtFmMM4y429bnKLa8bYBMHcYdnQA==
 
-bare-fs@^2.1.1:
-  version "2.3.5"
-  resolved "https://registry.yarnpkg.com/bare-fs/-/bare-fs-2.3.5.tgz#05daa8e8206aeb46d13c2fe25a2cd3797b0d284a"
-  integrity sha512-SlE9eTxifPDJrT6YgemQ1WGFleevzwY+XAP1Xqgl56HtcrisC2CHCZ2tq6dBpcH2TnNxwUEUGhweo+lrQtYuiw==
+bare-fs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/bare-fs/-/bare-fs-4.0.1.tgz#85844f34da819c76754d545323a8b23ed3617c76"
+  integrity sha512-ilQs4fm/l9eMfWY2dY0WCIUplSUp7U0CT1vrqMg1MUdeZl4fypu5UP0XcDBK5WBQPJAKP1b7XEodISmekH/CEg==
   dependencies:
     bare-events "^2.0.0"
-    bare-path "^2.0.0"
+    bare-path "^3.0.0"
     bare-stream "^2.0.0"
 
-bare-os@^2.1.0:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/bare-os/-/bare-os-2.4.4.tgz#01243392eb0a6e947177bb7c8a45123d45c9b1a9"
-  integrity sha512-z3UiI2yi1mK0sXeRdc4O1Kk8aOa/e+FNWZcTiPB/dfTWyLypuE99LibgRaQki914Jq//yAWylcAt+mknKdixRQ==
+bare-os@^3.0.1:
+  version "3.4.0"
+  resolved "https://registry.npmjs.org/bare-os/-/bare-os-3.4.0.tgz#97be31503f3095beb232a6871f0118859832eb0c"
+  integrity sha512-9Ous7UlnKbe3fMi7Y+qh0DwAup6A1JkYgPnjvMDNOlmnxNRQvQ/7Nst+OnUQKzk0iAT0m9BisbDVp9gCv8+ETA==
 
-bare-path@^2.0.0, bare-path@^2.1.0:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/bare-path/-/bare-path-2.1.3.tgz#594104c829ef660e43b5589ec8daef7df6cedb3e"
-  integrity sha512-lh/eITfU8hrj9Ru5quUp0Io1kJWIk1bTjzo7JH1P5dWmQ2EL4hFUlfI8FonAhSlgIfhn63p84CDY/x+PisgcXA==
+bare-path@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz#b59d18130ba52a6af9276db3e96a2e3d3ea52178"
+  integrity sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==
   dependencies:
-    bare-os "^2.1.0"
+    bare-os "^3.0.1"
 
 bare-stream@^2.0.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/bare-stream/-/bare-stream-2.4.2.tgz#5a4241ff8a3bdd6d037fc459ab3e41189d2f2576"
-  integrity sha512-XZ4ln/KV4KT+PXdIWTKjsLY+quqCaEtqqtgGJVPw9AoM73By03ij64YjepK0aQvHSWDb6AfAZwqKaFu68qkrdA==
+  version "2.6.5"
+  resolved "https://registry.npmjs.org/bare-stream/-/bare-stream-2.6.5.tgz#bba8e879674c4c27f7e27805df005c15d7a2ca07"
+  integrity sha512-jSmxKJNJmHySi6hC42zlZnq00rga4jjxcgNZjY9N5WlOe/iOoGRtdwGsHzQv2RlH2KOYMwGUXhf2zXd32BA9RA==
   dependencies:
-    streamx "^2.20.0"
+    streamx "^2.21.0"
 
 base64-js@^1.1.2, base64-js@^1.3.0, base64-js@^1.3.1:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  resolved "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
 basic-auth@~2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/basic-auth/-/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
+  resolved "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz#b998279bf47ce38344b4f3cf916d4679bbf51e3a"
   integrity sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==
   dependencies:
     safe-buffer "5.1.2"
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==
+
 better-opn@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/better-opn/-/better-opn-3.0.2.tgz#f96f35deaaf8f34144a4102651babcf00d1d8817"
+  resolved "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz#f96f35deaaf8f34144a4102651babcf00d1d8817"
   integrity sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==
   dependencies:
     open "^8.0.4"
 
 bidi-js@^1.0.2:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/bidi-js/-/bidi-js-1.0.3.tgz#6f8bcf3c877c4d9220ddf49b9bb6930c88f877d2"
+  resolved "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz#6f8bcf3c877c4d9220ddf49b9bb6930c88f877d2"
   integrity sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==
   dependencies:
     require-from-string "^2.0.2"
 
 binary-extensions@^2.0.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
 bind-event-listener@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/bind-event-listener/-/bind-event-listener-3.0.0.tgz#c90f9a7fcb65cac21045f810c20ef7e647a74921"
+  resolved "https://registry.npmjs.org/bind-event-listener/-/bind-event-listener-3.0.0.tgz#c90f9a7fcb65cac21045f810c20ef7e647a74921"
   integrity sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==
 
 bl@^4.0.3:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
+  resolved "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
   integrity sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==
   dependencies:
     buffer "^5.5.0"
@@ -5071,12 +5158,12 @@ bl@^4.0.3:
 
 bluebird@^3.7.2:
   version "3.7.2"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
 body-parser@1.20.3:
   version "1.20.3"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
+  resolved "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
   integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
   dependencies:
     bytes "3.1.2"
@@ -5094,12 +5181,12 @@ body-parser@1.20.3:
 
 boolbase@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
+  resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
   integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   dependencies:
     balanced-match "^1.0.0"
@@ -5107,55 +5194,55 @@ brace-expansion@^1.1.7:
 
 brace-expansion@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
   integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
   dependencies:
     balanced-match "^1.0.0"
 
 braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
   integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
   dependencies:
     fill-range "^7.1.1"
 
 brotli@^1.3.2:
   version "1.3.3"
-  resolved "https://registry.yarnpkg.com/brotli/-/brotli-1.3.3.tgz#7365d8cc00f12cf765d2b2c898716bcf4b604d48"
+  resolved "https://registry.npmjs.org/brotli/-/brotli-1.3.3.tgz#7365d8cc00f12cf765d2b2c898716bcf4b604d48"
   integrity sha512-oTKjJdShmDuGW94SyyaoQvAjf30dZaHnjJ8uAF+u2/vGJkJbJPJAT1gDiOJP5v1Zb6f9KEyW/1HpuaWIXtGHPg==
   dependencies:
     base64-js "^1.1.2"
 
 browser-assert@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/browser-assert/-/browser-assert-1.2.1.tgz#9aaa5a2a8c74685c2ae05bfe46efd606f068c200"
+  resolved "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz#9aaa5a2a8c74685c2ae05bfe46efd606f068c200"
   integrity sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==
 
 browserify-zlib@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  resolved "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
   integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.21.5, browserslist@^4.23.3, browserslist@^4.24.0, browserslist@^4.24.2:
-  version "4.24.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.24.2.tgz#f5845bc91069dbd55ee89faf9822e1d885d16580"
-  integrity sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==
+browserslist@^4.21.5, browserslist@^4.23.3, browserslist@^4.24.0, browserslist@^4.24.3:
+  version "4.24.4"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz#c6b2865a3f08bcb860a0e827389003b9fe686e4b"
+  integrity sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==
   dependencies:
-    caniuse-lite "^1.0.30001669"
-    electron-to-chromium "^1.5.41"
-    node-releases "^2.0.18"
+    caniuse-lite "^1.0.30001688"
+    electron-to-chromium "^1.5.73"
+    node-releases "^2.0.19"
     update-browserslist-db "^1.1.1"
 
 buffer-from@^1.0.0:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
 buffer@^5.5.0:
   version "5.7.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
   dependencies:
     base64-js "^1.3.1"
@@ -5163,7 +5250,7 @@ buffer@^5.5.0:
 
 buffer@^6.0.3:
   version "6.0.3"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  resolved "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
   integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
   dependencies:
     base64-js "^1.3.1"
@@ -5171,39 +5258,39 @@ buffer@^6.0.3:
 
 bundle-require@^4.0.0:
   version "4.2.1"
-  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-4.2.1.tgz#4c450a5807381d20ade987bde8ac391544257919"
+  resolved "https://registry.npmjs.org/bundle-require/-/bundle-require-4.2.1.tgz#4c450a5807381d20ade987bde8ac391544257919"
   integrity sha512-7Q/6vkyYAwOmQNRw75x+4yRtZCZJXUDmHHlFdkiV0wgv/reNjtJwpu1jPJ0w2kbEpIM0uoKI3S4/f39dU7AjSA==
   dependencies:
     load-tsconfig "^0.2.3"
 
 busboy@1.6.0:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
+  resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
   integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
   dependencies:
     streamsearch "^1.1.0"
 
 bytes@3.1.2:
   version "3.1.2"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  resolved "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
   integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
 
 cac@^6.7.12:
   version "6.7.14"
-  resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
+  resolved "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
   integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
 
-call-bind-apply-helpers@^1.0.0:
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
+  resolved "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz#32e5892e6361b29b0b545ba6f7763378daca2840"
   integrity sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==
   dependencies:
     es-errors "^1.3.0"
     function-bind "^1.1.2"
 
-call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7, call-bind@^1.0.8:
+call-bind@^1.0.7, call-bind@^1.0.8:
   version "1.0.8"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
+  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
   integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
   dependencies:
     call-bind-apply-helpers "^1.0.0"
@@ -5211,14 +5298,22 @@ call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bind@^1.0.7, call-bin
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.2"
 
+call-bound@^1.0.2, call-bound@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz#41cfd032b593e39176a71533ab4f384aa04fd681"
+  integrity sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    get-intrinsic "^1.2.6"
+
 callsites@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 camel-case@^4.1.2:
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  resolved "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
   integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
   dependencies:
     pascal-case "^3.1.2"
@@ -5226,17 +5321,17 @@ camel-case@^4.1.2:
 
 camelcase-css@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
+  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
   integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
 
-caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001669:
-  version "1.0.30001687"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz#d0ac634d043648498eedf7a3932836beba90ebae"
-  integrity sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==
+caniuse-lite@^1.0.30001464, caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001646, caniuse-lite@^1.0.30001688:
+  version "1.0.30001699"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001699.tgz#a102cf330d153bf8c92bfb5be3cd44c0a89c8c12"
+  integrity sha512-b+uH5BakXZ9Do9iK+CkDmctUSEqZl+SP056vc5usa0PL+ev5OHw003rZXcnjNDv3L8P5j6rwT6C0BPKSikW08w==
 
 capital-case@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
+  resolved "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz#9d130292353c9249f6b00fa5852bee38a717e669"
   integrity sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==
   dependencies:
     no-case "^3.0.4"
@@ -5245,12 +5340,12 @@ capital-case@^1.0.4:
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
-  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
+  resolved "https://registry.npmjs.org/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
   integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
 
 chai@^5.1.1:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-5.1.2.tgz#3afbc340b994ae3610ca519a6c70ace77ad4378d"
+  resolved "https://registry.npmjs.org/chai/-/chai-5.1.2.tgz#3afbc340b994ae3610ca519a6c70ace77ad4378d"
   integrity sha512-aGtmf24DW6MLHHG5gCx4zaI3uBq3KRtxeVs0DjFH6Z0rDNbsvTxFASFvdj79pxjxZ8/5u3PIiN3IwEIQkiiuPw==
   dependencies:
     assertion-error "^2.0.1"
@@ -5261,7 +5356,7 @@ chai@^5.1.1:
 
 chalk@3.0.0, chalk@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
   integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
   dependencies:
     ansi-styles "^4.1.0"
@@ -5269,7 +5364,7 @@ chalk@3.0.0, chalk@^3.0.0:
 
 chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
   dependencies:
     ansi-styles "^4.1.0"
@@ -5277,7 +5372,7 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
 
 change-case@^4.1.2:
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
+  resolved "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz#fedfc5f136045e2398c0410ee441f95704641e12"
   integrity sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==
   dependencies:
     camel-case "^4.1.2"
@@ -5295,17 +5390,17 @@ change-case@^4.1.2:
 
 character-entities@^2.0.0:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
+  resolved "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz#2d09c2e72cd9523076ccb21157dff66ad43fcc22"
   integrity sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==
 
 check-error@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
+  resolved "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
   integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==
 
 chokidar@^3.3.0, chokidar@^3.5.1, chokidar@^3.5.2, chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
   dependencies:
     anymatch "~3.1.2"
@@ -5320,51 +5415,51 @@ chokidar@^3.3.0, chokidar@^3.5.1, chokidar@^3.5.2, chokidar@^3.5.3, chokidar@^3.
 
 chownr@^1.1.1:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
+  resolved "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
 
 chromatic@^11.4.0:
-  version "11.20.0"
-  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-11.20.0.tgz#bcd49bcb0b1a894499d5c4dff4115f818e8d2f7e"
-  integrity sha512-Btdli1qoAI01UKmk3Iqe6vKhAhePRXqNI/2uKKy2R16q7SN/5kLTqhd1JI20LFOZSnH3xSJaUXeJ2xZOJB//3A==
+  version "11.25.2"
+  resolved "https://registry.npmjs.org/chromatic/-/chromatic-11.25.2.tgz#cb93dc1332d8f6b70d97a3ef126bc6d03429d396"
+  integrity sha512-/9eQWn6BU1iFsop86t8Au21IksTRxwXAl7if8YHD05L2AbuMjClLWZo5cZojqrJHGKDhTqfrC2X2xE4uSm0iKw==
 
 chrome-trace-event@^1.0.2:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
+  resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
   integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
 
 cjs-module-lexer@^1.2.2, cjs-module-lexer@^1.2.3:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.4.1.tgz#707413784dbb3a72aa11c2f2b042a0bef4004170"
-  integrity sha512-cuSVIHi9/9E/+821Qjdvngor+xpnlwnuwIyZOaLmHBVdXL+gP+I6QQB9VkO7RI77YIcTV+S1W9AreJ5eN63JBA==
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz#0f79731eb8cfe1ec72acd4066efac9d61991b00d"
+  integrity sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==
 
-class-variance-authority@^0.7.0:
+class-variance-authority@^0.7.0, class-variance-authority@^0.7.1:
   version "0.7.1"
-  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz#4008a798a0e4553a781a57ac5177c9fb5d043787"
+  resolved "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz#4008a798a0e4553a781a57ac5177c9fb5d043787"
   integrity sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==
   dependencies:
     clsx "^2.1.1"
 
 classnames@^2.3.1, classnames@^2.3.2:
   version "2.5.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
 
 clean-css@^5.2.2:
   version "5.3.3"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
+  resolved "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz#b330653cd3bd6b75009cc25c714cae7b93351ccd"
   integrity sha512-D5J+kHaVb/wKSFcyyV75uCn8fiY4sV38XJoe4CUyGQ+mOU/fMVYUdH1hJC+CJQ5uY3EnW27SbJYS4X8BiLrAFg==
   dependencies:
     source-map "~0.6.0"
 
 client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
-  resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
+  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
 cliui@^8.0.1:
   version "8.0.1"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
+  resolved "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
   integrity sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==
   dependencies:
     string-width "^4.2.0"
@@ -5373,27 +5468,22 @@ cliui@^8.0.1:
 
 clone@^2.1.2:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
-clsx@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
-  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
-
 clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
 
 cluster-key-slot@^1.1.0:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz#88ddaa46906e303b5de30d3153b7d9fe0a0c19ac"
+  resolved "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz#88ddaa46906e303b5de30d3153b7d9fe0a0c19ac"
   integrity sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==
 
 cmdk@^1.0.0:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.0.4.tgz#cbddef6f5ade2378f85c80a0b9ad9a8a712779b5"
+  resolved "https://registry.npmjs.org/cmdk/-/cmdk-1.0.4.tgz#cbddef6f5ade2378f85c80a0b9ad9a8a712779b5"
   integrity sha512-AnsjfHyHpQ/EFeAnG216WY7A5LiYCoZzCSygiLvfXC3H3LFGCprErteUcszaVluGOhuOTbJS3jWHrSDYPBBygg==
   dependencies:
     "@radix-ui/react-dialog" "^1.1.2"
@@ -5401,29 +5491,49 @@ cmdk@^1.0.0:
     "@radix-ui/react-primitive" "^2.0.0"
     use-sync-external-store "^1.2.2"
 
+color-convert@^1.9.3:
+  version "1.9.3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
+  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
+  dependencies:
+    color-name "1.1.3"
+
 color-convert@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
   integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
   dependencies:
     color-name "~1.1.4"
 
+color-name@1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
+  integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
+
 color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.9.0, color-string@^1.9.1:
+color-string@^1.6.0, color-string@^1.9.0, color-string@^1.9.1:
   version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
+  resolved "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
   integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
   dependencies:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
+color@^3.1.3:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
+  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
+  dependencies:
+    color-convert "^1.9.3"
+    color-string "^1.6.0"
+
 color@^4.2.3:
   version "4.2.3"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
+  resolved "https://registry.npmjs.org/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
   integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
   dependencies:
     color-convert "^2.0.1"
@@ -5431,62 +5541,70 @@ color@^4.2.3:
 
 colorette@^2.0.10, colorette@^2.0.7:
   version "2.0.20"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
+colorspace@1.1.x:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/colorspace/-/colorspace-1.1.4.tgz#8d442d1186152f60453bf8070cd66eb364e59243"
+  integrity sha512-BgvKJiuVu1igBUF2kEjRCZXol6wiiGbY5ipL/oVPwm0BL9sIpMIzM8IK7vwuxIIzOXMV3Ey5w+vxhm0rR/TN8w==
+  dependencies:
+    color "^3.1.3"
+    text-hex "1.0.x"
+
 combined-stream@^1.0.8:
   version "1.0.8"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
   integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
   dependencies:
     delayed-stream "~1.0.0"
 
 comlink@^4.4.1:
   version "4.4.2"
-  resolved "https://registry.yarnpkg.com/comlink/-/comlink-4.4.2.tgz#cbbcd82742fbebc06489c28a183eedc5c60a2bca"
+  resolved "https://registry.npmjs.org/comlink/-/comlink-4.4.2.tgz#cbbcd82742fbebc06489c28a183eedc5c60a2bca"
   integrity sha512-OxGdvBmJuNKSCMO4NTl1L47VRp6xn2wG4F/2hYzB6tiCb709otOxtEYCSvK80PtjODfXXZu8ds+Nw5kVCjqd2g==
 
 comma-separated-tokens@^2.0.0:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
+  resolved "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz#4e89c9458acb61bc8fef19f4529973b2392839ee"
   integrity sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==
 
 commander@^2.20.0:
   version "2.20.3"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 commander@^4.0.0:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
 commander@^6.2.0:
   version "6.2.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  resolved "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
   integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
 
 commander@^8.3.0:
   version "8.3.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
+  resolved "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
 commondir@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
+  resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
   integrity sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==
 
 compressible@~2.0.18:
   version "2.0.18"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
+  resolved "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
   integrity sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==
   dependencies:
     mime-db ">= 1.43.0 < 2"
 
 compression@^1.7.4:
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.5.tgz#fdd256c0a642e39e314c478f6c2cd654edd74c93"
-  integrity sha512-bQJ0YRck5ak3LgtnpKkiabX5pNF7tMUh1BSy2ZBOTh0Dim0BUu6aPPwByIns6/A5Prh8PufSPerMDUklpzes2Q==
+  version "1.8.0"
+  resolved "https://registry.npmjs.org/compression/-/compression-1.8.0.tgz#09420efc96e11a0f44f3a558de59e321364180f7"
+  integrity sha512-k6WLKfunuqCYD3t6AsuPGvQWaKwuLLh2/xHNcX4qE+vIfDNXpSqnrhwA7O53R7WVQUnt8dVAIW+YHr7xTgOgGA==
   dependencies:
     bytes "3.1.2"
     compressible "~2.0.18"
@@ -5497,19 +5615,19 @@ compression@^1.7.4:
     vary "~1.1.2"
 
 compute-scroll-into-view@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz#753f11d972596558d8fe7c6bcbc8497690ab4c87"
-  integrity sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg==
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz#02c3386ec531fb6a9881967388e53e8564f3e9aa"
+  integrity sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==
 
 concat-map@0.0.1:
   version "0.0.1"
-  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
 concurrently@^9.0.1:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-9.1.0.tgz#8da6d609f4321752912dab9be8710232ac496aa0"
-  integrity sha512-VxkzwMAn4LP7WyMnJNbHN5mKV9L2IbyDjpzemKr99sXNR3GqRNMMHdm7prV1ws9wg7ETj6WUkNOigZVsptwbgg==
+  version "9.1.2"
+  resolved "https://registry.npmjs.org/concurrently/-/concurrently-9.1.2.tgz#22d9109296961eaee773e12bfb1ce9a66bc9836c"
+  integrity sha512-H9MWcoPsYddwbOGM6difjVwVZHl63nwMEwDJG/L7VGtuaJhb12h2caPG2tVPWs7emuYix252iGfqOyrz1GczTQ==
   dependencies:
     chalk "^4.1.2"
     lodash "^4.17.21"
@@ -5521,7 +5639,7 @@ concurrently@^9.0.1:
 
 constant-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
+  resolved "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz#3b84a9aeaf4cf31ec45e6bf5de91bdfb0589faf1"
   integrity sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==
   dependencies:
     no-case "^3.0.4"
@@ -5530,56 +5648,56 @@ constant-case@^3.0.4:
 
 constants-browserify@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+  resolved "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
   integrity sha512-xFxOwqIzR/e1k1gLiWEophSCMqXcwVHIH7akf7b/vxcUeGunlj3hvZaaqxwHsTgn+IndtkQJgSztIDWeumWJDQ==
 
 content-disposition@0.5.4:
   version "0.5.4"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
+  resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
   integrity sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==
   dependencies:
     safe-buffer "5.2.1"
 
 content-type@~1.0.4, content-type@~1.0.5:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
 convert-source-map@^1.5.0:
   version "1.9.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
 convert-source-map@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
 cookie-signature@1.0.6:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
+  resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
 cookie@0.7.1:
   version "0.7.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
+  resolved "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
   integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
 
-core-js-compat@^3.38.0, core-js-compat@^3.38.1:
-  version "3.39.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.39.0.tgz#b12dccb495f2601dc860bdbe7b4e3ffa8ba63f61"
-  integrity sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==
+core-js-compat@^3.40.0:
+  version "3.40.0"
+  resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.40.0.tgz#7485912a5a4a4315c2fdb2cbdc623e6881c88b38"
+  integrity sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==
   dependencies:
-    browserslist "^4.24.2"
+    browserslist "^4.24.3"
 
 core-js@^3.38.1:
-  version "3.39.0"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.39.0.tgz#57f7647f4d2d030c32a72ea23a0555b2eaa30f83"
-  integrity sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==
+  version "3.40.0"
+  resolved "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz#2773f6b06877d8eda102fc42f828176437062476"
+  integrity sha512-7vsMc/Lty6AGnn7uFpYT56QesI5D2Y/UkgKounk87OP9Z2H9Z8kj6jzcSGAxFmUtDOS0ntK6lbQz+Nsa0Jj6mQ==
 
 cors@^2.8.5:
   version "2.8.5"
-  resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
+  resolved "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
   integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
   dependencies:
     object-assign "^4"
@@ -5587,7 +5705,7 @@ cors@^2.8.5:
 
 cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
   version "7.1.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
   integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
   dependencies:
     "@types/parse-json" "^4.0.0"
@@ -5596,26 +5714,34 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+create-react-class@^15.6.2:
+  version "15.7.0"
+  resolved "https://registry.npmjs.org/create-react-class/-/create-react-class-15.7.0.tgz#7499d7ca2e69bb51d13faf59bd04f0c65a1d6c1e"
+  integrity sha512-QZv4sFWG9S5RUvkTYWbflxeZX+JG7Cz0Tn33rQBJ+WFQTqTfUTjMjiv9tnfXazjsO5r0KhPs+AqCjyrQX6h2ng==
+  dependencies:
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
 create-require@^1.1.0:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
+  resolved "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
 crelt@^1.0.0:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
+  resolved "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
 cross-fetch@^3.1.5:
-  version "3.1.8"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
-  integrity sha512-cvA+JwZoU0Xq+h6WkMvAUqPEYy92Obet6UdKLfW60qn99ftItKjB5T+BkyWOFWe2pUyfQ+IJHmpOTznqk1M6Kg==
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.2.0.tgz#34e9192f53bc757d6614304d9e5e6fb4edb782e3"
+  integrity sha512-Q+xVJLoGOeIMXZmbUK4HYk+69cQH6LudR0Vu/pRm2YlU/hDV9CiS0gKUMaWY5f2NeUH9C1nV3bsTlCo0FsTV1Q==
   dependencies:
-    node-fetch "^2.6.12"
+    node-fetch "^2.7.0"
 
 cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.6"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
   integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
   dependencies:
     path-key "^3.1.0"
@@ -5624,12 +5750,12 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
 
 crypto-js@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
+  resolved "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz#4d931639ecdfd12ff80e8186dba6af2c2e856631"
   integrity sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==
 
 css-loader@^6.7.1:
   version "6.11.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.11.0.tgz#33bae3bf6363d0a7c2cf9031c96c744ff54d85ba"
+  resolved "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz#33bae3bf6363d0a7c2cf9031c96c744ff54d85ba"
   integrity sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==
   dependencies:
     icss-utils "^5.1.0"
@@ -5643,7 +5769,7 @@ css-loader@^6.7.1:
 
 css-select@^4.1.3:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
+  resolved "https://registry.npmjs.org/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
   integrity sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==
   dependencies:
     boolbase "^1.0.0"
@@ -5654,7 +5780,7 @@ css-select@^4.1.3:
 
 css-select@^5.1.0:
   version "5.1.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
+  resolved "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz#b8ebd6554c3637ccc76688804ad3f6a6fdaea8a6"
   integrity sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==
   dependencies:
     boolbase "^1.0.0"
@@ -5663,24 +5789,9 @@ css-select@^5.1.0:
     domutils "^3.0.1"
     nth-check "^2.0.1"
 
-css-styled@^1.0.8, css-styled@~1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/css-styled/-/css-styled-1.0.8.tgz#c9c05dc4abdef5571033090bfb8cfc5e19429974"
-  integrity sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==
-  dependencies:
-    "@daybrush/utils" "^1.13.0"
-
-css-to-mat@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/css-to-mat/-/css-to-mat-1.1.1.tgz#0dd10dcf9ec17df15708c8ff07a74fbd0b9a3fe5"
-  integrity sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==
-  dependencies:
-    "@daybrush/utils" "^1.13.0"
-    "@scena/matrix" "^1.0.0"
-
 css-tree@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  resolved "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
   integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
   dependencies:
     mdn-data "2.0.14"
@@ -5688,87 +5799,88 @@ css-tree@^1.1.3:
 
 css-what@^6.0.1, css-what@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
+  resolved "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
 css.escape@^1.5.1:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  resolved "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
 cssesc@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
+  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssstyle@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-4.1.0.tgz#161faee382af1bafadb6d3867a92a19bcb4aea70"
-  integrity sha512-h66W1URKpBS5YMI/V8PyXvTMFT8SupJ1IzoIV8IeBC/ji8WVmrO8dGlTi+2dh6whmdk6BiKJLD/ZBkhWbcg6nA==
+cssstyle@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-4.2.1.tgz#5142782410fea95db66fb68147714a652a7c2381"
+  integrity sha512-9+vem03dMXG7gDmZ62uqmRiMRNtinIZ9ZyuF6BdxzfOD+FdN5hretzynkn0ReS2DO2GSw76RWHs0UmJPI2zUjw==
   dependencies:
-    rrweb-cssom "^0.7.1"
+    "@asamuzakjp/css-color" "^2.8.2"
+    rrweb-cssom "^0.8.0"
 
 csstype@^3.0.2, csstype@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 d3-array@2:
   version "2.12.1"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
+  resolved "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
   integrity sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==
   dependencies:
     internmap "^1.0.0"
 
 "d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
   version "3.2.4"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  resolved "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
   integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
   dependencies:
     internmap "1 - 2"
 
 "d3-color@1 - 3", d3-color@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  resolved "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
   integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
 d3-delaunay@^6.0.4:
   version "6.0.4"
-  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
+  resolved "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz#98169038733a0a5babbeda55054f795bb9e4a58b"
   integrity sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==
   dependencies:
     delaunator "5"
 
 d3-ease@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  resolved "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
   integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
 
 "d3-format@1 - 3":
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  resolved "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
   integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
 
 d3-format@^1.4.4:
   version "1.4.5"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
+  resolved "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz#374f2ba1320e3717eb74a9356c67daee17a7edb4"
   integrity sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==
 
 "d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
   integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
   dependencies:
     d3-color "1 - 3"
 
 d3-path@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  resolved "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
   integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
 
 d3-scale-chromatic@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#34c39da298b23c20e02f1a4b239bd0f22e7f1314"
+  resolved "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz#34c39da298b23c20e02f1a4b239bd0f22e7f1314"
   integrity sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==
   dependencies:
     d3-color "1 - 3"
@@ -5776,7 +5888,7 @@ d3-scale-chromatic@^3.0.0:
 
 d3-scale@^4.0.2:
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
   integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
   dependencies:
     d3-array "2.10.0 - 3"
@@ -5787,164 +5899,162 @@ d3-scale@^4.0.2:
 
 d3-shape@^3.1.0, d3-shape@^3.2.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  resolved "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
   integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
   dependencies:
     d3-path "^3.1.0"
 
 "d3-time-format@2 - 4":
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
   integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
   dependencies:
     d3-time "1 - 3"
 
 d3-time-format@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
+  resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6"
   integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==
   dependencies:
     d3-time "1 - 2"
 
 "d3-time@1 - 2":
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
+  resolved "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682"
   integrity sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==
   dependencies:
     d3-array "2"
 
 "d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  resolved "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
   integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
   dependencies:
     d3-array "2 - 3"
 
 d3-time@^1.0.10, d3-time@^1.0.11:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
+  resolved "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1"
   integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==
 
 d3-timer@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  resolved "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
   integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
 
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
+  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
 data-urls@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-5.0.0.tgz#2f76906bce1824429ffecb6920f45a0b30f00dde"
+  resolved "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz#2f76906bce1824429ffecb6920f45a0b30f00dde"
   integrity sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==
   dependencies:
     whatwg-mimetype "^4.0.0"
     whatwg-url "^14.0.0"
 
-data-view-buffer@^1.0.1:
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz#211a03ba95ecaf7798a8c7198d79536211f88570"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz#9e80f7ca52453ce3e93d25a35318767ea7704735"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-offset@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
-  integrity sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==
+  resolved "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz#068307f9b71ab76dbbe10291389e020856606191"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
   dependencies:
-    call-bind "^1.0.6"
+    call-bound "^1.0.2"
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
-data-view-byte-length@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz#90721ca95ff280677eb793749fce1011347669e2"
-  integrity sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==
-  dependencies:
-    call-bind "^1.0.7"
-    es-errors "^1.3.0"
-    is-data-view "^1.0.1"
+date-fns-jalali@^4.1.0-0:
+  version "4.1.0-0"
+  resolved "https://registry.yarnpkg.com/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz#9c7fb286004fab267a300d3e9f1ada9f10b4b6b0"
+  integrity sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg==
 
-data-view-byte-offset@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz#5e0bbfb4828ed2d1b9b400cd8a7d119bca0ff18a"
-  integrity sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==
-  dependencies:
-    call-bind "^1.0.6"
-    es-errors "^1.3.0"
-    is-data-view "^1.0.1"
-
-date-fns@^2.30.0:
-  version "2.30.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
-  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
-  dependencies:
-    "@babel/runtime" "^7.21.0"
-
-date-fns@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
-  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+date-fns@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz#64b3d83fff5aa80438f5b1a633c2e83b8a1c2d14"
+  integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==
 
 dateformat@^4.6.3:
   version "4.6.3"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
+  resolved "https://registry.npmjs.org/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
   integrity sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==
 
 debug@2.6.9:
   version "2.6.9"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
   dependencies:
     ms "2.0.0"
 
 debug@4, debug@^4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.3.5, debug@^4.3.7:
   version "4.4.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz#2b3f2aea2ffeb776477460267377dc8710faba8a"
   integrity sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==
   dependencies:
     ms "^2.1.3"
 
 debug@^3.2.7:
   version "3.2.7"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz#72580b7e9145fb39b6676f9c5e5fb100b934179a"
   integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
   dependencies:
     ms "^2.1.1"
 
 decimal.js-light@^2.4.1:
   version "2.5.1"
-  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  resolved "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
   integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
 
-decimal.js@^10.4.3:
-  version "10.4.3"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
-  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+decimal.js@10, decimal.js@^10.4.3:
+  version "10.5.0"
+  resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.5.0.tgz#0f371c7cf6c4898ce0afb09836db73cd82010f22"
+  integrity sha512-8vDa8Qxvr/+d94hSh5P3IJwI5t8/c0KsMp+g8bNw9cY2icONa5aPfvKeieW1WlG0WQYwwhJ7mjui2xtiePQSXw==
 
 decode-named-character-reference@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
+  resolved "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
   integrity sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==
   dependencies:
     character-entities "^2.0.0"
 
 decompress-response@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  resolved "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
   integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
   dependencies:
     mimic-response "^3.1.0"
 
 dedent@^0.7.0:
   version "0.7.0"
-  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==
 
 deep-eql@^5.0.1:
   version "5.0.2"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341"
+  resolved "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341"
   integrity sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==
 
 deep-equal@^1.1.1:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.2.tgz#78a561b7830eef3134c7f6f3a3d6af272a678761"
+  resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz#78a561b7830eef3134c7f6f3a3d6af272a678761"
   integrity sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==
   dependencies:
     is-arguments "^1.1.1"
@@ -5956,22 +6066,22 @@ deep-equal@^1.1.1:
 
 deep-extend@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
+  resolved "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
 deep-is@^0.1.3:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
 deepmerge@^4.2.2:
   version "4.3.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
 
 define-data-property@^1.0.1, define-data-property@^1.1.4:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
+  resolved "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
   integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
   dependencies:
     es-define-property "^1.0.0"
@@ -5980,12 +6090,12 @@ define-data-property@^1.0.1, define-data-property@^1.1.4:
 
 define-lazy-prop@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
+  resolved "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
-define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
+define-properties@^1.1.3, define-properties@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
   integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
   dependencies:
     define-data-property "^1.0.1"
@@ -5994,129 +6104,134 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
 
 delaunator@5:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
+  resolved "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz#39032b08053923e924d6094fe2cde1a99cc51278"
   integrity sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==
   dependencies:
     robust-predicates "^3.0.2"
 
 delayed-stream@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
 denque@^1.1.0:
   version "1.5.1"
-  resolved "https://registry.yarnpkg.com/denque/-/denque-1.5.1.tgz#07f670e29c9a78f8faecb2566a1e2c11929c5cbf"
+  resolved "https://registry.npmjs.org/denque/-/denque-1.5.1.tgz#07f670e29c9a78f8faecb2566a1e2c11929c5cbf"
   integrity sha512-XwE+iZ4D6ZUB7mfYRMb5wByE8L74HCn30FBN7sWnXksWc1LO1bPDl67pBR9o/kC4z/xSNAwkMYcGgqDV3BE3Hw==
 
 denque@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/denque/-/denque-2.1.0.tgz#e93e1a6569fb5e66f16a3c2a2964617d349d6ab1"
+  resolved "https://registry.npmjs.org/denque/-/denque-2.1.0.tgz#e93e1a6569fb5e66f16a3c2a2964617d349d6ab1"
   integrity sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==
 
 depd@2.0.0, depd@~2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  resolved "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
 
 dependency-graph@^0.11.0:
   version "0.11.0"
-  resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
+  resolved "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
   integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
 
 dequal@^2.0.0, dequal@^2.0.2, dequal@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
+desandro-matches-selector@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1"
+  integrity sha512-+1q0nXhdzg1IpIJdMKalUwvvskeKnYyEe3shPRwedNcWtnhEKT3ZxvFjzywHDeGcKViIxTCAoOYQWP1qD7VNyg==
+
 destroy@1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  resolved "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
 detect-libc@^2.0.0, detect-libc@^2.0.2:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
+  resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
   integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
 
 detect-node-es@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
+  resolved "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
 devlop@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
+  resolved "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz#4db7c2ca4dc6e0e834c30be70c94bbc976dc7018"
   integrity sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==
   dependencies:
     dequal "^2.0.0"
 
 dfa@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/dfa/-/dfa-1.2.0.tgz#96ac3204e2d29c49ea5b57af8d92c2ae12790657"
+  resolved "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz#96ac3204e2d29c49ea5b57af8d92c2ae12790657"
   integrity sha512-ED3jP8saaweFTjeGX8HQPjeC1YYyZs98jGNZx6IiBvxW7JG5v492kamAQB3m2wop07CvU/RQmzcKr6bgcC5D/Q==
 
 didyoumean@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
+  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
 diff@^4.0.1:
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
+  resolved "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz#60f3aecb89d5fae520c11aa19efc2bb982aade7d"
   integrity sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==
 
 diff@^5.0.0:
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531"
+  resolved "https://registry.npmjs.org/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531"
   integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
 
 dir-glob@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
   integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
   dependencies:
     path-type "^4.0.0"
 
 dlv@^1.1.3:
   version "1.1.3"
-  resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
+  resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
 doctrine@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
   integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
   dependencies:
     esutils "^2.0.2"
 
 doctrine@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
   integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
   dependencies:
     esutils "^2.0.2"
 
 dom-accessibility-api@^0.5.9:
   version "0.5.16"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
+  resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
 dom-accessibility-api@^0.6.3:
   version "0.6.3"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
+  resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
   integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
 
 dom-converter@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
+  resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
   integrity sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==
   dependencies:
     utila "~0.4"
 
 dom-helpers@^5.0.1:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
   dependencies:
     "@babel/runtime" "^7.8.7"
@@ -6124,7 +6239,7 @@ dom-helpers@^5.0.1:
 
 dom-serializer@^1.0.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
   integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
   dependencies:
     domelementtype "^2.0.1"
@@ -6133,7 +6248,7 @@ dom-serializer@^1.0.1:
 
 dom-serializer@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
   integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
   dependencies:
     domelementtype "^2.3.0"
@@ -6142,38 +6257,38 @@ dom-serializer@^2.0.0:
 
 dom4@^2.1.5:
   version "2.1.6"
-  resolved "https://registry.yarnpkg.com/dom4/-/dom4-2.1.6.tgz#c90df07134aa0dbd81ed4d6ba1237b36fc164770"
+  resolved "https://registry.npmjs.org/dom4/-/dom4-2.1.6.tgz#c90df07134aa0dbd81ed4d6ba1237b36fc164770"
   integrity sha512-JkCVGnN4ofKGbjf5Uvc8mmxaATIErKQKSgACdBXpsQ3fY6DlIpAyWfiBSrGkttATssbDCp3psiAKWXk5gmjycA==
 
 domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
 domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   version "4.3.1"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
+  resolved "https://registry.npmjs.org/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
   integrity sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==
   dependencies:
     domelementtype "^2.2.0"
 
 domhandler@^5.0.2, domhandler@^5.0.3:
   version "5.0.3"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  resolved "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
   integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
   dependencies:
     domelementtype "^2.3.0"
 
-dompurify@*, dompurify@^3.0.11, dompurify@^3.2.2:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.3.tgz#05dd2175225324daabfca6603055a09b2382a4cd"
-  integrity sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==
+dompurify@*, dompurify@^3.0.11, dompurify@^3.2.3:
+  version "3.2.4"
+  resolved "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz#af5a5a11407524431456cf18836c55d13441cd8e"
+  integrity sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==
   optionalDependencies:
     "@types/trusted-types" "^2.0.7"
 
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
   integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
   dependencies:
     dom-serializer "^1.0.1"
@@ -6181,9 +6296,9 @@ domutils@^2.5.2, domutils@^2.8.0:
     domhandler "^4.2.0"
 
 domutils@^3.0.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
-  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz#edbfe2b668b0c1d97c24baf0f1062b132221bc78"
+  integrity sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==
   dependencies:
     dom-serializer "^2.0.0"
     domelementtype "^2.3.0"
@@ -6191,7 +6306,7 @@ domutils@^3.0.1:
 
 dot-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
+  resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
   integrity sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==
   dependencies:
     no-case "^3.0.4"
@@ -6199,80 +6314,92 @@ dot-case@^3.0.4:
 
 dotenv@*, dotenv@^16.0.3, dotenv@^16.3.1, dotenv@^16.4.5:
   version "16.4.7"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.7.tgz#0e20c5b82950140aa99be360a8a5f52335f53c26"
+  resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz#0e20c5b82950140aa99be360a8a5f52335f53c26"
   integrity sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==
 
 dotenv@16.0.3:
   version "16.0.3"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
+  resolved "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
   integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
 
-dunder-proto@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.0.tgz#c2fce098b3c8f8899554905f4377b6d85dabaa80"
-  integrity sha512-9+Sj30DIu+4KvHqMfLUGLFYL2PkURSYMVXJyXe92nFRvlYq5hBjLEhblKB+vkd/WVlUYMWigiY07T91Fkk0+4A==
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
   dependencies:
-    call-bind-apply-helpers "^1.0.0"
+    call-bind-apply-helpers "^1.0.1"
     es-errors "^1.3.0"
     gopd "^1.2.0"
 
 eastasianwidth@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
+  resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
 ee-first@1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
+  resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-electron-to-chromium@^1.5.41:
-  version "1.5.71"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz#d8b5dba1e55b320f2f4e9b1ca80738f53fcfec2b"
-  integrity sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==
+electron-to-chromium@^1.5.73:
+  version "1.5.97"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.97.tgz#5c4a4744c79e7c85b187adf5160264ac130c776f"
+  integrity sha512-HKLtaH02augM7ZOdYRuO19rWDeY+QSJ1VxnXFa/XDFLf07HvM90pALIJFgrO+UVaajI3+aJMMpojoUTLZyQ7JQ==
+
+element-resize-detector@^1.1.9:
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz#3e6c5982dd77508b5fa7e6d5c02170e26325c9b1"
+  integrity sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==
+  dependencies:
+    batch-processor "1.0.0"
 
 emoji-picker-react@^4.5.16:
   version "4.12.0"
-  resolved "https://registry.yarnpkg.com/emoji-picker-react/-/emoji-picker-react-4.12.0.tgz#4cc310ad4b8a39844a2d5edcc92967683d6b5138"
+  resolved "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.12.0.tgz#4cc310ad4b8a39844a2d5edcc92967683d6b5138"
   integrity sha512-q2c8UcZH0eRIMj41bj0k1akTjk69tsu+E7EzkW7giN66iltF6H9LQvQvw6ugscsxdC+1lmt3WZpQkkY65J95tg==
   dependencies:
     flairup "1.0.0"
 
 emoji-regex@^10.3.0:
   version "10.4.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz#03553afea80b3975749cfcb36f776ca268e413d4"
   integrity sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
 emoji-regex@^9.2.2:
   version "9.2.2"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+enabled@2.0.x:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz#f9dd92ec2d6f4bbc0d5d1e64e21d61cd4665e7c2"
+  integrity sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==
+
 encodeurl@~1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
 encodeurl@~2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
+  resolved "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
   integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
 
 end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
+  resolved "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
   dependencies:
     once "^1.4.0"
 
 endent@^2.0.1:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/endent/-/endent-2.1.0.tgz#5aaba698fb569e5e18e69e1ff7a28ff35373cd88"
+  resolved "https://registry.npmjs.org/endent/-/endent-2.1.0.tgz#5aaba698fb569e5e18e69e1ff7a28ff35373cd88"
   integrity sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==
   dependencies:
     dedent "^0.7.0"
@@ -6280,149 +6407,156 @@ endent@^2.0.1:
     objectorarray "^1.0.5"
 
 enhanced-resolve@^5.15.0, enhanced-resolve@^5.17.1:
-  version "5.17.1"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz#67bfbbcc2f81d511be77d686a90267ef7f898a15"
-  integrity sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==
+  version "5.18.1"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz#728ab082f8b7b6836de51f1637aab5d3b9568faf"
+  integrity sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
 
 entities@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
+  resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
 entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
   version "4.5.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
 entities@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-5.0.0.tgz#b2ab51fe40d995817979ec79dd621154c3c0f62b"
+  resolved "https://registry.npmjs.org/entities/-/entities-5.0.0.tgz#b2ab51fe40d995817979ec79dd621154c3c0f62b"
   integrity sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==
 
 error-ex@^1.3.1:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.5, es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5:
-  version "1.23.5"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.5.tgz#f4599a4946d57ed467515ed10e4f157289cd52fb"
-  integrity sha512-vlmniQ0WNPwXqA0BnmwV3Ng7HxiGlh6r5U6JcTMNx8OilcAGqVJBHJcPjqOMaczU9fRuRK5Px2BdVyPRnKMMVQ==
+es-abstract@^1.17.5, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5, es-abstract@^1.23.6, es-abstract@^1.23.9:
+  version "1.23.9"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz#5b45994b7de78dada5c1bebf1379646b32b9d606"
+  integrity sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==
   dependencies:
-    array-buffer-byte-length "^1.0.1"
-    arraybuffer.prototype.slice "^1.0.3"
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
     available-typed-arrays "^1.0.7"
-    call-bind "^1.0.7"
-    data-view-buffer "^1.0.1"
-    data-view-byte-length "^1.0.1"
-    data-view-byte-offset "^1.0.0"
-    es-define-property "^1.0.0"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
     es-errors "^1.3.0"
     es-object-atoms "^1.0.0"
-    es-set-tostringtag "^2.0.3"
-    es-to-primitive "^1.2.1"
-    function.prototype.name "^1.1.6"
-    get-intrinsic "^1.2.4"
-    get-symbol-description "^1.0.2"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.0"
+    get-symbol-description "^1.1.0"
     globalthis "^1.0.4"
-    gopd "^1.0.1"
+    gopd "^1.2.0"
     has-property-descriptors "^1.0.2"
-    has-proto "^1.0.3"
-    has-symbols "^1.0.3"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
     hasown "^2.0.2"
-    internal-slot "^1.0.7"
-    is-array-buffer "^3.0.4"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
     is-callable "^1.2.7"
-    is-data-view "^1.0.1"
-    is-negative-zero "^2.0.3"
-    is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.3"
-    is-string "^1.0.7"
-    is-typed-array "^1.1.13"
-    is-weakref "^1.0.2"
+    is-data-view "^1.0.2"
+    is-regex "^1.2.1"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.0"
+    math-intrinsics "^1.1.0"
     object-inspect "^1.13.3"
     object-keys "^1.1.1"
-    object.assign "^4.1.5"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
     regexp.prototype.flags "^1.5.3"
-    safe-array-concat "^1.1.2"
-    safe-regex-test "^1.0.3"
-    string.prototype.trim "^1.2.9"
-    string.prototype.trimend "^1.0.8"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
     string.prototype.trimstart "^1.0.8"
-    typed-array-buffer "^1.0.2"
-    typed-array-byte-length "^1.0.1"
-    typed-array-byte-offset "^1.0.2"
-    typed-array-length "^1.0.6"
-    unbox-primitive "^1.0.2"
-    which-typed-array "^1.1.15"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.18"
 
 es-define-property@^1.0.0, es-define-property@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
+  resolved "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz#983eb2f9a6724e9303f61addf011c72e09e0b0fa"
   integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
 
-es-errors@^1.2.1, es-errors@^1.3.0:
+es-errors@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
+  resolved "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-es-iterator-helpers@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/es-iterator-helpers/-/es-iterator-helpers-1.2.0.tgz#2f1a3ab998b30cb2d10b195b587c6d9ebdebf152"
-  integrity sha512-tpxqxncxnpw3c93u8n3VOzACmRFoVmWJqbWXvX/JfKbkhBw1oslgPrUfeSt2psuqyEJFD6N/9lg5i7bsKpoq+Q==
+es-iterator-helpers@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz#d1dd0f58129054c0ad922e6a9a1e65eef435fe75"
+  integrity sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
     define-properties "^1.2.1"
-    es-abstract "^1.23.3"
+    es-abstract "^1.23.6"
     es-errors "^1.3.0"
     es-set-tostringtag "^2.0.3"
     function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
+    get-intrinsic "^1.2.6"
     globalthis "^1.0.4"
-    gopd "^1.0.1"
+    gopd "^1.2.0"
     has-property-descriptors "^1.0.2"
-    has-proto "^1.0.3"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.7"
-    iterator.prototype "^1.1.3"
-    safe-array-concat "^1.1.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    iterator.prototype "^1.1.4"
+    safe-array-concat "^1.1.3"
 
 es-module-lexer@^1.2.1, es-module-lexer@^1.5.0:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz#a8efec3a3da991e60efa6b633a7cad6ab8d26b78"
-  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz#da49f587fd9e68ee2404fe4e256c0c7d3a81be21"
+  integrity sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==
 
 es-object-atoms@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
-  integrity sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz#1c4f2c4837327597ce69d2ca190a7fdd172338c1"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
   dependencies:
     es-errors "^1.3.0"
 
-es-set-tostringtag@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz#8bb60f0a440c2e4281962428438d58545af39777"
-  integrity sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==
+es-set-tostringtag@^2.0.3, es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz#f31dbbe0c183b00a6d26eb6325c810c0fd18bd4d"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
   dependencies:
-    get-intrinsic "^1.2.4"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
     has-tostringtag "^1.0.2"
-    hasown "^2.0.1"
+    hasown "^2.0.2"
 
-es-shim-unscopables@^1.0.0, es-shim-unscopables@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz#1f6942e71ecc7835ed1c8a83006d8771a63a3763"
-  integrity sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==
+es-shim-unscopables@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz#438df35520dac5d105f3943d927549ea3b00f4b5"
+  integrity sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==
   dependencies:
-    hasown "^2.0.0"
+    hasown "^2.0.2"
 
-es-to-primitive@^1.2.1:
+es-to-primitive@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
+  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz#96c89c82cc49fd8794a24835ba3e1ff87f214e18"
   integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
   dependencies:
     is-callable "^1.2.7"
@@ -6431,91 +6565,63 @@ es-to-primitive@^1.2.1:
 
 esbuild-register@^3.5.0:
   version "3.6.0"
-  resolved "https://registry.yarnpkg.com/esbuild-register/-/esbuild-register-3.6.0.tgz#cf270cfa677baebbc0010ac024b823cbf723a36d"
+  resolved "https://registry.npmjs.org/esbuild-register/-/esbuild-register-3.6.0.tgz#cf270cfa677baebbc0010ac024b823cbf723a36d"
   integrity sha512-H2/S7Pm8a9CL1uhp9OvjwrBh5Pvx0H8qVOxNu8Wed9Y7qv56MPtq+GGM8RJpq6glYJn9Wspr8uw7l55uyinNeg==
   dependencies:
     debug "^4.3.4"
 
-"esbuild@^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0":
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.24.0.tgz#f2d470596885fcb2e91c21eb3da3b3c89c0b55e7"
-  integrity sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==
+esbuild@0.25.0, "esbuild@^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0", esbuild@^0.19.2:
+  version "0.25.0"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.25.0.tgz#0de1787a77206c5a79eeb634a623d39b5006ce92"
+  integrity sha512-BXq5mqc8ltbaN34cDqWuYKyNhX8D/Z0J1xdtdQ8UcIIIyJyz+ZMKUt58tF3SrZ85jcfN/PZYhjR5uDQAYNVbuw==
   optionalDependencies:
-    "@esbuild/aix-ppc64" "0.24.0"
-    "@esbuild/android-arm" "0.24.0"
-    "@esbuild/android-arm64" "0.24.0"
-    "@esbuild/android-x64" "0.24.0"
-    "@esbuild/darwin-arm64" "0.24.0"
-    "@esbuild/darwin-x64" "0.24.0"
-    "@esbuild/freebsd-arm64" "0.24.0"
-    "@esbuild/freebsd-x64" "0.24.0"
-    "@esbuild/linux-arm" "0.24.0"
-    "@esbuild/linux-arm64" "0.24.0"
-    "@esbuild/linux-ia32" "0.24.0"
-    "@esbuild/linux-loong64" "0.24.0"
-    "@esbuild/linux-mips64el" "0.24.0"
-    "@esbuild/linux-ppc64" "0.24.0"
-    "@esbuild/linux-riscv64" "0.24.0"
-    "@esbuild/linux-s390x" "0.24.0"
-    "@esbuild/linux-x64" "0.24.0"
-    "@esbuild/netbsd-x64" "0.24.0"
-    "@esbuild/openbsd-arm64" "0.24.0"
-    "@esbuild/openbsd-x64" "0.24.0"
-    "@esbuild/sunos-x64" "0.24.0"
-    "@esbuild/win32-arm64" "0.24.0"
-    "@esbuild/win32-ia32" "0.24.0"
-    "@esbuild/win32-x64" "0.24.0"
-
-esbuild@^0.19.2:
-  version "0.19.12"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04"
-  integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
-  optionalDependencies:
-    "@esbuild/aix-ppc64" "0.19.12"
-    "@esbuild/android-arm" "0.19.12"
-    "@esbuild/android-arm64" "0.19.12"
-    "@esbuild/android-x64" "0.19.12"
-    "@esbuild/darwin-arm64" "0.19.12"
-    "@esbuild/darwin-x64" "0.19.12"
-    "@esbuild/freebsd-arm64" "0.19.12"
-    "@esbuild/freebsd-x64" "0.19.12"
-    "@esbuild/linux-arm" "0.19.12"
-    "@esbuild/linux-arm64" "0.19.12"
-    "@esbuild/linux-ia32" "0.19.12"
-    "@esbuild/linux-loong64" "0.19.12"
-    "@esbuild/linux-mips64el" "0.19.12"
-    "@esbuild/linux-ppc64" "0.19.12"
-    "@esbuild/linux-riscv64" "0.19.12"
-    "@esbuild/linux-s390x" "0.19.12"
-    "@esbuild/linux-x64" "0.19.12"
-    "@esbuild/netbsd-x64" "0.19.12"
-    "@esbuild/openbsd-x64" "0.19.12"
-    "@esbuild/sunos-x64" "0.19.12"
-    "@esbuild/win32-arm64" "0.19.12"
-    "@esbuild/win32-ia32" "0.19.12"
-    "@esbuild/win32-x64" "0.19.12"
+    "@esbuild/aix-ppc64" "0.25.0"
+    "@esbuild/android-arm" "0.25.0"
+    "@esbuild/android-arm64" "0.25.0"
+    "@esbuild/android-x64" "0.25.0"
+    "@esbuild/darwin-arm64" "0.25.0"
+    "@esbuild/darwin-x64" "0.25.0"
+    "@esbuild/freebsd-arm64" "0.25.0"
+    "@esbuild/freebsd-x64" "0.25.0"
+    "@esbuild/linux-arm" "0.25.0"
+    "@esbuild/linux-arm64" "0.25.0"
+    "@esbuild/linux-ia32" "0.25.0"
+    "@esbuild/linux-loong64" "0.25.0"
+    "@esbuild/linux-mips64el" "0.25.0"
+    "@esbuild/linux-ppc64" "0.25.0"
+    "@esbuild/linux-riscv64" "0.25.0"
+    "@esbuild/linux-s390x" "0.25.0"
+    "@esbuild/linux-x64" "0.25.0"
+    "@esbuild/netbsd-arm64" "0.25.0"
+    "@esbuild/netbsd-x64" "0.25.0"
+    "@esbuild/openbsd-arm64" "0.25.0"
+    "@esbuild/openbsd-x64" "0.25.0"
+    "@esbuild/sunos-x64" "0.25.0"
+    "@esbuild/win32-arm64" "0.25.0"
+    "@esbuild/win32-ia32" "0.25.0"
+    "@esbuild/win32-x64" "0.25.0"
 
 escalade@^3.1.1, escalade@^3.2.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz#011a3f69856ba189dffa7dc8fcce99d2a87903e5"
   integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
 
 escape-html@~1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
 eslint-config-next@^14.1.0:
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.2.20.tgz#0a1714b8d236e8892504a42f8fce88ffcf97e788"
-  integrity sha512-gHBvp4RDd51DAaDco7KiWFy731EwcItkDtGUaZH1EUXEnHCzsVRjMceT+b8aThjMLjOScz6Q27MGlePASvK4Aw==
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-14.2.24.tgz#da232b0c7f768c0d5c11e1cab9df20351cf3f602"
+  integrity sha512-9r1ujK++Pgpfixr5+DQ6rXDIQmSzuDbBlAQYMkJRMz9KWqovX7ESUTC0EAyBfOCl3ubkoeplw+aoXDuih3A8fw==
   dependencies:
-    "@next/eslint-plugin-next" "14.2.20"
+    "@next/eslint-plugin-next" "14.2.24"
     "@rushstack/eslint-patch" "^1.3.3"
     "@typescript-eslint/eslint-plugin" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
     "@typescript-eslint/parser" "^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -6528,19 +6634,19 @@ eslint-config-next@^14.1.0:
 
 eslint-config-prettier@^9.1.0:
   version "9.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
   integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
 
 eslint-config-turbo@^1.12.4:
   version "1.13.4"
-  resolved "https://registry.yarnpkg.com/eslint-config-turbo/-/eslint-config-turbo-1.13.4.tgz#9c06f10c4e5d971d317baee8695fbdda24b92804"
+  resolved "https://registry.npmjs.org/eslint-config-turbo/-/eslint-config-turbo-1.13.4.tgz#9c06f10c4e5d971d317baee8695fbdda24b92804"
   integrity sha512-+we4eWdZlmlEn7LnhXHCIPX/wtujbHCS7XjQM/TN09BHNEl2fZ8id4rHfdfUKIYTSKyy8U/nNyJ0DNoZj5Q8bw==
   dependencies:
     eslint-plugin-turbo "1.13.4"
 
 eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
   integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
   dependencies:
     debug "^3.2.7"
@@ -6549,7 +6655,7 @@ eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
 
 eslint-import-resolver-typescript@^3.5.2:
   version "3.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.7.0.tgz#e69925936a771a9cb2de418ccebc4cdf6c0818aa"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.7.0.tgz#e69925936a771a9cb2de418ccebc4cdf6c0818aa"
   integrity sha512-Vrwyi8HHxY97K5ebydMtffsWAn1SCR9eol49eCd5fJS4O1WV7PaAjbcjmbfJJSMz/t4Mal212Uz/fQZrOB8mow==
   dependencies:
     "@nolyfill/is-core-module" "1.0.39"
@@ -6563,14 +6669,14 @@ eslint-import-resolver-typescript@^3.5.2:
 
 eslint-module-utils@^2.12.0:
   version "2.12.0"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
+  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz#fe4cfb948d61f49203d7b08871982b65b9af0b0b"
   integrity sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==
   dependencies:
     debug "^3.2.7"
 
 eslint-plugin-import@^2.28.1, eslint-plugin-import@^2.29.1:
   version "2.31.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
+  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz#310ce7e720ca1d9c0bb3f69adfd1c6bdd7d9e0e7"
   integrity sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==
   dependencies:
     "@rtsao/scc" "^1.1.0"
@@ -6595,7 +6701,7 @@ eslint-plugin-import@^2.28.1, eslint-plugin-import@^2.29.1:
 
 eslint-plugin-jsx-a11y@^6.7.1:
   version "6.10.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
+  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz#d2812bb23bf1ab4665f1718ea442e8372e638483"
   integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
   dependencies:
     aria-query "^5.3.2"
@@ -6616,43 +6722,43 @@ eslint-plugin-jsx-a11y@^6.7.1:
 
 "eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
   version "5.0.0-canary-7118f5dd7-20230705"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz#4d55c50e186f1a2b0636433d2b0b2f592ddbccfd"
+  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz#4d55c50e186f1a2b0636433d2b0b2f592ddbccfd"
   integrity sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==
 
 eslint-plugin-react@^7.33.2:
-  version "7.37.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz#cd0935987876ba2900df2f58339f6d92305acc7a"
-  integrity sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==
+  version "7.37.4"
+  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz#1b6c80b6175b6ae4b26055ae4d55d04c414c7181"
+  integrity sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==
   dependencies:
     array-includes "^3.1.8"
     array.prototype.findlast "^1.2.5"
-    array.prototype.flatmap "^1.3.2"
+    array.prototype.flatmap "^1.3.3"
     array.prototype.tosorted "^1.1.4"
     doctrine "^2.1.0"
-    es-iterator-helpers "^1.1.0"
+    es-iterator-helpers "^1.2.1"
     estraverse "^5.3.0"
     hasown "^2.0.2"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
     minimatch "^3.1.2"
     object.entries "^1.1.8"
     object.fromentries "^2.0.8"
-    object.values "^1.2.0"
+    object.values "^1.2.1"
     prop-types "^15.8.1"
     resolve "^2.0.0-next.5"
     semver "^6.3.1"
-    string.prototype.matchall "^4.0.11"
+    string.prototype.matchall "^4.0.12"
     string.prototype.repeat "^1.0.0"
 
 eslint-plugin-turbo@1.13.4:
   version "1.13.4"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-1.13.4.tgz#d237d51a33ccdf54d3be8e300f8052342a16e85c"
+  resolved "https://registry.npmjs.org/eslint-plugin-turbo/-/eslint-plugin-turbo-1.13.4.tgz#d237d51a33ccdf54d3be8e300f8052342a16e85c"
   integrity sha512-82GfMzrewI/DJB92Bbch239GWbGx4j1zvjk1lqb06lxIlMPnVwUHVwPbAnLfyLG3JuhLv9whxGkO/q1CL18JTg==
   dependencies:
     dotenv "16.0.3"
 
 eslint-scope@5.1.1, eslint-scope@^5.1.1:
   version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
   dependencies:
     esrecurse "^4.3.0"
@@ -6660,7 +6766,7 @@ eslint-scope@5.1.1, eslint-scope@^5.1.1:
 
 eslint-scope@^7.2.2:
   version "7.2.2"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
   integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
     esrecurse "^4.3.0"
@@ -6668,17 +6774,17 @@ eslint-scope@^7.2.2:
 
 eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
 eslint-visitor-keys@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz#687bacb2af884fcdda8a6e7d65c606f46a14cd45"
   integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==
 
 eslint@8.57.1:
   version "8.57.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz#7df109654aba7e3bbe5c8eae533c5e461d3c6ca9"
   integrity sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
@@ -6722,7 +6828,7 @@ eslint@8.57.1:
 
 espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  resolved "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
   integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
     acorn "^8.9.0"
@@ -6731,73 +6837,78 @@ espree@^9.6.0, espree@^9.6.1:
 
 esprima@~4.0.0:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
+  resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
 esquery@^1.4.2:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
   integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
   dependencies:
     estraverse "^5.1.0"
 
 esrecurse@^4.3.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
   integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
   dependencies:
     estraverse "^5.2.0"
 
 estraverse@^4.1.1:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
 estree-walker@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
 estree-walker@^3.0.3:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz#67c3e549ec402a487b4fc193d1953a524752340d"
   integrity sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==
   dependencies:
     "@types/estree" "^1.0.0"
 
 esutils@^2.0.2:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
 etag@~1.8.1:
   version "1.8.1"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
+  resolved "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
+ev-emitter@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a"
+  integrity sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q==
+
 event-target-shim@^5.0.0:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
+  resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
 eventemitter3@^4.0.1:
   version "4.0.7"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
+  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
 events@^3.2.0, events@^3.3.0:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
+  resolved "https://registry.npmjs.org/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
 execa@^5.0.0:
   version "5.1.1"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
+  resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
   integrity sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==
   dependencies:
     cross-spawn "^7.0.3"
@@ -6812,19 +6923,19 @@ execa@^5.0.0:
 
 expand-template@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
+  resolved "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
   integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
 
 express-ws@^5.0.2:
   version "5.0.2"
-  resolved "https://registry.yarnpkg.com/express-ws/-/express-ws-5.0.2.tgz#5b02d41b937d05199c6c266d7cc931c823bda8eb"
+  resolved "https://registry.npmjs.org/express-ws/-/express-ws-5.0.2.tgz#5b02d41b937d05199c6c266d7cc931c823bda8eb"
   integrity sha512-0uvmuk61O9HXgLhGl3QhNSEtRsQevtmbL94/eILaliEADZBHZOQUAiHFrGPrgsjikohyrmSG5g+sCfASTt0lkQ==
   dependencies:
     ws "^7.4.6"
 
 express@^4.21.2:
   version "4.21.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  resolved "https://registry.npmjs.org/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
   integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
   dependencies:
     accepts "~1.3.8"
@@ -6861,123 +6972,135 @@ express@^4.21.2:
 
 extend@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 fast-copy@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/fast-copy/-/fast-copy-3.0.2.tgz#59c68f59ccbcac82050ba992e0d5c389097c9d35"
+  resolved "https://registry.npmjs.org/fast-copy/-/fast-copy-3.0.2.tgz#59c68f59ccbcac82050ba992e0d5c389097c9d35"
   integrity sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ==
 
 fast-deep-equal@^3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-equals@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.0.1.tgz#a4eefe3c5d1c0d021aeed0bc10ba5e0c12ee405d"
-  integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==
+  version "5.2.2"
+  resolved "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz#885d7bfb079fac0ce0e8450374bce29e9b742484"
+  integrity sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==
 
 fast-fifo@^1.2.0, fast-fifo@^1.3.2:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
+  resolved "https://registry.npmjs.org/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.2.12, fast-glob@^3.2.9, fast-glob@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
-  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+fast-glob@^3.2.9, fast-glob@^3.3.2, fast-glob@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz#d06d585ce8dba90a16b0505c543c3ccfb3aeb818"
+  integrity sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
     glob-parent "^5.1.2"
     merge2 "^1.3.0"
-    micromatch "^4.0.4"
+    micromatch "^4.0.8"
 
 fast-json-parse@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
+  resolved "https://registry.npmjs.org/fast-json-parse/-/fast-json-parse-1.0.3.tgz#43e5c61ee4efa9265633046b770fb682a7577c4d"
   integrity sha512-FRWsaZRWEJ1ESVNbDWmsAlqDk96gPQezzLghafp5J4GUKjbCz3OkAHuZs5TuPEtkbVQERysLp9xv6c24fBm8Aw==
 
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-levenshtein@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fast-redact@^3.1.1:
   version "3.5.0"
-  resolved "https://registry.yarnpkg.com/fast-redact/-/fast-redact-3.5.0.tgz#e9ea02f7e57d0cd8438180083e93077e496285e4"
+  resolved "https://registry.npmjs.org/fast-redact/-/fast-redact-3.5.0.tgz#e9ea02f7e57d0cd8438180083e93077e496285e4"
   integrity sha512-dwsoQlS7h9hMeYUq1W++23NDcBLV4KqONnITDV9DjfS3q1SgDGVrBdvvTLUotWtPSD7asWDV9/CmsZPy8Hf70A==
 
 fast-safe-stringify@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
+  resolved "https://registry.npmjs.org/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
   integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
 
 fast-uri@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.3.tgz#892a1c91802d5d7860de728f18608a0573142241"
-  integrity sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz#88f130b77cfaea2378d56bf970dea21257a68748"
+  integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==
 
 fastq@^1.6.0:
-  version "1.17.1"
-  resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
-  integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
+  version "1.19.0"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz#a82c6b7c2bb4e44766d865f07997785fecfdcb89"
+  integrity sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==
   dependencies:
     reusify "^1.0.4"
 
 fault@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
+  resolved "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
   integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==
   dependencies:
     format "^0.2.0"
 
 fdir@^6.2.0:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.2.tgz#ddaa7ce1831b161bc3657bb99cb36e1622702689"
-  integrity sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==
+  version "6.4.3"
+  resolved "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz#011cdacf837eca9b811c89dbb902df714273db72"
+  integrity sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==
+
+fecha@^4.2.0:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/fecha/-/fecha-4.2.3.tgz#4d9ccdbc61e8629b259fdca67e65891448d569fd"
+  integrity sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==
 
 fflate@^0.4.8:
   version "0.4.8"
-  resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
+  resolved "https://registry.npmjs.org/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
   integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
 
 file-entry-cache@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
   integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
   dependencies:
     flat-cache "^3.0.4"
 
 file-selector@^2.1.0:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-2.1.2.tgz#fe7c7ee9e550952dfbc863d73b14dc740d7de8b4"
+  resolved "https://registry.npmjs.org/file-selector/-/file-selector-2.1.2.tgz#fe7c7ee9e550952dfbc863d73b14dc740d7de8b4"
   integrity sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==
   dependencies:
     tslib "^2.7.0"
 
+file-stream-rotator@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/file-stream-rotator/-/file-stream-rotator-0.6.1.tgz#007019e735b262bb6c6f0197e58e5c87cb96cec3"
+  integrity sha512-u+dBid4PvZw17PmDeRcNOtCP9CCK/9lRN2w+r1xIS7yOL9JFrIBKTvrYsxT4P0pGtThYTn++QS5ChHaUov3+zQ==
+  dependencies:
+    moment "^2.29.1"
+
 filesize@^10.0.12:
   version "10.1.6"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-10.1.6.tgz#31194da825ac58689c0bce3948f33ce83aabd361"
+  resolved "https://registry.npmjs.org/filesize/-/filesize-10.1.6.tgz#31194da825ac58689c0bce3948f33ce83aabd361"
   integrity sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==
 
 fill-range@^7.1.1:
   version "7.1.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
   integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
   dependencies:
     to-regex-range "^5.0.1"
 
 finalhandler@1.3.1:
   version "1.3.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
   integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
   dependencies:
     debug "2.6.9"
@@ -6990,14 +7113,14 @@ finalhandler@1.3.1:
 
 find-babel-config@^2.1.1:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-2.1.2.tgz#2841b1bfbbbcdb971e1e39df8cbc43dafa901716"
+  resolved "https://registry.npmjs.org/find-babel-config/-/find-babel-config-2.1.2.tgz#2841b1bfbbbcdb971e1e39df8cbc43dafa901716"
   integrity sha512-ZfZp1rQyp4gyuxqt1ZqjFGVeVBvmpURMqdIWXbPRfB97Bf6BzdK/xSIbylEINzQ0kB5tlDQfn9HkNXXWsqTqLg==
   dependencies:
     json5 "^2.2.3"
 
 find-cache-dir@^3.3.1:
   version "3.3.2"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
   integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
   dependencies:
     commondir "^1.0.1"
@@ -7006,19 +7129,19 @@ find-cache-dir@^3.3.1:
 
 find-root@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
 find-up@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
   integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
   dependencies:
     locate-path "^3.0.0"
 
 find-up@^4.0.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
   dependencies:
     locate-path "^5.0.0"
@@ -7026,20 +7149,27 @@ find-up@^4.0.0:
 
 find-up@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
   integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
   dependencies:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+fizzy-ui-utils@^2.0.0:
+  version "2.0.7"
+  resolved "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz#7df45dcc4eb374a08b65d39bb9a4beedf7330505"
+  integrity sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==
+  dependencies:
+    desandro-matches-selector "^2.0.0"
+
 flairup@1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/flairup/-/flairup-1.0.0.tgz#d3af0052ad02734c12d2446608a869498adb351b"
+  resolved "https://registry.npmjs.org/flairup/-/flairup-1.0.0.tgz#d3af0052ad02734c12d2446608a869498adb351b"
   integrity sha512-IKlE+pNvL2R+kVL1kEhUYqRxVqeFnjiIvHWDMLFXNaqyUdFXQM2wte44EfMYJNHkW16X991t2Zg8apKkhv7OBA==
 
 flat-cache@^3.0.4:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
   integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
   dependencies:
     flatted "^3.2.9"
@@ -7048,22 +7178,27 @@ flat-cache@^3.0.4:
 
 flatted@^3.2.9:
   version "3.3.2"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27"
   integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==
 
+fn.name@1.x.x:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/fn.name/-/fn.name-1.1.0.tgz#26cad8017967aea8731bc42961d04a3d5988accc"
+  integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==
+
 follow-redirects@^1.15.6:
   version "1.15.9"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz#a604fa10e443bf98ca94228d9eebcc2e8a2c8ee1"
   integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
 
 fontfaceobserver@2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
+  resolved "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.1.0.tgz#e2705d293e2c585a6531c2a722905657317a2991"
   integrity sha512-ReOsO2F66jUa0jmv2nlM/s1MiutJx/srhAe2+TE8dJCMi02ZZOcCTxTCQFr3Yet+uODUtnr4Mewg+tNQ+4V1Ng==
 
 fontkit@^2.0.2:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/fontkit/-/fontkit-2.0.4.tgz#4765d664c68b49b5d6feb6bd1051ee49d8ec5ab0"
+  resolved "https://registry.npmjs.org/fontkit/-/fontkit-2.0.4.tgz#4765d664c68b49b5d6feb6bd1051ee49d8ec5ab0"
   integrity sha512-syetQadaUEDNdxdugga9CpEYVaQIxOwk7GlwZWWZ19//qW4zE5bknOKeMBDYAASwnpaSHKJITRLMF9m1fp3s6g==
   dependencies:
     "@swc/helpers" "^0.5.12"
@@ -7077,15 +7212,15 @@ fontkit@^2.0.2:
     unicode-trie "^2.0.0"
 
 for-each@^0.3.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e"
-  integrity sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==
+  version "0.3.5"
+  resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz#d650688027826920feeb0af747ee7b9421a41d47"
+  integrity sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==
   dependencies:
-    is-callable "^1.1.3"
+    is-callable "^1.2.7"
 
 foreground-child@^3.1.0:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
+  resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz#0ac8644c06e431439f8561db8ecf29a7b5519c77"
   integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
   dependencies:
     cross-spawn "^7.0.0"
@@ -7093,7 +7228,7 @@ foreground-child@^3.1.0:
 
 fork-ts-checker-webpack-plugin@^8.0.0:
   version "8.0.0"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-8.0.0.tgz#dae45dfe7298aa5d553e2580096ced79b6179504"
+  resolved "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-8.0.0.tgz#dae45dfe7298aa5d553e2580096ced79b6179504"
   integrity sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==
   dependencies:
     "@babel/code-frame" "^7.16.7"
@@ -7109,9 +7244,9 @@ fork-ts-checker-webpack-plugin@^8.0.0:
     semver "^7.3.5"
     tapable "^2.2.1"
 
-form-data@^4.0.0:
+form-data@^4.0.0, form-data@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz#ba1076daaaa5bfd7e99c1a6cb02aa0a5cff90d48"
   integrity sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==
   dependencies:
     asynckit "^0.4.0"
@@ -7120,37 +7255,37 @@ form-data@^4.0.0:
 
 format@^0.2.0:
   version "0.2.2"
-  resolved "https://registry.yarnpkg.com/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
+  resolved "https://registry.npmjs.org/format/-/format-0.2.2.tgz#d6170107e9efdc4ed30c9dc39016df942b5cb58b"
   integrity sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==
 
+forwarded-parse@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/forwarded-parse/-/forwarded-parse-2.1.2.tgz#08511eddaaa2ddfd56ba11138eee7df117a09325"
+  integrity sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==
+
 forwarded@0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
+  resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
 fraction.js@^4.2.0, fraction.js@^4.3.7:
   version "4.3.7"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-framework-utils@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/framework-utils/-/framework-utils-1.1.0.tgz#a3b528bce838dfd623148847dc92371b09d0da2d"
-  integrity sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==
-
 fresh@0.5.2:
   version "0.5.2"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
+  resolved "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
 
 fs-constants@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
+  resolved "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
 fs-extra@^10.0.0:
   version "10.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
   integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
   dependencies:
     graceful-fs "^4.2.0"
@@ -7158,9 +7293,9 @@ fs-extra@^10.0.0:
     universalify "^2.0.0"
 
 fs-extra@^11.0.0:
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
-  integrity sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==
+  version "11.3.0"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz#0daced136bbaf65a555a326719af931adc7a314d"
+  integrity sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==
   dependencies:
     graceful-fs "^4.2.0"
     jsonfile "^6.0.1"
@@ -7168,134 +7303,143 @@ fs-extra@^11.0.0:
 
 fs-monkey@^1.0.4:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.6.tgz#8ead082953e88d992cf3ff844faa907b26756da2"
+  resolved "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.6.tgz#8ead082953e88d992cf3ff844faa907b26756da2"
   integrity sha512-b1FMfwetIKymC0eioW7mTywihSQE4oLzQn1dB6rZB5fx/3NpNEdAWeCSMB+60/AeT0TCXsxzAlcYVEFCTAksWg==
 
 fs-readdir-recursive@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
+  resolved "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz#e32fc030a2ccee44a6b5371308da54be0b397d27"
   integrity sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==
 
 fs.realpath@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@~2.3.2:
   version "2.3.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 function-bind@^1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.6.tgz#cdf315b7d90ee77a4c6ee216c3c3362da07533fd"
-  integrity sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==
+function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
   dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.2.0"
-    es-abstract "^1.22.1"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
     functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
 
 functions-have-names@^1.2.3:
   version "1.2.3"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
+  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-gesto@^1.19.0, gesto@^1.19.4:
-  version "1.19.4"
-  resolved "https://registry.yarnpkg.com/gesto/-/gesto-1.19.4.tgz#14921ca89e4e70c14307c4d942df04f59eb00749"
-  integrity sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==
-  dependencies:
-    "@daybrush/utils" "^1.13.0"
-    "@scena/event-emitter" "^1.0.2"
-
 get-caller-file@^2.0.5:
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
+  resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.5.tgz#dfe7dd1b30761b464fe51bf4bb00ac7c37b681e7"
-  integrity sha512-Y4+pKa7XeRUPWFNvOOYHkRYrfzW07oraURSvjDmRVOJ748OrVmeXtpE4+GCEHncjCjkTxPNRt8kEbxDhsn6VTg==
+get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz#dcfcb33d3272e15f445d15124bc0a216189b9044"
+  integrity sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==
   dependencies:
-    call-bind-apply-helpers "^1.0.0"
-    dunder-proto "^1.0.0"
+    call-bind-apply-helpers "^1.0.1"
     es-define-property "^1.0.1"
     es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
     function-bind "^1.1.2"
+    get-proto "^1.0.0"
     gopd "^1.2.0"
     has-symbols "^1.1.0"
     hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
 
 get-nonce@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  resolved "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
   integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
 
+get-proto@^1.0.0, get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz#150b3f2743869ef3e851ec0c49d15b1d14d00ee1"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+get-size@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz#54a1d0256b20ea7ac646516756202769941ad2ef"
+  integrity sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q==
+
 get-stdin@^9.0.0:
   version "9.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-9.0.0.tgz#3983ff82e03d56f1b2ea0d3e60325f39d703a575"
+  resolved "https://registry.npmjs.org/get-stdin/-/get-stdin-9.0.0.tgz#3983ff82e03d56f1b2ea0d3e60325f39d703a575"
   integrity sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==
 
 get-stream@^6.0.0:
   version "6.0.1"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
+  resolved "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz#a262d8eef67aced57c2852ad6167526a43cbf7b7"
   integrity sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==
 
-get-symbol-description@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.2.tgz#533744d5aa20aca4e079c8e5daf7fd44202821f5"
-  integrity sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz#7bdd54e0befe8ffc9f3b4e203220d9f1e881b6ee"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
   dependencies:
-    call-bind "^1.0.5"
+    call-bound "^1.0.3"
     es-errors "^1.3.0"
-    get-intrinsic "^1.2.4"
+    get-intrinsic "^1.2.6"
 
 get-tsconfig@^4.7.5:
-  version "4.8.1"
-  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.8.1.tgz#8995eb391ae6e1638d251118c7b56de7eb425471"
-  integrity sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==
+  version "4.10.0"
+  resolved "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.10.0.tgz#403a682b373a823612475a4c2928c7326fc0f6bb"
+  integrity sha512-kGzZ3LWWQcGIAmg6iWvXn0ei6WDtV26wzHRMwDSzmAbcXrTEXxHy6IehI6/4eT6VRKyMP1eF1VqwrVUmE/LR7A==
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
 github-from-package@0.0.0:
   version "0.0.0"
-  resolved "https://registry.yarnpkg.com/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
+  resolved "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz#97fb5d96bfde8973313f20e8288ef9a167fa64ce"
   integrity sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==
 
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
 glob-parent@^6.0.2:
   version "6.0.2"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
   dependencies:
     is-glob "^4.0.3"
 
 glob-to-regexp@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
+  resolved "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
 glob@10.3.10:
   version "10.3.10"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
+  resolved "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz#0351ebb809fd187fe421ab96af83d3a70715df4b"
   integrity sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==
   dependencies:
     foreground-child "^3.1.0"
@@ -7306,7 +7450,7 @@ glob@10.3.10:
 
 glob@^10.3.10:
   version "10.4.5"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
+  resolved "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
   integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
   dependencies:
     foreground-child "^3.1.0"
@@ -7318,7 +7462,7 @@ glob@^10.3.10:
 
 glob@^7.1.3, glob@^7.2.0:
   version "7.2.3"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
     fs.realpath "^1.0.0"
@@ -7330,7 +7474,7 @@ glob@^7.1.3, glob@^7.2.0:
 
 glob@^9.3.2, glob@^9.3.3:
   version "9.3.5"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-9.3.5.tgz#ca2ed8ca452781a3009685607fdf025a899dfe21"
+  resolved "https://registry.npmjs.org/glob/-/glob-9.3.5.tgz#ca2ed8ca452781a3009685607fdf025a899dfe21"
   integrity sha512-e1LleDykUz2Iu+MTYdkSsuWX8lvAjAcs0Xef0lNIu0S2wOAzuTxCJtcd9S3cijlwYF18EsU3rzb8jPVobxDh9Q==
   dependencies:
     fs.realpath "^1.0.0"
@@ -7340,19 +7484,19 @@ glob@^9.3.2, glob@^9.3.3:
 
 globals@^11.1.0:
   version "11.12.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
 globals@^13.19.0:
   version "13.24.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"
 
 globalthis@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
+  resolved "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz#7430ed3a975d97bfb59bcce41f5cabbafa651236"
   integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
   dependencies:
     define-properties "^1.2.1"
@@ -7360,7 +7504,7 @@ globalthis@^1.0.4:
 
 globby@^11.0.3, globby@^11.1.0:
   version "11.1.0"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
   dependencies:
     array-union "^2.1.0"
@@ -7371,98 +7515,98 @@ globby@^11.0.3, globby@^11.1.0:
     slash "^3.0.0"
 
 globby@^14.0.0:
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-14.0.2.tgz#06554a54ccfe9264e5a9ff8eded46aa1e306482f"
-  integrity sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==
+  version "14.1.0"
+  resolved "https://registry.npmjs.org/globby/-/globby-14.1.0.tgz#138b78e77cf5a8d794e327b15dce80bf1fb0a73e"
+  integrity sha512-0Ia46fDOaT7k4og1PDW4YbodWWr3scS2vAr2lTbsplOt2WkKp0vQbkI9wKis/T5LV/dqPjO3bpS/z6GTJB82LA==
   dependencies:
     "@sindresorhus/merge-streams" "^2.1.0"
-    fast-glob "^3.3.2"
-    ignore "^5.2.4"
-    path-type "^5.0.0"
+    fast-glob "^3.3.3"
+    ignore "^7.0.3"
+    path-type "^6.0.0"
     slash "^5.1.0"
-    unicorn-magic "^0.1.0"
+    unicorn-magic "^0.3.0"
 
-gopd@^1.0.1, gopd@^1.1.0, gopd@^1.2.0:
+gopd@^1.0.1, gopd@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
+  resolved "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
   integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
 
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11, graceful-fs@^4.2.4:
   version "4.2.11"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
 graphemer@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
 gud@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  resolved "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
   integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
 
 has-bigints@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
-  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz#28607e965ac967e03cd2a2c70a2636a1edad49fe"
+  integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
 
 has-flag@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
   integrity sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==
 
 has-flag@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
 has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
+  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
   integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
   dependencies:
     es-define-property "^1.0.0"
 
-has-proto@^1.0.3:
+has-proto@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
+  resolved "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz#5de5a6eabd95fdffd9818b43055e8065e39fe9d5"
   integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
   dependencies:
     dunder-proto "^1.0.0"
 
 has-symbols@^1.0.3, has-symbols@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
   integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
 
-has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
+has-tostringtag@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
+  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
   integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
   dependencies:
     has-symbols "^1.0.3"
 
-hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
+hasown@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
+  resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
   integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
   dependencies:
     function-bind "^1.1.2"
 
 hast-util-whitespace@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
+  resolved "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz#0ec64e257e6fc216c7d14c8a1b74d27d650b4557"
   integrity sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==
 
 he@1.2.0, he@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
 header-case@^2.0.4:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
+  resolved "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
   integrity sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==
   dependencies:
     capital-case "^1.0.4"
@@ -7470,58 +7614,58 @@ header-case@^2.0.4:
 
 helmet@^7.1.0:
   version "7.2.0"
-  resolved "https://registry.yarnpkg.com/helmet/-/helmet-7.2.0.tgz#8b2dcc425b4a46c88f6953481b40453cbe66b167"
+  resolved "https://registry.npmjs.org/helmet/-/helmet-7.2.0.tgz#8b2dcc425b4a46c88f6953481b40453cbe66b167"
   integrity sha512-ZRiwvN089JfMXokizgqEPXsl2Guk094yExfoDXR0cBYWxtBbaSww/w+vT4WEJsBW2iTUi1GgZ6swmoug3Oy4Xw==
 
 help-me@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/help-me/-/help-me-5.0.0.tgz#b1ebe63b967b74060027c2ac61f9be12d354a6f6"
+  resolved "https://registry.npmjs.org/help-me/-/help-me-5.0.0.tgz#b1ebe63b967b74060027c2ac61f9be12d354a6f6"
   integrity sha512-7xgomUX6ADmcYzFik0HzAxh/73YlKR9bmFzf51CZwR+b6YtzU2m0u49hQCqV6SvlqIqsaxovfwdvbnsw3b/zpg==
 
-highlight.js@^11.8.0, highlight.js@~11.10.0:
-  version "11.10.0"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.10.0.tgz#6e3600dc4b33d6dc23d5bd94fbf72405f5892b92"
-  integrity sha512-SYVnVFswQER+zu1laSya563s+F8VDGt7o35d4utbamowvUNLLMovFqwCLSocpZTz3MgaSRA1IbqRWZv97dtErQ==
+highlight.js@^11.8.0, highlight.js@~11.11.0:
+  version "11.11.1"
+  resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz#fca06fa0e5aeecf6c4d437239135fabc15213585"
+  integrity sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==
 
 highlight.js@~11.8.0:
   version "11.8.0"
-  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
+  resolved "https://registry.npmjs.org/highlight.js/-/highlight.js-11.8.0.tgz#966518ea83257bae2e7c9a48596231856555bb65"
   integrity sha512-MedQhoqVdr0U6SSnWPzfiadUcDHfN/Wzq25AkXiQv9oiOO/sG0S7XkvpFIqWBl9Yq1UYyYOOVORs5UW2XlPyzg==
 
 hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
   dependencies:
     react-is "^16.7.0"
 
 hsl-to-hex@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz#c58c826dc6d2f1e0a5ff1da5a7ecbf03faac1352"
+  resolved "https://registry.npmjs.org/hsl-to-hex/-/hsl-to-hex-1.0.0.tgz#c58c826dc6d2f1e0a5ff1da5a7ecbf03faac1352"
   integrity sha512-K6GVpucS5wFf44X0h2bLVRDsycgJmf9FF2elg+CrqD8GcFU8c6vYhgXn8NjUkFCwj+xDFb70qgLbTUm6sxwPmA==
   dependencies:
     hsl-to-rgb-for-reals "^1.1.0"
 
 hsl-to-rgb-for-reals@^1.1.0:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz#e1eb23f6b78016e3722431df68197e6dcdc016d9"
+  resolved "https://registry.npmjs.org/hsl-to-rgb-for-reals/-/hsl-to-rgb-for-reals-1.1.1.tgz#e1eb23f6b78016e3722431df68197e6dcdc016d9"
   integrity sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==
 
 html-encoding-sniffer@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz#696df529a7cfd82446369dc5193e590a3735b448"
+  resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz#696df529a7cfd82446369dc5193e590a3735b448"
   integrity sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==
   dependencies:
     whatwg-encoding "^3.1.1"
 
 html-entities@^2.1.0:
   version "2.5.2"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
+  resolved "https://registry.npmjs.org/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
   integrity sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==
 
 html-minifier-terser@^6.0.2:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
+  resolved "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
   integrity sha512-YXxSlJBZTP7RS3tWnQw74ooKa6L9b9i9QYXY21eUEvhZ3u9XLfv6OnFsQq6RxkhHygsaUMvYsZRV5rU/OVNZxw==
   dependencies:
     camel-case "^4.1.2"
@@ -7534,7 +7678,7 @@ html-minifier-terser@^6.0.2:
 
 html-webpack-plugin@^5.5.0:
   version "5.6.3"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz#a31145f0fee4184d53a794f9513147df1e653685"
+  resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz#a31145f0fee4184d53a794f9513147df1e653685"
   integrity sha512-QSf1yjtSAsmf7rYBV7XX86uua4W/vkhIt0xNXKbsi2foEeW7vjJQz4bhnpL3xH+l1ryl1680uNv968Z+X6jSYg==
   dependencies:
     "@types/html-minifier-terser" "^6.0.0"
@@ -7545,7 +7689,7 @@ html-webpack-plugin@^5.5.0:
 
 htmlparser2@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
   integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
   dependencies:
     domelementtype "^2.0.1"
@@ -7555,7 +7699,7 @@ htmlparser2@^6.1.0:
 
 http-errors@2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  resolved "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
   integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
   dependencies:
     depd "2.0.0"
@@ -7566,7 +7710,7 @@ http-errors@2.0.0:
 
 http-proxy-agent@^7.0.2:
   version "7.0.2"
-  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
+  resolved "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
   integrity sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==
   dependencies:
     agent-base "^7.1.0"
@@ -7574,15 +7718,15 @@ http-proxy-agent@^7.0.2:
 
 https-proxy-agent@^5.0.0:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
   integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
   dependencies:
     agent-base "6"
     debug "4"
 
-https-proxy-agent@^7.0.5:
+https-proxy-agent@^7.0.6:
   version "7.0.6"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz#da8dfeac7da130b05c2ba4b59c9b6cd66611a6b9"
+  resolved "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz#da8dfeac7da130b05c2ba4b59c9b6cd66611a6b9"
   integrity sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==
   dependencies:
     agent-base "^7.1.2"
@@ -7590,79 +7734,91 @@ https-proxy-agent@^7.0.5:
 
 human-signals@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
+  resolved "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
 hyphen@^1.6.4:
   version "1.10.6"
-  resolved "https://registry.yarnpkg.com/hyphen/-/hyphen-1.10.6.tgz#0e779d280e696102b97d7e42f5ca5de2cc97e274"
+  resolved "https://registry.npmjs.org/hyphen/-/hyphen-1.10.6.tgz#0e779d280e696102b97d7e42f5ca5de2cc97e274"
   integrity sha512-fXHXcGFTXOvZTSkPJuGOQf5Lv5T/R2itiiCVPg9LxAje5D00O0pP83yJShFq5V89Ly//Gt6acj7z8pbBr34stw==
 
 iconv-lite@0.4.24:
   version "0.4.24"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
 iconv-lite@0.6.3:
   version "0.6.3"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
-  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  resolved "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
 ieee754@^1.1.13, ieee754@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
 ignore-by-default@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
+  resolved "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
   integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
 
-ignore@^5.2.0, ignore@^5.2.4, ignore@^5.3.1:
+ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.2"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
   integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
 
+ignore@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-7.0.3.tgz#397ef9315dfe0595671eefe8b633fec6943ab733"
+  integrity sha512-bAH5jbK/F3T3Jls4I0SO1hmPR0dKU0a7+SY6n1yzRtG54FLO8d6w/nxLFX2Nb7dBu6cCWXPaAME6cYqFUMmuCA==
+
+imagesloaded@^4.0.0:
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/imagesloaded/-/imagesloaded-4.1.4.tgz#1376efcd162bb768c34c3727ac89cc04051f3cc7"
+  integrity sha512-ltiBVcYpc/TYTF5nolkMNsnREHW+ICvfQ3Yla2Sgr71YFwQ86bDwV9hgpFhFtrGPuwEx5+LqOHIrdXBdoWwwsA==
+  dependencies:
+    ev-emitter "^1.0.0"
+
 import-fresh@^3.2.1:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
-  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz#9cecb56503c0ada1f2741dbbd6546e4b13b57ccf"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
   dependencies:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-in-the-middle@^1.11.2, import-in-the-middle@^1.8.1:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/import-in-the-middle/-/import-in-the-middle-1.11.3.tgz#08559f2c05fd65ba7062e747af056ed18a80120c"
-  integrity sha512-tNpKEb4AjZrCyrxi+Eyu43h5ig0O8ZRFSXPHh/00/o+4P4pKzVEW/m5lsVtsAT7fCIgmQOAPjdqecGDsBXRxsw==
+import-in-the-middle@^1.11.2, import-in-the-middle@^1.12.0, import-in-the-middle@^1.8.1:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/import-in-the-middle/-/import-in-the-middle-1.13.0.tgz#e592583c3f53ff29c6079c0af31feab592ac6b2a"
+  integrity sha512-YG86SYDtrL/Yu8JgfWb7kjQ0myLeT1whw6fs/ZHFkXFcbk9zJU9lOCsSJHpvaPumU11nN3US7NW6x1YTk+HrUA==
   dependencies:
-    acorn "^8.8.2"
+    acorn "^8.14.0"
     acorn-import-attributes "^1.9.5"
     cjs-module-lexer "^1.2.2"
     module-details-from-path "^1.0.3"
 
 imurmurhash@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
 indent-string@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  resolved "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
   integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
 inflight@^1.0.4:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
   integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
   dependencies:
     once "^1.3.0"
@@ -7670,48 +7826,51 @@ inflight@^1.0.4:
 
 inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 ini@~1.3.0:
   version "1.3.8"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
+  resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
 inline-style-parser@0.1.1:
   version "0.1.1"
-  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  resolved "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
-internal-slot@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.7.tgz#c06dcca3ed874249881007b0a5523b172a190802"
-  integrity sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz#1eac91762947d2f7056bc838d93e13b2e9604961"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
   dependencies:
     es-errors "^1.3.0"
-    hasown "^2.0.0"
-    side-channel "^1.0.4"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
 
 "internmap@1 - 2":
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  resolved "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
 internmap@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
+  resolved "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95"
   integrity sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==
 
-invariant@^2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+intl-messageformat@^10.7.11:
+  version "10.7.15"
+  resolved "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.7.15.tgz#5cdc62139ef39ece1b083db32dae4d1c9fa5b627"
+  integrity sha512-LRyExsEsefQSBjU2p47oAheoKz+EOJxSLDdjOaEjdriajfHsMXOmV/EhMvYSg9bAgCUHasuAC+mcUBe/95PfIg==
   dependencies:
-    loose-envify "^1.0.0"
+    "@formatjs/ecma402-abstract" "2.3.3"
+    "@formatjs/fast-memoize" "2.2.6"
+    "@formatjs/icu-messageformat-parser" "2.11.1"
+    tslib "2"
 
 ioredis@^4.28.2:
   version "4.28.5"
-  resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-4.28.5.tgz#5c149e6a8d76a7f8fa8a504ffc85b7d5b6797f9f"
+  resolved "https://registry.npmjs.org/ioredis/-/ioredis-4.28.5.tgz#5c149e6a8d76a7f8fa8a504ffc85b7d5b6797f9f"
   integrity sha512-3GYo0GJtLqgNXj4YhrisLaNNvWSNwSS2wS4OELGfGxH8I69+XfNdnmV1AyN+ZqMh0i7eX+SWjrwFKDBDgfBC1A==
   dependencies:
     cluster-key-slot "^1.1.0"
@@ -7727,9 +7886,9 @@ ioredis@^4.28.2:
     standard-as-callback "^2.1.0"
 
 ioredis@^5.4.1:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/ioredis/-/ioredis-5.4.1.tgz#1c56b70b759f01465913887375ed809134296f40"
-  integrity sha512-2YZsvl7jopIa1gaePkeMtd9rAcSjOOjPtpcLlOeusyO+XH2SK5ZcT+UCrElPP+WVIInh2TzeI4XW9ENaSLVVHA==
+  version "5.5.0"
+  resolved "https://registry.npmjs.org/ioredis/-/ioredis-5.5.0.tgz#ff2332e125ca2ac8e15472ddd14ecdffa6484a2a"
+  integrity sha512-7CutT89g23FfSa8MDoIFs2GYYa0PaNiW/OrT+nRyjRXHDZd17HmIgy+reOQ/yhh72NznNjGuS8kbCAcA4Ro4mw==
   dependencies:
     "@ioredis/commands" "^1.1.1"
     cluster-key-slot "^1.1.0"
@@ -7743,303 +7902,310 @@ ioredis@^5.4.1:
 
 ipaddr.js@1.9.1:
   version "1.9.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
+  resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
 is-arguments@^1.0.4, is-arguments@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
-  integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz#ad58c6aecf563b78ef2bf04df540da8f5d7d8e1b"
+  integrity sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==
   dependencies:
-    call-bind "^1.0.2"
-    has-tostringtag "^1.0.0"
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
 
-is-array-buffer@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/is-array-buffer/-/is-array-buffer-3.0.4.tgz#7a1f92b3d61edd2bc65d24f130530ea93d7fae98"
-  integrity sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==
+is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz#65742e1e687bd2cc666253068fd8707fe4d44280"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
   dependencies:
-    call-bind "^1.0.2"
-    get-intrinsic "^1.2.1"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
 
 is-arrayish@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
 is-arrayish@^0.3.1:
   version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
   integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
 
 is-async-function@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-async-function/-/is-async-function-2.0.0.tgz#8e4418efd3e5d3a6ebb0164c05ef5afb69aa9646"
-  integrity sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz#3e69018c8e04e73b738793d020bfe884b9fd3523"
+  integrity sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==
   dependencies:
-    has-tostringtag "^1.0.0"
+    async-function "^1.0.0"
+    call-bound "^1.0.3"
+    get-proto "^1.0.1"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
 
 is-bigint@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
+  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz#dda7a3445df57a42583db4228682eba7c4170672"
   integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
   dependencies:
     has-bigints "^1.0.2"
 
 is-binary-path@~2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
   integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.2.0.tgz#9743641e80a62c094b5941c5bb791d66a88e497a"
-  integrity sha512-kR5g0+dXf/+kXnqI+lu0URKYPKgICtHGGNCDSB10AaUFj3o/HkB3u7WfpRBJGFopxxY0oH3ux7ZsDjLtK7xqvw==
+is-boolean-object@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz#7067f47709809a393c71ff5bb3e135d8a9215d9e"
+  integrity sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==
   dependencies:
-    call-bind "^1.0.7"
+    call-bound "^1.0.3"
     has-tostringtag "^1.0.2"
 
 is-buffer@^2.0.0:
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
   integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
 
 is-bun-module@^1.0.2:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/is-bun-module/-/is-bun-module-1.3.0.tgz#ea4d24fdebfcecc98e81bcbcb506827fee288760"
+  resolved "https://registry.npmjs.org/is-bun-module/-/is-bun-module-1.3.0.tgz#ea4d24fdebfcecc98e81bcbcb506827fee288760"
   integrity sha512-DgXeu5UWI0IsMQundYb5UAOzm6G2eVnarJ0byP6Tm55iZNKceD59LNPA2L4VvsScTtHcw0yEkVwSf7PC+QoLSA==
   dependencies:
     semver "^7.6.3"
 
-is-callable@^1.1.3, is-callable@^1.2.7:
+is-callable@^1.2.7:
   version "1.2.7"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
+  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
-is-core-module@^2.13.0, is-core-module@^2.15.1:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.15.1.tgz#a7363a25bee942fefab0de13bf6aa372c82dcc37"
-  integrity sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==
+is-core-module@^2.13.0, is-core-module@^2.15.1, is-core-module@^2.16.0:
+  version "2.16.1"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz#2a98801a849f43e2add644fbb6bc6229b19a4ef4"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
   dependencies:
     hasown "^2.0.2"
 
-is-data-view@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
-  integrity sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==
+is-data-view@^1.0.1, is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz#bae0a41b9688986c2188dda6657e56b8f9e63b8e"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
   dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
     is-typed-array "^1.1.13"
 
-is-date-object@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
-  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+is-date-object@^1.0.5, is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz#ad85541996fc7aa8b2729701d27b7319f95d82f7"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
   dependencies:
-    has-tostringtag "^1.0.0"
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
 
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
+  resolved "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
 is-extglob@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
 is-finalizationregistry@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-finalizationregistry/-/is-finalizationregistry-1.1.0.tgz#d74a7d0c5f3578e34a20729e69202e578d495dc2"
-  integrity sha512-qfMdqbAQEwBw78ZyReKnlA8ezmPdb9BemzIIip/JkjaZUhitfXDkkr+3QTboW0JrSXT1QWyYShpvnNHGZ4c4yA==
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz#eefdcdc6c94ddd0674d9c85887bf93f944a97c90"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
   dependencies:
-    call-bind "^1.0.7"
+    call-bound "^1.0.3"
 
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
 is-generator-function@^1.0.10, is-generator-function@^1.0.7:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
-  integrity sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz#bf3eeda931201394f57b5dba2800f91a238309ca"
+  integrity sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==
   dependencies:
-    has-tostringtag "^1.0.0"
+    call-bound "^1.0.3"
+    get-proto "^1.0.0"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
 
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
   dependencies:
     is-extglob "^2.1.1"
 
 is-map@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
+  resolved "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e"
   integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
 
-is-negative-zero@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.3.tgz#ced903a027aca6381b777a5743069d7376a49747"
-  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
-
-is-number-object@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.1.0.tgz#5a867e9ecc3d294dda740d9f127835857af7eb05"
-  integrity sha512-KVSZV0Dunv9DTPkhXwcZ3Q+tUc9TsaE1ZwX5J2WMvsSGS6Md8TFPun5uwh0yRdrNerI6vf/tbJxqSx4c1ZI1Lw==
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz#144b21e95a1bc148205dcc2814a9134ec41b2541"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
   dependencies:
-    call-bind "^1.0.7"
+    call-bound "^1.0.3"
     has-tostringtag "^1.0.2"
 
 is-number@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
 is-path-inside@^3.0.3:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
 is-plain-obj@^4.0.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
+  resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz#d65025edec3657ce032fd7db63c97883eaed71f0"
   integrity sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==
 
 is-potential-custom-element-name@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  resolved "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
 is-reference@1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
+  resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
   integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==
   dependencies:
     "@types/estree" "*"
 
-is-regex@^1.1.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.0.tgz#41b9d266e7eb7451312c64efc37e8a7d453077cf"
-  integrity sha512-B6ohK4ZmoftlUe+uvenXSbPJFo6U37BH7oO1B3nQH8f/7h27N56s85MhUtbFJAziz5dcmuR3i8ovUl35zp8pFA==
+is-regex@^1.1.4, is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
   dependencies:
-    call-bind "^1.0.7"
-    gopd "^1.1.0"
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
     has-tostringtag "^1.0.2"
     hasown "^2.0.2"
 
 is-set@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
+  resolved "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
   integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
 
-is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz#1237f1cba059cdb62431d378dcc37d9680181688"
-  integrity sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz#9b67844bd9b7f246ba0708c3a93e34269c774f6f"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
   dependencies:
-    call-bind "^1.0.7"
+    call-bound "^1.0.3"
 
 is-stream@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  resolved "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
   integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
-is-string@^1.0.7, is-string@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.1.0.tgz#8cb83c5d57311bf8058bc6c8db294711641da45d"
-  integrity sha512-PlfzajuF9vSo5wErv3MJAKD/nqf9ngAs1NFQYm16nUYFO2IzxJ2hcm+IOCg+EEopdykNNUhVq5cz35cAUxU8+g==
+is-string@^1.0.7, is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz#92ea3f3d5c5b6e039ca8677e5ac8d07ea773cbb9"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
   dependencies:
-    call-bind "^1.0.7"
+    call-bound "^1.0.3"
     has-tostringtag "^1.0.2"
 
-is-symbol@^1.0.4, is-symbol@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.1.0.tgz#ae993830a56d4781886d39f9f0a46b3e89b7b60b"
-  integrity sha512-qS8KkNNXUZ/I+nX6QT8ZS1/Yx0A444yhzdTKxCzKkNjQ9sHErBxJnJAgh+f5YhusYECEcjo4XcyH87hn6+ks0A==
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz#f47761279f532e2b05a7024a7506dbbedacd0634"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
   dependencies:
-    call-bind "^1.0.7"
-    has-symbols "^1.0.3"
-    safe-regex-test "^1.0.3"
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
 
-is-typed-array@^1.1.13, is-typed-array@^1.1.3:
-  version "1.1.13"
-  resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.13.tgz#d6c5ca56df62334959322d7d7dd1cca50debe229"
-  integrity sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==
+is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15, is-typed-array@^1.1.3:
+  version "1.1.15"
+  resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz#4bfb4a45b61cee83a5a46fba778e4e8d59c0ce0b"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
   dependencies:
-    which-typed-array "^1.1.14"
+    which-typed-array "^1.1.16"
 
 is-url@^1.2.4:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
+  resolved "https://registry.npmjs.org/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
   integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
 
 is-weakmap@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
+  resolved "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
   integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
 
-is-weakref@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
-  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+is-weakref@^1.0.2, is-weakref@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz#eea430182be8d64174bd96bffbc46f21bf3f9293"
+  integrity sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==
   dependencies:
-    call-bind "^1.0.2"
+    call-bound "^1.0.3"
 
 is-weakset@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.3.tgz#e801519df8c0c43e12ff2834eead84ec9e624007"
-  integrity sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz#c9f5deb0bc1906c6d6f1027f284ddf459249daca"
+  integrity sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==
   dependencies:
-    call-bind "^1.0.7"
-    get-intrinsic "^1.2.4"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
 
 is-wsl@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
   dependencies:
     is-docker "^2.0.0"
 
 isarray@^2.0.5:
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
 
 isexe@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
 isomorphic-dompurify@^2.12.0, isomorphic-dompurify@^2.16.0:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/isomorphic-dompurify/-/isomorphic-dompurify-2.18.0.tgz#ab043055f4140818122a352cf7d21f2330469866"
-  integrity sha512-e0AaROtWPy6ofSTCnUuBvXFidt1eFmrwEbi+Acpz0du6v2H+fq+3svPBn0g/AfBXz24FTWA9ccle7HSFT3HG7A==
+  version "2.21.0"
+  resolved "https://registry.npmjs.org/isomorphic-dompurify/-/isomorphic-dompurify-2.21.0.tgz#57369b409bd72a67c111d065eae412610725588b"
+  integrity sha512-IjBG/D6ApEiO6ciXvrzPqbE4xOLbjRTshSWRSeeycQVhvsxf1O9PhA7LoqwMYS0/2PKLNFJRugwsNV5UihtLxQ==
   dependencies:
-    dompurify "^3.2.2"
-    jsdom "^25.0.1"
+    dompurify "^3.2.3"
+    jsdom "^26.0.0"
 
 isomorphic.js@^0.2.4:
   version "0.2.5"
-  resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.5.tgz#13eecf36f2dba53e85d355e11bf9d4208c6f7f88"
+  resolved "https://registry.npmjs.org/isomorphic.js/-/isomorphic.js-0.2.5.tgz#13eecf36f2dba53e85d355e11bf9d4208c6f7f88"
   integrity sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==
 
-iterator.prototype@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.3.tgz#016c2abe0be3bbdb8319852884f60908ac62bf9c"
-  integrity sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==
+iterator.prototype@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz#12c959a29de32de0aa3bbbb801f4d777066dae39"
+  integrity sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==
   dependencies:
-    define-properties "^1.2.1"
-    get-intrinsic "^1.2.1"
-    has-symbols "^1.0.3"
-    reflect.getprototypeof "^1.0.4"
-    set-function-name "^2.0.1"
+    define-data-property "^1.1.4"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    get-proto "^1.0.0"
+    has-symbols "^1.1.0"
+    set-function-name "^2.0.2"
 
 jackspeak@^2.3.5:
   version "2.3.6"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
+  resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz#647ecc472238aee4b06ac0e461acc21a8c505ca8"
   integrity sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==
   dependencies:
     "@isaacs/cliui" "^8.0.2"
@@ -8048,7 +8214,7 @@ jackspeak@^2.3.5:
 
 jackspeak@^3.1.2:
   version "3.4.3"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
   integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
   dependencies:
     "@isaacs/cliui" "^8.0.2"
@@ -8057,63 +8223,63 @@ jackspeak@^3.1.2:
 
 jay-peg@^1.0.2:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/jay-peg/-/jay-peg-1.1.1.tgz#fdf410b89fa7a295bf74424ffe4c9083dbe7c363"
+  resolved "https://registry.npmjs.org/jay-peg/-/jay-peg-1.1.1.tgz#fdf410b89fa7a295bf74424ffe4c9083dbe7c363"
   integrity sha512-D62KEuBxz/ip2gQKOEhk/mx14o7eiFRaU+VNNSP4MOiIkwb/D6B3G1Mfas7C/Fit8EsSV2/IWjZElx/Gs6A4ww==
   dependencies:
     restructure "^3.0.0"
 
 jest-worker@^27.4.5:
   version "27.5.1"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
+  resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
   integrity sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==
   dependencies:
     "@types/node" "*"
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-jiti@^1.18.2, jiti@^1.21.6:
-  version "1.21.6"
-  resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
-  integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
+jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz#9dd81043424a3d28458b193d965f0d18a2300ba9"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
 
 joycon@^3.0.1, joycon@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
+  resolved "https://registry.npmjs.org/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
   integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
 js-yaml@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
   integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
   dependencies:
     argparse "^2.0.1"
 
 jsdoc-type-pratt-parser@^4.0.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz#ff6b4a3f339c34a6c188cbf50a16087858d22113"
+  resolved "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz#ff6b4a3f339c34a6c188cbf50a16087858d22113"
   integrity sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==
 
-jsdom@^25.0.1:
-  version "25.0.1"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-25.0.1.tgz#536ec685c288fc8a5773a65f82d8b44badcc73ef"
-  integrity sha512-8i7LzZj7BF8uplX+ZyOlIz86V6TAsSs+np6m1kpW9u0JWi4z/1t+FzcK1aek+ybTnAC4KhBL4uXCNT0wcUIeCw==
+jsdom@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.npmjs.org/jsdom/-/jsdom-26.0.0.tgz#446dd1ad8cfc50df7e714e58f1f972c1763b354c"
+  integrity sha512-BZYDGVAIriBWTpIxYzrXjv3E/4u8+/pSG5bQdIYCbNCGOvsPkDQfTVLAIXAf9ETdCpduCVTkDe2NNZ8NIwUVzw==
   dependencies:
-    cssstyle "^4.1.0"
+    cssstyle "^4.2.1"
     data-urls "^5.0.0"
     decimal.js "^10.4.3"
-    form-data "^4.0.0"
+    form-data "^4.0.1"
     html-encoding-sniffer "^4.0.0"
     http-proxy-agent "^7.0.2"
-    https-proxy-agent "^7.0.5"
+    https-proxy-agent "^7.0.6"
     is-potential-custom-element-name "^1.0.1"
-    nwsapi "^2.2.12"
-    parse5 "^7.1.2"
-    rrweb-cssom "^0.7.1"
+    nwsapi "^2.2.16"
+    parse5 "^7.2.1"
+    rrweb-cssom "^0.8.0"
     saxes "^6.0.0"
     symbol-tree "^3.2.4"
     tough-cookie "^5.0.0"
@@ -8121,55 +8287,60 @@ jsdom@^25.0.1:
     webidl-conversions "^7.0.0"
     whatwg-encoding "^3.1.1"
     whatwg-mimetype "^4.0.0"
-    whatwg-url "^14.0.0"
+    whatwg-url "^14.1.0"
     ws "^8.18.0"
     xml-name-validator "^5.0.0"
 
-jsesc@^3.0.2, jsesc@~3.0.2:
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz#74d335a234f67ed19907fdadfac7ccf9d409825d"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+jsesc@~3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz#bb8b09a6597ba426425f2e4a07245c3d00b9343e"
   integrity sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==
 
 json-buffer@3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
 json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
 json-schema-traverse@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-schema-traverse@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz#ae7bcb3656ab77a73ba5c49bf654f38e6b6860e2"
   integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
 
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
 json5@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
   integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
 json5@^2.2.2, json5@^2.2.3:
   version "2.2.3"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
   integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
 
 jsonfile@^6.0.1, jsonfile@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
   integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
   dependencies:
     universalify "^2.0.0"
@@ -8178,7 +8349,7 @@ jsonfile@^6.0.1, jsonfile@^6.1.0:
 
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
   version "3.3.5"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
+  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz#4766bd05a8e2a11af222becd19e15575e52a853a"
   integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
   dependencies:
     array-includes "^3.1.6"
@@ -8187,106 +8358,91 @@ jsonfile@^6.0.1, jsonfile@^6.1.0:
     object.values "^1.1.6"
 
 jsx-dom-cjs@^8.0.3:
-  version "8.1.5"
-  resolved "https://registry.yarnpkg.com/jsx-dom-cjs/-/jsx-dom-cjs-8.1.5.tgz#8a45d3f0c59d94b60b98a8b60506bbfb9a8cf733"
-  integrity sha512-J024Gh5/f+6nY3t8FjUbJ0o0zV6iG4U39JcJFW6i475OcJWm1pxZ8ZInpF/up1ruPIYUbUqf1yPeAUGIqewJWQ==
+  version "8.1.6"
+  resolved "https://registry.npmjs.org/jsx-dom-cjs/-/jsx-dom-cjs-8.1.6.tgz#37ac60189fd0a99b63d0c2bb99f57fc563992b25"
+  integrity sha512-aeGqlIZ3IBKF2+B0cKXZGh10OHxxABuHD9tlS10suXDXXG0c4wMkJios9xVslduflSNEQJVlicME3EBCYgxGvA==
   dependencies:
     csstype "^3.1.3"
 
-keycode@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.1.tgz#09c23b2be0611d26117ea2501c2c391a01f39eff"
-  integrity sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==
-
-keycon@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/keycon/-/keycon-1.4.0.tgz#bf2a633f3c3b659ea564045938cff33e584cebd5"
-  integrity sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==
-  dependencies:
-    "@cfcs/core" "^0.0.6"
-    "@daybrush/utils" "^1.7.1"
-    "@scena/event-emitter" "^1.0.2"
-    keycode "^2.2.0"
-
 keyv@^4.5.3:
   version "4.5.4"
-  resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
   integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
   dependencies:
     json-buffer "3.0.1"
 
 kleur@^4.0.3, kleur@^4.1.4:
   version "4.1.5"
-  resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
+  resolved "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780"
   integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==
 
+kuler@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz#e2c570a3800388fb44407e851531c1d670b061b3"
+  integrity sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==
+
 language-subtag-registry@^0.3.20:
   version "0.3.23"
-  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
+  resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz#23529e04d9e3b74679d70142df3fd2eb6ec572e7"
   integrity sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==
 
 language-tags@^1.0.9:
   version "1.0.9"
-  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
+  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz#1ffdcd0ec0fafb4b1be7f8b11f306ad0f9c08777"
   integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
   dependencies:
     language-subtag-registry "^0.3.20"
 
 levn@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.yarnpkg.com/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
   integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
   dependencies:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
-lib0@^0.2.42, lib0@^0.2.47, lib0@^0.2.74, lib0@^0.2.85, lib0@^0.2.87, lib0@^0.2.98:
+lib0@^0.2.42, lib0@^0.2.47, lib0@^0.2.74, lib0@^0.2.85, lib0@^0.2.87, lib0@^0.2.99:
   version "0.2.99"
-  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.99.tgz#80d715dbd75496dabe0a1f5061fbb4ea162d2532"
+  resolved "https://registry.npmjs.org/lib0/-/lib0-0.2.99.tgz#80d715dbd75496dabe0a1f5061fbb4ea162d2532"
   integrity sha512-vwztYuUf1uf/1zQxfzRfO5yzfNKhTtgOByCruuiQQxWQXnPb8Itaube5ylofcV0oM0aKal9Mv+S1s1Ky0UYP1w==
   dependencies:
     isomorphic.js "^0.2.4"
 
-lilconfig@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
-  integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
-
 lilconfig@^3.0.0, lilconfig@^3.1.1, lilconfig@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz#a1bcfd6257f9585bf5ae14ceeebb7b559025e4c4"
   integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
 
 lines-and-columns@^1.1.6:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
+  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
 linkify-it@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
+  resolved "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
   integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
   dependencies:
     uc.micro "^2.0.0"
 
 linkifyjs@^4.1.3:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.2.0.tgz#9dd30222b9cbabec9c950e725ec00031c7fa3f08"
+  resolved "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.2.0.tgz#9dd30222b9cbabec9c950e725ec00031c7fa3f08"
   integrity sha512-pCj3PrQyATaoTYKHrgWRF3SJwsm61udVh+vuls/Rl6SptiDhgE7ziUIudAedRY9QEfynmM7/RmLEfPUyw1HPCw==
 
 load-tsconfig@^0.2.3:
   version "0.2.5"
-  resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
+  resolved "https://registry.npmjs.org/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
   integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
 
 loader-runner@^4.2.0:
   version "4.3.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
+  resolved "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 locate-path@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
   integrity sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==
   dependencies:
     p-locate "^3.0.0"
@@ -8294,90 +8450,102 @@ locate-path@^3.0.0:
 
 locate-path@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
   integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
   dependencies:
     p-locate "^4.1.0"
 
 locate-path@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
   integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
   dependencies:
     p-locate "^5.0.0"
 
 lodash-es@^4.17.15:
   version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
 lodash.castarray@^4.4.0:
   version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
+  resolved "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
   integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
 
 lodash.debounce@^4.0.8:
   version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
 
 lodash.defaults@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
+  resolved "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
   integrity sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==
 
 lodash.flatten@^4.4.0:
   version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
+  resolved "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
   integrity sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==
 
 lodash.isarguments@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
+  resolved "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
   integrity sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==
 
 lodash.isplainobject@^4.0.6:
   version "4.0.6"
-  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
   integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
 
 lodash.merge@^4.6.2:
   version "4.6.2"
-  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
 lodash.sortby@^4.7.0:
   version "4.7.0"
-  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  resolved "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
-lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.0.1, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4:
   version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
+logform@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/logform/-/logform-2.7.0.tgz#cfca97528ef290f2e125a08396805002b2d060d1"
+  integrity sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==
+  dependencies:
+    "@colors/colors" "1.6.0"
+    "@types/triple-beam" "^1.3.2"
+    fecha "^4.2.0"
+    ms "^2.1.1"
+    safe-stable-stringify "^2.3.1"
+    triple-beam "^1.3.0"
+
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
 loupe@^3.1.0, loupe@^3.1.1, loupe@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.1.2.tgz#c86e0696804a02218f2206124c45d8b15291a240"
-  integrity sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz#042a8f7986d77f3d0f98ef7990a2b2fef18b0fd2"
+  integrity sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==
 
 lower-case@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
+  resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
   integrity sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==
   dependencies:
     tslib "^2.0.3"
 
 lowlight@^2.9.0:
   version "2.9.0"
-  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-2.9.0.tgz#70da647a4319c7bfd8e97721a679b13ef5621496"
+  resolved "https://registry.npmjs.org/lowlight/-/lowlight-2.9.0.tgz#70da647a4319c7bfd8e97721a679b13ef5621496"
   integrity sha512-OpcaUTCLmHuVuBcyNckKfH5B0oA4JUavb/M/8n9iAvanJYNQkrVm4pvyX0SUaqkBG4dnWHKt7p50B3ngAG2Rfw==
   dependencies:
     "@types/hast" "^2.0.0"
@@ -8385,63 +8553,53 @@ lowlight@^2.9.0:
     highlight.js "~11.8.0"
 
 lowlight@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-3.2.0.tgz#f06152e211b9caa09ff65e22e4bf6d085782f6cc"
-  integrity sha512-8Me8xHTCBYEXwcJIPcurnXTeERl3plwb4207v6KPye48kX/oaYDiwXy+OCm3M/pyAPUrkMhalKsbYPm24f/UDg==
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz#007b8a5bfcfd27cc65b96246d2de3e9dd4e23c6c"
+  integrity sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==
   dependencies:
     "@types/hast" "^3.0.0"
     devlop "^1.0.0"
-    highlight.js "~11.10.0"
+    highlight.js "~11.11.0"
 
-lru-cache@^10.2.0:
+lru-cache@^10.2.0, lru-cache@^10.4.3:
   version "10.4.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
   integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
 
 lru-cache@^5.1.1:
   version "5.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
   integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
   dependencies:
     yallist "^3.0.2"
 
-lucide-react@^0.356.0:
-  version "0.356.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.356.0.tgz#4a8813ece512bffb7a40a6e10a0d6e2e5ac6ad62"
-  integrity sha512-MDInjLrmZToccH2UxEshntujBlFwtOofGB22FN/eg39FfGVYV1TT1eMIv2j4rdaTJBpYjUuX7fEo9pwYkNFgwA==
-
-lucide-react@^0.378.0:
-  version "0.378.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.378.0.tgz#232acb99c6baedfa90959a2c0dd11327b058bde8"
-  integrity sha512-u6EPU8juLUk9ytRcyapkWI18epAv3RU+6+TC23ivjR0e+glWKBobFeSgRwOIJihzktILQuy6E0E80P2jVTDR5g==
-
-lucide-react@^0.379.0:
-  version "0.379.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.379.0.tgz#29e34eeffae7fb241b64b09868cbe3ab888ef7cc"
-  integrity sha512-KcdeVPqmhRldldAAgptb8FjIunM2x2Zy26ZBh1RsEUcdLIvsEmbcw7KpzFYUy5BbpGeWhPu9Z9J5YXfStiXwhg==
+lucide-react@^0.469.0:
+  version "0.469.0"
+  resolved "https://registry.npmjs.org/lucide-react/-/lucide-react-0.469.0.tgz#f16936ca6521482fef754a7eabb310e6c68e1482"
+  integrity sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw==
 
 lz-string@^1.5.0:
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
 magic-string@0.30.8:
   version "0.30.8"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
   integrity sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
 magic-string@^0.30.3, magic-string@^0.30.5:
-  version "0.30.14"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.14.tgz#e9bb29870b81cfc1ec3cc656552f5a7fcbf19077"
-  integrity sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==
+  version "0.30.17"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
+  integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.5.0"
 
 make-dir@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
   dependencies:
     pify "^4.0.1"
@@ -8449,29 +8607,29 @@ make-dir@^2.1.0:
 
 make-dir@^3.0.2:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
   dependencies:
     semver "^6.0.0"
 
 make-error@^1.1.1:
   version "1.3.6"
-  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
+  resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
 map-or-similar@^1.5.0:
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
+  resolved "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
   integrity sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==
 
 markdown-it-task-lists@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz#f68f4d2ac2bad5a2c373ba93081a1a6848417088"
+  resolved "https://registry.npmjs.org/markdown-it-task-lists/-/markdown-it-task-lists-2.1.1.tgz#f68f4d2ac2bad5a2c373ba93081a1a6848417088"
   integrity sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==
 
 markdown-it@^14.0.0, markdown-it@^14.1.0:
   version "14.1.0"
-  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
+  resolved "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
   integrity sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==
   dependencies:
     argparse "^2.0.1"
@@ -8481,14 +8639,27 @@ markdown-it@^14.0.0, markdown-it@^14.1.0:
     punycode.js "^2.3.1"
     uc.micro "^2.1.0"
 
+masonry-layout@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz#d57b44af13e601bfcdc423f1dd8348b5524de348"
+  integrity sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==
+  dependencies:
+    get-size "^2.0.2"
+    outlayer "^2.1.0"
+
 material-colors@^1.2.1:
   version "1.2.6"
-  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  resolved "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
   integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
 
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
 mdast-util-definitions@^5.0.0:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz#9910abb60ac5d7115d6819b57ae0bcef07a3f7a7"
+  resolved "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-5.1.2.tgz#9910abb60ac5d7115d6819b57ae0bcef07a3f7a7"
   integrity sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==
   dependencies:
     "@types/mdast" "^3.0.0"
@@ -8497,7 +8668,7 @@ mdast-util-definitions@^5.0.0:
 
 mdast-util-from-markdown@^1.0.0:
   version "1.3.1"
-  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0"
+  resolved "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz#9421a5a247f10d31d2faed2a30df5ec89ceafcf0"
   integrity sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==
   dependencies:
     "@types/mdast" "^3.0.0"
@@ -8515,7 +8686,7 @@ mdast-util-from-markdown@^1.0.0:
 
 mdast-util-to-hast@^12.1.0:
   version "12.3.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz#045d2825fb04374e59970f5b3f279b5700f6fb49"
+  resolved "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.3.0.tgz#045d2825fb04374e59970f5b3f279b5700f6fb49"
   integrity sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==
   dependencies:
     "@types/hast" "^2.0.0"
@@ -8529,68 +8700,68 @@ mdast-util-to-hast@^12.1.0:
 
 mdast-util-to-string@^3.1.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz#66f7bb6324756741c5f47a53557f0cbf16b6f789"
+  resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz#66f7bb6324756741c5f47a53557f0cbf16b6f789"
   integrity sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==
   dependencies:
     "@types/mdast" "^3.0.0"
 
 mdn-data@2.0.14:
   version "2.0.14"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  resolved "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
 mdurl@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
+  resolved "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
   integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
 
 media-engine@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/media-engine/-/media-engine-1.0.3.tgz#be3188f6cd243ea2a40804a35de5a5b032f58dad"
+  resolved "https://registry.npmjs.org/media-engine/-/media-engine-1.0.3.tgz#be3188f6cd243ea2a40804a35de5a5b032f58dad"
   integrity sha512-aa5tG6sDoK+k70B9iEX1NeyfT8ObCKhNDs6lJVpwF6r8vhUfuKMslIcirq6HIUYuuUYLefcEQOn9bSBOvawtwg==
 
 media-typer@0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
+  resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
 memfs@^3.4.1, memfs@^3.4.12:
   version "3.6.0"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
+  resolved "https://registry.npmjs.org/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
   integrity sha512-EGowvkkgbMcIChjMTMkESFDbZeSh8xZ7kNSF0hAiAN4Jh6jgHCRS0Ga/+C8y6Au+oqpezRHCfPsmJ2+DwAgiwQ==
   dependencies:
     fs-monkey "^1.0.4"
 
 memoizerific@^1.11.3:
   version "1.11.3"
-  resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
+  resolved "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
   integrity sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==
   dependencies:
     map-or-similar "^1.5.0"
 
 merge-descriptors@1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
+  resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
   integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
 
 merge-stream@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
+  resolved "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 methods@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
+  resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
 micromark-core-commonmark@^1.0.1:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8"
+  resolved "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8"
   integrity sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==
   dependencies:
     decode-named-character-reference "^1.0.0"
@@ -8612,7 +8783,7 @@ micromark-core-commonmark@^1.0.1:
 
 micromark-factory-destination@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz#eb815957d83e6d44479b3df640f010edad667b9f"
+  resolved "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz#eb815957d83e6d44479b3df640f010edad667b9f"
   integrity sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==
   dependencies:
     micromark-util-character "^1.0.0"
@@ -8621,7 +8792,7 @@ micromark-factory-destination@^1.0.0:
 
 micromark-factory-label@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz#cc95d5478269085cfa2a7282b3de26eb2e2dec68"
+  resolved "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz#cc95d5478269085cfa2a7282b3de26eb2e2dec68"
   integrity sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==
   dependencies:
     micromark-util-character "^1.0.0"
@@ -8631,7 +8802,7 @@ micromark-factory-label@^1.0.0:
 
 micromark-factory-space@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz#c8f40b0640a0150751d3345ed885a080b0d15faf"
+  resolved "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz#c8f40b0640a0150751d3345ed885a080b0d15faf"
   integrity sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==
   dependencies:
     micromark-util-character "^1.0.0"
@@ -8639,7 +8810,7 @@ micromark-factory-space@^1.0.0:
 
 micromark-factory-title@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz#dd0fe951d7a0ac71bdc5ee13e5d1465ad7f50ea1"
+  resolved "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz#dd0fe951d7a0ac71bdc5ee13e5d1465ad7f50ea1"
   integrity sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==
   dependencies:
     micromark-factory-space "^1.0.0"
@@ -8649,7 +8820,7 @@ micromark-factory-title@^1.0.0:
 
 micromark-factory-whitespace@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz#798fb7489f4c8abafa7ca77eed6b5745853c9705"
+  resolved "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz#798fb7489f4c8abafa7ca77eed6b5745853c9705"
   integrity sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==
   dependencies:
     micromark-factory-space "^1.0.0"
@@ -8659,7 +8830,7 @@ micromark-factory-whitespace@^1.0.0:
 
 micromark-util-character@^1.0.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-character/-/micromark-util-character-1.2.0.tgz#4fedaa3646db249bc58caeb000eb3549a8ca5dcc"
+  resolved "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.2.0.tgz#4fedaa3646db249bc58caeb000eb3549a8ca5dcc"
   integrity sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==
   dependencies:
     micromark-util-symbol "^1.0.0"
@@ -8667,14 +8838,14 @@ micromark-util-character@^1.0.0:
 
 micromark-util-chunked@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz#37a24d33333c8c69a74ba12a14651fd9ea8a368b"
+  resolved "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz#37a24d33333c8c69a74ba12a14651fd9ea8a368b"
   integrity sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==
   dependencies:
     micromark-util-symbol "^1.0.0"
 
 micromark-util-classify-character@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz#6a7f8c8838e8a120c8e3c4f2ae97a2bff9190e9d"
+  resolved "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz#6a7f8c8838e8a120c8e3c4f2ae97a2bff9190e9d"
   integrity sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==
   dependencies:
     micromark-util-character "^1.0.0"
@@ -8683,7 +8854,7 @@ micromark-util-classify-character@^1.0.0:
 
 micromark-util-combine-extensions@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz#192e2b3d6567660a85f735e54d8ea6e3952dbe84"
+  resolved "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz#192e2b3d6567660a85f735e54d8ea6e3952dbe84"
   integrity sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==
   dependencies:
     micromark-util-chunked "^1.0.0"
@@ -8691,14 +8862,14 @@ micromark-util-combine-extensions@^1.0.0:
 
 micromark-util-decode-numeric-character-reference@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz#b1e6e17009b1f20bc652a521309c5f22c85eb1c6"
+  resolved "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz#b1e6e17009b1f20bc652a521309c5f22c85eb1c6"
   integrity sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==
   dependencies:
     micromark-util-symbol "^1.0.0"
 
 micromark-util-decode-string@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz#dc12b078cba7a3ff690d0203f95b5d5537f2809c"
+  resolved "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz#dc12b078cba7a3ff690d0203f95b5d5537f2809c"
   integrity sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==
   dependencies:
     decode-named-character-reference "^1.0.0"
@@ -8708,31 +8879,31 @@ micromark-util-decode-string@^1.0.0:
 
 micromark-util-encode@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz#92e4f565fd4ccb19e0dcae1afab9a173bbeb19a5"
+  resolved "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz#92e4f565fd4ccb19e0dcae1afab9a173bbeb19a5"
   integrity sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==
 
 micromark-util-html-tag-name@^1.0.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz#48fd7a25826f29d2f71479d3b4e83e94829b3588"
+  resolved "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz#48fd7a25826f29d2f71479d3b4e83e94829b3588"
   integrity sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==
 
 micromark-util-normalize-identifier@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz#7a73f824eb9f10d442b4d7f120fecb9b38ebf8b7"
+  resolved "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz#7a73f824eb9f10d442b4d7f120fecb9b38ebf8b7"
   integrity sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==
   dependencies:
     micromark-util-symbol "^1.0.0"
 
 micromark-util-resolve-all@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz#4652a591ee8c8fa06714c9b54cd6c8e693671188"
+  resolved "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz#4652a591ee8c8fa06714c9b54cd6c8e693671188"
   integrity sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==
   dependencies:
     micromark-util-types "^1.0.0"
 
 micromark-util-sanitize-uri@^1.0.0, micromark-util-sanitize-uri@^1.1.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz#613f738e4400c6eedbc53590c67b197e30d7f90d"
+  resolved "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz#613f738e4400c6eedbc53590c67b197e30d7f90d"
   integrity sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==
   dependencies:
     micromark-util-character "^1.0.0"
@@ -8741,7 +8912,7 @@ micromark-util-sanitize-uri@^1.0.0, micromark-util-sanitize-uri@^1.1.0:
 
 micromark-util-subtokenize@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz#941c74f93a93eaf687b9054aeb94642b0e92edb1"
+  resolved "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz#941c74f93a93eaf687b9054aeb94642b0e92edb1"
   integrity sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==
   dependencies:
     micromark-util-chunked "^1.0.0"
@@ -8751,17 +8922,17 @@ micromark-util-subtokenize@^1.0.0:
 
 micromark-util-symbol@^1.0.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz#813cd17837bdb912d069a12ebe3a44b6f7063142"
+  resolved "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz#813cd17837bdb912d069a12ebe3a44b6f7063142"
   integrity sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==
 
 micromark-util-types@^1.0.0, micromark-util-types@^1.0.1:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/micromark-util-types/-/micromark-util-types-1.1.0.tgz#e6676a8cae0bb86a2171c498167971886cb7e283"
+  resolved "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz#e6676a8cae0bb86a2171c498167971886cb7e283"
   integrity sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==
 
 micromark@^3.0.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/micromark/-/micromark-3.2.0.tgz#1af9fef3f995ea1ea4ac9c7e2f19c48fd5c006e9"
+  resolved "https://registry.npmjs.org/micromark/-/micromark-3.2.0.tgz#1af9fef3f995ea1ea4ac9c7e2f19c48fd5c006e9"
   integrity sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==
   dependencies:
     "@types/debug" "^4.0.0"
@@ -8782,9 +8953,9 @@ micromark@^3.0.0:
     micromark-util-types "^1.0.1"
     uvu "^0.5.0"
 
-micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
+micromatch@^4.0.2, micromatch@^4.0.8:
   version "4.0.8"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
   integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
   dependencies:
     braces "^3.0.3"
@@ -8792,114 +8963,119 @@ micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5, micromatch@^4.0.8:
 
 mime-db@1.52.0:
   version "1.52.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
 "mime-db@>= 1.43.0 < 2":
   version "1.53.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.53.0.tgz#3cb63cd820fc29896d9d4e8c32ab4fcd74ccb447"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.53.0.tgz#3cb63cd820fc29896d9d4e8c32ab4fcd74ccb447"
   integrity sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==
 
 mime-types@^2.1.12, mime-types@^2.1.27, mime-types@^2.1.31, mime-types@~2.1.24, mime-types@~2.1.34:
   version "2.1.35"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
   integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
   dependencies:
     mime-db "1.52.0"
 
 mime@1.6.0:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
 mimic-fn@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
+  resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
 mimic-response@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  resolved "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
   integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
 
 min-indent@^1.0.0, min-indent@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  resolved "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
 minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
 minimatch@^8.0.2:
   version "8.0.4"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-8.0.4.tgz#847c1b25c014d4e9a7f68aaf63dedd668a626229"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-8.0.4.tgz#847c1b25c014d4e9a7f68aaf63dedd668a626229"
   integrity sha512-W0Wvr9HyFXZRGIDgCicunpQ299OKXs9RgZfaukz4qAW/pJhcpUfupc9c+OObPOFueNy8VSrZgEmDtk6Kh4WzDA==
   dependencies:
     brace-expansion "^2.0.1"
 
 minimatch@^9.0.1, minimatch@^9.0.4:
   version "9.0.5"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
   integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
   dependencies:
     brace-expansion "^2.0.1"
 
 minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.6:
   version "1.2.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
 minipass@^4.2.4:
   version "4.2.8"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-4.2.8.tgz#f0010f64393ecfc1d1ccb5f582bcaf45f48e1a3a"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz#f0010f64393ecfc1d1ccb5f582bcaf45f48e1a3a"
   integrity sha512-fNzuVyifolSLFL4NzpF+wEF4qrgqaaKX0haXPQEdQ7NKAN+WecoKMHV09YcuL/DHxrUsYQOK3MiuDf7Ip2OXfQ==
 
 "minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
   version "7.1.2"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz#93a9626ce5e5e66bd4db86849e7515e92340a707"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
 mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   version "0.5.3"
-  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
+  resolved "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 
-mobx-react-lite@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.7.tgz#f4e21e18d05c811010dcb1d3007e797924c4d90b"
-  integrity sha512-RjwdseshK9Mg8On5tyJZHtGD+J78ZnCnRaxeQDSiciKVQDUbfZcXhmld0VMxAwvcTnPEHZySGGewm467Fcpreg==
+mobx-react-lite@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-4.1.0.tgz#6a03ed2d94150848213cfebd7d172e123528a972"
+  integrity sha512-QEP10dpHHBeQNv1pks3WnHRCem2Zp636lq54M2nKO2Sarr13pL4u6diQXf65yzXUn0mkk18SyIDCm9UOJYTi1w==
   dependencies:
-    use-sync-external-store "^1.2.0"
+    use-sync-external-store "^1.4.0"
 
 mobx-react@^9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-9.1.1.tgz#b96e0d5d74a3d02fc62729fd344b2a3ad2a88aae"
-  integrity sha512-gVV7AdSrAAxqXOJ2bAbGa5TkPqvITSzaPiiEkzpW4rRsMhSec7C2NBCJYILADHKp2tzOAIETGRsIY0UaCV5aEw==
+  version "9.2.0"
+  resolved "https://registry.npmjs.org/mobx-react/-/mobx-react-9.2.0.tgz#c1e4d1ed406f6664d9de0787c948bac3a7ed5893"
+  integrity sha512-dkGWCx+S0/1mfiuFfHRH8D9cplmwhxOV5CkXMp38u6rQGG2Pv3FWYztS0M7ncR6TyPRQKaTG/pnitInoYE9Vrw==
   dependencies:
-    mobx-react-lite "^4.0.7"
+    mobx-react-lite "^4.1.0"
 
 mobx-utils@^6.0.8:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/mobx-utils/-/mobx-utils-6.1.0.tgz#98f749b1ede18a9f40b89b9b296bcc625b085ddf"
+  resolved "https://registry.npmjs.org/mobx-utils/-/mobx-utils-6.1.0.tgz#98f749b1ede18a9f40b89b9b296bcc625b085ddf"
   integrity sha512-P3qUVDFp3Kv5HXD7EIGJn3zlgJJnN+/ZpFHWQ+u6YNN1xDxY53iMvsQ9fM8kauTVdDmt7ulDgDQtDrOxb1NS9Q==
 
 mobx@^6.10.0, mobx@^6.12.0:
-  version "6.13.5"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.13.5.tgz#957d9df88c7f8b4baa7c6f8bdcb6d68b432a6ed5"
-  integrity sha512-/HTWzW2s8J1Gqt+WmUj5Y0mddZk+LInejADc79NJadrWla3rHzmRHki/mnEUH1AvOmbNTZ1BRbKxr8DSgfdjMA==
+  version "6.13.6"
+  resolved "https://registry.npmjs.org/mobx/-/mobx-6.13.6.tgz#3b80895c7c9df456efc86ae0b6983ccea1da6cc6"
+  integrity sha512-r19KNV0uBN4b+ER8Z0gA4y+MzDYIQ2SvOmn3fUrqPnWXdQfakd9yfbPBDBF/p5I+bd3N5Rk1fHONIvMay+bJGA==
 
 module-details-from-path@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/module-details-from-path/-/module-details-from-path-1.0.3.tgz#114c949673e2a8a35e9d35788527aa37b679da2b"
+  resolved "https://registry.npmjs.org/module-details-from-path/-/module-details-from-path-1.0.3.tgz#114c949673e2a8a35e9d35788527aa37b679da2b"
   integrity sha512-ySViT69/76t8VhE1xXHK6Ch4NcDd26gx0MzKXLO+F7NOtnqH68d9zF94nT8ZWSxXh8ELOERsnJO/sWt1xZYw5A==
 
+moment@^2.29.1:
+  version "2.30.1"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
 morgan@^1.10.0:
   version "1.10.0"
-  resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
+  resolved "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7"
   integrity sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==
   dependencies:
     basic-auth "~2.0.1"
@@ -8910,74 +9086,74 @@ morgan@^1.10.0:
 
 mri@^1.1.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
+  resolved "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
   integrity sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==
 
 ms@2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
   integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
 
 ms@2.1.3, ms@^2.1.1, ms@^2.1.3:
   version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
 mz@^2.7.0:
   version "2.7.0"
-  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  resolved "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
   dependencies:
     any-promise "^1.0.0"
     object-assign "^4.0.1"
     thenify-all "^1.0.0"
 
-nanoid@^3.3.6, nanoid@^3.3.7:
+nanoid@3.3.8, nanoid@^3.3.6, nanoid@^3.3.8:
   version "3.3.8"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
   integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
 
-napi-build-utils@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
-  integrity sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==
+napi-build-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz#13c22c0187fcfccce1461844136372a47ddc027e"
+  integrity sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==
 
 natural-compare-lite@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
+  resolved "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
   integrity sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==
 
 natural-compare@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
 negotiator@0.6.3:
   version "0.6.3"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
+  resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz#58e323a72fedc0d6f9cd4d31fe49f51479590ccd"
   integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
 
 negotiator@~0.6.4:
   version "0.6.4"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.4.tgz#777948e2452651c570b712dd01c23e262713fff7"
+  resolved "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz#777948e2452651c570b712dd01c23e262713fff7"
   integrity sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==
 
 neo-async@^2.6.2:
   version "2.6.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
+  resolved "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
 next-themes@^0.2.1:
   version "0.2.1"
-  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
+  resolved "https://registry.npmjs.org/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
   integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
 
 next@^14.2.20:
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.2.20.tgz#99b551d87ca6505ce63074904cb31a35e21dac9b"
-  integrity sha512-yPvIiWsiyVYqJlSQxwmzMIReXn5HxFNq4+tlVQ812N1FbvhmE+fDpIAD7bcS2mGYQwPJ5vAsQouyme2eKsxaug==
+  version "14.2.24"
+  resolved "https://registry.npmjs.org/next/-/next-14.2.24.tgz#02294330af05705aca19b9aebcfe10ac61271d16"
+  integrity sha512-En8VEexSJ0Py2FfVnRRh8gtERwDRaJGNvsvad47ShkC2Yi8AXQPXEA2vKoDJlGFSj5WE5SyF21zNi4M5gyi+SQ==
   dependencies:
-    "@next/env" "14.2.20"
+    "@next/env" "14.2.24"
     "@swc/helpers" "0.5.5"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
@@ -8985,65 +9161,65 @@ next@^14.2.20:
     postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.2.20"
-    "@next/swc-darwin-x64" "14.2.20"
-    "@next/swc-linux-arm64-gnu" "14.2.20"
-    "@next/swc-linux-arm64-musl" "14.2.20"
-    "@next/swc-linux-x64-gnu" "14.2.20"
-    "@next/swc-linux-x64-musl" "14.2.20"
-    "@next/swc-win32-arm64-msvc" "14.2.20"
-    "@next/swc-win32-ia32-msvc" "14.2.20"
-    "@next/swc-win32-x64-msvc" "14.2.20"
+    "@next/swc-darwin-arm64" "14.2.24"
+    "@next/swc-darwin-x64" "14.2.24"
+    "@next/swc-linux-arm64-gnu" "14.2.24"
+    "@next/swc-linux-arm64-musl" "14.2.24"
+    "@next/swc-linux-x64-gnu" "14.2.24"
+    "@next/swc-linux-x64-musl" "14.2.24"
+    "@next/swc-win32-arm64-msvc" "14.2.24"
+    "@next/swc-win32-ia32-msvc" "14.2.24"
+    "@next/swc-win32-x64-msvc" "14.2.24"
 
 no-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
+  resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
   integrity sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==
   dependencies:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
 node-abi@^3.3.0, node-abi@^3.61.0:
-  version "3.71.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-3.71.0.tgz#52d84bbcd8575efb71468fbaa1f9a49b2c242038"
-  integrity sha512-SZ40vRiy/+wRTf21hxkkEjPJZpARzUMVcJoQse2EF8qkUWbbO2z7vd5oA/H6bVH6SZQ5STGcu0KRDS7biNRfxw==
+  version "3.74.0"
+  resolved "https://registry.npmjs.org/node-abi/-/node-abi-3.74.0.tgz#5bfb4424264eaeb91432d2adb9da23c63a301ed0"
+  integrity sha512-c5XK0MjkGBrQPGYG24GBADZud0NCbznxNx0ZkS+ebUTrmV1qTDxPxSL8zEAPURXSbLRWVexxmP4986BziahL5w==
   dependencies:
     semver "^7.3.5"
 
 node-abort-controller@^3.0.1:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"
+  resolved "https://registry.npmjs.org/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"
   integrity sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==
 
 node-addon-api@^6.1.0:
   version "6.1.0"
-  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76"
+  resolved "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz#ac8470034e58e67d0c6f1204a18ae6995d9c0d76"
   integrity sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==
 
-node-fetch@^2.6.12, node-fetch@^2.6.7:
+node-fetch@^2.6.7, node-fetch@^2.7.0:
   version "2.7.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
+  resolved "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
   dependencies:
     whatwg-url "^5.0.0"
 
 node-html-parser@^6.1.13:
   version "6.1.13"
-  resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-6.1.13.tgz#a1df799b83df5c6743fcd92740ba14682083b7e4"
+  resolved "https://registry.npmjs.org/node-html-parser/-/node-html-parser-6.1.13.tgz#a1df799b83df5c6743fcd92740ba14682083b7e4"
   integrity sha512-qIsTMOY4C/dAa5Q5vsobRpOOvPfC4pB61UVW2uSwZNUp0QU/jCekTal1vMmbO0DgdHeLUJpv/ARmDqErVxA3Sg==
   dependencies:
     css-select "^5.1.0"
     he "1.2.0"
 
-node-releases@^2.0.18:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
-  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
+node-releases@^2.0.19:
+  version "2.0.19"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
+  integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
 
 nodemon@^3.1.7:
-  version "3.1.7"
-  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-3.1.7.tgz#07cb1f455f8bece6a499e0d72b5e029485521a54"
-  integrity sha512-hLj7fuMow6f0lbB0cD14Lz2xNjwsyruH251Pk4t/yIitCFJbmY1myuLlHm/q06aST4jg6EgAh74PIBBrRqpVAQ==
+  version "3.1.9"
+  resolved "https://registry.npmjs.org/nodemon/-/nodemon-3.1.9.tgz#df502cdc3b120e1c3c0c6e4152349019efa7387b"
+  integrity sha512-hdr1oIb2p6ZSxu3PB2JWWYS7ZQ0qvaZsc3hK8DR8f02kRzc8rjYmxAIvdz+aYC+8F2IjNaB7HMcSDg8nQpJxyg==
   dependencies:
     chokidar "^3.5.2"
     debug "^4"
@@ -9058,68 +9234,68 @@ nodemon@^3.1.7:
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
 normalize-range@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
 normalize-svg-path@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c"
+  resolved "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz#0e614eca23c39f0cffe821d6be6cd17e569a766c"
   integrity sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==
   dependencies:
     svg-arc-to-cubic-bezier "^3.0.0"
 
 normalize.css@^8.0.1:
   version "8.0.1"
-  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
   integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
 
 npm-run-path@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
+  resolved "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
     path-key "^3.0.0"
 
 nprogress@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  resolved "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
   integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
 
 nth-check@^2.0.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
+  resolved "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz#c9eab428effce36cd6b92c924bdb000ef1f1ed1d"
   integrity sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==
   dependencies:
     boolbase "^1.0.0"
 
-nwsapi@^2.2.12:
+nwsapi@^2.2.16:
   version "2.2.16"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.16.tgz#177760bba02c351df1d2644e220c31dfec8cdb43"
+  resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.16.tgz#177760bba02c351df1d2644e220c31dfec8cdb43"
   integrity sha512-F1I/bimDpj3ncaNDhfyMWuFqmQDBwDB0Fogc2qpL3BWvkQteFD/8BzWuIRl83rq0DXfm8SGt/HFhLXZyljTXcQ==
 
 object-assign@^4, object-assign@^4.0.1, object-assign@^4.1.1:
   version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
 object-hash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
+  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-inspect@^1.13.1, object-inspect@^1.13.3:
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.3.tgz#f14c183de51130243d6d18ae149375ff50ea488a"
-  integrity sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==
+object-inspect@^1.13.3:
+  version "1.13.4"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213"
+  integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
 
 object-is@^1.1.5:
   version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
+  resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
   integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
   dependencies:
     call-bind "^1.0.7"
@@ -9127,22 +9303,24 @@ object-is@^1.1.5:
 
 object-keys@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
+  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object.assign@^4.1.4, object.assign@^4.1.5:
-  version "4.1.5"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
-  integrity sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==
+object.assign@^4.1.4, object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz#8c14ca1a424c6a561b0bb2a22f66f5049a945d3d"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
   dependencies:
-    call-bind "^1.0.5"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
     define-properties "^1.2.1"
-    has-symbols "^1.0.3"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
     object-keys "^1.1.1"
 
 object.entries@^1.1.8:
   version "1.1.8"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
+  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz#bffe6f282e01f4d17807204a24f8edd823599c41"
   integrity sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==
   dependencies:
     call-bind "^1.0.7"
@@ -9151,7 +9329,7 @@ object.entries@^1.1.8:
 
 object.fromentries@^2.0.8:
   version "2.0.8"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
+  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz#f7195d8a9b97bd95cbc1999ea939ecd1a2b00c65"
   integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
   dependencies:
     call-bind "^1.0.7"
@@ -9161,73 +9339,81 @@ object.fromentries@^2.0.8:
 
 object.groupby@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
+  resolved "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz#9b125c36238129f6f7b61954a1e7176148d5002e"
   integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
   dependencies:
     call-bind "^1.0.7"
     define-properties "^1.2.1"
     es-abstract "^1.23.2"
 
-object.values@^1.1.6, object.values@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
-  integrity sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==
+object.values@^1.1.6, object.values@^1.2.0, object.values@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz#deed520a50809ff7f75a7cfd4bc64c7a038c6216"
+  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
 objectorarray@^1.0.5:
   version "1.0.5"
-  resolved "https://registry.yarnpkg.com/objectorarray/-/objectorarray-1.0.5.tgz#2c05248bbefabd8f43ad13b41085951aac5e68a5"
+  resolved "https://registry.npmjs.org/objectorarray/-/objectorarray-1.0.5.tgz#2c05248bbefabd8f43ad13b41085951aac5e68a5"
   integrity sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==
 
 obuf@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
+  resolved "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
 on-exit-leak-free@^2.1.0:
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz#fed195c9ebddb7d9e4c3842f93f281ac8dadd3b8"
+  resolved "https://registry.npmjs.org/on-exit-leak-free/-/on-exit-leak-free-2.1.2.tgz#fed195c9ebddb7d9e4c3842f93f281ac8dadd3b8"
   integrity sha512-0eJJY6hXLGf1udHwfNftBqH+g73EU4B504nZeKpz1sYRKafAghwxEJunB2O7rDZkL4PGfsMVnTXZ2EjibbqcsA==
 
 on-finished@2.4.1:
   version "2.4.1"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
   integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
   dependencies:
     ee-first "1.1.1"
 
 on-finished@~2.3.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+  resolved "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
   integrity sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==
   dependencies:
     ee-first "1.1.1"
 
 on-headers@~1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
+  resolved "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
   integrity sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==
 
 once@^1.3.0, once@^1.3.1, once@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
 
+one-time@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/one-time/-/one-time-1.0.0.tgz#e06bc174aed214ed58edede573b433bbf827cb45"
+  integrity sha512-5DXOiRKwuSEcQ/l0kGCF6Q3jcADFv5tSmRaJck/OqkVFcOzutB134KRSfF0xDrL39MNnqxbHBbUUcjZIhTgb2g==
+  dependencies:
+    fn.name "1.x.x"
+
 onetime@^5.1.2:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
   integrity sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==
   dependencies:
     mimic-fn "^2.1.0"
 
 open@^8.0.4:
   version "8.4.2"
-  resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
+  resolved "https://registry.npmjs.org/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
   integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
   dependencies:
     define-lazy-prop "^2.0.0"
@@ -9236,7 +9422,7 @@ open@^8.0.4:
 
 optionator@^0.9.3:
   version "0.9.4"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz#7ea1c1a5d91d764fb282139c88fe11e182a3a734"
   integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
   dependencies:
     deep-is "^0.1.3"
@@ -9248,79 +9434,90 @@ optionator@^0.9.3:
 
 orderedmap@^2.0.0:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/orderedmap/-/orderedmap-2.1.1.tgz#61481269c44031c449915497bf5a4ad273c512d2"
+  resolved "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz#61481269c44031c449915497bf5a4ad273c512d2"
   integrity sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==
 
-overlap-area@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/overlap-area/-/overlap-area-1.1.0.tgz#1fcaa21bdb9cb1ace973d9aa299ae6b56557a4c2"
-  integrity sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==
+outlayer@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz#29863b6de10ea5dadfffcadfa0d728907387e9a2"
+  integrity sha512-+GplXsCQ3VrbGujAeHEzP9SXsBmJxzn/YdDSQZL0xqBmAWBmortu2Y9Gwdp9J0bgDQ8/YNIPMoBM13nTwZfAhw==
   dependencies:
-    "@daybrush/utils" "^1.7.1"
+    ev-emitter "^1.0.0"
+    fizzy-ui-utils "^2.0.0"
+    get-size "^2.0.2"
+
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz#e4006910a2bf913585289676eebd6f390cf51358"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
 
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
   dependencies:
     p-try "^2.0.0"
 
 p-limit@^3.0.2:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
   dependencies:
     yocto-queue "^0.1.0"
 
 p-locate@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
   integrity sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==
   dependencies:
     p-limit "^2.0.0"
 
 p-locate@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
   integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
   dependencies:
     p-limit "^2.2.0"
 
 p-locate@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
   integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
   dependencies:
     p-limit "^3.0.2"
 
 p-map@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
+  resolved "https://registry.npmjs.org/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
   integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
 
 p-try@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
+  resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
 package-json-from-dist@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
+  resolved "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz#4f1471a010827a86f94cfd9b0727e36d267de505"
   integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
 
 pako@^0.2.5:
   version "0.2.9"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  resolved "https://registry.npmjs.org/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
   integrity sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==
 
 pako@~1.0.5:
   version "1.0.11"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
 param-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  resolved "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
   integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
   dependencies:
     dot-case "^3.0.4"
@@ -9328,14 +9525,14 @@ param-case@^3.0.4:
 
 parent-module@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
   integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
   dependencies:
     callsites "^3.0.0"
 
 parse-json@^5.0.0:
   version "5.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
   integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
@@ -9345,24 +9542,24 @@ parse-json@^5.0.0:
 
 parse-svg-path@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb"
+  resolved "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz#7a7ec0d1eb06fa5325c7d3e009b859a09b5d49eb"
   integrity sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==
 
-parse5@^7.1.2:
+parse5@^7.2.1:
   version "7.2.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.2.1.tgz#8928f55915e6125f430cc44309765bf17556a33a"
+  resolved "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz#8928f55915e6125f430cc44309765bf17556a33a"
   integrity sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==
   dependencies:
     entities "^4.5.0"
 
 parseurl@~1.3.3:
   version "1.3.3"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
+  resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
 pascal-case@^3.1.2:
   version "3.1.2"
-  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
+  resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
   integrity sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==
   dependencies:
     no-case "^3.0.4"
@@ -9370,12 +9567,12 @@ pascal-case@^3.1.2:
 
 path-browserify@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
   integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
 
 path-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
+  resolved "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
   integrity sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==
   dependencies:
     dot-case "^3.0.4"
@@ -9383,32 +9580,32 @@ path-case@^3.0.4:
 
 path-exists@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
   integrity sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==
 
 path-exists@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
 path-is-absolute@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
 
 path-key@^3.0.0, path-key@^3.1.0:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-parse@^1.0.7:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-scurry@^1.10.1, path-scurry@^1.11.1, path-scurry@^1.6.1:
   version "1.11.1"
-  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
+  resolved "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz#7960a668888594a0720b12a911d1a742ab9f11d2"
   integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
   dependencies:
     lru-cache "^10.2.0"
@@ -9416,42 +9613,42 @@ path-scurry@^1.10.1, path-scurry@^1.11.1, path-scurry@^1.6.1:
 
 path-to-regexp@0.1.12:
   version "0.1.12"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  resolved "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
   integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
 
 path-type@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-path-type@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-5.0.0.tgz#14b01ed7aea7ddf9c7c3f46181d4d04f9c785bb8"
-  integrity sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==
+path-type@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-6.0.0.tgz#2f1bb6791a91ce99194caede5d6c5920ed81eb51"
+  integrity sha512-Vj7sf++t5pBD637NSfkxpHSMfWaeig5+DKWLhcqIYx6mWQz5hdJTGDVMQiJcw1ZYkhs7AazKDGpRVji1LJCZUQ==
 
 pathval@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.0.tgz#7e2550b422601d4f6b8e26f1301bc8f15a741a25"
+  resolved "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz#7e2550b422601d4f6b8e26f1301bc8f15a741a25"
   integrity sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==
 
 pg-int8@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/pg-int8/-/pg-int8-1.0.1.tgz#943bd463bf5b71b4170115f80f8efc9a0c0eb78c"
+  resolved "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz#943bd463bf5b71b4170115f80f8efc9a0c0eb78c"
   integrity sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==
 
 pg-numeric@1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/pg-numeric/-/pg-numeric-1.0.2.tgz#816d9a44026086ae8ae74839acd6a09b0636aa3a"
+  resolved "https://registry.npmjs.org/pg-numeric/-/pg-numeric-1.0.2.tgz#816d9a44026086ae8ae74839acd6a09b0636aa3a"
   integrity sha512-BM/Thnrw5jm2kKLE5uJkXqqExRUY/toLHda65XgFTBTFYZyopbKjBe29Ii3RbkvlsMoFwD+tHeGaCjjv0gHlyw==
 
 pg-protocol@*:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/pg-protocol/-/pg-protocol-1.7.0.tgz#ec037c87c20515372692edac8b63cf4405448a93"
-  integrity sha512-hTK/mE36i8fDDhgDFjy6xNOG+LCorxLG3WO17tku+ij6sVHXh1jQUJ8hYAnRhNla4QVD2H8er/FOjc/+EgC6yQ==
+  version "1.7.1"
+  resolved "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.7.1.tgz#aad61a6f927b51e89dcf721408b76c0e536d43dc"
+  integrity sha512-gjTHWGYWsEgy9MsY0Gp6ZJxV24IjDqdpTW7Eh0x+WfJLFsm/TJx1MzL6T0D88mBvkpxotCQ6TwW6N+Kko7lhgQ==
 
 pg-types@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/pg-types/-/pg-types-2.2.0.tgz#2d0250d636454f7cfa3b6ae0382fdfa8063254a3"
+  resolved "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz#2d0250d636454f7cfa3b6ae0382fdfa8063254a3"
   integrity sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==
   dependencies:
     pg-int8 "1.0.1"
@@ -9462,7 +9659,7 @@ pg-types@^2.2.0:
 
 pg-types@^4.0.1:
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/pg-types/-/pg-types-4.0.2.tgz#399209a57c326f162461faa870145bb0f918b76d"
+  resolved "https://registry.npmjs.org/pg-types/-/pg-types-4.0.2.tgz#399209a57c326f162461faa870145bb0f918b76d"
   integrity sha512-cRL3JpS3lKMGsKaWndugWQoLOCoP+Cic8oseVcbr0qhPzYD5DWXK+RZ9LY9wxRf7RQia4SCwQlXk0q6FCPrVng==
   dependencies:
     pg-int8 "1.0.1"
@@ -9473,42 +9670,42 @@ pg-types@^4.0.1:
     postgres-interval "^3.0.0"
     postgres-range "^1.1.1"
 
-picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0, picocolors@^1.1.1:
+picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 picomatch@^4.0.2:
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz#77c742931e8f3b8820946c76cd0c1f13730d1dab"
   integrity sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==
 
 pify@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
+  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
 pify@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
 pino-abstract-transport@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pino-abstract-transport/-/pino-abstract-transport-2.0.0.tgz#de241578406ac7b8a33ce0d77ae6e8a0b3b68a60"
+  resolved "https://registry.npmjs.org/pino-abstract-transport/-/pino-abstract-transport-2.0.0.tgz#de241578406ac7b8a33ce0d77ae6e8a0b3b68a60"
   integrity sha512-F63x5tizV6WCh4R6RHyi2Ml+M70DNRXt/+HANowMflpgGFMAym/VKm6G7ZOQRjqN7XbGxK1Lg9t6ZrtzOaivMw==
   dependencies:
     split2 "^4.0.0"
 
 pino-http@^10.3.0:
-  version "10.3.0"
-  resolved "https://registry.yarnpkg.com/pino-http/-/pino-http-10.3.0.tgz#c1999d9a5243748cdb1f66833a1f566c0cc40ef2"
-  integrity sha512-kaHQqt1i5S9LXWmyuw6aPPqYW/TjoDPizPs4PnDW4hSpajz2Uo/oisNliLf7We1xzpiLacdntmw8yaZiEkppQQ==
+  version "10.4.0"
+  resolved "https://registry.npmjs.org/pino-http/-/pino-http-10.4.0.tgz#a97911138fd5170e6da92ae8882c2a6357e84115"
+  integrity sha512-vjQsKBE+VN1LVchjbfLE7B6nBeGASZNRNKsR68VS0DolTm5R3zo+47JX1wjm0O96dcbvA7vnqt8YqOWlG5nN0w==
   dependencies:
     get-caller-file "^2.0.5"
     pino "^9.0.0"
@@ -9517,7 +9714,7 @@ pino-http@^10.3.0:
 
 pino-pretty@^11.2.2:
   version "11.3.0"
-  resolved "https://registry.yarnpkg.com/pino-pretty/-/pino-pretty-11.3.0.tgz#390b3be044cf3d2e9192c7d19d44f6b690468f2e"
+  resolved "https://registry.npmjs.org/pino-pretty/-/pino-pretty-11.3.0.tgz#390b3be044cf3d2e9192c7d19d44f6b690468f2e"
   integrity sha512-oXwn7ICywaZPHmu3epHGU2oJX4nPmKvHvB/bwrJHlGcbEWaVcotkpyVHMKLKmiVryWYByNp0jpgAcXpFJDXJzA==
   dependencies:
     colorette "^2.0.7"
@@ -9537,13 +9734,13 @@ pino-pretty@^11.2.2:
 
 pino-std-serializers@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/pino-std-serializers/-/pino-std-serializers-7.0.0.tgz#7c625038b13718dbbd84ab446bd673dc52259e3b"
+  resolved "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-7.0.0.tgz#7c625038b13718dbbd84ab446bd673dc52259e3b"
   integrity sha512-e906FRY0+tV27iq4juKzSYPbUj2do2X2JX4EzSca1631EB2QJQUqGbDuERal7LCtOpxl6x3+nvo9NPZcmjkiFA==
 
 pino@^9.0.0:
-  version "9.5.0"
-  resolved "https://registry.yarnpkg.com/pino/-/pino-9.5.0.tgz#a7ef0fea868d22d52d8a4ce46e6e03c5dc46fdd6"
-  integrity sha512-xSEmD4pLnV54t0NOUN16yCl7RIB1c5UUOse5HSyEXtBp+FgFQyPeDutc+Q2ZO7/22vImV7VfEjH/1zV2QuqvYw==
+  version "9.6.0"
+  resolved "https://registry.npmjs.org/pino/-/pino-9.6.0.tgz#6bc628159ba0cc81806d286718903b7fc6b13169"
+  integrity sha512-i85pKRCt4qMjZ1+L7sy2Ag4t1atFcdbEt76+7iRJn1g2BvsnRMGu9p8pivl9fs63M2kF/A0OacFZhTub+m/qMg==
   dependencies:
     atomic-sleep "^1.0.0"
     fast-redact "^3.1.1"
@@ -9559,43 +9756,43 @@ pino@^9.0.0:
 
 pirates@^4.0.1:
   version "4.0.6"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
+  resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
 
 pkg-dir@^4.1.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
+  resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
   integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
   dependencies:
     find-up "^4.0.0"
 
 pkg-up@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  resolved "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
   integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
   dependencies:
     find-up "^3.0.0"
 
 polished@^4.2.2:
   version "4.3.1"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548"
+  resolved "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548"
   integrity sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==
   dependencies:
     "@babel/runtime" "^7.17.8"
 
 popper.js@^1.14.4, popper.js@^1.16.1:
   version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
+  resolved "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
 
 possible-typed-array-names@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
-  integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz#93e3582bc0e5426586d9d07b79ee40fc841de4ae"
+  integrity sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==
 
 postcss-cli@^11.0.0:
   version "11.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-11.0.0.tgz#649f4b9af447501feb6cbca7f7505a132f90442b"
+  resolved "https://registry.npmjs.org/postcss-cli/-/postcss-cli-11.0.0.tgz#649f4b9af447501feb6cbca7f7505a132f90442b"
   integrity sha512-xMITAI7M0u1yolVcXJ9XTZiO9aO49mcoKQy6pCDFdMh9kGqhzLVpWxeD/32M/QBmkhcGypZFFOLNLmIW4Pg4RA==
   dependencies:
     chokidar "^3.3.0"
@@ -9613,7 +9810,7 @@ postcss-cli@^11.0.0:
 
 postcss-import@^15.1.0:
   version "15.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
+  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz#41c64ed8cc0e23735a9698b3249ffdbf704adc70"
   integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
   dependencies:
     postcss-value-parser "^4.0.0"
@@ -9622,14 +9819,14 @@ postcss-import@^15.1.0:
 
 postcss-js@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2"
   integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
   dependencies:
     camelcase-css "^2.0.1"
 
 postcss-load-config@^4.0.1, postcss-load-config@^4.0.2:
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
   integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
   dependencies:
     lilconfig "^3.0.0"
@@ -9637,7 +9834,7 @@ postcss-load-config@^4.0.1, postcss-load-config@^4.0.2:
 
 postcss-load-config@^5.0.0:
   version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-5.1.0.tgz#4ded23410da973e05edae9d41fa99bb5c1d5477f"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.1.0.tgz#4ded23410da973e05edae9d41fa99bb5c1d5477f"
   integrity sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==
   dependencies:
     lilconfig "^3.1.1"
@@ -9645,13 +9842,13 @@ postcss-load-config@^5.0.0:
 
 postcss-modules-extract-imports@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
+  resolved "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
   integrity sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==
 
 postcss-modules-local-by-default@^4.0.5:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.1.0.tgz#b0db6bc81ffc7bdc52eb0f84d6ca0bedf0e36d21"
-  integrity sha512-rm0bdSv4jC3BDma3s9H19ZddW0aHX6EoqwDYU2IfZhRN+53QrufTRo2IdkAbRqLx4R2IYbZnbjKKxg4VN5oU9Q==
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz#d150f43837831dae25e4085596e84f6f5d6ec368"
+  integrity sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==
   dependencies:
     icss-utils "^5.0.0"
     postcss-selector-parser "^7.0.0"
@@ -9659,28 +9856,28 @@ postcss-modules-local-by-default@^4.0.5:
 
 postcss-modules-scope@^3.2.0:
   version "3.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz#1bbccddcb398f1d7a511e0a2d1d047718af4078c"
+  resolved "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz#1bbccddcb398f1d7a511e0a2d1d047718af4078c"
   integrity sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==
   dependencies:
     postcss-selector-parser "^7.0.0"
 
 postcss-modules-values@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  resolved "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
   integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
   dependencies:
     icss-utils "^5.0.0"
 
 postcss-nested@^6.0.1, postcss-nested@^6.2.0:
   version "6.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
+  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
   integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
   dependencies:
     postcss-selector-parser "^6.1.1"
 
 postcss-reporter@^7.0.0:
   version "7.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-7.1.0.tgz#5ec476d224e2fe25a054e3c66d9b2901d4fab422"
+  resolved "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-7.1.0.tgz#5ec476d224e2fe25a054e3c66d9b2901d4fab422"
   integrity sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==
   dependencies:
     picocolors "^1.0.0"
@@ -9688,104 +9885,104 @@ postcss-reporter@^7.0.0:
 
 postcss-selector-parser@6.0.10:
   version "6.0.10"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
   integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
+postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
   version "6.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
   integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
 postcss-selector-parser@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-7.0.0.tgz#41bd8b56f177c093ca49435f65731befe25d6b9c"
-  integrity sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz#4d6af97eba65d73bc4d84bcb343e865d7dd16262"
+  integrity sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==
   dependencies:
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
 postcss@8.4.31:
   version "8.4.31"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
   dependencies:
     nanoid "^3.3.6"
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.23, postcss@^8.4.33, postcss@^8.4.38, postcss@^8.4.47:
-  version "8.4.49"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
-  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+postcss@^8.4.33, postcss@^8.4.38, postcss@^8.4.47:
+  version "8.5.2"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.5.2.tgz#e7b99cb9d2ec3e8dd424002e7c16517cb2b846bd"
+  integrity sha512-MjOadfU3Ys9KYoX0AdkBlFEF1Vx37uCCeN4ZHnmwm9FfpbsGWMZeBLMmmpY+6Ocqod7mkdZ0DT31OlbsFrLlkA==
   dependencies:
-    nanoid "^3.3.7"
+    nanoid "^3.3.8"
     picocolors "^1.1.1"
     source-map-js "^1.2.1"
 
 postgres-array@~2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postgres-array/-/postgres-array-2.0.0.tgz#48f8fce054fbc69671999329b8834b772652d82e"
+  resolved "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz#48f8fce054fbc69671999329b8834b772652d82e"
   integrity sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==
 
 postgres-array@~3.0.1:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/postgres-array/-/postgres-array-3.0.2.tgz#68d6182cb0f7f152a7e60dc6a6889ed74b0a5f98"
+  resolved "https://registry.npmjs.org/postgres-array/-/postgres-array-3.0.2.tgz#68d6182cb0f7f152a7e60dc6a6889ed74b0a5f98"
   integrity sha512-6faShkdFugNQCLwucjPcY5ARoW1SlbnrZjmGl0IrrqewpvxvhSLHimCVzqeuULCbG0fQv7Dtk1yDbG3xv7Veog==
 
 postgres-bytea@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postgres-bytea/-/postgres-bytea-1.0.0.tgz#027b533c0aa890e26d172d47cf9ccecc521acd35"
+  resolved "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz#027b533c0aa890e26d172d47cf9ccecc521acd35"
   integrity sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==
 
 postgres-bytea@~3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postgres-bytea/-/postgres-bytea-3.0.0.tgz#9048dc461ac7ba70a6a42d109221619ecd1cb089"
+  resolved "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-3.0.0.tgz#9048dc461ac7ba70a6a42d109221619ecd1cb089"
   integrity sha512-CNd4jim9RFPkObHSjVHlVrxoVQXz7quwNFpz7RY1okNNme49+sVyiTvTRobiLV548Hx/hb1BG+iE7h9493WzFw==
   dependencies:
     obuf "~1.1.2"
 
 postgres-date@~1.0.4:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/postgres-date/-/postgres-date-1.0.7.tgz#51bc086006005e5061c591cee727f2531bf641a8"
+  resolved "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz#51bc086006005e5061c591cee727f2531bf641a8"
   integrity sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==
 
 postgres-date@~2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postgres-date/-/postgres-date-2.1.0.tgz#b85d3c1fb6fb3c6c8db1e9942a13a3bf625189d0"
+  resolved "https://registry.npmjs.org/postgres-date/-/postgres-date-2.1.0.tgz#b85d3c1fb6fb3c6c8db1e9942a13a3bf625189d0"
   integrity sha512-K7Juri8gtgXVcDfZttFKVmhglp7epKb1K4pgrkLxehjqkrgPhfG6OO8LHLkfaqkbpjNRnra018XwAr1yQFWGcA==
 
 postgres-interval@^1.1.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postgres-interval/-/postgres-interval-1.2.0.tgz#b460c82cb1587507788819a06aa0fffdb3544695"
+  resolved "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz#b460c82cb1587507788819a06aa0fffdb3544695"
   integrity sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==
   dependencies:
     xtend "^4.0.0"
 
 postgres-interval@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postgres-interval/-/postgres-interval-3.0.0.tgz#baf7a8b3ebab19b7f38f07566c7aab0962f0c86a"
+  resolved "https://registry.npmjs.org/postgres-interval/-/postgres-interval-3.0.0.tgz#baf7a8b3ebab19b7f38f07566c7aab0962f0c86a"
   integrity sha512-BSNDnbyZCXSxgA+1f5UU2GmwhoI0aU5yMxRGO8CdFEcY2BQF9xm/7MqKnYoM1nJDk8nONNWDk9WeSmePFhQdlw==
 
 postgres-range@^1.1.1:
   version "1.1.4"
-  resolved "https://registry.yarnpkg.com/postgres-range/-/postgres-range-1.1.4.tgz#a59c5f9520909bcec5e63e8cf913a92e4c952863"
+  resolved "https://registry.npmjs.org/postgres-range/-/postgres-range-1.1.4.tgz#a59c5f9520909bcec5e63e8cf913a92e4c952863"
   integrity sha512-i/hbxIE9803Alj/6ytL7UHQxRvZkI9O4Sy+J3HGc4F4oo/2eQAjTSNJ0bfxyse3bH0nuVesCk+3IRLaMtG3H6w==
 
 posthog-js@^1.131.3:
-  version "1.194.6"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.194.6.tgz#58fd5d2b1b4a125573ba6fcf546e0fb92142085d"
-  integrity sha512-5g5n7FjWLha/QWVTeWeMErGff21v4/V3wYCZ2z8vAbHaCyHkaDBEbuM756jMFBQMsq3HJcDX9mlxi2HhAHxq2A==
+  version "1.217.1"
+  resolved "https://registry.npmjs.org/posthog-js/-/posthog-js-1.217.1.tgz#f8919cc05ed4851896a47a5a0c949e7ae91731c4"
+  integrity sha512-qttaRWe3WW7VL/MIG1Usg65Dzohw9Ylf8IVWyX36oHH9k0kzriPUl4Nx08P+oV0esbWWaCsljRzIiww4p+HOMQ==
   dependencies:
     core-js "^3.38.1"
     fflate "^0.4.8"
@@ -9793,21 +9990,21 @@ posthog-js@^1.131.3:
     web-vitals "^4.2.0"
 
 preact@^10.19.3:
-  version "10.25.1"
-  resolved "https://registry.yarnpkg.com/preact/-/preact-10.25.1.tgz#1c4b84253c42dee874bfbf6a92bdce45e3662665"
-  integrity sha512-frxeZV2vhQSohQwJ7FvlqC40ze89+8friponWUFeVEkaCfhC6Eu4V0iND5C9CXz8JLndV07QRDeXzH1+Anz5Og==
+  version "10.25.4"
+  resolved "https://registry.npmjs.org/preact/-/preact-10.25.4.tgz#c1d00bee9d7b9dcd06a2311d9951973b506ae8ac"
+  integrity sha512-jLdZDb+Q+odkHJ+MpW/9U5cODzqnB+fy2EiHSZES7ldV5LK7yjlVzTp7R8Xy6W6y75kfK8iWYtFVH7lvjwrCMA==
 
 prebuild-install@^7.1.1:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.2.tgz#a5fd9986f5a6251fbc47e1e5c65de71e68c0a056"
-  integrity sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==
+  version "7.1.3"
+  resolved "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz#d630abad2b147443f20a212917beae68b8092eec"
+  integrity sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==
   dependencies:
     detect-libc "^2.0.0"
     expand-template "^2.0.3"
     github-from-package "0.0.0"
     minimist "^1.2.3"
     mkdirp-classic "^0.5.3"
-    napi-build-utils "^1.0.1"
+    napi-build-utils "^2.0.0"
     node-abi "^3.3.0"
     pump "^3.0.0"
     rc "^1.2.7"
@@ -9817,32 +10014,32 @@ prebuild-install@^7.1.1:
 
 prelude-ls@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 prettier-plugin-tailwindcss@^0.3.0:
   version "0.3.0"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz#8299b307c7f6467f52732265579ed9375be6c818"
+  resolved "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.3.0.tgz#8299b307c7f6467f52732265579ed9375be6c818"
   integrity sha512-009/Xqdy7UmkcTBpwlq7jsViDqXAYSOMLDrHAdTMlVZOrKfM2o9Ci7EMWTMZ7SkKBFTG04UM9F9iM2+4i6boDA==
 
 prettier-plugin-tailwindcss@^0.5.4:
   version "0.5.14"
-  resolved "https://registry.yarnpkg.com/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz#4482eed357d5e22eac259541c70aca5a4c7b9d5c"
+  resolved "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.14.tgz#4482eed357d5e22eac259541c70aca5a4c7b9d5c"
   integrity sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==
 
 prettier@^2.8.8:
   version "2.8.8"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 prettier@^3.2.5, prettier@latest:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f"
-  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.5.0.tgz#50325a28887c6dfdf2ca3f8eaba02b66a8429ca7"
+  integrity sha512-quyMrVt6svPS7CjQ9gKb3GLEX/rl3BCL2oa/QkNcXv4YNVBC9olt3s+H7ukto06q7B1Qz46PbrKLO34PR6vXcA==
 
 pretty-error@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
+  resolved "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
   integrity sha512-AoJ5YMAcXKYxKhuJGdcvse+Voc6v1RgnsR3nWcYU7q4t6z0Q6T86sv5Zq8VIRbOWWFpvdGE83LtdSMNd+6Y0xw==
   dependencies:
     lodash "^4.17.20"
@@ -9850,7 +10047,7 @@ pretty-error@^4.0.0:
 
 pretty-format@^27.0.2:
   version "27.5.1"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
   integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
   dependencies:
     ansi-regex "^5.0.1"
@@ -9859,27 +10056,27 @@ pretty-format@^27.0.2:
 
 pretty-hrtime@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
+  resolved "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==
 
 process-warning@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/process-warning/-/process-warning-4.0.0.tgz#581e3a7a1fb456c5f4fd239f76bce75897682d5a"
-  integrity sha512-/MyYDxttz7DfGMMHiysAsFE4qF+pQYAA8ziO/3NcRVrQ5fSk+Mns4QZA/oRPFzvcqNoVJXQNWNAsdwBXLUkQKw==
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/process-warning/-/process-warning-4.0.1.tgz#5c1db66007c67c756e4e09eb170cdece15da32fb"
+  integrity sha512-3c2LzQ3rY9d0hc1emcsHhfT9Jwz0cChib/QN89oME2R451w5fy3f0afAhERFZAwrbDU43wk12d0ORBpDVME50Q==
 
 process@^0.11.10:
   version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
+  resolved "https://registry.npmjs.org/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
 progress@^2.0.3:
   version "2.0.3"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
+  resolved "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
 
-prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
   dependencies:
     loose-envify "^1.4.0"
@@ -9888,31 +10085,31 @@ prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2,
 
 property-information@^6.0.0:
   version "6.5.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-6.5.0.tgz#6212fbb52ba757e92ef4fb9d657563b933b7ffec"
+  resolved "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz#6212fbb52ba757e92ef4fb9d657563b933b7ffec"
   integrity sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==
 
 prosemirror-changeset@^2.2.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz#dae94b63aec618fac7bb9061648e6e2a79988383"
+  resolved "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.2.1.tgz#dae94b63aec618fac7bb9061648e6e2a79988383"
   integrity sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==
   dependencies:
     prosemirror-transform "^1.0.0"
 
 prosemirror-codemark@^0.4.2:
   version "0.4.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-codemark/-/prosemirror-codemark-0.4.2.tgz#b4d0a57c0f1f6c6667e2a1ae7cfb6ba031dfb2e5"
+  resolved "https://registry.npmjs.org/prosemirror-codemark/-/prosemirror-codemark-0.4.2.tgz#b4d0a57c0f1f6c6667e2a1ae7cfb6ba031dfb2e5"
   integrity sha512-4n+PnGQToa/vTjn0OiivUvE8/moLtguUAfry8UA4Q8p47MhqT2Qpf2zBLustX5Upi4mSp3z1ZYBqLLovZC6abA==
 
 prosemirror-collab@^1.3.1:
   version "1.3.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz#0e8c91e76e009b53457eb3b3051fb68dad029a33"
+  resolved "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz#0e8c91e76e009b53457eb3b3051fb68dad029a33"
   integrity sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==
   dependencies:
     prosemirror-state "^1.0.0"
 
 prosemirror-commands@^1.0.0, prosemirror-commands@^1.6.2:
   version "1.6.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz#d9cf6654912442cff47daa1677eb43ebd0b1f117"
+  resolved "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.6.2.tgz#d9cf6654912442cff47daa1677eb43ebd0b1f117"
   integrity sha512-0nDHH++qcf/BuPLYvmqZTUUsPJUCPBUXt0J1ErTcDIS369CTp773itzLGIgIXG4LJXOlwYCr44+Mh4ii6MP1QA==
   dependencies:
     prosemirror-model "^1.0.0"
@@ -9921,7 +10118,7 @@ prosemirror-commands@^1.0.0, prosemirror-commands@^1.6.2:
 
 prosemirror-dropcursor@^1.8.1:
   version "1.8.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz#49b9fb2f583e0d0f4021ff87db825faa2be2832d"
+  resolved "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.1.tgz#49b9fb2f583e0d0f4021ff87db825faa2be2832d"
   integrity sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==
   dependencies:
     prosemirror-state "^1.0.0"
@@ -9930,7 +10127,7 @@ prosemirror-dropcursor@^1.8.1:
 
 prosemirror-gapcursor@^1.3.2:
   version "1.3.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz#5fa336b83789c6199a7341c9493587e249215cb4"
+  resolved "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz#5fa336b83789c6199a7341c9493587e249215cb4"
   integrity sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==
   dependencies:
     prosemirror-keymap "^1.0.0"
@@ -9940,7 +10137,7 @@ prosemirror-gapcursor@^1.3.2:
 
 prosemirror-history@^1.0.0, prosemirror-history@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-history/-/prosemirror-history-1.4.1.tgz#cc370a46fb629e83a33946a0e12612e934ab8b98"
+  resolved "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz#cc370a46fb629e83a33946a0e12612e934ab8b98"
   integrity sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==
   dependencies:
     prosemirror-state "^1.2.2"
@@ -9950,15 +10147,15 @@ prosemirror-history@^1.0.0, prosemirror-history@^1.4.1:
 
 prosemirror-inputrules@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz#ef1519bb2cb0d1e0cec74bad1a97f1c1555068bb"
+  resolved "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.4.0.tgz#ef1519bb2cb0d1e0cec74bad1a97f1c1555068bb"
   integrity sha512-6ygpPRuTJ2lcOXs9JkefieMst63wVJBgHZGl5QOytN7oSZs3Co/BYbc3Yx9zm9H37Bxw8kVzCnDsihsVsL4yEg==
   dependencies:
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.0.0"
 
-prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.2.2:
+prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz#14a54763a29c7b2704f561088ccf3384d14eb77e"
+  resolved "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz#14a54763a29c7b2704f561088ccf3384d14eb77e"
   integrity sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==
   dependencies:
     prosemirror-state "^1.0.0"
@@ -9966,7 +10163,7 @@ prosemirror-keymap@^1.0.0, prosemirror-keymap@^1.1.2, prosemirror-keymap@^1.2.2:
 
 prosemirror-markdown@^1.11.1, prosemirror-markdown@^1.13.1:
   version "1.13.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz#23feb6652dacb3dd78ffd8f131da37c20e4e4cf8"
+  resolved "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.1.tgz#23feb6652dacb3dd78ffd8f131da37c20e4e4cf8"
   integrity sha512-Sl+oMfMtAjWtlcZoj/5L/Q39MpEnVZ840Xo330WJWUvgyhNmLBLN7MsHn07s53nG/KImevWHSE6fEj4q/GihHw==
   dependencies:
     "@types/markdown-it" "^14.0.0"
@@ -9975,7 +10172,7 @@ prosemirror-markdown@^1.11.1, prosemirror-markdown@^1.13.1:
 
 prosemirror-menu@^1.2.4:
   version "1.2.4"
-  resolved "https://registry.yarnpkg.com/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz#3cfdc7c06d10f9fbd1bce29082c498bd11a0a79a"
+  resolved "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.4.tgz#3cfdc7c06d10f9fbd1bce29082c498bd11a0a79a"
   integrity sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==
   dependencies:
     crelt "^1.0.0"
@@ -9983,73 +10180,73 @@ prosemirror-menu@^1.2.4:
     prosemirror-history "^1.0.0"
     prosemirror-state "^1.0.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.19.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.23.0, prosemirror-model@^1.8.1:
-  version "1.24.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.24.0.tgz#01fd4fdfd32b196d2a073066b25c232bcf946aa4"
-  integrity sha512-Ft7epNnycoQSM+2ObF35SBbBX+5WY39v8amVlrtlAcpglhlHs2tCTnWl7RX5tbp/PsMKcRcWV9cXPuoBWq0AIQ==
+prosemirror-model@^1.0.0, prosemirror-model@^1.19.0, prosemirror-model@^1.20.0, prosemirror-model@^1.21.0, prosemirror-model@^1.23.0, prosemirror-model@^1.24.1:
+  version "1.24.1"
+  resolved "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.24.1.tgz#b445e4f9b9cfc8c1a699215057b506842ebff1a9"
+  integrity sha512-YM053N+vTThzlWJ/AtPtF1j0ebO36nvbmDy4U7qA2XQB8JVaQp1FmB9Jhrps8s+z+uxhhVTny4m20ptUvhk0Mg==
   dependencies:
     orderedmap "^2.0.0"
 
 prosemirror-schema-basic@^1.2.3:
   version "1.2.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz#649c349bb21c61a56febf9deb71ac68fca4cedf2"
+  resolved "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.3.tgz#649c349bb21c61a56febf9deb71ac68fca4cedf2"
   integrity sha512-h+H0OQwZVqMon1PNn0AG9cTfx513zgIG2DY00eJ00Yvgb3UD+GQ/VlWW5rcaxacpCGT1Yx8nuhwXk4+QbXUfJA==
   dependencies:
     prosemirror-model "^1.19.0"
 
 prosemirror-schema-list@^1.4.1:
   version "1.5.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-schema-list/-/prosemirror-schema-list-1.5.0.tgz#f05ddbe2e71efc9157a0dbedf80761c08bda5192"
+  resolved "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.0.tgz#f05ddbe2e71efc9157a0dbedf80761c08bda5192"
   integrity sha512-gg1tAfH1sqpECdhIHOA/aLg2VH3ROKBWQ4m8Qp9mBKrOxQRW61zc+gMCI8nh22gnBzd1t2u1/NPLmO3nAa3ssg==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-state "^1.0.0"
     prosemirror-transform "^1.7.3"
 
-prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.3.1, prosemirror-state@^1.4.3:
+prosemirror-state@^1.0.0, prosemirror-state@^1.2.2, prosemirror-state@^1.4.3:
   version "1.4.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-state/-/prosemirror-state-1.4.3.tgz#94aecf3ffd54ec37e87aa7179d13508da181a080"
+  resolved "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz#94aecf3ffd54ec37e87aa7179d13508da181a080"
   integrity sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==
   dependencies:
     prosemirror-model "^1.0.0"
     prosemirror-transform "^1.0.0"
     prosemirror-view "^1.27.0"
 
-prosemirror-tables@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-1.6.1.tgz#8df27facbf7632a574afb32a665aaadf7f2ed69a"
-  integrity sha512-p8WRJNA96jaNQjhJolmbxTzd6M4huRE5xQ8OxjvMhQUP0Nzpo4zz6TztEiwk6aoqGBhz9lxRWR1yRZLlpQN98w==
+prosemirror-tables@^1.6.1, prosemirror-tables@^1.6.3:
+  version "1.6.4"
+  resolved "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.6.4.tgz#e36ebca70d9e398c4a3b99b122ba86bfc985293d"
+  integrity sha512-TkDY3Gw52gRFRfRn2f4wJv5WOgAOXLJA2CQJYIJ5+kdFbfj3acR4JUW6LX2e1hiEBiUwvEhzH5a3cZ5YSztpIA==
   dependencies:
-    prosemirror-keymap "^1.1.2"
-    prosemirror-model "^1.8.1"
-    prosemirror-state "^1.3.1"
-    prosemirror-transform "^1.2.1"
-    prosemirror-view "^1.13.3"
+    prosemirror-keymap "^1.2.2"
+    prosemirror-model "^1.24.1"
+    prosemirror-state "^1.4.3"
+    prosemirror-transform "^1.10.2"
+    prosemirror-view "^1.37.2"
 
 prosemirror-trailing-node@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz#5bc223d4fc1e8d9145e4079ec77a932b54e19e04"
+  resolved "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz#5bc223d4fc1e8d9145e4079ec77a932b54e19e04"
   integrity sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==
   dependencies:
     "@remirror/core-constants" "3.0.0"
     escape-string-regexp "^4.0.0"
 
-prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.10.2, prosemirror-transform@^1.2.1, prosemirror-transform@^1.7.3:
+prosemirror-transform@^1.0.0, prosemirror-transform@^1.1.0, prosemirror-transform@^1.10.2, prosemirror-transform@^1.7.3:
   version "1.10.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz#8ebac4e305b586cd96595aa028118c9191bbf052"
+  resolved "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.2.tgz#8ebac4e305b586cd96595aa028118c9191bbf052"
   integrity sha512-2iUq0wv2iRoJO/zj5mv8uDUriOHWzXRnOTVgCzSXnktS/2iQRa3UUQwVlkBlYZFtygw6Nh1+X4mGqoYBINn5KQ==
   dependencies:
     prosemirror-model "^1.21.0"
 
 prosemirror-utils@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/prosemirror-utils/-/prosemirror-utils-1.2.2.tgz#21ff3777e7b9b22b9ec8d7ded7d15b9aeeb1d008"
+  resolved "https://registry.npmjs.org/prosemirror-utils/-/prosemirror-utils-1.2.2.tgz#21ff3777e7b9b22b9ec8d7ded7d15b9aeeb1d008"
   integrity sha512-7a2MPf99oCW8/587rQYI1/snX71Ban40+apr1hLkY8TmU9YXd7JeR6QsmktcTisJURO3WRjxIia4lTMsYgZVOw==
 
-prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.37.0:
-  version "1.37.0"
-  resolved "https://registry.yarnpkg.com/prosemirror-view/-/prosemirror-view-1.37.0.tgz#4bc5486d70c546490733197d4bbf4579bfc3d84d"
-  integrity sha512-z2nkKI1sJzyi7T47Ji/ewBPuIma1RNvQCCYVdV+MqWBV7o4Sa1n94UJCJJ1aQRF/xRkFfyqLGlGFWitIcCOtbg==
+prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.27.0, prosemirror-view@^1.31.0, prosemirror-view@^1.37.0, prosemirror-view@^1.37.2:
+  version "1.37.2"
+  resolved "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.37.2.tgz#e16b92611c6d0f30695606724dc4a9575ce7ca6b"
+  integrity sha512-ApcyrfV/cRcaL65on7TQcfWElwLyOgIjnIynfAuV+fIdlpbSvSWRwfuPaH7T5mo4AbO/FID29qOtjiDIKGWyog==
   dependencies:
     prosemirror-model "^1.20.0"
     prosemirror-state "^1.0.0"
@@ -10057,7 +10254,7 @@ prosemirror-view@^1.0.0, prosemirror-view@^1.1.0, prosemirror-view@^1.13.3, pros
 
 proxy-addr@~2.0.7:
   version "2.0.7"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
+  resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
   integrity sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==
   dependencies:
     forwarded "0.2.0"
@@ -10065,17 +10262,17 @@ proxy-addr@~2.0.7:
 
 proxy-from-env@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
 pstree.remy@^1.1.8:
   version "1.1.8"
-  resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
+  resolved "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz#c242224f4a67c21f686839bbdb4ac282b8373d3a"
   integrity sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==
 
 pump@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.2.tgz#836f3edd6bc2ee599256c924ffe0d88573ddcbf8"
+  resolved "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz#836f3edd6bc2ee599256c924ffe0d88573ddcbf8"
   integrity sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==
   dependencies:
     end-of-stream "^1.1.0"
@@ -10083,75 +10280,70 @@ pump@^3.0.0:
 
 punycode.js@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
+  resolved "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
   integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
 
 punycode@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
 
 punycode@^2.1.0, punycode@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
 qs@6.13.0:
   version "6.13.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
   integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
   dependencies:
     side-channel "^1.0.6"
 
 qs@^6.12.3:
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.1.tgz#3ce5fc72bd3a8171b85c99b93c65dd20b7d1b16e"
-  integrity sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==
+  version "6.14.0"
+  resolved "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz#c63fa40680d2c5c941412a0e899c89af60c0a930"
+  integrity sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==
   dependencies:
-    side-channel "^1.0.6"
+    side-channel "^1.1.0"
 
 queue-microtask@^1.2.2:
   version "1.2.3"
-  resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-queue-tick@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/queue-tick/-/queue-tick-1.0.1.tgz#f6f07ac82c1fd60f82e098b417a80e52f1f4c142"
-  integrity sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==
-
 queue@^6.0.1:
   version "6.0.2"
-  resolved "https://registry.yarnpkg.com/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
+  resolved "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz#b91525283e2315c7553d2efa18d83e76432fed65"
   integrity sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==
   dependencies:
     inherits "~2.0.3"
 
 quick-format-unescaped@^4.0.3:
   version "4.0.4"
-  resolved "https://registry.yarnpkg.com/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
+  resolved "https://registry.npmjs.org/quick-format-unescaped/-/quick-format-unescaped-4.0.4.tgz#93ef6dd8d3453cbc7970dd614fad4c5954d6b5a7"
   integrity sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==
 
 raf-schd@^4.0.3:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
+  resolved "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
 
 randombytes@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
+  resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
   integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
   dependencies:
     safe-buffer "^5.1.0"
 
 range-parser@^1.2.1, range-parser@~1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
+  resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
 raw-body@2.5.2:
   version "2.5.2"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
+  resolved "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
   integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
   dependencies:
     bytes "3.1.2"
@@ -10161,7 +10353,7 @@ raw-body@2.5.2:
 
 rc@^1.2.7:
   version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  resolved "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
   dependencies:
     deep-extend "^0.6.0"
@@ -10171,7 +10363,7 @@ rc@^1.2.7:
 
 react-color@^2.19.3:
   version "2.19.3"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
+  resolved "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz#ec6c6b4568312a3c6a18420ab0472e146aa5683d"
   integrity sha512-LEeGE/ZzNLIsFWa1TMe8y5VYqr7bibneWmvJwm1pCn/eNmrabWDh659JSPn9BuaMpEfU83WTOJfnCcjDZwNQTA==
   dependencies:
     "@icons/material" "^0.2.4"
@@ -10183,34 +10375,35 @@ react-color@^2.19.3:
     tinycolor2 "^1.4.1"
 
 react-confetti@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/react-confetti/-/react-confetti-6.1.0.tgz#03dc4340d955acd10b174dbf301f374a06e29ce6"
-  integrity sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==
+  version "6.2.2"
+  resolved "https://registry.npmjs.org/react-confetti/-/react-confetti-6.2.2.tgz#b72888889b10b6707a91adca919dd35c653f4bb2"
+  integrity sha512-K+kTyOPgX+ZujMZ+Rmb7pZdHBvg+DzinG/w4Eh52WOB8/pfO38efnnrtEZNJmjTvLxc16RBYO+tPM68Fg8viBA==
   dependencies:
     tween-functions "^1.2.0"
 
-react-css-styled@^1.1.9:
-  version "1.1.9"
-  resolved "https://registry.yarnpkg.com/react-css-styled/-/react-css-styled-1.1.9.tgz#a7cc948e49f72b2f7fb1393bd85416a8293afab3"
-  integrity sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==
-  dependencies:
-    css-styled "~1.0.8"
-    framework-utils "^1.1.0"
-
-react-day-picker@^8.10.0:
+react-day-picker@8.10.1:
   version "8.10.1"
   resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.1.tgz#4762ec298865919b93ec09ba69621580835b8e80"
   integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
 
+react-day-picker@9.5.0:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-9.5.0.tgz#2ae36e85d6506026d72e350f49b5607d011cfd6f"
+  integrity sha512-WmJnPFVLnKh5Qscm7wavMNg86rqPverSWjx+zgK8/ZmGRSQ8c8OoqW10RI+AzAfT2atIxImpCUU2R9Z7Xb2SUA==
+  dependencies:
+    "@date-fns/tz" "^1.2.0"
+    date-fns "^4.1.0"
+    date-fns-jalali "^4.1.0-0"
+
 react-docgen-typescript@^2.2.2:
   version "2.2.2"
-  resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
+  resolved "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
   integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==
 
 react-docgen@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-7.1.0.tgz#4b41e557dab939a5157be09ee532fd09c07d99fc"
-  integrity sha512-APPU8HB2uZnpl6Vt/+0AFoVYgSRtfiP6FLrZgPPTDmqSb2R4qZRbgd0A3VzIFxDt5e+Fozjx79WjLWnF69DK8g==
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/react-docgen/-/react-docgen-7.1.1.tgz#a7a8e6b923a945acf0b7325a889ddd74fec74a63"
+  integrity sha512-hlSJDQ2synMPKFZOsKo9Hi8WWZTC7POR8EmWvTSjow+VDgKzkmjQvFm2fk0tmRw+f0vTOIYKlarR0iL4996pdg==
   dependencies:
     "@babel/core" "^7.18.9"
     "@babel/traverse" "^7.18.9"
@@ -10223,9 +10416,16 @@ react-docgen@^7.0.0:
     resolve "^1.22.1"
     strip-indent "^4.0.0"
 
-"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", react-dom@^18.3.1:
+"react-dom@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
+  dependencies:
+    scheduler "^0.25.0"
+
+react-dom@^18.3.1:
   version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
   integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
@@ -10233,7 +10433,7 @@ react-docgen@^7.0.0:
 
 react-dropzone@^14.2.3:
   version "14.3.5"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.3.5.tgz#1a8bd312c8a353ec78ef402842ccb3589c225add"
+  resolved "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.3.5.tgz#1a8bd312c8a353ec78ef402842ccb3589c225add"
   integrity sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==
   dependencies:
     attr-accept "^2.2.4"
@@ -10242,32 +10442,37 @@ react-dropzone@^14.2.3:
 
 react-fast-compare@^3.0.1:
   version "3.2.2"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
 react-hook-form@7.51.5:
   version "7.51.5"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.51.5.tgz#4afbfb819312db9fea23e8237a3a0d097e128b43"
+  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.5.tgz#4afbfb819312db9fea23e8237a3a0d097e128b43"
   integrity sha512-J2ILT5gWx1XUIJRETiA7M19iXHlG74+6O3KApzvqB/w8S5NQR7AbU8HVZrMALdmDgWpRPYiZJl0zx8Z4L2mP6Q==
 
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-is@^17.0.1:
   version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 react-is@^18.0.0, react-is@^18.3.1:
   version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
 
+react-is@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz#d6669fd389ff022a9684f708cf6fa4962d1fea7a"
+  integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==
+
 react-markdown@^8.0.7:
   version "8.0.7"
-  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
+  resolved "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz#c8dbd1b9ba5f1c5e7e5f2a44de465a3caafdf89b"
   integrity sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==
   dependencies:
     "@types/hast" "^2.0.0"
@@ -10286,36 +10491,29 @@ react-markdown@^8.0.7:
     unist-util-visit "^4.0.0"
     vfile "^5.0.0"
 
-react-moveable@^0.54.2:
-  version "0.54.2"
-  resolved "https://registry.yarnpkg.com/react-moveable/-/react-moveable-0.54.2.tgz#87ce9af3499dc1c8218bce7e174b10264c1bbecf"
-  integrity sha512-NGaVLbn0i9pb3+BWSKGWFqI/Mgm4+WMeWHxXXQ4Qi1tHxWCXrUrbGvpxEpt69G/hR7dez+/m68ex+fabjnvcUg==
+react-masonry-component@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/react-masonry-component/-/react-masonry-component-6.3.0.tgz#edd7593f9f0d4bfa29249ea1e4d2d07757eba65d"
+  integrity sha512-4ZI78nxMfCpU5yQiS6Rup07Ju++YzcOGAyvbMcl2GfpZTw8GRwT548lkKr0PJarNicRV1qE2D/NiT26UPg1T7A==
   dependencies:
-    "@daybrush/utils" "^1.13.0"
-    "@egjs/agent" "^2.2.1"
-    "@egjs/children-differ" "^1.0.1"
-    "@egjs/list-differ" "^1.0.0"
-    "@scena/dragscroll" "^1.4.0"
-    "@scena/event-emitter" "^1.0.5"
-    "@scena/matrix" "^1.1.1"
-    css-to-mat "^1.1.1"
-    framework-utils "^1.1.0"
-    gesto "^1.19.0"
-    overlap-area "^1.1.0"
-    react-css-styled "^1.1.9"
-    react-selecto "^1.25.0"
+    create-react-class "^15.6.2"
+    element-resize-detector "^1.1.9"
+    imagesloaded "^4.0.0"
+    lodash "^4.17.4"
+    masonry-layout "^4.2.0"
+    prop-types "^15.5.8"
 
 react-pdf-html@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/react-pdf-html/-/react-pdf-html-2.1.2.tgz#255b46489c1bc61b5772946b46034f5e3ca12049"
-  integrity sha512-5gQDiQIeQq+fm5cZHAveDLnYoArVVtZksaWdwpwT2rCyIuzqazJaP197tWg9JjXSK2u66yMwzVHvbcPqzrv5Yw==
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/react-pdf-html/-/react-pdf-html-2.1.3.tgz#1e3d048e2a42b594cd65b7ecbd62088cfa26b2cd"
+  integrity sha512-KTTbLUFnpus2Ed6zPGM+LD/evnDcQVz+uG7/kBW4d5qKI9/O6/Hwirh8ZvcbQT/0TeA5vzaqjUnuOs2MhhZjCw==
   dependencies:
     css-tree "^1.1.3"
     node-html-parser "^6.1.13"
 
 react-popper@^1.3.11:
   version "1.3.11"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
+  resolved "https://registry.npmjs.org/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
   integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
   dependencies:
     "@babel/runtime" "^7.1.2"
@@ -10328,59 +10526,51 @@ react-popper@^1.3.11:
 
 react-popper@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
+  resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba"
   integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
   dependencies:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-remove-scroll-bar@^2.3.6:
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
-  integrity sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==
+react-remove-scroll-bar@^2.3.7:
+  version "2.3.8"
+  resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
+  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
   dependencies:
-    react-style-singleton "^2.2.1"
+    react-style-singleton "^2.2.2"
     tslib "^2.0.0"
 
-react-remove-scroll@2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz#fb03a0845d7768a4f1519a99fdb84983b793dc07"
-  integrity sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==
+react-remove-scroll@^2.6.3:
+  version "2.6.3"
+  resolved "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz#df02cde56d5f2731e058531f8ffd7f9adec91ac2"
+  integrity sha512-pnAi91oOk8g8ABQKGF5/M9qxmmOPxaAnopyTHYfqYEwJhyFrbbBtHuSgtKEoH0jpcxx5o3hXqH1mNd9/Oi+8iQ==
   dependencies:
-    react-remove-scroll-bar "^2.3.6"
-    react-style-singleton "^2.2.1"
+    react-remove-scroll-bar "^2.3.7"
+    react-style-singleton "^2.2.3"
     tslib "^2.1.0"
-    use-callback-ref "^1.3.0"
-    use-sidecar "^1.1.2"
+    use-callback-ref "^1.3.3"
+    use-sidecar "^1.1.3"
 
-react-selecto@^1.25.0:
-  version "1.26.3"
-  resolved "https://registry.yarnpkg.com/react-selecto/-/react-selecto-1.26.3.tgz#f9081c006cee2e2fed85ac1811cfe17136cf81a5"
-  integrity sha512-Ubik7kWSnZyQEBNro+1k38hZaI1tJarE+5aD/qsqCOA1uUBSjgKVBy3EWRzGIbdmVex7DcxznFZLec/6KZNvwQ==
-  dependencies:
-    selecto "~1.26.3"
-
-react-smooth@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-4.0.3.tgz#add5c7f607445766bcd871b10b2170318a444454"
-  integrity sha512-PyxIrra8WZWrMRFcCiJsZ+JqFaxEINAt+v/w++wQKQlmO99Eh3+JTLeKApdTsLX2roBdWYXqPsaS8sO4UmdzIg==
+react-smooth@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz#a5875f8bb61963ca61b819cedc569dc2453894b4"
+  integrity sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==
   dependencies:
     fast-equals "^5.0.1"
     prop-types "^15.8.1"
     react-transition-group "^4.4.5"
 
-react-style-singleton@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
-  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+react-style-singleton@^2.2.2, react-style-singleton@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
+  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
   dependencies:
     get-nonce "^1.0.0"
-    invariant "^2.2.4"
     tslib "^2.0.0"
 
 react-transition-group@^4.4.5:
   version "4.4.5"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
   integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
     "@babel/runtime" "^7.5.5"
@@ -10388,30 +10578,35 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-"react@^16.8.0 || ^17.0.0 || ^18.0.0", react@^18.3.1:
+"react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
+
+react@^18.3.1:
   version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
   integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
 reactcss@^1.2.0:
   version "1.2.3"
-  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  resolved "https://registry.npmjs.org/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
   integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
   dependencies:
     lodash "^4.0.1"
 
 read-cache@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
+  resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
   integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
   dependencies:
     pify "^2.3.0"
 
-readable-stream@^3.1.1, readable-stream@^3.4.0:
+readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.2:
   version "3.6.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
   integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
   dependencies:
     inherits "^2.0.3"
@@ -10419,9 +10614,9 @@ readable-stream@^3.1.1, readable-stream@^3.4.0:
     util-deprecate "^1.0.1"
 
 readable-stream@^4.0.0:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-4.5.2.tgz#9e7fc4c45099baeed934bff6eb97ba6cf2729e09"
-  integrity sha512-yjavECdqeZ3GLXNgRXgeQEdz9fvDDkNKyHnbHRFtOr7/LcfgBcmct7t/ET+HaCTqfh06OzoAxrkN/IfjJBVe+g==
+  version "4.7.0"
+  resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz#cedbd8a1146c13dfff8dab14068028d58c15ac91"
+  integrity sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==
   dependencies:
     abort-controller "^3.0.0"
     buffer "^6.0.3"
@@ -10431,19 +10626,19 @@ readable-stream@^4.0.0:
 
 readdirp@~3.6.0:
   version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
   integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
   dependencies:
     picomatch "^2.2.1"
 
 real-require@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/real-require/-/real-require-0.2.0.tgz#209632dea1810be2ae063a6ac084fee7e33fba78"
+  resolved "https://registry.npmjs.org/real-require/-/real-require-0.2.0.tgz#209632dea1810be2ae063a6ac084fee7e33fba78"
   integrity sha512-57frrGM/OCTLqLOAh0mhVA9VBMHd+9U7Zb2THMGdBUoZVOtGbJzjxsYGDJ3A9AYYCP4hn6y1TVbaOfzWtm5GFg==
 
 recast@^0.23.5:
   version "0.23.9"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.23.9.tgz#587c5d3a77c2cfcb0c18ccce6da4361528c2587b"
+  resolved "https://registry.npmjs.org/recast/-/recast-0.23.9.tgz#587c5d3a77c2cfcb0c18ccce6da4361528c2587b"
   integrity sha512-Hx/BGIbwj+Des3+xy5uAtAbdCyqK9y9wbBcDFDYanLS9JnMqf7OeF87HQwUimE87OEc72mr6tkKUKMBBL+hF9Q==
   dependencies:
     ast-types "^0.16.1"
@@ -10454,28 +10649,28 @@ recast@^0.23.5:
 
 recharts-scale@^0.4.4:
   version "0.4.5"
-  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  resolved "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
   integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
   dependencies:
     decimal.js-light "^2.4.1"
 
-recharts@^2.12.7:
-  version "2.14.1"
-  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.14.1.tgz#8b91bd1e53915b9bc03a262a3d8969663d3195b5"
-  integrity sha512-xtWulflkA+/xu4/QClBdtZYN30dbvTHjxjkh5XTMrH/CQ3WGDDPHHa/LLKCbgoqz0z3UaSH2/blV1i6VNMeh1g==
+recharts@^2.12.7, recharts@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz#0941adf0402528d54f6d81997eb15840c893aa3c"
+  integrity sha512-v8PUTUlyiDe56qUj82w/EDVuzEFXwEHp9/xOowGAZwfLjB9uAy3GllQVIYMWF6nU+qibx85WF75zD7AjqoT54Q==
   dependencies:
     clsx "^2.0.0"
     eventemitter3 "^4.0.1"
     lodash "^4.17.21"
     react-is "^18.3.1"
-    react-smooth "^4.0.0"
+    react-smooth "^4.0.4"
     recharts-scale "^0.4.4"
     tiny-invariant "^1.3.1"
     victory-vendor "^36.6.8"
 
 redent@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  resolved "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
   integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
   dependencies:
     indent-string "^4.0.0"
@@ -10483,79 +10678,81 @@ redent@^3.0.0:
 
 redis-commands@1.7.0:
   version "1.7.0"
-  resolved "https://registry.yarnpkg.com/redis-commands/-/redis-commands-1.7.0.tgz#15a6fea2d58281e27b1cd1acfb4b293e278c3a89"
+  resolved "https://registry.npmjs.org/redis-commands/-/redis-commands-1.7.0.tgz#15a6fea2d58281e27b1cd1acfb4b293e278c3a89"
   integrity sha512-nJWqw3bTFy21hX/CPKHth6sfhZbdiHP6bTawSgQBlKOVRG7EZkfHbbHwQJnrE4vsQf0CMNE+3gJ4Fmm16vdVlQ==
 
 redis-errors@^1.0.0, redis-errors@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/redis-errors/-/redis-errors-1.2.0.tgz#eb62d2adb15e4eaf4610c04afe1529384250abad"
+  resolved "https://registry.npmjs.org/redis-errors/-/redis-errors-1.2.0.tgz#eb62d2adb15e4eaf4610c04afe1529384250abad"
   integrity sha512-1qny3OExCf0UvUV/5wpYKf2YwPcOqXzkwKKSmKHiE6ZMQs5heeE/c8eXK+PNllPvmjgAbfnsbpkGZWy8cBpn9w==
 
 redis-parser@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/redis-parser/-/redis-parser-3.0.0.tgz#b66d828cdcafe6b4b8a428a7def4c6bcac31c8b4"
+  resolved "https://registry.npmjs.org/redis-parser/-/redis-parser-3.0.0.tgz#b66d828cdcafe6b4b8a428a7def4c6bcac31c8b4"
   integrity sha512-DJnGAeenTdpMEH6uAJRK/uiyEIH9WVsUmoLwzudwGJUwZPp80PDBWPHXSAGNPwNvIXAbe7MSUB1zQFugFml66A==
   dependencies:
     redis-errors "^1.0.0"
 
 redlock@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/redlock/-/redlock-4.2.0.tgz#c26590768559afd5fff76aa1133c94b411ff4f5f"
+  resolved "https://registry.npmjs.org/redlock/-/redlock-4.2.0.tgz#c26590768559afd5fff76aa1133c94b411ff4f5f"
   integrity sha512-j+oQlG+dOwcetUt2WJWttu4CZVeRzUrcVcISFmEmfyuwCVSJ93rDT7YSgg7H7rnxwoRyk/jU46kycVka5tW7jA==
   dependencies:
     bluebird "^3.7.2"
 
-reflect.getprototypeof@^1.0.4, reflect.getprototypeof@^1.0.6:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.8.tgz#c58afb17a4007b4d1118c07b92c23fca422c5d82"
-  integrity sha512-B5dj6usc5dkk8uFliwjwDHM8To5/QwdKz9JcBZ8Ic4G1f0YmeeJTtE/ZTdgRFPAfxZFiUaPhZ1Jcs4qeagItGQ==
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz#c629219e78a3316d8b604c765ef68996964e7bf9"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
   dependencies:
     call-bind "^1.0.8"
     define-properties "^1.2.1"
-    dunder-proto "^1.0.0"
-    es-abstract "^1.23.5"
+    es-abstract "^1.23.9"
     es-errors "^1.3.0"
-    get-intrinsic "^1.2.4"
-    gopd "^1.2.0"
-    which-builtin-type "^1.2.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
 
 regenerate-unicode-properties@^10.2.0:
   version "10.2.0"
-  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0"
+  resolved "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz#626e39df8c372338ea9b8028d1f99dc3fd9c3db0"
   integrity sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==
   dependencies:
     regenerate "^1.4.2"
 
 regenerate@^1.4.2:
   version "1.4.2"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
+  resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
 regenerator-runtime@^0.14.0:
   version "0.14.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
   integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
 
 regenerator-transform@^0.15.2:
   version "0.15.2"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
+  resolved "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
   integrity sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2, regexp.prototype.flags@^1.5.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz#b3ae40b1d2499b8350ab2c3fe6ef3845d3a96f42"
-  integrity sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==
+regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.3:
+  version "1.5.4"
+  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
     define-properties "^1.2.1"
     es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
     set-function-name "^2.0.2"
 
 regexpu-core@^6.2.0:
   version "6.2.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
+  resolved "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz#0e5190d79e542bf294955dccabae04d3c7d53826"
   integrity sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==
   dependencies:
     regenerate "^1.4.2"
@@ -10567,24 +10764,24 @@ regexpu-core@^6.2.0:
 
 regjsgen@^0.8.0:
   version "0.8.0"
-  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
+  resolved "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz#df23ff26e0c5b300a6470cad160a9d090c3a37ab"
   integrity sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==
 
 regjsparser@^0.12.0:
   version "0.12.0"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.12.0.tgz#0e846df6c6530586429377de56e0475583b088dc"
+  resolved "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz#0e846df6c6530586429377de56e0475583b088dc"
   integrity sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==
   dependencies:
     jsesc "~3.0.2"
 
 relateurl@^0.2.7:
   version "0.2.7"
-  resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
+  resolved "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
 
 remark-parse@^10.0.0:
   version "10.0.2"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-10.0.2.tgz#ca241fde8751c2158933f031a4e3efbaeb8bc262"
+  resolved "https://registry.npmjs.org/remark-parse/-/remark-parse-10.0.2.tgz#ca241fde8751c2158933f031a4e3efbaeb8bc262"
   integrity sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==
   dependencies:
     "@types/mdast" "^3.0.0"
@@ -10593,7 +10790,7 @@ remark-parse@^10.0.0:
 
 remark-rehype@^10.0.0:
   version "10.1.0"
-  resolved "https://registry.yarnpkg.com/remark-rehype/-/remark-rehype-10.1.0.tgz#32dc99d2034c27ecaf2e0150d22a6dcccd9a6279"
+  resolved "https://registry.npmjs.org/remark-rehype/-/remark-rehype-10.1.0.tgz#32dc99d2034c27ecaf2e0150d22a6dcccd9a6279"
   integrity sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==
   dependencies:
     "@types/hast" "^2.0.0"
@@ -10603,7 +10800,7 @@ remark-rehype@^10.0.0:
 
 renderkid@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
+  resolved "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
   integrity sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==
   dependencies:
     css-select "^4.1.3"
@@ -10614,18 +10811,18 @@ renderkid@^3.0.0:
 
 require-directory@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
+  resolved "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
   integrity sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
 
 require-from-string@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
+  resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
 require-in-the-middle@^7.1.1:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/require-in-the-middle/-/require-in-the-middle-7.4.0.tgz#606977820d4b5f9be75e5a108ce34cfed25b3bb4"
-  integrity sha512-X34iHADNbNDfr6OTStIAHWSAvvKQRYgLO6duASaVf7J2VA3lvmNYboAHOuLC2huav1IwgZJtyEcJCKVzFxOSMQ==
+  version "7.5.1"
+  resolved "https://registry.npmjs.org/require-in-the-middle/-/require-in-the-middle-7.5.1.tgz#9b995014ece7f62d734dcaf822064240d125a659"
+  integrity sha512-fgZEz/t3FDrU9o7EhI+iNNq1pNNpJImOvX72HUd6RoFiw8MaKd8/gR5tLuc8A0G0e55LMbP6ImjnmXY6zrTmjw==
   dependencies:
     debug "^4.3.5"
     module-details-from-path "^1.0.3"
@@ -10633,36 +10830,45 @@ require-in-the-middle@^7.1.1:
 
 reselect@^4.1.7:
   version "4.1.8"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
+  resolved "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
   integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
 
 resolve-from@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
 resolve-from@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
 resolve-pkg-maps@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
+  resolved "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@1.22.8, resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.4, resolve@^1.22.8:
+resolve@1.22.8:
   version "1.22.8"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
   dependencies:
     is-core-module "^2.13.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
+resolve@^1.1.7, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.22.1, resolve@^1.22.4, resolve@^1.22.8:
+  version "1.22.10"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz#b663e83ffb09bbf2386944736baae803029b8b39"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.5:
   version "2.0.0-next.5"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
   integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
   dependencies:
     is-core-module "^2.13.0"
@@ -10671,141 +10877,150 @@ resolve@^2.0.0-next.5:
 
 restructure@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/restructure/-/restructure-3.0.2.tgz#e6b2fad214f78edee21797fa8160fef50eb9b49a"
+  resolved "https://registry.npmjs.org/restructure/-/restructure-3.0.2.tgz#e6b2fad214f78edee21797fa8160fef50eb9b49a"
   integrity sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==
 
 reusify@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
 rimraf@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
 robust-predicates@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
+  resolved "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
   integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
 
 rollup@3.29.5:
   version "3.29.5"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-3.29.5.tgz#8a2e477a758b520fb78daf04bca4c522c1da8a54"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-3.29.5.tgz#8a2e477a758b520fb78daf04bca4c522c1da8a54"
   integrity sha512-GVsDdsbJzzy4S/v3dqWPJ7EfvZJfCHiDqe80IyrF59LYuP+e6U1LJoUqeuqRbwAWoMNoXivMNeNAOf5E22VA1w==
   optionalDependencies:
     fsevents "~2.3.2"
 
 rollup@^4.0.2:
-  version "4.28.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.28.1.tgz#7718ba34d62b449dfc49adbfd2f312b4fe0df4de"
-  integrity sha512-61fXYl/qNVinKmGSTHAZ6Yy8I3YIJC/r2m9feHo6SwVAVcLT5MPwOUFe7EuURA/4m0NR8lXG4BBXuo/IZEsjMg==
+  version "4.34.6"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-4.34.6.tgz#a07e4d2621759e29034d909655e7a32eee9195c9"
+  integrity sha512-wc2cBWqJgkU3Iz5oztRkQbfVkbxoz5EhnCGOrnJvnLnQ7O0WhQUYyv18qQI79O8L7DdHrrlJNeCHd4VGpnaXKQ==
   dependencies:
     "@types/estree" "1.0.6"
   optionalDependencies:
-    "@rollup/rollup-android-arm-eabi" "4.28.1"
-    "@rollup/rollup-android-arm64" "4.28.1"
-    "@rollup/rollup-darwin-arm64" "4.28.1"
-    "@rollup/rollup-darwin-x64" "4.28.1"
-    "@rollup/rollup-freebsd-arm64" "4.28.1"
-    "@rollup/rollup-freebsd-x64" "4.28.1"
-    "@rollup/rollup-linux-arm-gnueabihf" "4.28.1"
-    "@rollup/rollup-linux-arm-musleabihf" "4.28.1"
-    "@rollup/rollup-linux-arm64-gnu" "4.28.1"
-    "@rollup/rollup-linux-arm64-musl" "4.28.1"
-    "@rollup/rollup-linux-loongarch64-gnu" "4.28.1"
-    "@rollup/rollup-linux-powerpc64le-gnu" "4.28.1"
-    "@rollup/rollup-linux-riscv64-gnu" "4.28.1"
-    "@rollup/rollup-linux-s390x-gnu" "4.28.1"
-    "@rollup/rollup-linux-x64-gnu" "4.28.1"
-    "@rollup/rollup-linux-x64-musl" "4.28.1"
-    "@rollup/rollup-win32-arm64-msvc" "4.28.1"
-    "@rollup/rollup-win32-ia32-msvc" "4.28.1"
-    "@rollup/rollup-win32-x64-msvc" "4.28.1"
+    "@rollup/rollup-android-arm-eabi" "4.34.6"
+    "@rollup/rollup-android-arm64" "4.34.6"
+    "@rollup/rollup-darwin-arm64" "4.34.6"
+    "@rollup/rollup-darwin-x64" "4.34.6"
+    "@rollup/rollup-freebsd-arm64" "4.34.6"
+    "@rollup/rollup-freebsd-x64" "4.34.6"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.34.6"
+    "@rollup/rollup-linux-arm-musleabihf" "4.34.6"
+    "@rollup/rollup-linux-arm64-gnu" "4.34.6"
+    "@rollup/rollup-linux-arm64-musl" "4.34.6"
+    "@rollup/rollup-linux-loongarch64-gnu" "4.34.6"
+    "@rollup/rollup-linux-powerpc64le-gnu" "4.34.6"
+    "@rollup/rollup-linux-riscv64-gnu" "4.34.6"
+    "@rollup/rollup-linux-s390x-gnu" "4.34.6"
+    "@rollup/rollup-linux-x64-gnu" "4.34.6"
+    "@rollup/rollup-linux-x64-musl" "4.34.6"
+    "@rollup/rollup-win32-arm64-msvc" "4.34.6"
+    "@rollup/rollup-win32-ia32-msvc" "4.34.6"
+    "@rollup/rollup-win32-x64-msvc" "4.34.6"
     fsevents "~2.3.2"
 
 rope-sequence@^1.3.0:
   version "1.3.4"
-  resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.4.tgz#df85711aaecd32f1e756f76e43a415171235d425"
+  resolved "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz#df85711aaecd32f1e756f76e43a415171235d425"
   integrity sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==
 
-rrweb-cssom@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz#c73451a484b86dd7cfb1e0b2898df4b703183e4b"
-  integrity sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==
+rrweb-cssom@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz#3021d1b4352fbf3b614aaeed0bc0d5739abe0bc2"
+  integrity sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==
 
 run-parallel@^1.1.9:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
   dependencies:
     queue-microtask "^1.2.2"
 
 rxjs@^7.8.1:
   version "7.8.1"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
+  resolved "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
   integrity sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==
   dependencies:
     tslib "^2.1.0"
 
 sade@^1.7.3:
   version "1.8.1"
-  resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
+  resolved "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701"
   integrity sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==
   dependencies:
     mri "^1.1.0"
 
-safe-array-concat@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/safe-array-concat/-/safe-array-concat-1.1.2.tgz#81d77ee0c4e8b863635227c721278dd524c20edb"
-  integrity sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==
+safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz#c9e54ec4f603b0bbb8e7e5007a5ee7aecd1538c3"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
   dependencies:
-    call-bind "^1.0.7"
-    get-intrinsic "^1.2.4"
-    has-symbols "^1.0.3"
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
     isarray "^2.0.5"
 
 safe-buffer@5.1.2:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 safe-buffer@5.2.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-regex-test@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
-  integrity sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==
+safe-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz#01850e981c1602d398c85081f360e4e6d03d27f5"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
   dependencies:
-    call-bind "^1.0.6"
     es-errors "^1.3.0"
-    is-regex "^1.1.4"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.0.3, safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz#7f87dfb67a3150782eaaf18583ff5d1711ac10c1"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
 
 safe-stable-stringify@^2.3.1:
   version "2.5.0"
-  resolved "https://registry.yarnpkg.com/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz#4ca2f8e385f2831c432a719b108a3bf7af42a1dd"
+  resolved "https://registry.npmjs.org/safe-stable-stringify/-/safe-stable-stringify-2.5.0.tgz#4ca2f8e385f2831c432a719b108a3bf7af42a1dd"
   integrity sha512-b3rppTKm9T+PsVCBEOUR46GWI7fdOs00VKZ1+9c1EWDaDMvjQc6tUwuFyIprgGgTcWoVHSKrU8H31ZHA2e0RHA==
 
 "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
-  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
 saxes@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
+  resolved "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
   integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
   dependencies:
     xmlchars "^2.2.0"
 
 scheduler@^0.17.0:
   version "0.17.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.17.0.tgz#7c9c673e4ec781fac853927916d1c426b6f3ddfe"
   integrity sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==
   dependencies:
     loose-envify "^1.1.0"
@@ -10813,24 +11028,29 @@ scheduler@^0.17.0:
 
 scheduler@^0.23.2:
   version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
   integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
 
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz#336cd9768e8cceebf52d3c80e3dcf5de23e7e015"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
+
 schema-utils@^3.1.1, schema-utils@^3.2.0:
   version "3.3.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz#f50a88877c3c01652a15b622ae9e9795df7a60fe"
   integrity sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==
   dependencies:
     "@types/json-schema" "^7.0.8"
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-schema-utils@^4.0.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b"
-  integrity sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==
+schema-utils@^4.0.0, schema-utils@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz#3b669f04f71ff2dfb5aba7ce2d5a9d79b35622c0"
+  integrity sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==
   dependencies:
     "@types/json-schema" "^7.0.9"
     ajv "^8.9.0"
@@ -10839,50 +11059,34 @@ schema-utils@^4.0.0:
 
 scroll-into-view-if-needed@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz#fa9524518c799b45a2ef6bbffb92bcad0296d01f"
+  resolved "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz#fa9524518c799b45a2ef6bbffb92bcad0296d01f"
   integrity sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==
   dependencies:
     compute-scroll-into-view "^3.0.2"
 
 secure-json-parse@^2.4.0:
   version "2.7.0"
-  resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.7.0.tgz#5a5f9cd6ae47df23dba3151edd06855d47e09862"
+  resolved "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz#5a5f9cd6ae47df23dba3151edd06855d47e09862"
   integrity sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==
 
-selecto@~1.26.3:
-  version "1.26.3"
-  resolved "https://registry.yarnpkg.com/selecto/-/selecto-1.26.3.tgz#12f259112b943d395731524e3bb0115da7372212"
-  integrity sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==
-  dependencies:
-    "@daybrush/utils" "^1.13.0"
-    "@egjs/children-differ" "^1.0.1"
-    "@scena/dragscroll" "^1.4.0"
-    "@scena/event-emitter" "^1.0.5"
-    css-styled "^1.0.8"
-    css-to-mat "^1.1.1"
-    framework-utils "^1.1.0"
-    gesto "^1.19.4"
-    keycon "^1.2.0"
-    overlap-area "^1.1.0"
-
 semver@^5.6.0:
   version "5.7.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
 semver@^6.0.0, semver@^6.3.1:
   version "6.3.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 semver@^7.3.5, semver@^7.3.7, semver@^7.5.2, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0, semver@^7.6.2, semver@^7.6.3:
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
-  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+  version "7.7.1"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz#abd5098d82b18c6c81f6074ff2647fd3e7220c9f"
+  integrity sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==
 
 send@0.19.0:
   version "0.19.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
+  resolved "https://registry.npmjs.org/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
   integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
   dependencies:
     debug "2.6.9"
@@ -10901,23 +11105,23 @@ send@0.19.0:
 
 sentence-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
+  resolved "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz#3645a7b8c117c787fde8702056225bb62a45131f"
   integrity sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==
   dependencies:
     no-case "^3.0.4"
     tslib "^2.0.3"
     upper-case-first "^2.0.2"
 
-serialize-javascript@^6.0.1:
+serialize-javascript@^6.0.2:
   version "6.0.2"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
+  resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz#defa1e055c83bf6d59ea805d8da862254eb6a6c2"
   integrity sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==
   dependencies:
     randombytes "^2.1.0"
 
 serve-static@1.16.2:
   version "1.16.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  resolved "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
   integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
   dependencies:
     encodeurl "~2.0.0"
@@ -10927,7 +11131,7 @@ serve-static@1.16.2:
 
 set-function-length@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
+  resolved "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
   integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
   dependencies:
     define-data-property "^1.1.4"
@@ -10937,9 +11141,9 @@ set-function-length@^1.2.2:
     gopd "^1.0.1"
     has-property-descriptors "^1.0.2"
 
-set-function-name@^2.0.1, set-function-name@^2.0.2:
+set-function-name@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
+  resolved "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz#16a705c5a0dc2f5e638ca96d8a8cd4e1c2b90985"
   integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
   dependencies:
     define-data-property "^1.1.4"
@@ -10947,14 +11151,23 @@ set-function-name@^2.0.1, set-function-name@^2.0.2:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.2"
 
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz#0760dbcff30b2d7e801fd6e19983e56da337565e"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
 setprototypeof@1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
+  resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz#66c9a24a73f9fc28cbe66b09fed3d33dcaf1b424"
   integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
 
 sharp@^0.32.1:
   version "0.32.6"
-  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a"
+  resolved "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a"
   integrity sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==
   dependencies:
     color "^4.2.3"
@@ -10968,54 +11181,84 @@ sharp@^0.32.1:
 
 shebang-command@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
   integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
   dependencies:
     shebang-regex "^3.0.0"
 
 shebang-regex@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 shell-quote@^1.8.1:
   version "1.8.2"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.2.tgz#d2d83e057959d53ec261311e9e9b8f51dcb2934a"
+  resolved "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.2.tgz#d2d83e057959d53ec261311e9e9b8f51dcb2934a"
   integrity sha512-AzqKpGKjrj7EM6rKVQEPpB288oCfnrEIuyoT9cyF4nmGa7V8Zk6f7RRqYisX8X9m+Q7bd632aZW4ky7EhbQztA==
 
 shimmer@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/shimmer/-/shimmer-1.2.1.tgz#610859f7de327b587efebf501fb43117f9aff337"
+  resolved "https://registry.npmjs.org/shimmer/-/shimmer-1.2.1.tgz#610859f7de327b587efebf501fb43117f9aff337"
   integrity sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==
 
-side-channel@^1.0.4, side-channel@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
-  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz#10cb5984263115d3b7a0e336591e290a830af8ad"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
   dependencies:
-    call-bind "^1.0.7"
     es-errors "^1.3.0"
-    get-intrinsic "^1.2.4"
-    object-inspect "^1.13.1"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz#d6bb6b37902c6fef5174e5f533fab4c732a26f42"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz#11dda19d5368e40ce9ec2bdc1fb0ecbc0790ecea"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.0.6, side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz#c3fcff9c4da932784873335ec9765fa94ff66bc9"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
 
 signal-exit@^3.0.3:
   version "3.0.7"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
 signal-exit@^4.0.1:
   version "4.1.0"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
 simple-concat@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
+  resolved "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
   integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
 
 simple-get@^4.0.0, simple-get@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.1.tgz#4a39db549287c979d352112fa03fd99fd6bc3543"
+  resolved "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz#4a39db549287c979d352112fa03fd99fd6bc3543"
   integrity sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==
   dependencies:
     decompress-response "^6.0.0"
@@ -11024,43 +11267,43 @@ simple-get@^4.0.0, simple-get@^4.0.1:
 
 simple-swizzle@^0.2.2:
   version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
   integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
   dependencies:
     is-arrayish "^0.3.1"
 
 simple-update-notifier@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz#d70b92bdab7d6d90dfd73931195a30b6e3d7cebb"
+  resolved "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz#d70b92bdab7d6d90dfd73931195a30b6e3d7cebb"
   integrity sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==
   dependencies:
     semver "^7.5.3"
 
 slash@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  resolved "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
   integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
 
 slash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
 slash@^5.0.0, slash@^5.1.0:
   version "5.1.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-5.1.0.tgz#be3adddcdf09ac38eebe8dcdc7b1a57a75b095ce"
+  resolved "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz#be3adddcdf09ac38eebe8dcdc7b1a57a75b095ce"
   integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
 
 smooth-scroll-into-view-if-needed@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-2.0.2.tgz#5bd4ebef668474d6618ce8704650082e93068371"
+  resolved "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-2.0.2.tgz#5bd4ebef668474d6618ce8704650082e93068371"
   integrity sha512-z54WzUSlM+xHHvJu3lMIsh+1d1kA4vaakcAtQvqzeGJ5Ffau7EKjpRrMHh1/OBo5zyU2h30ZYEt77vWmPHqg7Q==
   dependencies:
     scroll-into-view-if-needed "^3.1.0"
 
 snake-case@^3.0.4:
   version "3.0.4"
-  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  resolved "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
   integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
   dependencies:
     dot-case "^3.0.4"
@@ -11068,24 +11311,24 @@ snake-case@^3.0.4:
 
 sonic-boom@^4.0.1:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/sonic-boom/-/sonic-boom-4.2.0.tgz#e59a525f831210fa4ef1896428338641ac1c124d"
+  resolved "https://registry.npmjs.org/sonic-boom/-/sonic-boom-4.2.0.tgz#e59a525f831210fa4ef1896428338641ac1c124d"
   integrity sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==
   dependencies:
     atomic-sleep "^1.0.0"
 
 sonner@^1.4.41:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.7.1.tgz#737110a3e6211d8d766442076f852ddde1725205"
-  integrity sha512-b6LHBfH32SoVasRFECrdY8p8s7hXPDn3OHUFbZZbiB1ctLS9Gdh6rpX2dVrpQA0kiL5jcRzDDldwwLkSKk3+QQ==
+  version "1.7.4"
+  resolved "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz#4c39820db86623800a17115c8970796aa862133a"
+  integrity sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw==
 
 source-map-js@^1.0.2, source-map-js@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
 
 source-map-support@~0.5.20:
   version "0.5.21"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
@@ -11093,88 +11336,83 @@ source-map-support@~0.5.20:
 
 source-map@0.8.0-beta.0:
   version "0.8.0-beta.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
   integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
   dependencies:
     whatwg-url "^7.0.0"
 
 source-map@^0.5.7:
   version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
 
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 space-separated-tokens@^2.0.0:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
+  resolved "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz#1ecd9d2350a3844572c3f4a312bceb018348859f"
   integrity sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==
 
 split2@^4.0.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
+  resolved "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
   integrity sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==
 
 stable-hash@^0.0.4:
   version "0.0.4"
-  resolved "https://registry.yarnpkg.com/stable-hash/-/stable-hash-0.0.4.tgz#55ae7dadc13e4b3faed13601587cec41859b42f7"
+  resolved "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.4.tgz#55ae7dadc13e4b3faed13601587cec41859b42f7"
   integrity sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==
 
+stack-trace@0.0.x:
+  version "0.0.10"
+  resolved "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
+  integrity sha512-KGzahc7puUKkzyMt+IqAep+TVNbKP+k2Lmwhub39m1AsTSkaDutx56aDCo+HLDzf/D26BIHTJWNiTG1KAJiQCg==
+
 stacktrace-parser@^0.1.10:
   version "0.1.10"
-  resolved "https://registry.yarnpkg.com/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz#29fb0cae4e0d0b85155879402857a1639eb6051a"
+  resolved "https://registry.npmjs.org/stacktrace-parser/-/stacktrace-parser-0.1.10.tgz#29fb0cae4e0d0b85155879402857a1639eb6051a"
   integrity sha512-KJP1OCML99+8fhOHxwwzyWrlUuVX5GQ0ZpJTd1DFXhdkrvg1szxfHhawXUZ3g9TkXORQd4/WG68jMlQZ2p8wlg==
   dependencies:
     type-fest "^0.7.1"
 
 standard-as-callback@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/standard-as-callback/-/standard-as-callback-2.1.0.tgz#8953fc05359868a77b5b9739a665c5977bb7df45"
+  resolved "https://registry.npmjs.org/standard-as-callback/-/standard-as-callback-2.1.0.tgz#8953fc05359868a77b5b9739a665c5977bb7df45"
   integrity sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==
 
 statuses@2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
+  resolved "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
 storybook@^8.1.1:
-  version "8.4.7"
-  resolved "https://registry.yarnpkg.com/storybook/-/storybook-8.4.7.tgz#a3068787a58074cec1b4197eed1c4427ec644b3f"
-  integrity sha512-RP/nMJxiWyFc8EVMH5gp20ID032Wvk+Yr3lmKidoegto5Iy+2dVQnUoElZb2zpbVXNHWakGuAkfI0dY1Hfp/vw==
+  version "8.5.4"
+  resolved "https://registry.npmjs.org/storybook/-/storybook-8.5.4.tgz#097e6d39bba43db18c2fa951c8b820a2d445e61f"
+  integrity sha512-TMXXOprDjkt8GbTCgzZSi0sPYoKMfvN+9gGnU7gRa8s1C0QhqkE0lc6fq9pl8nahXPF5ala4gPOaxjQbuJUvNQ==
   dependencies:
-    "@storybook/core" "8.4.7"
+    "@storybook/core" "8.5.4"
 
 streamsearch@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
+  resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-streamx@^2.15.0, streamx@^2.20.0:
-  version "2.21.0"
-  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.21.0.tgz#ef42a3b3fada6887ba06964443adbbbec60c5851"
-  integrity sha512-Qz6MsDZXJ6ur9u+b+4xCG18TluU7PGlRfXVAAjNiGsFrBUt/ioyLkxbFaKJygoPs+/kW4VyBj0bSj89Qu0IGyg==
+streamx@^2.15.0, streamx@^2.21.0:
+  version "2.22.0"
+  resolved "https://registry.npmjs.org/streamx/-/streamx-2.22.0.tgz#cd7b5e57c95aaef0ff9b2aef7905afa62ec6e4a7"
+  integrity sha512-sLh1evHOzBy/iWRiR6d1zRcLao4gGZr3C1kzNz4fopCOKJb6xD9ub8Mpi9Mr1R6id5o43S+d93fI48UC5uM9aw==
   dependencies:
     fast-fifo "^1.3.2"
-    queue-tick "^1.0.1"
     text-decoder "^1.1.0"
   optionalDependencies:
     bare-events "^2.2.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
   dependencies:
     emoji-regex "^8.0.0"
@@ -11183,7 +11421,7 @@ string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
 
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
   integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
   dependencies:
     eastasianwidth "^0.2.0"
@@ -11192,61 +11430,66 @@ string-width@^5.0.1, string-width@^5.1.2:
 
 string.prototype.includes@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
+  resolved "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz#eceef21283640761a81dbe16d6c7171a4edf7d92"
   integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
   dependencies:
     call-bind "^1.0.7"
     define-properties "^1.2.1"
     es-abstract "^1.23.3"
 
-string.prototype.matchall@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz#1092a72c59268d2abaad76582dccc687c0297e0a"
-  integrity sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==
+string.prototype.matchall@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz#6c88740e49ad4956b1332a911e949583a275d4c0"
+  integrity sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
     define-properties "^1.2.1"
-    es-abstract "^1.23.2"
+    es-abstract "^1.23.6"
     es-errors "^1.3.0"
     es-object-atoms "^1.0.0"
-    get-intrinsic "^1.2.4"
-    gopd "^1.0.1"
-    has-symbols "^1.0.3"
-    internal-slot "^1.0.7"
-    regexp.prototype.flags "^1.5.2"
+    get-intrinsic "^1.2.6"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    regexp.prototype.flags "^1.5.3"
     set-function-name "^2.0.2"
-    side-channel "^1.0.6"
+    side-channel "^1.1.0"
 
 string.prototype.repeat@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
+  resolved "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz#e90872ee0308b29435aa26275f6e1b762daee01a"
   integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
   dependencies:
     define-properties "^1.1.3"
     es-abstract "^1.17.5"
 
-string.prototype.trim@^1.2.9:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz#b6fa326d72d2c78b6df02f7759c73f8f6274faa4"
-  integrity sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz#40b2dd5ee94c959b4dcfb1d65ce72e90da480c81"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
     define-properties "^1.2.1"
-    es-abstract "^1.23.0"
+    es-abstract "^1.23.5"
     es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
 
-string.prototype.trimend@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz#3651b8513719e8a9f48de7f2f77640b26652b229"
-  integrity sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==
+string.prototype.trimend@^1.0.8, string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz#62e2731272cd285041b36596054e9f66569b6942"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
   dependencies:
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
 string.prototype.trimstart@^1.0.8:
   version "1.0.8"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
+  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz#7ee834dda8c7c17eff3118472bb35bfedaa34dde"
   integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
   dependencies:
     call-bind "^1.0.7"
@@ -11255,93 +11498,86 @@ string.prototype.trimstart@^1.0.8:
 
 string_decoder@^1.1.1, string_decoder@^1.3.0:
   version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
   integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
   dependencies:
     safe-buffer "~5.2.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
   integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
   dependencies:
     ansi-regex "^6.0.1"
 
 strip-bom@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
 
 strip-final-newline@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
+  resolved "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
 strip-indent@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
   integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
   dependencies:
     min-indent "^1.0.0"
 
 strip-indent@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853"
+  resolved "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz#b41379433dd06f5eae805e21d631e07ee670d853"
   integrity sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==
   dependencies:
     min-indent "^1.0.1"
 
 strip-json-comments@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
 strip-json-comments@~2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==
 
 style-loader@^3.3.1:
   version "3.3.4"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7"
+  resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz#f30f786c36db03a45cbd55b6a70d930c479090e7"
   integrity sha512-0WqXzrsMTyb8yjZJHDqwmnwRJvhALK9LfRtRc6B4UTWe8AijYLZYZ9thuJTZc2VfQWINADW/j+LiJnfy2RoC1w==
 
 style-to-object@^0.4.0:
   version "0.4.4"
-  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.4.tgz#266e3dfd56391a7eefb7770423612d043c3f33ec"
+  resolved "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz#266e3dfd56391a7eefb7770423612d043c3f33ec"
   integrity sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==
   dependencies:
     inline-style-parser "0.1.1"
 
 styled-jsx@5.1.1:
   version "5.1.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
+  resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz#839a1c3aaacc4e735fed0781b8619ea5d0009d1f"
   integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
   dependencies:
     client-only "0.0.1"
 
 stylis@4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  resolved "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
   integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
 
-sucrase@^3.20.3, sucrase@^3.32.0, sucrase@^3.35.0:
+sucrase@^3.20.3, sucrase@^3.35.0:
   version "3.35.0"
-  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
   integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.2"
@@ -11354,108 +11590,74 @@ sucrase@^3.20.3, sucrase@^3.32.0, sucrase@^3.35.0:
 
 supports-color@^5.5.0:
   version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
 supports-color@^7.1.0:
   version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
 supports-color@^8.0.0, supports-color@^8.1.1:
   version "8.1.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
   integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
   dependencies:
     has-flag "^4.0.0"
 
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
 svg-arc-to-cubic-bezier@^3.0.0, svg-arc-to-cubic-bezier@^3.2.0:
   version "3.2.0"
-  resolved "https://registry.yarnpkg.com/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6"
+  resolved "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz#390c450035ae1c4a0104d90650304c3bc814abe6"
   integrity sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g==
 
 swc-loader@^0.2.3:
   version "0.2.6"
-  resolved "https://registry.yarnpkg.com/swc-loader/-/swc-loader-0.2.6.tgz#bf0cba8eeff34bb19620ead81d1277fefaec6bc8"
+  resolved "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.6.tgz#bf0cba8eeff34bb19620ead81d1277fefaec6bc8"
   integrity sha512-9Zi9UP2YmDpgmQVbyOPJClY0dwf58JDyDMQ7uRc4krmc72twNI2fvlBWHLqVekBpPc7h5NJkGVT1zNDxFrqhvg==
   dependencies:
     "@swc/counter" "^0.1.3"
 
 swr@^2.1.3, swr@^2.2.2, swr@^2.2.4:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.5.tgz#063eea0e9939f947227d5ca760cc53696f46446b"
-  integrity sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/swr/-/swr-2.3.2.tgz#e7c4eb7115e7ff734e445ad0036e97812dd95191"
+  integrity sha512-RosxFpiabojs75IwQ316DGoDRmOqtiAj0tg8wCcbEu4CiLZBs/a9QNtHV7TUfDXmmlgqij/NqzKq/eLelyv9xA==
   dependencies:
-    client-only "^0.0.1"
-    use-sync-external-store "^1.2.0"
+    dequal "^2.0.3"
+    use-sync-external-store "^1.4.0"
 
 symbol-tree@^3.2.4:
   version "3.2.4"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
 tabbable@^6.0.0:
   version "6.2.0"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
-tailwind-merge@^1.14.0:
-  version "1.14.0"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-1.14.0.tgz#e677f55d864edc6794562c63f5001f45093cdb8b"
-  integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
+tailwind-merge@^2.0.0, tailwind-merge@^2.5.5:
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz#ac5fb7e227910c038d458f396b7400d93a3142d5"
+  integrity sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==
 
-tailwind-merge@^2.0.0:
-  version "2.5.5"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.5.5.tgz#98167859b856a2a6b8d2baf038ee171b9d814e39"
-  integrity sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==
-
-tailwindcss-animate@^1.0.6:
+tailwindcss-animate@^1.0.6, tailwindcss-animate@^1.0.7:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  resolved "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
   integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
 
-tailwindcss@3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
-  integrity sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==
-  dependencies:
-    "@alloc/quick-lru" "^5.2.0"
-    arg "^5.0.2"
-    chokidar "^3.5.3"
-    didyoumean "^1.2.2"
-    dlv "^1.1.3"
-    fast-glob "^3.2.12"
-    glob-parent "^6.0.2"
-    is-glob "^4.0.3"
-    jiti "^1.18.2"
-    lilconfig "^2.1.0"
-    micromatch "^4.0.5"
-    normalize-path "^3.0.0"
-    object-hash "^3.0.0"
-    picocolors "^1.0.0"
-    postcss "^8.4.23"
-    postcss-import "^15.1.0"
-    postcss-js "^4.0.1"
-    postcss-load-config "^4.0.1"
-    postcss-nested "^6.0.1"
-    postcss-selector-parser "^6.0.11"
-    postcss-value-parser "^4.2.0"
-    resolve "^1.22.2"
-    sucrase "^3.32.0"
-
-tailwindcss@^3.2.7, tailwindcss@^3.4.3:
-  version "3.4.16"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.16.tgz#35a7c3030844d6000fc271878db4096b6a8d2ec9"
-  integrity sha512-TI4Cyx7gDiZ6r44ewaJmt0o6BrMCT5aK5e0rmJ/G9Xq3w7CX/5VXl/zIPEJZFUK5VEqwByyhqNPycPlvcK4ZNw==
+tailwindcss@^3.4.17:
+  version "3.4.17"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz#ae8406c0f96696a631c790768ff319d46d5e5a63"
+  integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"
@@ -11482,13 +11684,13 @@ tailwindcss@^3.2.7, tailwindcss@^3.4.3:
 
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0, tapable@^2.2.1:
   version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
   integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
 tar-fs@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
-  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.2.tgz#425f154f3404cb16cb8ff6e671d45ab2ed9596c5"
+  integrity sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==
   dependencies:
     chownr "^1.1.1"
     mkdirp-classic "^0.5.2"
@@ -11496,19 +11698,19 @@ tar-fs@^2.0.0:
     tar-stream "^2.1.4"
 
 tar-fs@^3.0.4:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-3.0.6.tgz#eaccd3a67d5672f09ca8e8f9c3d2b89fa173f217"
-  integrity sha512-iokBDQQkUyeXhgPYaZxmczGPhnhXZ0CmrqI+MOb/WFGS9DW5wnfrLgtjUJBvz50vQ3qfRwJ62QVoCFu8mPVu5w==
+  version "3.0.8"
+  resolved "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz#8f62012537d5ff89252d01e48690dc4ebed33ab7"
+  integrity sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==
   dependencies:
     pump "^3.0.0"
     tar-stream "^3.1.5"
   optionalDependencies:
-    bare-fs "^2.1.1"
-    bare-path "^2.1.0"
+    bare-fs "^4.0.1"
+    bare-path "^3.0.0"
 
 tar-stream@^2.1.4:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
+  resolved "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
   integrity sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==
   dependencies:
     bl "^4.0.3"
@@ -11519,7 +11721,7 @@ tar-stream@^2.1.4:
 
 tar-stream@^3.1.5:
   version "3.1.7"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-3.1.7.tgz#24b3fb5eabada19fe7338ed6d26e5f7c482e792b"
+  resolved "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz#24b3fb5eabada19fe7338ed6d26e5f7c482e792b"
   integrity sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==
   dependencies:
     b4a "^1.6.4"
@@ -11527,20 +11729,20 @@ tar-stream@^3.1.5:
     streamx "^2.15.0"
 
 terser-webpack-plugin@^5.3.1, terser-webpack-plugin@^5.3.10:
-  version "5.3.10"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
-  integrity sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==
+  version "5.3.11"
+  resolved "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.3.11.tgz#93c21f44ca86634257cac176f884f942b7ba3832"
+  integrity sha512-RVCsMfuD0+cTt3EwX8hSl2Ks56EbFHWmhluwcqoPKtBnfjiT6olaq7PRIRfhyU8nnC2MrnDrBLfrD/RGE+cVXQ==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.20"
+    "@jridgewell/trace-mapping" "^0.3.25"
     jest-worker "^27.4.5"
-    schema-utils "^3.1.1"
-    serialize-javascript "^6.0.1"
-    terser "^5.26.0"
+    schema-utils "^4.3.0"
+    serialize-javascript "^6.0.2"
+    terser "^5.31.1"
 
-terser@^5.10.0, terser@^5.26.0:
-  version "5.37.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.37.0.tgz#38aa66d1cfc43d0638fab54e43ff8a4f72a21ba3"
-  integrity sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==
+terser@^5.10.0, terser@^5.31.1:
+  version "5.38.2"
+  resolved "https://registry.npmjs.org/terser/-/terser-5.38.2.tgz#24aef4ea48c900d46a4b13f6a53789980d59967f"
+  integrity sha512-w8CXxxbFA5zfNsR/i8HZq5bvn18AK0O9jj7hyo1YqkovLxEFa0uP0LCVGZRqiRaKRFxXhELBp8SteeAjEnfeJg==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -11548,78 +11750,83 @@ terser@^5.10.0, terser@^5.26.0:
     source-map-support "~0.5.20"
 
 text-decoder@^1.1.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/text-decoder/-/text-decoder-1.2.2.tgz#63dd2401c43895cecb292e2407db184b50ad60ac"
-  integrity sha512-/MDslo7ZyWTA2vnk1j7XoDVfXsGk3tp+zFEJHJGm0UjIlQifonVFwlVbQDFh8KJzTBnT8ie115TYqir6bclddA==
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/text-decoder/-/text-decoder-1.2.3.tgz#b19da364d981b2326d5f43099c310cc80d770c65"
+  integrity sha512-3/o9z3X0X0fTupwsYvR03pJ/DjWuqqrfwBgTQzdWDiQSm9KitAyz/9WqsT2JQW7KV2m+bC2ol/zqpW37NHxLaA==
   dependencies:
     b4a "^1.6.4"
 
+text-hex@1.0.x:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5"
+  integrity sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==
+
 text-table@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
 thenby@^1.3.4:
   version "1.3.4"
-  resolved "https://registry.yarnpkg.com/thenby/-/thenby-1.3.4.tgz#81581f6e1bb324c6dedeae9bfc28e59b1a2201cc"
+  resolved "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz#81581f6e1bb324c6dedeae9bfc28e59b1a2201cc"
   integrity sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==
 
 thenify-all@^1.0.0:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  resolved "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
   integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
   dependencies:
     thenify ">= 3.1.0 < 4"
 
 "thenify@>= 3.1.0 < 4":
   version "3.3.1"
-  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  resolved "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
   integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
   dependencies:
     any-promise "^1.0.0"
 
 thread-stream@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.yarnpkg.com/thread-stream/-/thread-stream-3.1.0.tgz#4b2ef252a7c215064507d4ef70c05a5e2d34c4f1"
+  resolved "https://registry.npmjs.org/thread-stream/-/thread-stream-3.1.0.tgz#4b2ef252a7c215064507d4ef70c05a5e2d34c4f1"
   integrity sha512-OqyPZ9u96VohAyMfJykzmivOrY2wfMSf3C5TtFJVgN+Hm6aj+voFhlK+kZEIv2FBh1X6Xp3DlnCOfEQ3B2J86A==
   dependencies:
     real-require "^0.2.0"
 
 tiny-inflate@^1.0.0, tiny-inflate@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  resolved "https://registry.npmjs.org/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
   integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
 
 tiny-invariant@^1.3.1, tiny-invariant@^1.3.3:
   version "1.3.3"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
+  resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
   integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
 
 tinycolor2@^1.4.1:
   version "1.6.0"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
+  resolved "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
   integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
 
 tinyrainbow@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tinyrainbow/-/tinyrainbow-1.2.0.tgz#5c57d2fc0fb3d1afd78465c33ca885d04f02abb5"
+  resolved "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz#5c57d2fc0fb3d1afd78465c33ca885d04f02abb5"
   integrity sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==
 
 tinyspy@^3.0.0:
   version "3.0.2"
-  resolved "https://registry.yarnpkg.com/tinyspy/-/tinyspy-3.0.2.tgz#86dd3cf3d737b15adcf17d7887c84a75201df20a"
+  resolved "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.2.tgz#86dd3cf3d737b15adcf17d7887c84a75201df20a"
   integrity sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==
 
 tippy.js@^6.3.7:
   version "6.3.7"
-  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  resolved "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
   integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
   dependencies:
     "@popperjs/core" "^2.9.0"
 
-tiptap-markdown@^0.8.9:
+tiptap-markdown@^0.8.10:
   version "0.8.10"
-  resolved "https://registry.yarnpkg.com/tiptap-markdown/-/tiptap-markdown-0.8.10.tgz#864a54befc17b25e7f475ff6072de3d49814f09b"
+  resolved "https://registry.npmjs.org/tiptap-markdown/-/tiptap-markdown-0.8.10.tgz#864a54befc17b25e7f475ff6072de3d49814f09b"
   integrity sha512-iDVkR2BjAqkTDtFX0h94yVvE2AihCXlF0Q7RIXSJPRSR5I0PA1TMuAg6FHFpmqTn4tPxJ0by0CK7PUMlnFLGEQ==
   dependencies:
     "@types/markdown-it" "^13.0.7"
@@ -11627,94 +11834,99 @@ tiptap-markdown@^0.8.9:
     markdown-it-task-lists "^2.1.1"
     prosemirror-markdown "^1.11.1"
 
-tldts-core@^6.1.66:
-  version "6.1.66"
-  resolved "https://registry.yarnpkg.com/tldts-core/-/tldts-core-6.1.66.tgz#78f823137876f80bf8986028e8839473c2d114af"
-  integrity sha512-s07jJruSwndD2X8bVjwioPfqpIc1pDTzszPe9pL1Skbh4bjytL85KNQ3tolqLbCvpQHawIsGfFi9dgerWjqW4g==
+tldts-core@^6.1.77:
+  version "6.1.77"
+  resolved "https://registry.npmjs.org/tldts-core/-/tldts-core-6.1.77.tgz#0fa4563163a7a61d72c4b05650fb66fc7e815500"
+  integrity sha512-bCaqm24FPk8OgBkM0u/SrEWJgHnhBWYqeBo6yUmcZJDCHt/IfyWBb+14CXdGi4RInMv4v7eUAin15W0DoA+Ytg==
 
 tldts@^6.1.32:
-  version "6.1.66"
-  resolved "https://registry.yarnpkg.com/tldts/-/tldts-6.1.66.tgz#34cb048acf51964c8f66139284a4c863d8150bb2"
-  integrity sha512-l3ciXsYFel/jSRfESbyKYud1nOw7WfhrBEF9I3UiarYk/qEaOOwu3qXNECHw4fHGHGTEOuhf/VdKgoDX5M/dhQ==
+  version "6.1.77"
+  resolved "https://registry.npmjs.org/tldts/-/tldts-6.1.77.tgz#714e3d1989e562886f2ed97b65e95a8e9f9e92d9"
+  integrity sha512-lBpoWgy+kYmuXWQ83+R7LlJCnsd9YW8DGpZSHhrMl4b8Ly/1vzOie3OdtmUJDkKxcgRGOehDu5btKkty+JEe+g==
   dependencies:
-    tldts-core "^6.1.66"
+    tldts-core "^6.1.77"
 
 to-regex-range@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
     is-number "^7.0.0"
 
 toidentifier@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
+  resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
 touch@^3.1.0:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.1.tgz#097a23d7b161476435e5c1344a95c0f75b4a5694"
+  resolved "https://registry.npmjs.org/touch/-/touch-3.1.1.tgz#097a23d7b161476435e5c1344a95c0f75b4a5694"
   integrity sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==
 
 tough-cookie@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-5.0.0.tgz#6b6518e2b5c070cf742d872ee0f4f92d69eac1af"
-  integrity sha512-FRKsF7cz96xIIeMZ82ehjC3xW2E+O2+v11udrDYewUbszngYhsGa8z6YUMMzO9QJZzzyd0nGGXnML/TReX6W8Q==
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-5.1.1.tgz#4641c1fdbf024927e29c5532edb7b6e5377ea1f2"
+  integrity sha512-Ek7HndSVkp10hmHP9V4qZO1u+pn1RU5sI0Fw+jCU3lyvuMZcgqsNgc6CmJJZyByK4Vm/qotGRJlfgAX8q+4JiA==
   dependencies:
     tldts "^6.1.32"
 
 tr46@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
   integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
   dependencies:
     punycode "^2.1.0"
 
 tr46@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-5.0.0.tgz#3b46d583613ec7283020d79019f1335723801cec"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz#3b46d583613ec7283020d79019f1335723801cec"
   integrity sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==
   dependencies:
     punycode "^2.3.1"
 
 tr46@~0.0.3:
   version "0.0.3"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
 tree-kill@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
+  resolved "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"
   integrity sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==
 
 trim-lines@^3.0.0:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
+  resolved "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz#d802e332a07df861c48802c04321017b1bd87338"
   integrity sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==
 
+triple-beam@^1.3.0, triple-beam@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/triple-beam/-/triple-beam-1.4.1.tgz#6fde70271dc6e5d73ca0c3b24e2d92afb7441984"
+  integrity sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==
+
 trough@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/trough/-/trough-2.2.0.tgz#94a60bd6bd375c152c1df911a4b11d5b0256f50f"
+  resolved "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz#94a60bd6bd375c152c1df911a4b11d5b0256f50f"
   integrity sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==
 
-ts-api-utils@^1.3.0:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.4.3.tgz#bfc2215fe6528fecab2b0fba570a2e8a4263b064"
-  integrity sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==
+ts-api-utils@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.0.1.tgz#660729385b625b939aaa58054f45c058f33f10cd"
+  integrity sha512-dnlgjFSVetynI8nzgJ+qF62efpglpWRk8isUEWZGWlJYySCTD6aKvbUDu+zbPeDakk3bg5H4XpitHukgfL1m9w==
 
 ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
+  resolved "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==
 
 ts-interface-checker@^0.1.9:
   version "0.1.13"
-  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
   integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
 
 ts-node@^10.9.2:
   version "10.9.2"
-  resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.2.tgz#70f021c9e185bccdca820e26dc413805c101c71f"
+  resolved "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz#70f021c9e185bccdca820e26dc413805c101c71f"
   integrity sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==
   dependencies:
     "@cspotcode/source-map-support" "^0.8.0"
@@ -11733,7 +11945,7 @@ ts-node@^10.9.2:
 
 tsconfig-paths@^3.15.0:
   version "3.15.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
   integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
   dependencies:
     "@types/json5" "^0.0.29"
@@ -11743,31 +11955,31 @@ tsconfig-paths@^3.15.0:
 
 tsconfig-paths@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c"
   integrity sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==
   dependencies:
     json5 "^2.2.2"
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2, tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.7.0, tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tslib@^1.8.1:
   version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0, tslib@^2.7.0, tslib@^2.8.0:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
-  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
-
 tslib@~2.5.0:
   version "2.5.3"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
 
 tsup@^7.2.0:
   version "7.3.0"
-  resolved "https://registry.yarnpkg.com/tsup/-/tsup-7.3.0.tgz#c7776e08c7ef55ed69def2c6e7ba4719005f5abd"
+  resolved "https://registry.npmjs.org/tsup/-/tsup-7.3.0.tgz#c7776e08c7ef55ed69def2c6e7ba4719005f5abd"
   integrity sha512-Ja1eaSRrE+QarmATlNO5fse2aOACYMBX+IZRKy1T+gpyH+jXgRrl5l4nHIQJQ1DoDgEjHDTw8cpE085UdBZuWQ==
   dependencies:
     bundle-require "^4.0.0"
@@ -11787,131 +11999,131 @@ tsup@^7.2.0:
 
 tsutils@^3.21.0:
   version "3.21.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
   integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
   dependencies:
     tslib "^1.8.1"
 
 tunnel-agent@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+  resolved "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
   integrity sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==
   dependencies:
     safe-buffer "^5.0.1"
 
-turbo-darwin-64@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-2.3.3.tgz#875975cddf7abdb52b28e9cab234fc73ca001e80"
-  integrity sha512-bxX82xe6du/3rPmm4aCC5RdEilIN99VUld4HkFQuw+mvFg6darNBuQxyWSHZTtc25XgYjQrjsV05888w1grpaA==
+turbo-darwin-64@2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-64/-/turbo-darwin-64-2.4.2.tgz#2a4ef093f2a87988308d6b28ef771d71baeeb7ce"
+  integrity sha512-HFfemyWB60CJtEvVQj9yby5rkkWw9fLAdLtAPGtPQoU3tKh8t/uzCAZKso2aPVbib9vGUuGbPGoGpaRXdVhj5g==
 
-turbo-darwin-arm64@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-2.3.3.tgz#5e85d6dadac6560782bb91081fee56f9cfcd103e"
-  integrity sha512-DYbQwa3NsAuWkCUYVzfOUBbSUBVQzH5HWUFy2Kgi3fGjIWVZOFk86ss+xsWu//rlEAfYwEmopigsPYSmW4X15A==
+turbo-darwin-arm64@2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/turbo-darwin-arm64/-/turbo-darwin-arm64-2.4.2.tgz#51a69d6b5decdc6c6ee247c5f2e2d95d8651c165"
+  integrity sha512-uwSx1dsBSSFeEC0nxyx2O219FEsS/haiESaWwE9JI8mHkQK61s6w6fN2G586krKxyNam4AIxRltleL+O2Em94g==
 
-turbo-linux-64@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-2.3.3.tgz#634f2053cff6ff056bec7f307c2fb4dd9a2bc86f"
-  integrity sha512-eHj9OIB0dFaP6BxB88jSuaCLsOQSYWBgmhy2ErCu6D2GG6xW3b6e2UWHl/1Ho9FsTg4uVgo4DB9wGsKa5erjUA==
+turbo-linux-64@2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/turbo-linux-64/-/turbo-linux-64-2.4.2.tgz#b49977e5f60e9e44e91b730debf934eb80fa0a3e"
+  integrity sha512-Fy/uL8z/LAYcPbm7a1LwFnTY9pIi5FAi12iuHsgB7zHjdh4eeIKS2NIg4nroAmTcUTUZ0/cVTo4bDOCUcS3aKw==
 
-turbo-linux-arm64@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-2.3.3.tgz#284e26825f5d692bffb5b126a9aeccaae6a4533b"
-  integrity sha512-NmDE/NjZoDj1UWBhMtOPmqFLEBKhzGS61KObfrDEbXvU3lekwHeoPvAMfcovzswzch+kN2DrtbNIlz+/rp8OCg==
+turbo-linux-arm64@2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/turbo-linux-arm64/-/turbo-linux-arm64-2.4.2.tgz#f6c09843cbc262ffc43e1add7bee8db5eb125d16"
+  integrity sha512-AEA0d8h5W/K6iiXfEgiNwWt0yqRL1NpBs8zQCLdc4/L7WeYeJW3sORWX8zt7xhutF/KW9gTm8ehKpiK6cCIsAA==
 
-turbo-windows-64@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-2.3.3.tgz#2900ac2c00d9609bc480d90564a98ca1cc7f4b17"
-  integrity sha512-O2+BS4QqjK3dOERscXqv7N2GXNcqHr9hXumkMxDj/oGx9oCatIwnnwx34UmzodloSnJpgSqjl8iRWiY65SmYoQ==
+turbo-windows-64@2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/turbo-windows-64/-/turbo-windows-64-2.4.2.tgz#142646430009149a3f0ac8309fcc695fdadc9e57"
+  integrity sha512-CybtIZ9wRgnnNFVN9En9G+rxsO+mwU81fvW4RpE8BWyNEkhQ8J28qYf4PaimueMxGHHp/28i/G7Kcdn2GAWG0g==
 
-turbo-windows-arm64@2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-2.3.3.tgz#395508cdf6b351d7dd324fb0b318c1b2cf1d66dd"
-  integrity sha512-dW4ZK1r6XLPNYLIKjC4o87HxYidtRRcBeo/hZ9Wng2XM/MqqYkAyzJXJGgRMsc0MMEN9z4+ZIfnSNBrA0b08ag==
+turbo-windows-arm64@2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-2.4.2.tgz#63ae5e8bb6b9efa74aca6c5ef49d0fdebe123b45"
+  integrity sha512-7V0yneVPL8Y3TgrkUIjw7Odmwu1tHnyIiPHFM7eFcA7U+H6hPXyCxge7nC3wOKfjhKCQqUm+Vf/k6kjmLz5G4g==
 
-turbo@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/turbo/-/turbo-2.3.3.tgz#70736263c75f7c0c501278214dee49859e1c7fcd"
-  integrity sha512-DUHWQAcC8BTiUZDRzAYGvpSpGLiaOQPfYXlCieQbwUvmml/LRGIe3raKdrOPOoiX0DYlzxs2nH6BoWJoZrj8hA==
+turbo@^2.4.2:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/turbo/-/turbo-2.4.2.tgz#3e2b285b63535e3631632febb8d05fad54e19697"
+  integrity sha512-Qxi0ioQCxMRUCcHKHZkTnYH8e7XCpNfg9QiJcyfWIc+ZXeaCjzV5rCGlbQlTXMAtI8qgfP8fZADv3CFtPwqdPQ==
   optionalDependencies:
-    turbo-darwin-64 "2.3.3"
-    turbo-darwin-arm64 "2.3.3"
-    turbo-linux-64 "2.3.3"
-    turbo-linux-arm64 "2.3.3"
-    turbo-windows-64 "2.3.3"
-    turbo-windows-arm64 "2.3.3"
+    turbo-darwin-64 "2.4.2"
+    turbo-darwin-arm64 "2.4.2"
+    turbo-linux-64 "2.4.2"
+    turbo-linux-arm64 "2.4.2"
+    turbo-windows-64 "2.4.2"
+    turbo-windows-arm64 "2.4.2"
 
 tween-functions@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.yarnpkg.com/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
+  resolved "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz#1ae3a50e7c60bb3def774eac707acbca73bbc3ff"
   integrity sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
   integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
   dependencies:
     prelude-ls "^1.2.1"
 
 type-fest@^0.20.2:
   version "0.20.2"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
 type-fest@^0.7.1:
   version "0.7.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.7.1.tgz#8dda65feaf03ed78f0a3f9678f1869147f7c5c48"
   integrity sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg==
 
 type-fest@^2.19.0:
   version "2.19.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
   integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
 
 type-is@~1.6.18:
   version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
   integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
   dependencies:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-typed-array-buffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz#1867c5d83b20fcb5ccf32649e5e2fc7424474ff3"
-  integrity sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==
-  dependencies:
-    call-bind "^1.0.7"
-    es-errors "^1.3.0"
-    is-typed-array "^1.1.13"
-
-typed-array-byte-length@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz#d92972d3cff99a3fa2e765a28fcdc0f1d89dec67"
-  integrity sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==
-  dependencies:
-    call-bind "^1.0.7"
-    for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-proto "^1.0.3"
-    is-typed-array "^1.1.13"
-
-typed-array-byte-offset@^1.0.2:
+typed-array-buffer@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/typed-array-byte-offset/-/typed-array-byte-offset-1.0.3.tgz#3fa9f22567700cc86aaf86a1e7176f74b59600f2"
-  integrity sha512-GsvTyUHTriq6o/bHcTd0vM7OQ9JEdlvluu9YISaA7+KzDzPaIzEeDFNkTfhdE3MYcNhNi0vq/LlegYgIs5yPAw==
+  resolved "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz#a72395450a4869ec033fd549371b47af3a2ee536"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz#8407a04f7d78684f3d252aa1a143d2b77b4160ce"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz#ae3698b8ec91a8ab945016108aef00d5bff12355"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
   dependencies:
     available-typed-arrays "^1.0.7"
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
     for-each "^0.3.3"
-    gopd "^1.0.1"
-    has-proto "^1.0.3"
-    is-typed-array "^1.1.13"
-    reflect.getprototypeof "^1.0.6"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
 
-typed-array-length@^1.0.6:
+typed-array-length@^1.0.7:
   version "1.0.7"
-  resolved "https://registry.yarnpkg.com/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
+  resolved "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz#ee4deff984b64be1e118b0de8c9c877d5ce73d3d"
   integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
   dependencies:
     call-bind "^1.0.7"
@@ -11923,57 +12135,57 @@ typed-array-length@^1.0.6:
 
 typed-styles@^0.0.7:
   version "0.0.7"
-  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
+  resolved "https://registry.npmjs.org/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
   integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
 
 typescript@5.3.3:
   version "5.3.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
   integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
 
 typescript@^5.3.3:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6"
-  integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==
+  version "5.7.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz#919b44a7dbb8583a9b856d162be24a54bf80073e"
+  integrity sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==
 
 uc.micro@^2.0.0, uc.micro@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
+  resolved "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
   integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
 
-unbox-primitive@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
-  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz#8d9d2c9edeea8460c7f35033a88867944934d1e2"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
   dependencies:
-    call-bind "^1.0.2"
+    call-bound "^1.0.3"
     has-bigints "^1.0.2"
-    has-symbols "^1.0.3"
-    which-boxed-primitive "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
 
 undefsafe@^2.0.5:
   version "2.0.5"
-  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
+  resolved "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz#38733b9327bdcd226db889fb723a6efd162e6e2c"
   integrity sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==
 
 undici-types@~6.19.2:
   version "6.19.8"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
   integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
 
 undici-types@~6.20.0:
   version "6.20.0"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
   integrity sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz#cb3173fe47ca743e228216e4a3ddc4c84d628cc2"
+  resolved "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz#cb3173fe47ca743e228216e4a3ddc4c84d628cc2"
   integrity sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==
 
 unicode-match-property-ecmascript@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
+  resolved "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz#54fd16e0ecb167cf04cf1f756bdcc92eba7976c3"
   integrity sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==
   dependencies:
     unicode-canonical-property-names-ecmascript "^2.0.0"
@@ -11981,12 +12193,12 @@ unicode-match-property-ecmascript@^2.0.0:
 
 unicode-match-property-value-ecmascript@^2.1.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz#a0401aee72714598f739b68b104e4fe3a0cb3c71"
+  resolved "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz#a0401aee72714598f739b68b104e4fe3a0cb3c71"
   integrity sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==
 
 unicode-properties@^1.4.0, unicode-properties@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.yarnpkg.com/unicode-properties/-/unicode-properties-1.4.1.tgz#96a9cffb7e619a0dc7368c28da27e05fc8f9be5f"
+  resolved "https://registry.npmjs.org/unicode-properties/-/unicode-properties-1.4.1.tgz#96a9cffb7e619a0dc7368c28da27e05fc8f9be5f"
   integrity sha512-CLjCCLQ6UuMxWnbIylkisbRj31qxHPAurvena/0iwSVbQ2G1VY5/HjV0IRabOEbDHlzZlRdCrD4NhB0JtU40Pg==
   dependencies:
     base64-js "^1.3.0"
@@ -11994,25 +12206,25 @@ unicode-properties@^1.4.0, unicode-properties@^1.4.1:
 
 unicode-property-aliases-ecmascript@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
+  resolved "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz#43d41e3be698bd493ef911077c9b131f827e8ccd"
   integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
 unicode-trie@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.yarnpkg.com/unicode-trie/-/unicode-trie-2.0.0.tgz#8fd8845696e2e14a8b67d78fa9e0dd2cad62fec8"
+  resolved "https://registry.npmjs.org/unicode-trie/-/unicode-trie-2.0.0.tgz#8fd8845696e2e14a8b67d78fa9e0dd2cad62fec8"
   integrity sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==
   dependencies:
     pako "^0.2.5"
     tiny-inflate "^1.0.0"
 
-unicorn-magic@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/unicorn-magic/-/unicorn-magic-0.1.0.tgz#1bb9a51c823aaf9d73a8bfcd3d1a23dde94b0ce4"
-  integrity sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==
+unicorn-magic@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz#4efd45c85a69e0dd576d25532fbfa22aa5c8a104"
+  integrity sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==
 
 unified@^10.0.0:
   version "10.1.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
+  resolved "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz#b1d64e55dafe1f0b98bb6c719881103ecf6c86df"
   integrity sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -12025,33 +12237,33 @@ unified@^10.0.0:
 
 unist-util-generated@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-2.0.1.tgz#e37c50af35d3ed185ac6ceacb6ca0afb28a85cae"
+  resolved "https://registry.npmjs.org/unist-util-generated/-/unist-util-generated-2.0.1.tgz#e37c50af35d3ed185ac6ceacb6ca0afb28a85cae"
   integrity sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==
 
 unist-util-is@^5.0.0:
   version "5.2.1"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
+  resolved "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.2.1.tgz#b74960e145c18dcb6226bc57933597f5486deae9"
   integrity sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==
   dependencies:
     "@types/unist" "^2.0.0"
 
 unist-util-position@^4.0.0:
   version "4.0.4"
-  resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-4.0.4.tgz#93f6d8c7d6b373d9b825844645877c127455f037"
+  resolved "https://registry.npmjs.org/unist-util-position/-/unist-util-position-4.0.4.tgz#93f6d8c7d6b373d9b825844645877c127455f037"
   integrity sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==
   dependencies:
     "@types/unist" "^2.0.0"
 
 unist-util-stringify-position@^3.0.0:
   version "3.0.3"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz#03ad3348210c2d930772d64b489580c13a7db39d"
+  resolved "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz#03ad3348210c2d930772d64b489580c13a7db39d"
   integrity sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==
   dependencies:
     "@types/unist" "^2.0.0"
 
 unist-util-visit-parents@^5.1.1:
   version "5.1.3"
-  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
+  resolved "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz#b4520811b0ca34285633785045df7a8d6776cfeb"
   integrity sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -12059,7 +12271,7 @@ unist-util-visit-parents@^5.1.1:
 
 unist-util-visit@^4.0.0:
   version "4.1.2"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
+  resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz#125a42d1eb876283715a3cb5cceaa531828c72e2"
   integrity sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -12068,17 +12280,17 @@ unist-util-visit@^4.0.0:
 
 universalify@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  resolved "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
 unplugin@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.0.1.tgz#83b528b981cdcea1cad422a12cd02e695195ef3f"
+  resolved "https://registry.npmjs.org/unplugin/-/unplugin-1.0.1.tgz#83b528b981cdcea1cad422a12cd02e695195ef3f"
   integrity sha512-aqrHaVBWW1JVKBHmGo33T5TxeL0qWzfvjWokObHA9bYmN7eNDkwOxmLjhioHl9878qDFMAaT51XNroRyuz7WxA==
   dependencies:
     acorn "^8.8.1"
@@ -12087,90 +12299,90 @@ unplugin@1.0.1:
     webpack-virtual-modules "^0.5.0"
 
 unplugin@^1.3.1:
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/unplugin/-/unplugin-1.16.0.tgz#ca0f248bf8798cd752dd02e5b381223b737cef72"
-  integrity sha512-5liCNPuJW8dqh3+DM6uNM2EI3MLLpCKp/KY+9pB5M2S2SR2qvvDHhKgBOaTWEbZTAws3CXfB0rKTIolWKL05VQ==
+  version "1.16.1"
+  resolved "https://registry.npmjs.org/unplugin/-/unplugin-1.16.1.tgz#a844d2e3c3b14a4ac2945c42be80409321b61199"
+  integrity sha512-4/u/j4FrCKdi17jaxuJA0jClGxB1AvU2hw/IuayPc4ay1XGaJs/rbb4v5WKwAjNifjmXK9PIFyuPiaK8azyR9w==
   dependencies:
     acorn "^8.14.0"
     webpack-virtual-modules "^0.6.2"
 
 update-browserslist-db@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz#80846fba1d79e82547fb661f8d141e0945755fe5"
-  integrity sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz#97e9c96ab0ae7bcac08e9ae5151d26e6bc6b5580"
+  integrity sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==
   dependencies:
     escalade "^3.2.0"
-    picocolors "^1.1.0"
+    picocolors "^1.1.1"
 
 upper-case-first@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
+  resolved "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz#992c3273f882abd19d1e02894cc147117f844324"
   integrity sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==
   dependencies:
     tslib "^2.0.3"
 
 upper-case@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
+  resolved "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz#d89810823faab1df1549b7d97a76f8662bae6f7a"
   integrity sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==
   dependencies:
     tslib "^2.0.3"
 
 uri-js@^4.2.2:
   version "4.4.1"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
   integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
   dependencies:
     punycode "^2.1.0"
 
 url@^0.11.0:
   version "0.11.4"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.4.tgz#adca77b3562d56b72746e76b330b7f27b6721f3c"
+  resolved "https://registry.npmjs.org/url/-/url-0.11.4.tgz#adca77b3562d56b72746e76b330b7f27b6721f3c"
   integrity sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==
   dependencies:
     punycode "^1.4.1"
     qs "^6.12.3"
 
-use-callback-ref@^1.3.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.2.tgz#6134c7f6ff76e2be0b56c809b17a650c942b1693"
-  integrity sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==
+use-callback-ref@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
+  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
   dependencies:
     tslib "^2.0.0"
 
 use-debounce@^9.0.4:
   version "9.0.4"
-  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-9.0.4.tgz#51d25d856fbdfeb537553972ce3943b897f1ac85"
+  resolved "https://registry.npmjs.org/use-debounce/-/use-debounce-9.0.4.tgz#51d25d856fbdfeb537553972ce3943b897f1ac85"
   integrity sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==
 
 use-font-face-observer@^1.2.2:
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/use-font-face-observer/-/use-font-face-observer-1.2.2.tgz#ed230d907589c6b17e8c8b896c9f5913968ac5ed"
+  resolved "https://registry.npmjs.org/use-font-face-observer/-/use-font-face-observer-1.2.2.tgz#ed230d907589c6b17e8c8b896c9f5913968ac5ed"
   integrity sha512-5C11YC9vPQn5TeIKDvHHiUg59FBzV1LDIOjYJ2PVgn1raVoKHcuWf3dxVDb7OiqQVg3M2S1jX3LxbLw16xo8gg==
   dependencies:
     fontfaceobserver "2.1.0"
 
-use-sidecar@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2"
-  integrity sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==
+use-sidecar@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz#10e7fd897d130b896e2c546c63a5e8233d00efdb"
+  integrity sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==
   dependencies:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@^1, use-sync-external-store@^1.2.0, use-sync-external-store@^1.2.2:
+use-sync-external-store@^1, use-sync-external-store@^1.2.2, use-sync-external-store@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
+  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz#adbc795d8eeb47029963016cefdf89dc799fcebc"
   integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
 
 util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
 util@^0.12.4, util@^0.12.5:
   version "0.12.5"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc"
+  resolved "https://registry.npmjs.org/util/-/util-0.12.5.tgz#5f17a6059b73db61a875668781a1c2b136bd6fbc"
   integrity sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==
   dependencies:
     inherits "^2.0.3"
@@ -12181,27 +12393,32 @@ util@^0.12.4, util@^0.12.5:
 
 utila@~0.4:
   version "0.4.0"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
+  resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
   integrity sha512-Z0DbgELS9/L/75wZbro8xAnT50pBVFQZ+hUEueGDU5FN51YSCYM+jdxsfCiHjwNP/4LCDD0i/graKpeBnOXKRA==
 
 utils-merge@1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
+  resolved "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
 uuid@^10.0.0:
   version "10.0.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
   integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
 
+uuid@^11.0.3:
+  version "11.0.5"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-11.0.5.tgz#07b46bdfa6310c92c3fb3953a8720f170427fc62"
+  integrity sha512-508e6IcKLrhxKdBbcA2b4KQZlLVp2+J5UwQ6F7Drckkc5N9ZJwFa4TgWtsww9UG8fGHbm6gbV19TdM5pQ4GaIA==
+
 uuid@^9.0.0, uuid@^9.0.1:
   version "9.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
   integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
 
 uvu@^0.5.0:
   version "0.5.6"
-  resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
+  resolved "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"
   integrity sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==
   dependencies:
     dequal "^2.0.0"
@@ -12211,17 +12428,17 @@ uvu@^0.5.0:
 
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
+  resolved "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
 vary@^1, vary@~1.1.2:
   version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
+  resolved "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
 vfile-message@^3.0.0:
   version "3.1.4"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"
+  resolved "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.4.tgz#15a50816ae7d7c2d1fa87090a7f9f96612b59dea"
   integrity sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -12229,7 +12446,7 @@ vfile-message@^3.0.0:
 
 vfile@^5.0.0:
   version "5.3.7"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-5.3.7.tgz#de0677e6683e3380fafc46544cfe603118826ab7"
+  resolved "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz#de0677e6683e3380fafc46544cfe603118826ab7"
   integrity sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==
   dependencies:
     "@types/unist" "^2.0.0"
@@ -12239,7 +12456,7 @@ vfile@^5.0.0:
 
 victory-vendor@^36.6.8:
   version "36.9.2"
-  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.9.2.tgz#668b02a448fa4ea0f788dbf4228b7e64669ff801"
+  resolved "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz#668b02a448fa4ea0f788dbf4228b7e64669ff801"
   integrity sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==
   dependencies:
     "@types/d3-array" "^3.0.3"
@@ -12259,7 +12476,7 @@ victory-vendor@^36.6.8:
 
 vite-compatible-readable-stream@^3.6.1:
   version "3.6.1"
-  resolved "https://registry.yarnpkg.com/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz#27267aebbdc9893c0ddf65a421279cbb1e31d8cd"
+  resolved "https://registry.npmjs.org/vite-compatible-readable-stream/-/vite-compatible-readable-stream-3.6.1.tgz#27267aebbdc9893c0ddf65a421279cbb1e31d8cd"
   integrity sha512-t20zYkrSf868+j/p31cRIGN28Phrjm3nRSLR2fyc2tiWi4cZGVdv68yNlwnIINTkMTmPoMiSlc0OadaO7DXZaQ==
   dependencies:
     inherits "^2.0.3"
@@ -12268,26 +12485,26 @@ vite-compatible-readable-stream@^3.6.1:
 
 w3c-keyname@^2.2.0:
   version "2.2.8"
-  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
+  resolved "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
 
 w3c-xmlserializer@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz#f925ba26855158594d907313cedd1476c5967f6c"
+  resolved "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz#f925ba26855158594d907313cedd1476c5967f6c"
   integrity sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==
   dependencies:
     xml-name-validator "^5.0.0"
 
 warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
   dependencies:
     loose-envify "^1.0.0"
 
 watchpack@^2.4.1:
   version "2.4.2"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"
+  resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz#2feeaed67412e7c33184e5a79ca738fbd38564da"
   integrity sha512-TnbFSbcOCcDgjZ4piURLCbJ3nJhznVh9kw6F6iokjiFPl8ONxe9A6nMDVXDiNbrSfLILs6vB07F7wLBrwPYzJw==
   dependencies:
     glob-to-regexp "^0.4.1"
@@ -12295,27 +12512,27 @@ watchpack@^2.4.1:
 
 web-vitals@^4.2.0:
   version "4.2.4"
-  resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-4.2.4.tgz#1d20bc8590a37769bd0902b289550936069184b7"
+  resolved "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz#1d20bc8590a37769bd0902b289550936069184b7"
   integrity sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==
 
 webidl-conversions@^3.0.0:
   version "3.0.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
   integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==
 
 webidl-conversions@^4.0.2:
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
 webidl-conversions@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
   integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
 
 webpack-dev-middleware@^6.1.2:
   version "6.1.3"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-6.1.3.tgz#79f4103f8c898564c9e96c3a9c2422de50f249bc"
+  resolved "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-6.1.3.tgz#79f4103f8c898564c9e96c3a9c2422de50f249bc"
   integrity sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==
   dependencies:
     colorette "^2.0.10"
@@ -12326,7 +12543,7 @@ webpack-dev-middleware@^6.1.2:
 
 webpack-hot-middleware@^2.25.1:
   version "2.26.1"
-  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.26.1.tgz#87214f1e3f9f3acab9271fef9e6ed7b637d719c0"
+  resolved "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.26.1.tgz#87214f1e3f9f3acab9271fef9e6ed7b637d719c0"
   integrity sha512-khZGfAeJx6I8K9zKohEWWYN6KDlVw2DHownoe+6Vtwj1LP9WFgegXnVMSkZ/dBEBtXFwrkkydsaPFlB7f8wU2A==
   dependencies:
     ansi-html-community "0.0.8"
@@ -12335,22 +12552,22 @@ webpack-hot-middleware@^2.25.1:
 
 webpack-sources@^3.2.3:
   version "3.2.3"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack-virtual-modules@^0.5.0:
   version "0.5.0"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz#362f14738a56dae107937ab98ea7062e8bdd3b6c"
+  resolved "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz#362f14738a56dae107937ab98ea7062e8bdd3b6c"
   integrity sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==
 
 webpack-virtual-modules@^0.6.0, webpack-virtual-modules@^0.6.2:
   version "0.6.2"
-  resolved "https://registry.yarnpkg.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
+  resolved "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz#057faa9065c8acf48f24cb57ac0e77739ab9a7e8"
   integrity sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==
 
 webpack@5:
   version "5.97.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.97.1.tgz#972a8320a438b56ff0f1d94ade9e82eac155fa58"
+  resolved "https://registry.npmjs.org/webpack/-/webpack-5.97.1.tgz#972a8320a438b56ff0f1d94ade9e82eac155fa58"
   integrity sha512-EksG6gFY3L1eFMROS/7Wzgrii5mBAFe4rIr3r2BTfo7bcc+DWwFZ4OJ/miOuHJO/A85HwyI4eQ0F6IKXesO7Fg==
   dependencies:
     "@types/eslint-scope" "^3.7.7"
@@ -12379,27 +12596,27 @@ webpack@5:
 
 whatwg-encoding@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz#d0f4ef769905d426e1688f3e34381a99b60b76e5"
+  resolved "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz#d0f4ef769905d426e1688f3e34381a99b60b76e5"
   integrity sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==
   dependencies:
     iconv-lite "0.6.3"
 
 whatwg-mimetype@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz#bc1bf94a985dc50388d54a9258ac405c3ca2fc0a"
+  resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz#bc1bf94a985dc50388d54a9258ac405c3ca2fc0a"
   integrity sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==
 
-whatwg-url@^14.0.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-14.1.0.tgz#fffebec86cc8e6c2a657e50dc606207b870f0ab3"
-  integrity sha512-jlf/foYIKywAt3x/XWKZ/3rz8OSJPiWktjmk891alJUEjiVxKX9LEO92qH3hv4aJ0mN3MWPvGMCy8jQi95xK4w==
+whatwg-url@^14.0.0, whatwg-url@^14.1.0:
+  version "14.1.1"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.1.1.tgz#ce71e240c61541315833b5cdafd139a479e47058"
+  integrity sha512-mDGf9diDad/giZ/Sm9Xi2YcyzaFpbdLpJPr+E9fSkyQ7KpQD4SdFcugkRQYzhmfI4KeV4Qpnn2sKPdo+kmsgRQ==
   dependencies:
     tr46 "^5.0.0"
     webidl-conversions "^7.0.0"
 
 whatwg-url@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
   integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==
   dependencies:
     tr46 "~0.0.3"
@@ -12407,46 +12624,46 @@ whatwg-url@^5.0.0:
 
 whatwg-url@^7.0.0:
   version "7.1.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
   integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
   dependencies:
     lodash.sortby "^4.7.0"
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
-which-boxed-primitive@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.1.0.tgz#2d850d6c4ac37b95441a67890e19f3fda8b6c6d9"
-  integrity sha512-Ei7Miu/AXe2JJ4iNF5j/UphAgRoma4trE6PtisM09bPygb3egMH3YLW/befsWb1A1AxvNSFidOFTB18XtnIIng==
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz#d76ec27df7fa165f18d5808374a5fe23c29b176e"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
   dependencies:
     is-bigint "^1.1.0"
-    is-boolean-object "^1.2.0"
-    is-number-object "^1.1.0"
-    is-string "^1.1.0"
-    is-symbol "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
 
-which-builtin-type@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/which-builtin-type/-/which-builtin-type-1.2.0.tgz#58042ac9602d78a6d117c7e811349df1268ba63c"
-  integrity sha512-I+qLGQ/vucCby4tf5HsLmGueEla4ZhwTBSqaooS+Y0BuxN4Cp+okmGuV+8mXZ84KDI9BA+oklo+RzKg0ONdSUA==
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz#89183da1b4907ab089a6b02029cc5d8d6574270e"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
   dependencies:
-    call-bind "^1.0.7"
+    call-bound "^1.0.2"
     function.prototype.name "^1.1.6"
     has-tostringtag "^1.0.2"
     is-async-function "^2.0.0"
-    is-date-object "^1.0.5"
+    is-date-object "^1.1.0"
     is-finalizationregistry "^1.1.0"
     is-generator-function "^1.0.10"
-    is-regex "^1.1.4"
+    is-regex "^1.2.1"
     is-weakref "^1.0.2"
     isarray "^2.0.5"
-    which-boxed-primitive "^1.0.2"
+    which-boxed-primitive "^1.1.0"
     which-collection "^1.0.2"
-    which-typed-array "^1.1.15"
+    which-typed-array "^1.1.16"
 
 which-collection@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
+  resolved "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz#627ef76243920a107e7ce8e96191debe4b16c2a0"
   integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
   dependencies:
     is-map "^2.0.3"
@@ -12454,41 +12671,69 @@ which-collection@^1.0.2:
     is-weakmap "^2.0.2"
     is-weakset "^2.0.3"
 
-which-typed-array@^1.1.14, which-typed-array@^1.1.15, which-typed-array@^1.1.2:
-  version "1.1.16"
-  resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.16.tgz#db4db429c4706feca2f01677a144278e4a8c216b"
-  integrity sha512-g+N+GAWiRj66DngFwHvISJd+ITsyphZvD1vChfVg6cEdnzy53GzB3oy0fUNlvhz7H7+MiqhYr26qxQShCpKTTQ==
+which-typed-array@^1.1.16, which-typed-array@^1.1.18, which-typed-array@^1.1.2:
+  version "1.1.18"
+  resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.18.tgz#df2389ebf3fbb246a71390e90730a9edb6ce17ad"
+  integrity sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==
   dependencies:
     available-typed-arrays "^1.0.7"
-    call-bind "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
     for-each "^0.3.3"
-    gopd "^1.0.1"
+    gopd "^1.2.0"
     has-tostringtag "^1.0.2"
 
 which@^2.0.1, which@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
+winston-daily-rotate-file@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/winston-daily-rotate-file/-/winston-daily-rotate-file-5.0.0.tgz#8cd94800025490e47c00ec892b655a5821f4266d"
+  integrity sha512-JDjiXXkM5qvwY06733vf09I2wnMXpZEhxEVOSPenZMii+g7pcDcTBt2MRugnoi8BwVSuCT2jfRXBUy+n1Zz/Yw==
+  dependencies:
+    file-stream-rotator "^0.6.1"
+    object-hash "^3.0.0"
+    triple-beam "^1.4.1"
+    winston-transport "^4.7.0"
+
+winston-transport@^4.7.0, winston-transport@^4.9.0:
+  version "4.9.0"
+  resolved "https://registry.npmjs.org/winston-transport/-/winston-transport-4.9.0.tgz#3bba345de10297654ea6f33519424560003b3bf9"
+  integrity sha512-8drMJ4rkgaPo1Me4zD/3WLfI/zPdA9o2IipKODunnGDcuqbHwjsbB79ylv04LCGGzU0xQ6vTznOMpQGaLhhm6A==
+  dependencies:
+    logform "^2.7.0"
+    readable-stream "^3.6.2"
+    triple-beam "^1.3.0"
+
+winston@^3.17.0:
+  version "3.17.0"
+  resolved "https://registry.npmjs.org/winston/-/winston-3.17.0.tgz#74b8665ce9b4ea7b29d0922cfccf852a08a11423"
+  integrity sha512-DLiFIXYC5fMPxaRg832S6F5mJYvePtmO5G9v9IgUFPhXm9/GkXarH/TUrBAVzhTCzAj9anE/+GjrgXp/54nOgw==
+  dependencies:
+    "@colors/colors" "^1.6.0"
+    "@dabh/diagnostics" "^2.0.2"
+    async "^3.2.3"
+    is-stream "^2.0.0"
+    logform "^2.7.0"
+    one-time "^1.0.0"
+    readable-stream "^3.4.0"
+    safe-stable-stringify "^2.3.1"
+    stack-trace "0.0.x"
+    triple-beam "^1.3.0"
+    winston-transport "^4.9.0"
+
 word-wrap@^1.2.5:
   version "1.2.5"
-  resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
   integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
     ansi-styles "^4.0.0"
@@ -12497,7 +12742,7 @@ wrap-ansi@^7.0.0:
 
 wrap-ansi@^8.1.0:
   version "8.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"
   integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
   dependencies:
     ansi-styles "^6.1.0"
@@ -12506,83 +12751,83 @@ wrap-ansi@^8.1.0:
 
 wrappy@1:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
 ws@^7.4.6:
   version "7.5.10"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
+  resolved "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
   integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
 
 ws@^8.17.1, ws@^8.18.0, ws@^8.2.3, ws@^8.5.0:
   version "8.18.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
+  resolved "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz#0d7505a6eafe2b0e712d232b42279f53bc289bbc"
   integrity sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==
 
 xml-name-validator@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz#82be9b957f7afdacf961e5980f1bf227c0bf7673"
+  resolved "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz#82be9b957f7afdacf961e5980f1bf227c0bf7673"
   integrity sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==
 
 xmlchars@^2.2.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  resolved "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
 xtend@^4.0.0:
   version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  resolved "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 y-indexeddb@^9.0.12:
   version "9.0.12"
-  resolved "https://registry.yarnpkg.com/y-indexeddb/-/y-indexeddb-9.0.12.tgz#73657f31d52886d7532256610babf5cca4ad5e58"
+  resolved "https://registry.npmjs.org/y-indexeddb/-/y-indexeddb-9.0.12.tgz#73657f31d52886d7532256610babf5cca4ad5e58"
   integrity sha512-9oCFRSPPzBK7/w5vOkJBaVCQZKHXB/v6SIT+WYhnJxlEC61juqG0hBrAf+y3gmSMLFLwICNH9nQ53uscuse6Hg==
   dependencies:
     lib0 "^0.2.74"
 
-y-prosemirror@^1.2.5, y-prosemirror@^1.2.9:
+y-prosemirror@^1.2.15:
   version "1.2.15"
-  resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.2.15.tgz#6062ce96efd7465a3404a5aa1a34fb36a2cf7994"
+  resolved "https://registry.npmjs.org/y-prosemirror/-/y-prosemirror-1.2.15.tgz#6062ce96efd7465a3404a5aa1a34fb36a2cf7994"
   integrity sha512-XDdrytq2M5bIy3qusQvfRclLu2eWZYPA+BbGWAb9FFWEhOB5FCrnzez2vsA+gvAd0FJTAcr89mjJ5g45r0j7TQ==
   dependencies:
     lib0 "^0.2.42"
 
 y-protocols@^1.0.6:
   version "1.0.6"
-  resolved "https://registry.yarnpkg.com/y-protocols/-/y-protocols-1.0.6.tgz#66dad8a95752623443e8e28c0e923682d2c0d495"
+  resolved "https://registry.npmjs.org/y-protocols/-/y-protocols-1.0.6.tgz#66dad8a95752623443e8e28c0e923682d2c0d495"
   integrity sha512-vHRF2L6iT3rwj1jub/K5tYcTT/mEYDUppgNPXwp8fmLpui9f7Yeq3OEtTLVF012j39QnV+KEQpNqoN7CWU7Y9Q==
   dependencies:
     lib0 "^0.2.85"
 
 y18n@^5.0.5:
   version "5.0.8"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  resolved "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
 yallist@^3.0.2:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
 yaml@^1.10.0:
   version "1.10.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yaml@^2.3.4, yaml@^2.4.2:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.1.tgz#42f2b1ba89203f374609572d5349fb8686500773"
-  integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz#aef9bb617a64c937a9a748803786ad8d3ffe1e98"
+  integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==
 
 yargs-parser@^21.1.1:
   version "21.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
+  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
 yargs@^17.0.0, yargs@^17.7.2:
   version "17.7.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
+  resolved "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
   dependencies:
     cliui "^8.0.1"
@@ -12593,37 +12838,42 @@ yargs@^17.0.0, yargs@^17.7.2:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
-yjs@^13.6.14, yjs@^13.6.15:
-  version "13.6.20"
-  resolved "https://registry.yarnpkg.com/yjs/-/yjs-13.6.20.tgz#da878412688f107dc03faa4fc3cff37736fe5dfa"
-  integrity sha512-Z2YZI+SYqK7XdWlloI3lhMiKnCdFCVC4PchpdO+mCYwtiTwncjUbnRK9R1JmkNfdmHyDXuWN3ibJAt0wsqTbLQ==
+yjs@^13.6.20:
+  version "13.6.23"
+  resolved "https://registry.npmjs.org/yjs/-/yjs-13.6.23.tgz#62358dfa52e92dc870b8a0bedcf0d4cbd4c5ffa8"
+  integrity sha512-ExtnT5WIOVpkL56bhLeisG/N5c4fmzKn4k0ROVfJa5TY2QHbH7F0Wu2T5ZhR7ErsFWQEFafyrnSI8TPKVF9Few==
   dependencies:
-    lib0 "^0.2.98"
+    lib0 "^0.2.99"
 
 yn@3.1.1:
   version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
+  resolved "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
   integrity sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==
 
 yocto-queue@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
 yoga-layout@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.yarnpkg.com/yoga-layout/-/yoga-layout-2.0.1.tgz#4bc686abe2464f977866650ddccc1dbcf9f0d03c"
+  resolved "https://registry.npmjs.org/yoga-layout/-/yoga-layout-2.0.1.tgz#4bc686abe2464f977866650ddccc1dbcf9f0d03c"
   integrity sha512-tT/oChyDXelLo2A+UVnlW9GU7CsvFMaEnd9kVFsaiCQonFAXd3xrHhkLYu+suwwosrAEQ746xBU+HvYtm1Zs2Q==
 
 zeed-dom@^0.15.1:
   version "0.15.1"
-  resolved "https://registry.yarnpkg.com/zeed-dom/-/zeed-dom-0.15.1.tgz#dceb759d8a6e7aec042701ebe6684850baaf6193"
+  resolved "https://registry.npmjs.org/zeed-dom/-/zeed-dom-0.15.1.tgz#dceb759d8a6e7aec042701ebe6684850baaf6193"
   integrity sha512-dtZ0aQSFyZmoJS0m06/xBN1SazUBPL5HpzlAcs/KcRW0rzadYw12deQBjeMhGKMMeGEp7bA9vmikMLaO4exBcg==
   dependencies:
     css-what "^6.1.0"
     entities "^5.0.0"
 
+zod@^3.22.2:
+  version "3.24.2"
+  resolved "https://registry.npmjs.org/zod/-/zod-3.24.2.tgz#8efa74126287c675e92f46871cfc8d15c34372b3"
+  integrity sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==
+
 zxcvbn@^4.4.2:
   version "4.4.2"
-  resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
+  resolved "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
   integrity sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ==